ウェブサイトとモバイルアプリのシェアのベストプラクティス

ウェブサイト

Facebookでは、ニュースサイト、マガジン、ブログなどのメディアサイトなど、すべてのウェブサイトが簡単に既存のファンにリーチし、ファン層を拡大できるよう努めています。以下に説明するベストプラクティスを実践すると、Facebookを活用したサービスの内容がさらに充実します。

  1. Facebookクローラーがサイトにアクセスできることを確認する
  2. 適切なOpen Graphタグを使用して拡散を促す
  3. 画像を最適化して優れたプレビューを生成する
  4. シェアデバッガーを使用してOpen Graphタグをデバッグする
  5. コンテンツ作成者にフォロー機能の利用をすすめる
  6. JavaScriptにイベントトラッキング機能を実装して、プラグインの使用状況をリアルタイムで追跡する

モバイルアプリ向け

Facebookでは、アプリの利用者がアプリを広めやすくなるよう、モバイルアプリの開発者をサポートしたいと考えています。Facebookのシェア機能を生かすには、アプリの操作方法を利用者に理解しやすく、信頼できるものにすることが鍵となります。Facebookが強く推奨するベストプラクティスは次のとおりです。

  1. App Linksを利用し、Facebookからアプリの特定の位置にリンクして、シームレスに操作できるようにする
  2. 非公開シェアにはMessage Dialogを使用する
  3. Facebook Analyticsを使用して測定値を確認する
  4. HTTPユーザーエージェントヘッダーを使用して、iOSとAndroidからウェブサイトへのモバイル参照トラフィックを計測する

ウェブサイトのシェアのベストプラクティス

1.Facebookクローラーがサイトにアクセスできることを確認する

Facebookクローラーは、サイトからコンテンツを取得し、Facebookの利用者向けにプレビューを生成します。プラグインを通じて、FacebookでURLがシェアされ、サイトのページが「いいね!」または「おすすめ」された場合、Facebookクローラーがアクティブになります。コンテンツが公開されていれば、Facebookは問題なくアクセスできます。

Facebookクローラーがサイトにアクセスできることを確認する方法については、「Facebookクローラー」のガイドをご覧ください。


2. 適切なOpen Graphタグを使用する

利用者がサイトからFacebookにコンテンツをシェアするとき、FacebookクローラーはシェアされたURLのHTMLをスクレイピングします。通常のHTMLページでは、スクレイピングされるのは基本的なコンテンツであり、間違っている場合もあります。スクレイピング処理では、どのコンテンツが重要で、どれが重要でないかを推測で判断しなければならないためです。

Facebookクローラーがそれぞれのページから取得する内容を管理するには、Open Graphメタタグを使用します。これらのタグは、タイトル、説明、プレビュー画像など、ページに関する情報を構造化して提供するものです。

好ましい例

タイトル

ブランド情報やドメイン自体を含まないわかりやすいタイトル。

URL

セッションIDまたは不要なパラメーターを含まないURL。Facebook上のすべてのシェアは、これを記事の識別URLとして使用します。

説明

わかりやすい説明。長さは2文以上にします。

FacebookアプリID

Facebookがウェブサイトを識別するためのFacebookアプリID。

オブジェクトタイプ

オブジェクトのタイプ:

ローカリゼーション

記事に翻訳版がある場合。

著者と発行元

記事に作成者と発行元の情報がある場合。


好ましくない例

不適切なタイトル

タイトルには、ブランド情報または不要な情報を含めないでください。

不適切なURL

利用者ごとに変わる追加情報が含まれるURLの場合、「いいね!」やシェアの数が複数のURLに分散してしまい、記事をシェアするすべての利用者に基づいた集計がなされません。

一般的な説明

クリックしようという気持ちを起こさない、当たり障りのない説明は避けます。

一般的な画像

平凡な画像では、すべての記事が同じに見えます。100 x 100ピクセルしかない画像の場合、高解像度ディスプレイではきれいに表示されません。

FacebookアプリIDがない

