OpenGraphタグ

何を学ぶか

このレッスンの最後には、OpenGraph タグとは何か、なぜ SEO にとって重要なのか、そしてソーシャル メディアのエンゲージメントとクリックスルー率を高めるために Web サイトに正しく実装する方法を理解できるようになります。

OpenGraph タグとは何ですか?

OpenGraphタグは、Facebook、LinkedIn、Twitter、WhatsAppなどのソーシャルメディアプラットフォームでコンテンツを共有した際に、コンテンツの表示方法を制御するコードスニペットです。2010年にFacebookによって作成され、現在ではウェブ全体で使用されています。

簡単な例: Facebookでリンクをシェアすると、タイトル、説明、画像が表示されることにお気づきですか？これはOpenGraphの仕組みです。

OpenGraphタグがSEOに重要な理由

OpenGraph タグは Google のランキングを直接向上させるわけではありませんが、次の点で SEO 戦略に大きな影響を与えます。

クリックスルー率 (CTR) の向上

適切に最適化されたタグは、ソーシャル メディアからのクリックを促進する魅力的なプレビューを作成します。

より良いユーザーエクスペリエンス

ユーザーはクリックする前に何が期待できるかを正確に把握できるため、直帰率が低減します。

ブランドコントロール

ソーシャル プラットフォーム上のコンテンツを表す画像、タイトル、説明を決定します。

ソーシャルシェアの増加

魅力的なプレビューはより多くの共有につながり、トラフィックとバックリンクを生み出すことができます。

必須のOpenGraphタグ

すべてのページに必要な 4 つのコア OpenGraph タグは次のとおりです。

og:title – 見出しタグ

ソーシャル メディアのプレビューに表示される見出し。

HTML
<meta property="og:title" content="10 SEO Tips to Rank #1 on Google" />

タイトルのベストプラクティス

最適な表示のために 60 文字以下にしてください。

og:description – 概要タグ

コンテンツの簡単な要約。

HTML
<meta property="og:description" content="Learn proven SEO strategies that helped 500+ websites reach the first page of Google in 2025." />

説明のベストプラクティス

155～160文字を目安に、説得力があり、行動を促す内容にしましょう。

og:image – あなたのビジュアルタグ

リンクとともに表示されるビジュアル。

HTML
<meta property="og:image" content="https://yoursite.com/images/seo-tips.jpg" />

画像のベストプラクティス

  • 1200 x 630ピクセル（推奨サイズ）を使用してください
  • ファイルサイズを8MB以下に抑える
  • JPGまたはPNG形式を使用する

og:url – リンクタグ

ページの正規 URL。

HTML
<meta property="og:url" content="https://yoursite.com/seo-tips" />

URLのベストプラクティス

常に完全な絶対 URL を使用してください。

追加の重要なタグ

必須の 4 つのタグに加えて、これらのタグはソーシャル メディアでの存在感をさらに制御できるようにします。

og:type – コンテンツタイプタグ

コンテンツの種類を定義します。

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

一般的なコンテンツタイプ

  • ウェブサイト
  • 記事
  • ビデオ
  • BOX

og:site_name – ブランド名タグ

あなたのウェブサイトまたはブランド名。

HTML
<meta property="og:site_name" content="ClickRank SEO Academy" />

og:locale – 言語タグ

コンテンツの言語と地域。

HTML
<meta property="og:locale" content="en_US" />

ステップバイステップの実装ガイド

OpenGraph タグを Web サイトに追加するには、次の 4 つの簡単な手順に従ってください。

ステップ1: HTMLのヘッダーセクションにタグを追加する

すべてのOpenGraphタグを <head> HTML ドキュメントのセクション。

ステップ2：各ページをカスタマイズする

すべてのページには、一意の og:title、og:description、および og:url タグが必要です。

ステップ3: タグをテストする

Facebook の共有デバッガーまたは LinkedIn の投稿インスペクターを使用して、コンテンツがどのように表示されるかをプレビューします。

ステップ 4: パフォーマンスを監視する

ソーシャルメディアの参照トラフィックを追跡する Google Analytics 効果を測定するため。

