オープングラフタグの解説：ソーシャルメディアリンクプレビューの作り方

Facebook の投稿に Web リンクを共有したり、Telegram グループに記事を貼り付けたり、Twitter で友人に製品ページを DM したりするたびに、洗練されたビジュアル プレビュー カードが表示されることを期待します。 鮮明なバナー画像、魅力的な見出し、簡潔な概要を備えたこのカードは、偶然に生まれたものではありません。 これはOpen Graph プロトコルと呼ばれる標準化された Web 仕様を通じて構築されています。 しかし、Web サイトのコードにこれらのメタ タグが欠けていると、ソーシャル プラットフォームは見苦しく壊れた灰色のボックスを表示したり、ページからランダムなサムネイルを選択したりすることになります。 Web 開発者やテクニカル マーケティング担当者にとって、オープン グラフ タグの仕組みを学ぶことは不可欠です。

もともと 2010 年に Facebook によって導入された Open Graph プロトコルは、外部 Web ページをソーシャル グラフ ネットワークに統合するために設計されました。 Open Graph が登場する以前、ソーシャル ネットワークでは、生の段落テキストをスクレイピングし、HTML イメージ タグをスキャンして、記事の内容を推測する必要があり、多くの場合、恥ずかしいビジュアル プレビューが表示されました。 現在、Open Graph は、LinkedIn、Pinterest、Twitter、Telegram、Discord、Slack、WhatsApp でサポートされるユニバーサル インターネット標準となっています。 この技術的な詳細な説明では、コア OG タグの正確な構文を学び、画像の寸法要件を理解し、ソーシャル エンゲージメントを最大限に高めるためにプレビュー カードをデバッグおよび最適化する方法を発見します。

Open Graph メタデータをマスターすると、ドメインから共有されるすべてのリンクが魅力的でプロフェッショナルに見え、ソーシャル共有に最適化されます。

Open Graph タグは、公開ソーシャル メディア フィード以外にも、プライベート コラボレーション ソフトウェアや Slack、Microsoft Teams、Discord などのチーム メッセージング ツール内でのリンクのレンダリング方法も制御します。 チームメンバーがあなたの URL を会社の Slack チャネルまたは開発者の Discord サーバーに貼り付けると、アプリケーションの内部ボットが Open Graph メタデータをリアルタイムで解析し、見出し、サムネイル、概要スニペットをチャット ストリームに直接表示します。 高品質のメタデータにより、内部関係者やコミュニティ メンバーがすぐにリンクに参加できるようになります。

オープングラフプロトコルとは何ですか?

Open Graph プロトコルは、Web 開発者が HTML ドキュメントの <head> セクション内に配置する一連の構造化メタ タグです。 自動クローラー (facebookexternalhit や TelegramBot など) がページにアクセスすると、これらのタグを解析してインタラクティブなリッチ プレビュー オブジェクトを構築します。

Open Graph タグがなければ、共有リンクは単なるフラット テキストになります。 Open Graph タグを使用すると、リンクが視認性の高いインタラクティブなビジュアル カードに変わり、ソーシャル フィード全体のクリックスルー率が大幅に向上します。

含める必要があるコア Open Graph タグ

すべての公開 Web ページには、すべての主要なプラットフォームで一貫したレンダリングを保証するために、4 つの基本的な Open Graph タグを含める必要があります。

og:url が正規リンク タグと一致していることを常に確認して、ソーシャル インタラクション数やバックリンク シグナルが URL のバリエーション間で断片化するのを防ぎます。

最新のディスプレイ向けに Open Graph 画像を最適化する

画像は、プレビュー カードの中で最も重要な要素です。 最新の高解像度スマートフォン画面でグラフィックスを鮮明なままレンダリングするには、次の技術仕様に従ってください。

• 標準解像度 (1.91:1): 1200x630 ピクセルを使用します。 これは、Facebook、LinkedIn、Twitter の概要カードの世界標準です。
• ワイドスクリーン代替 (16:9): 1200x675 ピクセルは、ビデオ コンテンツ、YouTube 共有、最新のレスポンシブ ブログに広く使用されています。
• 寸法を明示的に宣言する: <meta property="og:image:width" content="1200" /> と <meta property="og:image:height" content="630" /> を必ず含めます。 これにより、ソーシャル クローラーは、画像のサイズを非同期的にダウンロードして計算することなく、最初のスクレイピング中にカード レイアウトを即座にレンダリングできるようになります。
• ファイル サイズの制限: ファイル サイズは 5MB 未満に抑えてください。 ほとんどのソーシャル スクレーパーは、ネットワーク帯域幅を確保するために 5MB を超える画像のダウンロードを中止します。
• 重要なテキストを中央に配置: ソーシャル プラットフォームでは、モバイル フィードとデスクトップのサイドバーでプレビュー グラフィックのトリミング方法が異なります。 すべての重要なロゴ、テキスト見出し、顔は画像の中央の「安全ゾーン」内の中央に配置してください。

Twitter カードとオープン グラフ: 相互作用の仕組み

Twitter (X) はTwitter カードと呼ばれる独自のメタデータ マークアップを維持していますが、Open Graph フォールバックもネイティブにサポートしています。

Twitter 上でリンクが小さな正方形のサムネイルではなく、大きくて魅力的なビジュアル カードとして表示されるようにするには、Open Graph タグの横に次の専用の Twitter タグを含めます。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

全幅のビジュアルプレビューが必要な場合は、twitter:card を summary_large_image に設定することが必須です。 省略した場合、Twitter はデフォルトでコンパクトなテキストのみのプレビューを表示し、クリック数がはるかに少なくなります。

上級パブリッシャーは、og:locale や article:published_time などの補足的な Open Graph プロパティも実装する必要があります。 og:locale を宣言すると、クローラーにコンテンツの主な言語と地域の形式が通知され、公開タイムスタンプは、Google Discover などのコンテンツ検出エンジンが最新の編集レポートを認識するのに役立ちます。

構造化されたイメージ フォールバック階層を維持することも賢明です。 作成者が特定のブログ投稿専用のアイキャッチ画像をアップロードするのを忘れた場合、コンテンツ管理テンプレートは、クローラーが空のプレビュー カードをレンダリングできるようにするのではなく、クリーンで高解像度のデフォルトのブランド グラフィックを自動的に挿入する必要があります。

ブランド サブドメインに関するガイドでは、Open Graph タグがブランド サブドメインとどのようにやり取りするかを調べることもできます。

プレビュー タグのテスト、検証、トラブルシューティング

マーケティング キャンペーンを開始したり、リンクを公に共有したりする前に、必ず公式プラットフォーム デバッグ スイートを使用して Open Graph タグを検証してください。

• メタ共有デバッガー: 間違ったプレビュー画像の修正に関するガイドで説明されているように、URL を貼り付けて Facebook カードをプレビューし、タグ警告を確認し、クローラー キャッシュを強制的に更新します。
• Telegram @WebpageBot: Telegram 内のこの検証済みボットにリンクを送信して、モバイル プレビューのレンダリングを検証し、キャッシュされた古いグラフィックをフラッシュします。
• LinkedIn Post Inspector: LinkedIn の 7 日間のリンク プレビュー キャッシュをクリアし、欠落しているメタデータ フィールドを報告します。
• 自動リンク チェック: 無料の リンク チェッカー ツール を使用して、リダイレクト チェーン、SSL 証明書、ステータス コードを検証します。

完全な Open Graph メタデータを実装し、すべての主要なプラットフォームでプレビュー レンダリングを検証することで、混雑したフィードの中で Web リンクが目立つようになり、エンゲージメントを最大限に高めることができます。

よくある質問