Open Graph タグ完全ガイド - og:title、画像、Twitter カード (2026)

誰かがあなたの URL を Facebook、LinkedIn、Slack、Discord、または iMessage に貼り付けると、それらのアプリは表示されているページから推測しません。 HTML ヘッド内の Open Graph タグ (タイトル、説明、画像、タイプ、正規 URL) を検索します。これらを正しく行うと、共有カードはデザインされたプレビューのようになります。それらをスキップすると、ランダムな画像が表示されたり、タイトルが切り詰められたり、カードがまったく表示されなかったりします。このガイドでは、プロトコル、重要なタグ、HTML タイトルやメタディスクリプションとの違い、プレビューを中断する間違いについて説明します。貼り付け可能なマークアップが必要な場合は、Open Graph Tag Generator を使用します。これはブラウザ内で実行され、フィールドはアップロードされません。

オープングラフタグとは

Open Graph は、メタ タグの小さな語彙です。各タグは、ドキュメント ヘッド内の名前と値のペアです。名前には接頭辞 og: が使用されます。ソーシャル アプリのクローラーはパブリック URL を取得し、それらのタグを読み取り、上部または横に画像、タイトル、説明、そして多くの場合はサイト名を含むカードを作成します。このプロトコルは Facebook から始まりました。これは現在、ほとんどの Web でデフォルトの共有形式になっています。

• Facebook と Instagram のリンクのプレビューでは、最初に og:* が読み取られます。
• LinkedIn、Slack、Discord、Telegram、および iMessage は同じタグを再利用します。
• X (Twitter) は Open Graph にフォールバックできますが、両方が存在する場合は twitter:* タグが優先されます。
• 検索エンジンは依然として SERP の HTML タイトルとメタ ディスクリプションを使用しています。 OG は共有用であり、Google の青いリンク用ではありません。

タグは、meta property="og:title" content="あなたの共有タイトル" のようになります。プロパティ名がキーです。 content 属性が値です。 HTML を有効に保つために、値内の特殊文字をエスケープする必要があります。ジェネレーターはエスケープを処理します。

各ページに必要な 4 つのタグ

Facebook の基本オブジェクトには 4 つのプロパティが必要です。それらのいずれかが欠落しているか空である場合、多くのクローラーは代替手段を考案するか、壊れたカードを表示します。

• og:title - カードの見出し。短く具体的にしましょう。 Google で希望する HTML タイトルとは異なる場合があります。
• og:type - これがオブジェクトの種類。 website は、ホームページまたはランディング ページのデフォルトです。この記事はブログ投稿に適しています。
• og:image - プレビュー画像への絶対 https URL。相対パス (/images/og.png) は、クローラーに解決するためのページ コンテキストがないため失敗します。
• og:url - このオブジェクトの正規 URL。これは、https および優先ホスト (www または apex) を含む、人々が共有するパブリック URL と一致する必要があります。

この4つは最低限です。タイトルだけがあり、画像がないカードは未完成に見えます。画像が含まれていてもタイトルがあいまいなカードは、クリックの無駄になります。

おすすめの追加機能

• og:description - タイトルの下に 1 つまたは 2 つの文。 70～200文字程度を目安にしてください。これは、希望しない限り、メタ ディスクリプションと同じ文字列ではありません。
• og:site_name - あなたのブランド。 LinkedIn や Slack では、タイトルの下に表示されることが多いため、出典が一目瞭然です。
• og:locale - en_US、es_ES、pt_BR などのアンダースコア形式の言語と地域。ページが英語ではない場合にこれを使用します。

後で、より豊富なタイプ固有のフィールド (article:author、product:price:amount) を追加できます。基本セットから始めます。完全な基本オブジェクトは、半分埋められた製品オブジェクトよりも優れています。

実際に使用する og:type 値

タイプはクローラーに URL の処理方法を指示します。型が間違っているとカードが壊れることはほとんどありませんが、意味のある追加フィールドや、一部のアプリがオブジェクトをグループ化する方法が変わります。

• Web サイト - ホームページ、カテゴリ インデックス、一般的なランディング ページ。
• 記事 - ブログ投稿、ニュース、ハウツー ガイド。日付付きの URL と固有の画像を組み合わせます。
• product - 単一の製品または価格ページ。わかりやすいタイトルとヒーローショットを追加します。
• プロフィール - 人物または著者のページ。

不安な場合は、Web サイトが安全です。カスタム型を作成しないでください。クローラーは知らない名前を無視します。

OG:イメージ ルール

画像は人々が最初に目にするものです。株が割安に見える最も一般的な理由は、イメージが弱いか欠けていることです。

• 横長カードには 1200 x 630 ピクセルを使用します。この比率 (約 1.91:1) は Facebook と LinkedIn が期待しているものです。
• クローラーが小さなサムネイルに戻らないように、600 x 315 を超えないようにしてください。
• URL は絶対 URL および https である必要があります。パブリック CDN または独自のオリジンでファイルをホストします。ログイン ウォールと robots.txt ブロックは、画像をクローラーから隠します。
• ファイルは適度に小さくしてください (8 MB 未満)。 PNGでもJPEGでも大丈夫です。古い Facebook キャッシュを取得する必要がある場合は、WebP を避けてください。
• 被写体を中央に置きます。一部のアプリはモバイルで側面をトリミングします。

Twitter カード vs オープン グラフ

X は、og:title、og:description、および og:image を読み取ることができます。独自の twitter:* タグもあります。両方が存在する場合、X では twitter:* が優先されますが、他の場所では依然として og:* が優先されます。ほとんどのページが両方を出力するのはこのためです。