fb:app_idarticle:author、およびarticle:publisherタグは必ず使用してください。


3.画像を最適化して優れたプレビューを生成する

画像サイズ

高解像度デバイス上で最適に表示されるよう、幅が1080ピクセル以上の画像を使用します。画像リンク広告を表示するには、幅が600ピクセル以上の画像を使用してください。画像リンク広告でのパフォーマンスを高めるため、広告素材には1:1の画像を使用することをおすすめします.

ゲームアプリ画像

ゲームアプリで使用される画像サイズは次の2種類です。

  • Open Graph storyの画像は正方形で表示されます。これらのアプリでの画像比率は、通常、600 x 600ピクセルです。
  • Open Graph story以外の画像は長方形で表示されます。1.91:1の比率の画像を使用してください(たとえば、600 x 314ピクセル)。

詳しくは、ゲームのOpen Graphについてのページをご覧ください。

画像をプリキャッシュする

コンテンツが初めてシェアされる際、Facebookクローラーがシェア対象のURLからメタデータをスクレイピングし、キャッシュします。クローラーは、画像を少なくとも1回確認してからでなければ、レンダリングできません。つまり、コンテンツを最初にシェアする人は、表示される画像を確認できません。

次の2種類の方法により、こうした事態を回避し、最初の「いいね!」またはシェアのアクション時に画像を表示させることができます。

1.シェアデバッガーを使用して画像をプリキャッシュする

URLデバッガーでURLを実行し、ページのメタデータを事前に取得します。この操作は、一部のコンテンツの画像を更新した場合も行ってください。

2. og:image:widthおよびog:image:height Open Graph タグを使用する

これらのタグを使用して、クローラーに対して画像サイズを指定します。これにより、クローラーは画像を非同期的にダウンロードして処理することなく、すぐに表示できます。


4.シェアデバッガーを使用してOpen Graphタグをデバッグする

メタタグとソーシャルプラグインを適切に設定する作業は少し複雑です。このため、Facebookのスクレイピング処理でページがどのように表示されるかをテストできるデバッグツールを提供しています。ページのURLを入力するだけで、ページから取得されたメタタグや、ソーシャルプラグインに影響し得るコンテンツのエラーや警告など、有益な情報が1ページで表示されます。

また、デバッグツールは、ページに関してFacebookがスクレイピングしたコンテンツをすべて更新するため、コンテンツの更新頻度が標準の24時間ごとよりも多い場合に便利です。


5. コンテンツ作成者にフォロー機能の利用をすすめる

フォロー機能を使用すると、コンテンツの作成者は、公開アップデートをフォロワーにシェアしつつ、個人的なアップデートは友達のみに限定できます。たとえば、ジャーナリストの場合、現場で撮影した写真、公開済み記事へのリンクといった公開コンテンツに対するフォローを読者や視聴者に許可できます。フォローは、読者や視聴者が発信者とつながり、コンテンツの最新情報を得られる、簡単かつ効果的な手段です。友達として追加する必要はありません。

フォロー機能の利用を開始する:

  • フォローを有効にする - [アカウント設定]に進み、[フォロワー]タブをクリックします。ボックスにチェックを入れてフォロワーを許可し、必要に応じてフォロワーのコメントやお知らせの設定を調整します。
  • タイムラインを埋める - カバー写真、肩書き、職歴、主な経歴やライフイベントを追加し、プロにふさわしいタイムラインを設定します。
  • 観察する – 他のジャーナリスト、写真家、執筆者など、多くのフォロワーを獲得しているさまざまな人をフォローします。その人たちのタイムラインにアクセスし、どのようなコンテンツをシェアしているのかを確認します。
  • フォロワーに向けて投稿する - 素敵な写真、コンテンツへのリンク、現在取り組んでいることの近況などをシェアします。[公開]に設定した投稿はすべて、ニュースフィードでフォロワーに表示されます。

6. JavaScriptにイベントトラッキング機能を実装して、プラグインの使用状況をリアルタイムで追跡する

