Open Graphタグ: ソーシャルメディアプレビューの完全ガイド

· 12分で読めます

目次

Facebook、LinkedIn、Twitter、またはメッセージングアプリでリンクを共有すると、表示されるプレビューカードはページのHTMLにあるOpen Graph(OG)タグから生成されます。これらのタグを正しく設定することで、魅力的でクリックしたくなるプレビューと、壊れた、または一般的な見た目のリンクとの違いが生まれます。

この包括的なガイドでは、Open Graphタグ、Twitterカード、ソーシャルメディアプレビューの最適化について知っておくべきすべてをカバーしています。初めてOGタグを実装する開発者でも、ソーシャルエンゲージメントを向上させたいマーケターでも、全体を通して実用的な洞察と実践的な例が見つかります。

Open Graphとは?

Open Graphは、2010年にFacebookによって作成されたプロトコルで、Webページをソーシャルグラフ内のリッチオブジェクトにすることができます。HTMLにOGメタタグを追加することで、ソーシャルメディアプラットフォームで共有されたときにコンテンツがどのように表示されるかを正確に制御できます。

Open Graphタグがない場合、プラットフォームはページのコンテンツを自動的にスクレイピングしようとしますが、多くの場合、不十分または不正確なプレビューが生成されます。その結果は?壊れた画像、欠落したタイトル、または混雑したソーシャルフィードで注目を集めることができない一般的な説明です。

このプロトコルは、HTMLの<head>セクションでproperty属性にog:というプレフィックスが付いたメタタグを使用します。これらのタグは、ソーシャルプラットフォームが確実に解析して表示できる構造化データを提供します。

Open Graphをサポートするプラットフォーム

Open Graphは、ソーシャルメディアプレビューの事実上の標準となっています。このプロトコルをサポートする主要なプラットフォームには次のものがあります:

プロのヒント: 公開前に、当社のOpen Graphチェッカーを使用して、タグがさまざまなプラットフォームでどのように表示されるかを即座に検証してください。

Open Graphタグの仕組み

誰かがソーシャルプラットフォームであなたのURLを共有すると、プラットフォームのクローラー(「ボット」または「スクレイパー」と呼ばれることが多い)があなたのページにアクセスし、HTML<head>セクションでOpen Graphメタタグを探します。これらのタグは、コンテンツに関する構造化された情報を提供します。

クローラーはこのデータを抽出し、それを使用してプレビューカードを生成します。これは「リッチスニペット」または「リンクプレビュー」とも呼ばれます。このカードには通常、タイトル、説明、画像、URLが含まれます。

クローリングプロセス

リンクを共有したときに舞台裏で何が起こるかを以下に示します:

  1. URL送信 – ユーザーがソーシャルプラットフォームであなたのURLを貼り付けるか共有する
  2. クローラーの派遣 – プラットフォームがボットを送信してページを取得する
  3. HTML解析 – ボットがページのHTMLを読み取り、OGタグを抽出する
  4. キャッシュストレージ – プラットフォームが抽出されたデータをキャッシュする(通常24〜48時間)
  5. プレビュー生成 – キャッシュされたデータを使用してプレビューカードがレンダリングされる
  6. 表示 – プレビューがユーザーのフィードまたはメッセージに表示される

このプロセスを理解することは重要です。なぜなら、OGタグへの変更がすぐに表示されない理由を説明するからです。ほとんどのプラットフォームは、サーバーの負荷を軽減するためにプレビューデータを積極的にキャッシュします。

クイックヒント: OGタグを更新した後、プラットフォーム固有のデバッグツールを使用してキャッシュの更新を強制してください。これらのツールについては、デバッグセクションで説明します。

必須のOpen Graphタグ

4つのOGタグは、適切に定義されたOpen Graphオブジェクトに必要と見なされています。これらのタグがないページでもプレビューが生成される場合がありますが、結果は予測不可能で、多くの場合品質が低くなります。

必要な最小限の実装は次のとおりです:

<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

og:title

ソーシャルメディアプレビューに表示されるコンテンツのタイトル。これは間違いなく最も重要なタグです。なぜなら、ユーザーが最初に目にするものだからです。

ベストプラクティス:

例:

<meta property="og:title" content="10 Proven Strategies to Double Your Email Open Rates">

