Open Graphメタタグ：知っておくべきこと

Open Graphメタタグの実践ガイド：機能、主要タグと例、プラットフォームごとのフォールバック、テスト手順、ソーシャルプレビューのチェックリスト。

Published 2026年2月16日

Open Graph Meta Tags - What You Need to Know

Open Graphの役割と重要性

Open Graphメタタグは、URLが共有されたときにプラットフォームに表示されるタイトル、説明、画像を指定します。HTMLのheadに配置することで、対応するサービス間でページのプレビュー表示を標準化できます。これらを設定すると、フィードやプライベートメッセージ、チャットのプレビューに表示されるスニペットをプラットフォームのヒューリスティックに任せずに制御できます。

実装やトラブルシューティングに影響する技術的な注意点：Googleはページのモバイル版を主要な基準としてクロールとインデックス。2024年7月以降、Google はデフォルトで Googlebot Smartphone を使って Search をクロールします。Facebook、Twitter/X などのソーシャルスクレイパーは、異なるユーザーエージェントでページを取得し、プレビューをキャッシュすることがあります。また、Google が 2024 年初めに従来のキャッシュページを削除した点にも注意してください。これは Open Graph の動作を変えるものではありませんが、検索エンジンが古いページのスナップショットを表示する方法に影響します。

主要な Open Graph タグと例のマークアップ

共有対象のページごとに head に含めるべきコアの Open Graph タグは og:title、og:description、og:image、og:url、og:type です。標準的な meta description や構造化データと併せて追加してください。ソーシャルクローラーは head のみを参照するため、完全にレンダリングされたタグを head に入れておきます。

例：HTML（<head>内に配置）:

コンテンツをプログラムで公開する場合（CMSテンプレートやサーバーサイドレンダリング）は、スクレイパーがクライアント側のJavaScriptに依存しないよう、これらのタグをサーバー側で生成してください。

プラットフォームごとの差異とフォールバック

Open Graph は広くサポートされたプロトコルですが、各プラットフォームは独自のルールやフォールバックを適用します。

プラットフォームごとのプレビューのキャッシュ方法は異なるため、ユーザーが共有しそうなサービスで必ずページをテストしてください。各サービスが抽出する内容を確認し、メタデータを更新した際にキャッシュをクリアするためにプラットフォームのデバッガーを使いましょう。

画像の指針とアクセシビリティの考慮点

ビジュアルはソーシャルプレビューで最も目立つ要素です。高DPIデバイスでも鮮明に表示される十分なサイズで、一般的なトリミング比率に合わせて視覚的に中心が取れている画像を目指してください。汎用的な方法は横長の画像を用意し、対応する場合は og:image:width および og:image:height のような明示的な幅/高さのメタデータを追加して、スクレイパーがファイル全体をダウンロードせずに寸法を把握できるようにすることです。

また、実務的なポイントも確認してください：

例：curl -I のようなコマンドで画像のヘッダーを確認する — https://yourdomain.com/wp-content/uploads/your-image.png に対して 200 レスポンスと Content-Type を確認します。

Open Graph のテストとトラブルシューティング方法

プレビューが正しく表示されない場合は、推測で直すのではなく体系的なチェックリストに従ってください。まず生の HTML head を確認してタグが存在するかを確かめ、次にスクレイパーがどのようにページを取得しているか、プロキシやキャッシュが古いコンテンツを返していないかをチェックします。

自分が所有するページについては、Google Search Console の URL Inspection がインデックスやモバイルレンダリングの確認に有用ですが、ソーシャルプレビューの診断では各ソーシャルプラットフォームのデバッガーに代わるものではありません。

よくあるミスと簡単な実装チェックリスト

簡単な実装チェックリスト：

ページの提供方法やレンダリングの詳細な技術監査が必要な場合は、詳しくはTechnical SEOガイドを参照してください。

FAQ: プラットフォームが og:image を無視する場合は？

プラットフォームは独自のヒューリスティックやキャッシュを適用します。画像 URL が 200 を返し正しい Content-Type になっているか、十分なサイズで適切なアスペクト比か、robots.txt によってブロックされていないかを確認してください。robots.txt。プラットフォームのデバッガーを使って、スクレイパーが何を抽出したかを正確に確認し、再クロールを促してください。

FAQ: Twitter/X と Facebook で異なるテキストを使えますか？

可能です。Twitter/X は twitter:* タグでタイトル、説明、画像をサポートします。Twitter/X で別の見出しや画像が必要な場合は、og:* と twitter:* の両方を含めてください — プラットフォームは自分のタグを優先します。

FAQ: すべてのページに Open Graph タグを追加する必要はありますか？

共有されやすいページを優先してください：ブログ投稿、ランディングページや製品ページが最も恩恵を受けます。サイト全体に関わるページ（法務、管理）では恩恵は小さいですが害はありません。共有される見込みが低いページには、タグの価値は小さいもののコストもほとんどありません。

FAQ: Open Graph タグは SEO ランキングに影響しますか？

OGタグはソーシャルプレビューを制御するもので、検索エンジンのランキングに直接影響するものではありません。ただし、より良いプレビューによりソーシャルからのクリックが増え、間接的にユーザーエンゲージメントのシグナルに影響する可能性はあります。クロール、インデックス、ランキングの違いを意識してください：OGタグはソーシャルプラットフォームに表示される内容に影響し、検索エンジンのインデックスルールには影響しません。

Related articles