シェア機能

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

このドキュメントでは、デスクトップ、モバイルサイト、モバイルアプリのいずれからであっても、利用者がウェブホスト型コンテンツをFacebookにシェアした時に最適な表示にする方法を説明します。

このドキュメントでは、以下の情報を扱います。

Open Graphマークアップ

ほとんどのコンテンツはURLとしてFacebookにシェアされるため、ウェブサイトをOpen Graphタグでマークアップし、コンテンツがFacebook上でどのように表示されるかをコントロールすることは重要です。ウェブサイトがFacebookのクローラーによって正しくシェアされるようにするには、サーバーでもgzipとdeflateエンコーディングが使用されていなければなりません。

これらのOpen Graphタグがない場合、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クローラーにどのように表示されるかを確認するには、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では正しく読み込まれません。

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

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

動画

すべてのコンテンツタイプに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/jpeg、image/gif、image/pngのいずれか

og:image:width

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

og:image:height

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

3Dアセット

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

関連情報