og:type

ページが表すコンテンツのタイプ。これにより、プラットフォームがコンテンツの性質を理解し、表示または分類方法に影響を与える可能性があります。

一般的な値:

ほとんどのWebサイトやブログ投稿では、websiteまたはarticleのいずれかを使用します。articleタイプを使用すると、article:published_timeやarticle:authorなどの追加タグが有効になります。

例:

<meta property="og:type" content="article">

og:image

プレビューカードに表示される画像のURL。これはエンゲージメントにとって重要です – 画像付きの投稿は、テキストのみのプレビューよりも大幅に多くのクリックと共有を受け取ります。

要件:

例:

<meta property="og:image" content="https://example.com/images/social-preview.jpg">

画像の仕様と最適化については、以下の専用セクションで詳しく説明します。

og:url

ページの正規URL。これは、このコンテンツに関連付けたい永続的で優先されるURLである必要があります。

ベストプラクティス:

例:

<meta property="og:url" content="https://example.com/ja/blog/email-marketing-guide">

プロのヒント: og:urlの値は正規URLと一致する必要があります。これにより、ソーシャルシグナルが統合され、重複コンテンツの問題が防止されます。すべてのメタタグの一貫性を確保するには、当社のメタタグジェネレーターを使用してください。

オプションのOpen Graphタグ

4つの必須タグに加えて、Open Graphは、追加のコンテキストを提供し、ソーシャルプラットフォームでのコンテンツの表示を改善する多数のオプションタグをサポートしています。

og:description

コンテンツの簡単な説明。これは、ほとんどのプレビューカードでタイトルの下に表示されます。

ベストプラクティス:

例:

<meta property="og:description" content="Learn proven email marketing strategies that top marketers use to achieve 40%+ open rates. Includes templates and real examples.">

og:site_name

Webサイトまたはブランドの名前。これはページタイトルとは別に表示され、ブランド認知に役立ちます。

例:

<meta property="og:site_name" content="SEO-IO">

og:locale

コンテンツの言語と地域フォーマット。指定されていない場合、デフォルトはen_USです。

例:

<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">

記事固有のタグ

og:typeの値としてarticleを使用する場合、追加のメタデータを含めることができます:

<meta property="article:published_time" content="2026-03-31T09:00:00Z">
<meta property="article:modified_time" content="2026-03-31T14:30:00Z">
<meta property="article:author" content="https://example.com/author/john-doe">
<meta property="article:section" content="Email Marketing">
<meta property="article:tag" content="email">
<meta property="article:tag" content="marketing">
<meta property="article:tag" content="conversion">

これらのタグは、プラットフォームがコンテンツのコンテキストを理解するのに役立ち、分類または表示方法に影響を与える可能性があります。

画像拡張タグ

OG画像に関する追加情報を提供します:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Infographic showing email open rate statistics">
<meta property="og:image:type" content="image/jpeg">

幅と高さを含めることで、プラットフォームは画像を最初にダウンロードすることなく、より速くプレビューをレンダリングできます。代替テキストはアクセシビリティを向上させ、フォールバックコンテキストを提供します。

TwitterカードとXプラットフォーム

Twitter(現在のX)は、Open Graphが広まる前に、Twitterカードと呼ばれる独自のメタタグシステムを開発しました。TwitterカードはOpen Graphタグとは異なるタグ名を使用しますが、同じ目的を果たします。

良いニュース: TwitterカードタグがなくてもTwitterはOpen Graphタグにフォールバックします。ただし、Twitter固有のタグを使用すると、プラットフォームでのコンテンツの表示をより細かく制御できます。

Twitterカードのタイプ

Twitterはいくつかのカードタイプをサポートしていますが、主に次の2つを使用します:

カードタイプ 使用例 画像サイズ
summary 小さな正方形の画像を持つデフォルトカード 1:1アスペクト比(例: 400×400)
summary_large_image 大きな画像カード(ほとんどのコンテンツに推奨) 2:1アスペクト比(例: 1200×600)
app モバイルアプリのプロモーション さまざま
player ビデオまたはオーディオコンテンツ さまざま

ほとんどのWebサイトやブログ投稿では、summary_large_imageを使用してください。

We use cookies for analytics. By continuing, you agree to our Privacy Policy.