FacebookやTwitter等でURLを参照するときに、ページの情報を正しく伝えるOGPに対応した時のメモ。
OGP自体は難しくないが、実装するにあたって、困ったことと注意点がある。
OGPについては、以下に仕様がある。
基本的には、metaタグを追加するだけでできる。
簡単に検索して参考にさせていただいたページは、以下の２つ
【WordPress】OGPとTwitterCardsの設置方法！プラグイン不要でコピペでOK
これだけは知っておきたいOGP （Open Graph Protocol）
【注意点１】headタグ内への記載
これは、私がヘタレなだけかもしれないが、metaタグは、headタグ内に記載しなければならないので、困った。
なぜなら、headタグ部分や、ヘッダ画像、フッタのコピーライトは、テンプレート化していたから。
つまり、インデックスページと、本文のページで同じテンプレートを使用していた。
これは、仕方なく、本文のページかどうかを、テンプレート内で判断して、OGPの出力を制御した。
【注意点２】確認方法
OGPのテストができるページが無いかと、探したらFacebookの以下でテストが可能であった。
https://developers.facebook.com/tools/debug/
これは、とてもありがたい。
なお、Facebookでは、Cacheしているようで、変なOGPを読み込ませてしまうと、それが残るようだ。
その場合は、「Fetch new scrape information」のボタンを押せば、再取得してくるようだ。
