Web PR

Facebookへのシェアを最適化する！OGPの設定確認。

 
記事内に商品プロモーションを含む場合があります

ブログをはじめウェブサイトはSNSへのシェアが重要になっています。業務でも確認することがあったため、Facebookのシェア機能の最適化のためのOGPの設定について再確認することにしました。SNSはたくさんありますが、今回はFacebookに関して確認します。

目次
  1. OGPとは？
  2. ウェブサイトにOpen Graphタグをマークアップする
  3. Open Graphタグマークアップのテスト方法
  4. WordPressではテーマによって設定が必要
  5. 参考サイト

OGPとは？

OGPとはOpen Graph ProtocolのことでSNSにウェブサイトの情報を伝えるためのプロトコルで、ウェブサイトでOpen Graphタグの設定をしておくと、シェアされた時にSNSのクローラーがスクレイピングしてウェブサイトのurlやタイトル、説明、サムネイル画像といった情報を表示してくれます。Facebookでは下記のような表示となります。

出典：ウェブ管理者 – シェア機能 – ドキュメンテーション – 開発者向けFacebook

ウェブサイトにOpen Graphタグをマークアップする

ウェブサイトにOpen GraphタグをマークアップしておかないとOGPは機能しません。Facebookのクローラーに認識してもらえるようにOpen Graphタグをhtmlのhead要素内にマークアップします。

<meta property="og:url" content="https://canonono.com/web/facebook-sharing" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Facebookへのシェアを最適化する！OGPの設定確認。" />
<meta property="og:description" content="FacebookのOGPの設定を確認します。" />
<meta property="og:image" content="https://canonono.com/wp-content/uploads/2015/02/hoge.png" />

上記がOpen Graphタグのマークアップ例です。一つずつ詳細を確認します。

og:url

ページのurlで「いいね！」や「シェア」を集計するために使用される。

og:title

記事のタイトルでサイト名やブランド情報は含めない。

og:description

投稿の簡単な説明でタイトルの下に表示される。

og:image

Facebookにシェアされた時に表示する画像のurlです。https://canonono.com/images/hoge.pngのように絶対パスで記述します。画像が設定されていないとページ内の画像が使用されるので意図せぬ画像が表示される可能性があります。

画像のサイズに注意しましょう

Facebookでは高解像度デバイスへの最適化のため画像のサイズは1200 x 600ピクセル以上を推奨しています。Facebookで大きく表示するには少なくとも600 x 315ピクセル以上の画像にする必要があります。これよりも小さいサイズの画像はシェアされた時に小さく表示されていまいます。そして画像の最小サイズは200 x 200ピクセルで最大ファイルサイズは8Mです。

og:type

コンテンツのメディアのタイプでデフォルトはwebsiteです。記事、ニュース記事、ブログ投稿ではarticleを使用します。

fb:app_id

マークアップ例にはありませんが、基本タグに含まれています。Facebookインサイト機能を使うために必要な設定です。このapp_idが設定されていないとFacebookデバッガーで「app_idは必須です」とエラーが出ます。しかしタイトルや画像等はシェアで問題なく反映されます。

og:locale

サポートする言語でデフォルトはen_USです。日本語の場合はja_JPとします。

Open Graphタグマークアップのテスト方法

Facebookのシェアデバッガーでマークアップに問題がないかと、Facebookにシェアされたときにどのように表示されるかを確認することができます。使い方はシェアデバッガーにurlを入力してデバッグボタンを押すだけです。うまくいかないときは何度かデバッグしてみてください。

Facebookシェアデバッガー

サムネイル画像を変更しても切り替わらない時に確認すること

Facebookのシェアあるあるでog:imageを変更しても画像が変わらないという症状があるようです。そんな時は下記を確認してみてください。

  • Open Graphタグはマークアップしてあるか
  • og:imageに正しい画像urlが絶対パスで設定されているか
  • Facebookシェアデバッガーでエラーはないか、設定した画像が表示されているか
    • 画像が変更されていないときは「もう一度スクレイピングする」ボタンを押してクローラーにスクレイピングしてもらいましょう
  • Facebookシェアデバッガーで画像は正しく表示されるが、Facebookのページでは画像が変わっていないときはFacebook側で「シェアした添付ファイルを更新」を行なってください
    • 投稿記事の日付や時間をクリックすると個別記事のページに遷移します、記事右上のメニューから「シェアした添付ファイルを更新」をクリック

WordPressではテーマによって設定が必要

WordPressでブログ運営をしている方が多いと思います。テーマによってはOpen Graphタグがはじめから設定されているものもあるかもしれませんが、設定が無いものに関しては設定が必要になります。方法としてはプラグインを使用するか自分でテーマテンプレートを編集するかの2通りです。

プラグインに関してはSEO対策で人気の「All in One SEO Pack」でも設定できるようです。htmlやphpの知識が全く無い方はプラグインを使用するのが良いと思います。「wordpress ogp プラグインなし」などで調べれば方法は出てくるのでテーマテンプレートの編集のハードルも高くはないと感じます。

参考サイト

今回参考にしたサイトでFacebook公式がほとんどです。Facebookの仕様変更で今までの方法ではシェアされなくなってしまう場合もあるので、公式のドキュメントをこまめにチェックしたほうがいいですね。

関連記事