#author("2020-04-27T01:14:36+09:00;2020-04-26T23:53:26+09:00","default:tgoto","tgoto")
#ref(https://oncologynote.com/img/72646a307e.jpg,nolink)
ウェブサイトにbotでも読める構造化データを持たせることで検索エンジンなどへの収載が進みSEO的にもメリットがあるとか、構造化データのフォーマットを定めるschema.orgでは3つの形式が採用されているが後発組のJSON-LDは比較的カンタンだとかいう話に乗せられて、このpukiwikiもスキンを改造してJSON-LDを入れてみようと思い立ってみたわけです。
*レスポンシブデザイン化やAMP化よりはましだけど
構造化データと言ってもウェブサイトの[[レスポンシブデザイン化>https://www.oncologynote.com/?6292a4bc9d#content_1_2]]や[[AMP化>https://www.oncologynote.com/?249510a175]]に比べればよっぽどカンタンです。
レスポンシブデザイン化はpukiwiki 1.5.3が出てきてずいぶんと進歩しましたが、当初はCSSのテキスト本を片手にああでもないこうでもないと試行錯誤しながら取り組んだものでした。
AMP化ではimgをamp-imgにするなど比較的手間のかからないタグ変更はよいのですが、formタグを非同期的フォーム方式に置き換えるのはかなり大変ですし、jqueryを含めてほとんどのjavascriptも使えなくなります。そう考えるとAMP化はかなり苦労を伴う大改造でした。
*JSON-LDの基本はそれほど難しくはない
JSON-LDはそれに比べれば、ソースを表示しない限りはサイトのデザインには全く影響しませんし、<head>に置いても<body>に置いてもよいというのはpukiwikiの視点から見ればスキンに埋め込んでも良いし本文に（html.inc.phpなどのプラグインを使って）直接書いても良いということで、自由度もカスタマイズの難易度もずいぶんとましです。
先行者がさまざまな記事((https://qiita.com/kuro-wassan/items/dc324eb3d5fc2b10bab0))やブログ((https://webtan.impress.co.jp/e/2019/08/05/33500))を書いてくださっているので、これらを参考に自分のサイト用に書き換えたものを作成して、HTMLのどこかに埋め込むだけです。
*書けた構造化データに誤りがないかはテストツールで確認できる
書いた構造化データが正しく書けているかどうかはGooglebotが来てGoogle search consoleの結果が更新されるのを待っているというのも一つの方法です。構造化データの文法に間違いがあると、エラーの表示が出ます。しかしそんなものを待たなくても、構造化データテストツールというものがあり、これを使えばすぐに構造化データに間違いがないかを確認することができます。
**構造化データテストツール
https://search.google.com/structured-data/testing-tool?hl=ja
**リッチリザルトテスト
https://search.google.com/test/rich-results?hl=ja
エラーが出たところは1つずつ修正してゆけば、すべてのページに正しいJSON-LDが埋め込まれたはずです。
もともと昔のAMP化ではJSON-LDが必須だったとのことですが、いまは必須でないのでサイトのAMP化のときにJSON-LDには手を付けていませんでした。しかし、この程度のことなのであればもっとさっさとやっておけばよかったと思ったのでした。
*それほど甘くなかった
しかし、現実はそこまで甘くはありませんでした。構造化データテストツールで全てのエラーを潰して余裕の表情で過ごしておりましたが、夜になってからGoogle search consoleから次々とアラートが届きます。
いつもと同じAMPのアラートが多く含まれていました。AMPページにしてあるpukiwikiでもtweet_incでTwitterのツイートを引用した場合などはAMP基準を満たしていません。でも、もう全てのページがAMP化できていなくてもいいやと考えることにしていました（検索エンジンにAMPキャッシュは表示されないが、非AMPページの1ページとして表示することは問題なくできる）。しかし、AMPエラーではないアラートも多く含まれていました。
*サイズや画質など画像関係が鬼門
一番厄介だと思ったのは、画像のサイズの問題です。構造化データでimageというプロパティにOGPで使っている画像ファイルのURLを渡すこととしました。OGPに使う画像はファイルサイズを数十kBまでに抑えるためにピクセル数も抑えて色数も少ないPNGなどを使っていました。一方でJSON-LDの画像は最低でも幅が1200px必要だというのです。しかも縦横で合計80万平方ピクセル必要だというのです。80万平方ピクセル必要だと言うなら、1200px x 667pxくらいのサイズが必要です。
このサイズになるとOGP画像とJSON-LDの画像は使い回しではなく全く別のものを用意しておく必要があります。
*パンくずリストやカルーセルに表示はさらに難易度が高そう
パンくずリストやカルーセルへの表示ができるというのも構造化データを載せておくメリットになるはずですが、これも簡単ではありません。直接手打ちでするなら難しくないのですが、pukiwikiのスキンに埋め込んでしまってPHPでページに応じて書かせるのが難しいのです。pukiwikiでページ名のフォルダ階層を使っていたとして、それをどうやってJSON-LDに落とし込むか…。
ということでかなり色々と試行錯誤してみましたが、エラーが完全には消えきっていません。もう少し勉強しながらいじって見る必要がありそうです。