実例: 完全な実装

SEO に関するブログ投稿は次のようになります。

HTML
<head>
  <meta property="og:title" content="Master Keyword Research in 5 Simple Steps" />
  <meta property="og:description" content="Discover how to find profitable keywords that drive organic traffic. Includes free tools and templates." />
  <meta property="og:image" content="https://clickrank.com/images/keyword-research-guide.jpg" />
  <meta property="og:url" content="https://clickrank.com/keyword-research-guide" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="ClickRank SEO Academy" />
  <meta property="og:locale" content="en_US" />
</head>

避けるべき一般的な間違い

ソーシャル メディアのパフォーマンスに悪影響を与える 5 つの間違いから学びましょう。

間違い1：すべてのページで同じタグを使用する

各ページには、その特定のコンテンツを正確に説明する固有のタグが必要です。

なぜこれが問題

汎用タグはユーザーを混乱させ、クリック率を低下させます。

間違い2：画像のURLを更新し忘れる

画像リンクが壊れていると、ビジュアルのない一般的なプレビューが表示されます。

修正方法

常に絶対 URL を使用し、公開する前にテストしてください。

間違い3：画像のサイズを無視する

画像が小さすぎる場合やアスペクト比が間違っている場合は、適切に切り取られません。

ソリューション

一貫性のあるプロフェッショナルなプレビューを実現するには、1200 x 630 ピクセルにこだわってください。

間違い4：一般的な説明を書く

「当社のウェブサイトをご覧ください」だけではクリックを促せません。提供する価値を具体的に示しましょう。

代わりに何をすべきか

メリットに焦点を当て、明確な行動喚起を盛り込みます。

間違い5：公開前にテストをしない

公開する前に、必ずデバッグ ツールを使用してタグを検証してください。

使用するテストツール

Facebook Sharing Debugger と LinkedIn Post Inspector はエラーを早期に検出します。

OpenGraph vs. Twitter カード

OpenGraphはほとんどのプラットフォームで動作しますが、TwitterはTwitterカードと呼ばれる独自のシステムを使用しています。多くのプラットフォームでは、Twitterカードが利用できない場合、OpenGraphにフォールバックします。

両方のシステムの実装

互換性を最大限に高めるには、OpenGraph と Twitter カードの両方を使用します。

HTML
<!-- OpenGraph -->
<meta property="og:title" content="Your Title" />

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />

それぞれをいつ使用するか

OpenGraph の使用目的:

  • Facebook、LinkedIn、WhatsApp、そしてほとんどのソーシャルプラットフォーム

Twitter カードの用途:

  • TwitterとXプラットフォーム

OpenGraph タグをテストするためのツール

これら 4 つのツールは、OpenGraph の実装を検証およびプレビューするのに役立ちます。

Facebook共有デバッガ

URL: developers.facebook.com/tools/debug

それは何をする

コンテンツが Facebook 上でどのように表示されるかを正確に表示し、キャッシュをクリアします。

LinkedInポストインスペクター

URL: linkedin.com/post-inspector

それは何をする

LinkedIn フィードに表示されるコンテンツをプレビューします。

オープングラフ.xyz

複数のプラットフォームに対応したクイックプレビューツール

それは何をする

Facebook、Twitter、LinkedIn などで同時にタグをテストします。

ブラウザ拡張

Chrome用の「OpenGraph Preview」などのOpenGraphチェッカーをインストールする

それは何をする

ブラウザから直接、任意のページの OpenGraph タグを確認します。

WordPressユーザー: 簡単な実装

WordPress を使用する場合、これらのプラグインを使用すると OpenGraph の実装が簡単になります。

Yoast SEO

カスタマイズオプション付きの自動OpenGraph生成

他社とのちがい

  • ビジュアルプレビューエディター
  • 自動タグ生成
  • ソーシャルメディアの統合

Rank Math

ソーシャルメディアのプレビューと編集機能が組み込まれています

他社とのちがい

  • ワンクリックの最適化
  • 複数プラットフォームのサポート
  • リアルタイムプレビュー

All in One SEO

包括的なソーシャルメタタグ管理

