Open Graphでソーシャルシェアの表示を規制する

Open Graph (OG) は、Facebook、LinkedIn、Twitter などのソーシャル プラットフォームで、ユーザーが Web サイトの URL を共有したときに、そのプラットフォームからデータを抽出するために使用するシステムです。Open Graph 設定を使用して、サイトのリンク プレビューに表示される情報を定義できます。 

覚えておくべき重要なポイント: Open Graph 設定を構成していない場合は、サイトがソーシャル メディアで共有されたときにランダムなコンテンツ (またはコンテンツなし) が表示されます。 

このガイドでは次のことを学びます: 

1. Open Graphタグの設定
2. 動的な Open Graph タグの配置
3. Open Graph設定のテストと修正
4. Open Graph イメージが見つからない問題を解決する

Open Graphタグを設定する方法

Webflow では、3 つの Open Graph タグを定義できます。 

• オープングラフのタイトル — ページのURLが共有されたときにページのタイトルとして表示されるテキスト
• オープングラフの説明 — タイトルの下に表示され、ページの内容の概要を示すテキスト表現
• オープングラフ画像 — タイトルと説明の上に表示される画像

役に立つヒント: Open Graph コンテンツは、共有する特定のページに合わせて調整すると最も効果的です。たとえば、ホームページの Open Graph コンテンツは、価格設定ページのコンテンツとは異なっている必要があります。Open Graph タグはグローバルに適用することはできず、指定されたページ専用です。そのため、各ページに Open Graph タグを設定することをお勧めします。

ページのOpen Graph設定にアクセスして調整するには、次の場所に移動します。 ページパネル > ページ設定 > グラフ設定を開く.

プロのヒント: ローカリゼーションが有効になっている Web サイトでは、ページレベルの Open Graph 設定をローカライズできます。Open Graph 設定のローカライズの詳細については、こちらをご覧ください。 

オープングラフのタイトルと説明 

Open Graph のタイトルと説明を手動で入力することも、各 Open Graph フィールドの下のチェック ボックスをオンにして、SEO のタイトルとメタ説明から取得することもできます。 

オープングラフ画像

Open Graph 画像を指定するには、画像への直接リンク (つまり、画像のファイル名と拡張子で終わる URL) を指定します。 

Open Graph イメージ フィールドでアセット パネルのイメージを利用するには: 

1. 画像の上にマウスを移動します アセットパネル
2. 設定「歯車”アイコンが表示されます
3. 「リンクアセット詳細メニューのアセット名の横にある「」アイコン
4. リンクをコピー 
5. リンクを貼り付けてください オープングラフ画像 分野

さらに詳しく: 画像を最適化してサイトのプレビューを強化する

動的 Open Graph タグを構成する方法

コレクション ページでは、コレクション内のすべてのページが Open Graph の詳細に準拠するテンプレートを作成できます。これにより、コレクションの各アイテムの Open Graph タイトルを手動で設定する代わりに、コレクション内のすべてのアイテムが、設定されたテンプレートに基づいて Open Graph のタイトル、説明、および画像を自動生成します。たとえば、ブログ投稿のコレクションでは、動的データを使用して、Open Graph 設定の投稿の名前またはタイトルのコレクション フィールドからコンテンツを抽出できます。

静的ページと同様に、この情報を編集するには、 ページパネル > ページ設定 > グラフ設定を開く. 

オープングラフのタイトルと説明 

Open Graphのタイトルと説明フィールドにコレクションフィールドからの動的データを事前に読み込むには、 フィールドを追加. 

また、Open Graph のタイトルと説明を手動で入力したり、各 Open Graph フィールドの下のチェック ボックスを選択して、SEO のタイトルとメタ説明から Open Graph のタイトルと説明を取得したりすることもできます。  

オープングラフ画像

コレクションページでOpen Graph画像を割り当てるには、 オープングラフ画像 ドロップダウンから選択して 画像 コレクションから画像フィールドを削除します (例: メイン画像、サムネイル画像など)。コレクションに画像フィールドがない場合、Open Graph 画像を指定することはできません。

知らせ： コレクション内のすべての Open Graph 画像は、同じ寸法である必要があります。 