• twitter:card - 広い画像がある場合は summary_large_image 、ない場合は summary 。
• twitter:title、twitter:description、twitter:image - 通常は、一致する og:* タグと同じ値です。
• 基本的な大きな画像カードには Twitter サイト ハンドルは必要ありません。

Open Graph のみを公開する場合、X は依然としてカードを表示することがよくあります。 Twitter タグのみを公開する場合、Facebook と LinkedIn は公開しません。 Open Graph は共有ベースです。 Twitter タグは X の追加レイヤーです。

OG と HTML タイトルとメタディスクリプション

3 つの文字列、3 つのジョブ。それらを混同すると、優れた SERP スニペットと弱い Slack カードが得られます。あるいはその逆も可能です。

• HTML タイトル - 検索結果のタイトルとブラウザのタブ。ここでトランザクションまたは情報クエリをターゲットにします。
• メタディスクリプション - そのタイトルの下にあるSERPスニペット。 Googleはそれを書き換えるかもしれない。
• og:title および og:description - ソーシャル カード。キーワードではなく、すでにリンクを持っている人に向けて書きます。

ツール ページでは、トランザクション HTML タイトル (無料の Open Graph タグ ジェネレーター) と、より明確な og:title (この記事の Open Graph タグの生成) を保持できます。ブログ投稿ではその逆、つまりキーワード主導の HTML タイトルと、より人間的な og:title を行うことができます。 メタ ディスクリプション チェッカー で SERP スニペットを確認します。 OGタグ付きのシェアカードを確認してください。

作業例

Open Graph 自体に関するブログ投稿では、これらの値が使用される可能性があります。これらをパブリック URL の先頭に貼り付けると、クローラーは完全なオブジェクトを認識するはずです。

• og:title - Open Graph タグの説明
• og:description - og:title、og:image、og:url、および og:type の機能に加え、Twitter カードと画像サイズ。
• og:type - 記事
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - https 上の 1200 x 630 PNG または JPEG
• og:site_name - ToolsMinify
• og:locale - en_US
• twitter:card - summary_large_image、同じタイトル、説明、画像

タイトル内の引用符とアンパサンドは、content 属性内で " と & になる必要があります。タグを手書きでページが解析できない場合は、最初にそのエスケープを確認する必要があります。

よくある間違い

• 相対的な og:image または og:url。どちらも絶対的なものでなければなりません。
• og:url が共有リンクと一致しません (http と https、apex と www、ロケール プレフィックスが欠落しています)。
• 200 x 200 未満の画像、または LinkedIn がレターボックスに変換した 1:1 トリミング。
• 頭の代わりに体にタグが付いています。クローラーは頭の中を覗きます。
• robots.txt 内の画像またはページをブロックする。ソーシャル クローラーは依然としてそれらを取得する必要があります。
• 古い Facebook キャッシュ。タグを変更した後、Facebook の共有デバッガーで URL を再スクレイピングします。他のアプリには独自のキャッシュがあります。
• 競合する og:title タグが重複しています。通常、最初の方が勝ちますが、どちらが気に入るかはわかりません。
• シークレットまたは未公開のドラフトコピーを og:description に入れる。タグは URL が公開された瞬間に公開されます。

よくある質問

Open Graph タグは Google のランキング要素ですか?

直接ではありません。 Google は、HTML タイトル、メタディスクリプション、ページコンテンツを検索に使用します。 OG タグは、人々がクリーンなカードでページを共有するのに役立ちます。より良い共有はリンクと訪問をもたらすことができます。これは間接的な影響であり、ランキングの切り替えではありません。

どの Open Graph タグが必要ですか?

og:title、og:type、og:image、og:url で始めます。 og:description、og:site_name、および og:locale がある場合は追加します。空のタグは省略されたタグよりも悪いです。

og:image のサイズはどれくらいにすべきでしょうか?

1200 x 630 ピクセルは通常の横長サイズです。 600 x 315 以上を維持してください。絶対 https URL を使用してください。モバイルクロップによって画像上のテキストが切り取られないように、被写体を中央に配置します。

すでに Open Graph を持っている場合、Twitter Card タグは必要ですか?

X は OG タグを読み取ることができますが、twitter:card に加えて一致するタイトル、説明、画像を使用すると、そのネットワークを明示的に制御できます。 Facebook と LinkedIn は twitter:* を無視しますが、それでも og:* が必要です。可能な場合は両方を発行してください。

なぜ Facebook は古い画像をまだ表示しているのでしょうか?

Facebook は最初のスクレイピングをキャッシュします。画像の URL を変更し (または待機し)、Facebook の共有デバッガーで URL を実行し、新しいスクレイピングをリクエストします。 LinkedIn と Slack にも同様のキャッシュがあります。同じ URL にあるファイルのバイトだけを変更しても、多くの場合は何も起こりません。

HTMLはどこに置けばいいのでしょうか？

パブリック HTML ドキュメントのヘッド内、またはフレームワークのメタデータ API 内でヘッド内でレンダリングされます。タグは、og:url として設定した正確な URL 上に表示される必要があります。ビルダーのクリックごとのチュートリアルについては、Open Graph タグ ジェネレーターの使用方法 を参照してください。

ブラウザでタグを構築する

タイトル、説明、URL、画像を入力し、ライブ HTML をコピーします。何もアップロードされていません:

• グラフタグジェネレーターを開く - og:* とオプションの Twitter Card タグをソーシャル プレビューとともにビルドします。
• Open Graph タグ ジェネレーターの使用方法 - 同じツールのステップバイステップガイド。
• メタディスクリプションチェッカーとSERPプレビュー - 共有カードではなく、検索スニペットを確認してください。
• スラグジェネレーター - 共有するページの URL スラッグをクリーンアップします。
• すべてのSEOツール - 完全なカテゴリインデックス。