OGP設定 Facebook・Twitter ソーシャルメディアで情報を共有する #2

WordPressテーマにプラグインを使わず、OGP出力設定する実践編です。
Open Graph protocol(OGP)の出力設定をすると、OGP対応しているFacebookや各ソーシャルメディアで、いいねやそのほかソーシャルボタンを押すとWebサイトやブログ記事の画像や概要が表示されます。

WordPressにOGP出力をさせるための方法を下記サイトを参考にさせていただきました。
とても丁寧に解説されていますので、ほぼそのまま設定しています。
コード参考サイト
SNSでリッチ表示してくれるOGPをWordPressに、プラグインを使わず設定する
OGP設定のリファレンスなど
OGP公式サイト
facebook OGPリファレンス

metaタグの中にog:、fb:を入れることにより、記事内容をソーシャルメディアに伝えることができます。
og:、fb:に記事のタイトル、リンク先、アイキャッチ画像の情報が入ります。

headタグにOGPタイプ(og:type)自動振り分けとog:、fb:設定

OGP設定にはwebページの種類を指定するog:typeがあります。
HTML5のOGP設定ではhead要素にprefix属性をつけ記述します。
WebページのタイプによってOPGの属性値をwebsite、articleを指定します。
トップページはwebsiteの設定にして、それ以外のページはarticleにします。

functions.phpに以下のコード読み込む設定にしました。

headタグにogp_prefix();を呼び出す設定

トップページの出力結果

記事ページの出力結果

上記の通りogp.me/ns/website#とogp.me/ns/article#に振り分けされてます。

metaタグ設定

metaタグに8つを設定をします。
参考サイト
facebook OGP articleリファレンス

  • og:type – articleなどページのタイプ
  • og:url – ページのURL
  • og:title – 記事タイトルを指定する
  • og:image – 画像の絶対パス
  • og:site_name – サイト名
  • og:description – 説明文
  • fb:app_id – Facebook app ID(取得する必要があります)
  • article:publisher – フェイスブック・ページURLまたはID

functions.phpに以下のコードを読み込む設定にしました。
参考にさせていただいたコードの中の、$args = arrayにある’fb:app_id’ => $fb_app_idは、このままだとエラーが出るため、$app_idに修正しています。

Twitter cardsの設定

Twitter cardsの設定もプラグインは使わず、functions.phpに以下のコードを読み込む設定にしました。
twitter:title、twitter:description、twitter:image:srcについては、OGPで設定していますので、
下記コードではコメントアウトしています。

ここまで読んでいただき、ありがとうございます。
OGP設定についてはプラグインのWP Site manageを使う場合と今回の使わない場合、
どちらも試してみましたので、参考になることがあれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Share・Feedly