ウェブ管理者向けシェア機能ガイド

デスクトップ、モバイルウェブ、モバイルアプリからFacebookでシェアされるウェブホスト型コンテンツについて、最適化する方法を説明します。

このドキュメントには、次に関する情報が掲載されています。

Open Graphマークアップ

ほとんどのコンテンツはURLとしてFacebookにシェアされるため、ウェブサイトをOpen Graphタグでマークアップし、コンテンツがFacebook上にどのように表示されるかを制御することが重要です。

これらのタグがない場合、Facebookクローラーは、内部ヒューリスティックに基づいて、コンテンツのタイトル、説明、プレビュー画像を推測します。この情報をOpen Graphタグで明確に指定すると、Facebookでの投稿の質を最大限に高められます。

以下は、Facebookで最適な表示になるよう、Open Graphタグでフォーマットされたコンテンツの例です。

マークアップの例

記事、ニュース記事、ブログ投稿を、og:type="article"と追加プロパティでマークアップする方法の例を次に示します。

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

プロパティには、記事がシェアされるときに特に表示させたい、記事に関する記述メタデータが含まれます。

基本タグ

すべてのコンテンツタイプに使用する最も基本的なメタタグを次に示します。

タグ 説明

og:url

ページの正規URL。これは、セッション変数、ユーザー識別パラメーター、カウンターといった装飾を含まないURLにしてください。各URLに対する「いいね!」や「シェア」は、このURLで集計されます。たとえば、モバイルドメインURLで、正規URLとしてデスクトップバージョンのURLを指定すると、複数のバージョン全体で、ページの「いいね!」や「シェア」を集計できます。

og:title

サイト名などのブランド情報を含まない、記事のタイトル。

og:description

コンテンツの簡単な説明。2~4文が一般的です。Facebook上では、投稿のタイトルの下に表示されます。

og:image

コンテンツがFacebookでシェアされたときに表示される画像のURL。詳しくは、以下のセクションと、高品質なプレビュー画像を指定する方法を示したベストプラクティスガイドをご覧ください。

fb:app_id

Facebookインサイトを使用するには、アプリIDをページに追加する必要があります。インサイトにより、Facebookからサイトへのトラフィックに関する分析を確認できます。アプリダッシュボードでアプリIDを確認してください。


また、次の2つのタグを追加して、コンテンツの拡散やエンゲージメントを向上できます。

タグ 説明

og:type

コンテンツのメディアのタイプ。このタグにより、ニュースフィードでコンテンツがどのように表示されるかが決まります。タイプを指定しない場合、デフォルトはwebsiteです。URLはそれぞれ1つのオブジェクトとなるので、複数のog:type値は使用できません。オブジェクトタイプの全リストは、オブジェクトタイプのリファレンスにあります

og:locale

リソースのロケール。デフォルトはen_USです。他の言語への翻訳を提供する場合は、og:locale:alternateも使用できます。Facebookがサポートするロケールについては、ローカライズに関するドキュメントをご覧ください。


標準オブジェクトプロパティの全リストは、オブジェクトプロパティのリファレンスにあります。

マークアップのテスト

マークアップがFacebookクローラーにどのように表示されるかを確認するには、URLをシェアデバッガーに入力します。これにより、エラーや警告だけでなく、クローラーがスクレイピングするメタタグがどれであるかが表示されます。

デバッガーもページのスクレイピングをトリガーします。つまり、HTMLにエラーがある場合は、デバッガーを使ってコンテンツを更新できます。詳しくは、オブジェクトの更新をご覧ください。

Facebookのユーザーエージェントが適切に処理されているかをテストする

  1. ブラウザーを開きます。
  2. このユーザーエージェントをFacebookのユーザーエージェントと一致するように変更します。ユーザーエージェントの変更について詳しくは、http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/をご覧ください。
    • [開発]メニュー > [ユーザーエージェント] > [その他]
    • ユーザーエージェントを次のように設定します: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
  3. 問題のURLを読み込みます。
  4. ユーザーエージェントをモバイルブラウザーのユーザーエージェントに設定します(この例では、iPhoneのSafari)。
    [開発]メニュー > [ユーザーエージェント] > [Safari iOS 10 — iPhone]
  5. 問題のURLを読み込みます。
  6. ユーザーエージェントに問題がある場合、ステップ5ではページが正しく読み込まれますが、ステップ3では正しく読み込まれません。

メディアコンテンツタイプ

コンテンツに音声、動画、位置情報のいずれかが含まれる場合、マークアップを追加できます。すべての標準オブジェクトプロパティについては、「Object Types (オブジェクトタイプ)」のリファレンスをご覧ください。

動画

すべてのコンテンツタイプにog:videoを使用できます。このセクションでは、Facebookでの動画の表示を最適化する追加のタグの使い方について説明します。Facebookでは、mp4動画とFlash動画の両方をサポートしています。

ニュースフィードで動画をインライン再生できるようにするには、og:video:urlタグとog:video:secure_urlタグの両方に対してセキュアなURLを使用します。さまざまな要因が関係するため、動画のインライン再生は保証されません。

メタタグ 説明

og:video

動画のURL。動画をニュースフィードでインライン再生したい場合、可能であればhttps://で始まるURLを使用してください。

og:video:url

og:videoと同等。

og:video:secure_url

動画のセキュアなURL。og:videoでセキュアなURLを設定してる場合でも、これを含めます。

og:video:type

動画のMIMEタイプ。application/x-shockwave-flashまたはvideo/mp4のどちらか。

og:video:width

動画の幅(ピクセル)。このプロパティは動画に必須です。

og:video:height

動画の高さ(ピクセル)。このプロパティは動画に必須です。

og:image

ニュースフィードの高画質プレビュー用の画像を指定します。


画像

複数の画像を含むコンテンツには、この一連のプロパティを使用します。og:imageの最適な使用法については、シェア機能のベストプラクティスをご覧ください。

メタタグ 説明

og:image

画像のURL。公開後に画像を更新する場合は、新しい画像の新規URLを使用します。画像はURLに基づきキャッシュされるため、URLを変更しない限り更新されません。

og:image:url

og:imageと同等。

og:image:secure_url

https://で始まる画像のURL。

og:image:type

画像のMIMEタイプ。image/jpegimage/gifimage/pngのいずれか。

og:image:width

画像の幅(ピクセル)。初回のシェア時に適切に読み込まれるよう、画像の高さと幅を指定します。

og:image:height

画像の高さ(ピクセル)。初回のシェア時に適切に読み込まれるよう、画像の高さと幅を指定します。

3Dアセット

3D投稿のOpen Graphのシェアに関するドキュメントをご覧ください。