サイトのソーシャルプラグインを使用して、利用者のインタラクションをリアルタイムで追跡できます。JavaScript用Facebook SDKでは、「いいね!」ボタンのクリック、送信ボタンによるメッセージの送信、コメントの作成といったイベントの情報を取得できます。これらのイベントをトラッキングする方法については、FB.Event.subscribeのリファレンスガイドをご覧ください。

モバイルでのシェアのベストプラクティス

Facebookのシェア機能でアプリを簡単に友達に紹介できるようにして、利用者がアプリを宣伝してくれるようにしましょう。

Facebookのシェア機能を生かすには、アプリの操作方法を利用者に理解しやすく、信頼できるものにすることが鍵となります。アプリの利用者は、シェア機能を通じて、友達と大切なことについて情報交換したり、アプリの機能を活用したりできます。また、開発者にとってシェア機能は、Facebookニュースフィードでの表示を通じてアプリの認識を高めてくれるものです。さらに、アプリから投稿されたコンテンツに利用者が反応した際、そこからアプリまたはアプリストアページに利用者を誘導し、トラフィックやアプリのインストール数を増やすことができます。

利用者はモバイルで次の4つの方法によってコンテンツをシェアできます。

  • モバイル用シェアダイアログiOSAndroid
  • モバイル用シェアAPIiOSAndroid
  • モバイル用いいね!ボタンiOSAndroid
  • モバイル用シェアボタン- - iOSAndroid
  • メッセージダイアログiOSAndroid

ベストプラクティスを実践しているアプリでは、利用者が安心してシェアできるため、開発者と利用者の双方が満足できる状況が生まれます。

Facebookが強く推奨するベストプラクティスは次のとおりです。

  1. App Linksを利用し、Facebookからアプリの特定の位置にリンクして、シームレスに操作できるようにする
  2. Open Graphを使用して、記事をさらに魅力的にし、カスタマイズする
  3. 非公開シェアにはメッセージダイアログを使用する
  4. Facebook Analyticsを使用して測定値を確認する

アプリから投稿されたニュースフィード記事で利用者がアクションを実行した場合、記事からアプリまたはApp Storeページに利用者を誘導し、トラフィックやアプリのインストール数増加につなげることができます。これが、アプリからFacebookへのシェア機能の1つの特徴です。こうした動作を実装するには、App Linksを使用します。App Linksは、アプリのコンテンツにディープリンクを設定できるようにする規格です。アプリの利用者がFacebook(またはApp Linksが有効な他のアプリ)経由でコンテンツをシェアする場合に、そのコンテンツからアプリに戻るためのリンクを作成できます。


2. 非公開シェアにはメッセージダイアログを使用する

メッセージダイアログでは、Facebook Messengerを使って、具体的で限定されたターゲット層に、より個人的な方法でアプリのコンテンツに関するストーリーを明示的にシェアできます。App Linksにより、アプリ内の正しい位置にシームレスに移動できます。


3.Facebook Analyticsを使用して測定値を確認する

Facebook Analyticsは、開発者やページの所有者向けにコンテンツに関する測定データを提供します。コンテンツの利用や生成、使用量や利用者データに関するトレンドを把握し、分析することは、ビジネスを拡大し、Facebookでのエクスペリエンスの質を高めることにつながります。詳しくは、「Facebook Analytics」をご覧ください。


4.HTTPユーザーエージェントヘッダーを使用する

iOSまたはAndroid上のFacebookからウェブサイトへのモバイル参照トラフィックを追跡する場合があります。サイトへのリンクがニュースフィードでシェアされて、それを見た友達がモバイルでリンクをクリックした場合などが特に一般的です。アプリ側で次を実行してください。

  • HTTPリファラヘッダーで、facebook.comを含む値を探します。

  • 参照トラフィックが、iOSやAndroid上のFacebookアプリ、またはそれらのチャネルのモバイルウェブブラウザー上のFacebookのいずれから発信されているかを確認します。HTTP User-Agentを確認します。Androidの場合はFB_IAB/FB4A、iOSの場合はFBAN/FBIOSという値を含みます。