Open Graphの設定を調べて修正する方法

リンクを共有する前にプレビューして、ソーシャル メディア プラットフォーム上でどのように表示されるかを理解したり、リンクのプレビューに古いデータが表示される場合は Open Graph コンテンツを更新したりすることが役立つ場合があります。

いくつかの一般的なソーシャル メディア プラットフォームでは、Open Graph データをプレビュー、デバッグ、更新するための独自のツールが提供されています。 

• フェイスブック
• リンクトイン
• ツイッター

知らせ： Pinterest と Instagram には、Open Graph データを検証するための専用ツールがありません。Facebook のデバッガー ツールを使用すると、これらのプラットフォームでのサイトの表示を確認できます。Facebook デバッガーにアクセスするには、Facebook にログインしている必要があります。

フェイスブック 

Facebook は独自のデバッガー ツールを提供しており、リンクをスクレイピング (インデックス作成) して最新の Open Graph データを取得できます。 

Facebookデバッガーを利用するには、リンクを挿入してタップします。 デバッグオープングラフの設定変更により、表示されたデータが古くなっている場合は、 もう一度削る データを更新します。 

知らせ： Facebook デバッガーにアクセスするには、Facebook にログインする必要があります。

リンクトイン

LinkedIn の投稿インスペクター リンクの再スクレイピングをリクエストしたり、LinkedIn がリンク プレビューを最後に更新した日時を確認したり、Open Graph データに関連する問題を解決したりできます。 

LinkedIn投稿インスペクターを利用するには、リンクを挿入してクリックします。 検査するプロパティ (タイトル、タイプ、画像など) をクリックすると、LinkedIn がどのように値を選択したかを知ることができます。 

知らせ： LinkedIn 投稿インスペクターにアクセスするには、LinkedIn にログインする必要があります。 

ツイッター

Twitterのカード検証ツールは、リンクのOpen Graphデータに関するデバッグ情報を含むログを提供します。Twitterカード検証ツールを使用するには、リンクを挿入して プレビューカード. 

Twitter では、カード検証ツール内でリンクのプレビューが表示されなくなりました。Twitter で共有されたときにリンクがどのように表示されるかを確認するには、ツイートを作成してリンクを挿入します。 

知らせ： Twitter のカード検証機能とツイート作成機能にアクセスするには、Twitter アカウントにログインする必要があります。

オープングラフ画像が見つからない場合の解決方法

Facebook でサイトへのリンクを共有すると、リンクのプレビューにタイトルと説明のみが表示され、Open Graph 設定で設定した画像が表示されないことがあります。 

これは通常、ページが共有され、プレビューが初めて生成されたときに発生しますが、投稿内のリンクを削除して再度追加することで、この問題を解決できます。ただし、いくつかのベスト プラクティスを採用することで、この問題の発生を防ぐことができます。 

1. サイト上のすべての Open Graph 画像のサイズを統一してください。Facebook では、最小幅 1080 ピクセルの画像を使用することを推奨しています。画像共有に関する Facebook の推奨事項を確認してください。 
2. Facebook デバッガー ツールでリンクを実行して、画像を事前にキャッシュします。これは、Open Graph 画像を更新した後にも実行する必要があります。 
3. Open Graphタグを使用して、Webクローラーに画像のサイズを指定します。これにより、非同期ダウンロードや処理を必要とせずに、Webクローラーによる画像の即時レンダリングが可能になります。次のコードスニペットを挿入します。 サイト設定 > カスタムコード タブ > ヘッドコード セクションで、幅と高さの値をサイト上の画像のピクセル値に合わせて変更します (すべての Open Graph 画像の寸法が一貫していることを前提としています)。 

サイトのヘッドタグと本文タグにカスタム コードを実装する方法について詳しくは、こちらをご覧ください。 

覚えておくと便利なヒント: サイト全体でさまざまなサイズのOpen Graph画像を使用している場合は、上記のコードスニペットを ページパネル > ページ設定 > 内部鬼ごっこ サイト設定内ではなく、コレクション内のすべての Open Graph 画像は、同じ寸法を維持する必要があります。