BLOG

毎回忘れがちなOGP設定関連についてのまとめ(Twitter、Facebook)

サイトを作成する際、つい忘れがちになるのがOGP周り。
つい忘れがちだけどWebサイトにとってはとーっても重要な項目なので、もう忘れないようにまとめます。

OGPタグの設定

下記のタグを全ページに埋め込み、contentの箇所をページに合わせて書き換えます。

OGP反映箇所

このような感じで設定した情報がSNSでシェアしたときに表示されます。

各タグの説明

og:url そのページのURL
og:title そのページのタイトル
og:type ページの種類。http://ogp.me/#types によると載せるコンテンツによっていくつか種類があります。基本的にはTOPページはwebsite、下層の記事を表示するようなコンテンツにはarticleを使用すると良いようです。
og:description そのページの内容の抜粋
og:image シェアしたときに表示される画像のURL
twitter:card Twitterカードの表示形式。summary_large_imageかsummary が一般的。
twitter:site Twitterのユーザー名。(例:@nagomixxxx)
og:site_name Webサイトの名前。(そのページのタイトルではない)
og:locale そのウェブサイトがサポートしている言語。日本語はja_JP。
Facebookで適切な翻訳ができるようにする設定。
fb:app_id Facebook連携で必要なID。事前に取得しておく必要がある。開発者向けページより取得可能

OGPが正しく設定されているかを確認

設定したら、SNSでシェアしたときに正しく画像やタイトルが表示されているかどうかを確認します。
TwitterとFacebookで正しくシェア出来るかどうかを確認するには、以下のツールを使用します。

Twitter:カードバリデータ

Facebook:シェアデバッガー

注意点

  • 設定直後に確認しても反映されていないことがある。反映には時間がかかる
  • ベーシック認証が必要なテスト環境では確認ができない。テスト環境で確認が出来るようにするにはIPを云々する必要がある。
  • WordPressでOGP設定をしている場合、「表示設定」で「検索エンジンがサイトをインデックスしないようにする」にチェックが入っていると反映されない。

今後の制作における課題

以上、OGP設定関連のメモでした。
今後の自分の課題ですが、WordPressなどのCMSでは各ページのOGP設定はWPコードで簡単に取得可能なんですが、静的HTMLだと私の知識ではまだ手入力でポチポチ入れている状態なので、うまいやり方を模索したいと思います。