← Blog

Open Graphとは何ですか?完全な初心者ガイド

ソーシャル メディアでリンクを共有します。プレビューを見るとひどいようです。その理由と、Open Graph タグがそれを修正する方法を説明します。

リンクが実際にどのように表示されるかを確認したいですか?

Proovd でOpen Graph タグを無料で確認します。URL を貼り付けて、共有する前に X、LinkedIn、Slack、Discord、WhatsApp、Reddit でプレビューを確認します。

簡単な回答

  • Open Graph は、ソーシャル メディア上でリンクがどのように表示されるかを制御する HTML メタ タグのセットです。
  • コアタグ: og:title、og:description、og:image、og:url
  • OG タグがないと、プラットフォームは推測します - そしてその推測は間違っています
  • OG タグ + Twitter Card タグを設定して完全にカバーします

Open Graph とは実際何ですか

Open Graph は、2010 年に Facebook によって発明されたプロトコルです。Open Graph より前は、誰かが Facebook でリンクを共有したとき、プレビューは予測できませんでした。 Facebook はページをスクレイピングして画像やテキストを探しますが、その結果はランダムであることが多く、小さなファビコンが表示されることもあれば、ページからランダムに写真が表示されることもありますが、何も表示されないこともあります。

Facebook 氏は、「何を表示するかをウェブマスターに指示する標準的な方法を提供しましょう。」と述べました。彼らは、あらゆる Web サイトが HTML に追加できる一連のメタ タグを導入しました。他のプラットフォーム — X、LinkedIn、Slack、Discord、WhatsApp、Reddit — も同じ標準を採用しました。現在、Open Graph はインターネット上のリンク プレビューの世界共通言語です。

それはあなたがインストールするテクノロジーではありません。これは、ページの セクションにある単なる HTML メタ タグです。それでおしまい。

コアOpen Graph Tags

ソーシャル メディアで共有されるすべてのページには、少なくとも次の 4 つのタグが必要です。

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

それぞれが行うことは次のとおりです。

og:type (通常は「ウェブサイト」または「記事」)、og:site_name (ブランド名)、og:locale (言語) などの追加のオプションタグがあります。ただし、リンク プレビューにとって最も重要なのは上記の 4 つです。

Open Graph の仕組み — ステップバイステップ

誰かがリンクを共有すると、次のようになります。

  1. 誰かが URL を X、LinkedIn、Slack、Discord などに貼り付けます。
  2. プラットフォームのボットは URL を取得し、HTML を上から下に読み取ります。
  3. セクションで og: tags を探します。
  4. og:title、og:description、og:image の値を使用してプレビュー カード を構築します。
  5. カードは共有リンクを見た人全員に表示されます。

プラットフォームが og: タグを見つけられない場合、ランダムな画像を選択したり、</code> タグを使用したりするなど、独自のヒューリスティックにフォールバックします。このフォールバック動作が、非常に多くの共有リンクがひどいものに見える理由です。</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph vs. Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter は、Open Graph が存在する前に、「Twitter Cards」と呼ばれる独自のタグ システムを作成しました。 Twitter Cards の代わりに、<code>twitter:card</code>、<code>twitter:title</code>、<code>twitter:description</code>、<code>twitter:image</code> の属性を使用します。 <code>og:</code> 接頭辞。</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>現在、ほとんどのプラットフォームが両方をサポートしています。しかし、X/Twitter は依然として OG タグよりも <code>twitter:card</code> タグを好みます。そのため、ベスト プラクティスは、<strong>両方</strong> を設定することです。</p> <pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) --> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" /> <!-- Twitter/X (works on X/Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">これがウェブサイトにとって重要な理由</h2> <p data-i18n="b.what-is-open-graph.35">ソーシャル メディア上の任意の場所でコンテンツを共有する場合 (Web サイトを持っている場合はおそらくそうするでしょう)、リンクのプレビューが第一印象となります。明確なタイトル、説得力のある説明、優れた画像を備えたよく練られたプレビューは、クリックスルー率を劇的に高めます。</p> <p data-i18n="b.what-is-open-graph.36">プレビューが壊れている (画像が欠けている、タイトルが切り詰められている、説明が文字化けしている) と、コンテンツがプロフェッショナルではないように見えます。人々はそれをスクロールして通り過ぎます。</p> <p data-i18n="b.what-is-open-graph.37">Open Graph タグが 2 つの違いです。セットアップには 5 分かかりますが、ソーシャル メディアでのコンテンツのパフォーマンスに不釣り合いな影響を与えます。</p> <h2 data-i18n="b.what-is-open-graph.38">クイックチェックリスト</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>すべてのページに <code>og:title</code>、<code>og:description</code>、<code>og:image</code>、<code>og:url</code> を追加します</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>X/Twitter の互換性のために <code>twitter:card</code> と <code>twitter:image</code> を追加</li> <li data-i18n="b.what-is-open-graph.41">画像サイズを 1200×630 ピクセルに設定します</li> <li data-i18n="b.what-is-open-graph.42">絶対 URL を使用します (すべての画像パスには https://...))</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html><a href="https://proovd.in/ja/">Proovd</a> でテストして、すべてのプラットフォームでページがどのように表示されるかを確認してください</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">よくある質問</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">ソーシャルメディアで共有しない場合、Open Graphタグは必要ですか?</h3> <p data-i18n="b.what-is-open-graph.46">リンクをどこでも共有しない場合は、リンクは必要ありません。しかし、ウェブサイトを持っていて、それをソーシャルメディアで一度でも共有する場合、OGタグは不可欠です。</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">Open Graph タグは Google のランキングに影響しますか?</h3> <p data-i18n="b.what-is-open-graph.48">直接ではありません。 Google はランキング要素として OG タグを使用しません。ただし、検索結果やソーシャルシェアからのクリックスルー率に影響を与える可能性があり、間接的にトラフィックや可視性に影響を与えます。</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">ページごとに異なる OG タグを設定できますか?</h3> <p data-i18n="b.what-is-open-graph.50">はい。各ページには、そのコンテンツと一致する独自の OG タグが必要です。犬に関するブログ投稿には、猫に関するページとは異なる og:title と og:image が必要です。</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">関連記事</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/ja/blog/discord-link-preview-not-working">Discord リンクのプレビューが機能しない場合試す 7 つの修正 (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/ja/blog/how-to-add-open-graph-tags">Web サイトに Open Graph タグを追加する方法</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/ja/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card: 違いは何ですか?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/ja/blog/og-image-size-guide">Open Graph 画像サイズ: 2026 年完全ガイド</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>数秒でOpen Graphタグをチェック</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html><a href="https://proovd.in/ja/">Proovd</a> でOpen Graph タグを無料で確認します。URL を貼り付けると、X、LinkedIn、Slack、Discord、WhatsApp、Reddit でプレビューが表示されます。</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>