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

デスクトップ、モバイルウェブ、モバイルアプリから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を指定すると、複数のバージョン全体で、ページの「いいね!」や「シェア」を集計できます。

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値は使用できません。すべてのオブジェクトタイプのリストについては、「Object Types (オブジェクトタイプ)」のリファレンスをご覧ください。

og:locale

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


すべての標準オブジェクトプロパティのリストは、「Object Properties (オブジェクトプロパティ)」のリファレンスに掲載されています。

マークアップのテスト

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

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

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

コンテンツに音声、動画、位置情報が含まれる場合、マークアップを追加できます。すべての標準オブジェクトプロパティについては、「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

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


画像

1つ以上の画像を含むコンテンツには、このプロパティセットを使用します。og:imageの最適な使用法については、「Sharing Best Practices (シェア機能のベストプラクティス)」をご覧ください。

メタタグ 説明

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

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