他社とのちがい

  • 高度なカスタマイズ
  • 一括編集オプション
  • パフォーマンス追跡

成功の測定

これらのメトリックを追跡して、OpenGraph の最適化を評価します。

ソーシャルリファラルトラフィック

Google Analytics で Facebook、LinkedIn などからの増加を確認します。

追跡方法

Google アナリティクスで、「集客」>「すべてのトラフィック」>「参照元/メディア」に移動します。

エンゲージメント率

共有リンクのいいね、シェア、コメントを監視する

何を探すために

エンゲージメントが高いほど、プレビューが魅力的であることを示します。

クリックスルー率

最適化前後のクリック率を比較する

ベンチマーク目標

ソーシャル CTR を少なくとも 20% 向上させることを目指します。

直帰率

直帰率が低いほど、コンテンツのマッチングが良いことを示しています。

ターゲット指標

直帰率が 50% 未満の場合、コンテンツとプレビューの配置が適切であることを示します。

主要なポイント（要点）

OpenGraph タグについて覚えておくべきことは次のとおりです。

  • OpenGraphタグは、ソーシャルメディア上でコンテンツがどのように表示されるかを制御します。
  • 4 つの必須タグ: og:title、og:description、og:image、og:url
  • 最良の結果を得るには、画像は1200 x 630ピクセルにしてください。
  • 公開する前に必ずタグをテストしてください
  • 各ページのタグをカスタマイズして最大限の効果を実現
  • ソーシャル リファラル トラフィックを監視して成功を測定する

OpenGraph タグを Web サイトに追加しないとどうなりますか?

OpenGraphタグがないと、ソーシャルプラットフォームは自動的にページからコンテンツを取得し、間違った画像や不完全なテキストを含む低品質のプレビューが表示されることがよくあります。これによりクリック率が低下し、コンテンツの共有性が低下します。適切なタグを追加することで、コンテンツの表示方法を完全に制御できます。

OpenGraph タグはすべてのソーシャル メディア プラットフォームで機能しますか?

OpenGraphタグは、Facebook、LinkedIn、WhatsApp、Pinterest、Slackなど、ほとんどの主要プラットフォームで動作します。Twitterは主にTwitterカードを使用しますが、カードが存在しない場合はOpenGraphにフォールバックします。Instagramは投稿にリンクプレビューを表示しないため、OpenGraphタグは適用されません。

OpenGraph の変更が反映されるまでどのくらい時間がかかりますか?

新しい共有はすぐに反映されます。ただし、ソーシャルプラットフォームは古いデータをキャッシュするため、以前に共有されたリンクは自動的に更新されません。Facebookの共有デバッガーまたはLinkedInの投稿インスペクターを使用してキャッシュをクリアし、既に共有されているURLを強制的に更新してください。

異なるソーシャル プラットフォームごとに異なる OpenGraph 画像を使用できますか?

はい、プラットフォーム固有の画像を指定できます。例えば、一般的なプラットフォームの場合は og:image 、Twitterの場合は twitter:image を使用します。各プラットフォームでは、利用可能な場合は固有のタグが使用され、利用できない場合は og:image にフォールバックされます。これにより、各プラットフォームのサイズに合わせて画像を最適化できます。

OpenGraph タグを HTML 内のどこに配置すればよいのでしょうか?

すべてのOpenGraphタグは、HTMLドキュメントのheadセクション内、head終了タグの前に配置してください。タイトルタグとその他のメタタグの後に配置する必要があります。順序は機能には影響しませんが、まとめて配置することでコードの構成が改善されます。

すべてのページに OpenGraph タグが必要ですか?

はい、ソーシャルメディアで共有される可能性のあるすべてのページには、固有のOpenGraphタグが必要です。ブログ記事、商品ページ、ランディングページ、そしてホームページもこれに含まれます。タグのないページは、共有時に汎用的なプレビューや誤ったプレビューが表示され、クリック率の低下につながります。

ロケット

SEOを自動化する

1 クリックでオーガニック トラフィックを増やすことができます。

今すぐ最適化を始めましょう!

SEOアカデミー

  1. AMP