本文へスキップ

オープングラフ(Open Graph)とは?

image

定義​

オープングラフ(Open Graph Protocol)は、Facebookが2010年に開発したメタデータプロトコルで、ソーシャルメディアで共有される際にWebページがどのように表示されるかを制御する技術です。簡単に言えば、Facebook、KakaoTalk、LinkedInなどでブログリンクを共有する際に表示されるタイトル、説明、画像を事前に定義するHTMLメタタグです。

オープングラフを使用すると、WebページをソーシャルメディアのThe 'オブジェクト(Object)' にすることができます。例えば、ブログ記事を共有した際、単にURLだけが表示されるのではなく、魅力的なサムネイル画像とともにタイトル、要約説明がカード形式で美しく表示されます。これによりクリック率が大幅に向上し、ソーシャルメディアマーケティングの中核要素となっています。

オープングラフは、<head>セクションに<meta property="og:xxx">形式のタグで実装されます。Facebookで始まりましたが、現在はTwitter(X)、LinkedIn、Slack、KakaoTalk、Lineなど、ほとんどのソーシャルプラットフォームで標準として採用されています。オープングラフがない場合、ソーシャルプラットフォームはページのコンテンツを任意に抽出するため、意図しない画像やテキストが表示される可能性があります。

特徴​

  • ソーシャルメディア最適化: リンク共有時にタイトル、説明、画像を正確に制御してクリック率を大幅に向上させます。研究によると、オープングラフ画像があるリンクは最大200%高いエンゲージメントを示します。
  • 標準プロトコル: Facebookが開発しましたが、現在はほぼすべてのソーシャルプラットフォームでサポートされる事実上の業界標準です。一度設定すれば複数のプラットフォームで活用されます。
  • 簡単な実装: HTML <head>セクションにメタタグを追加するだけなので、技術的に複雑ではありません。プログラミング知識がなくても誰でも簡単に適用できます。
  • デバッグツール提供: Facebook、LinkedInなどは、オープングラフタグをテストしてプレビューできる公式デバッグツールを提供しています。
  • 検索エンジンにも有用: オープングラフ情報は検索エンジンも参照するため、SEOにも間接的に役立ちます。特に画像検索最適化に効果的です。

活用方法​

オープングラフを効果的に活用する方法は以下の通りです。

ステップ1: 必須オープングラフタグの追加 Webページの<head>セクションに基本的なオープングラフタグを追加します。最低限og:title、og:type、og:url、og:imageの4つは必ず含める必要があります。これらがオープングラフの核心4大要素です。

<head>
  <meta property="og:title" content="ブログSEO最適化完全ガイド">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

ステップ2: オプションタグの追加 より豊富な情報を提供するために、説明、サイト名、ロケールなどを追加します。og:descriptionは特に重要で、クリックを促す魅力的な説明を作成する必要があります。

<meta property="og:description" content="初心者でも簡単に従えるブログSEO最適化方法をステップバイステップでお伝えします。">
<meta property="og:site_name" content="Zero-Cokeブログ">
<meta property="og:locale" content="ja_JP">

ステップ3: 画像の最適化 オープングラフで最も重要なのは画像です。サムネイル画像は第一印象を決定するので慎重に選択する必要があります。Facebookは1200x630pxサイズを推奨しており、最小600x314px以上である必要があります。ファイルサイズは8MB以下に保ちます。

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SEO最適化ガイドサムネイル">

ステップ4: コンテンツタイプ別追加タグ ブログ記事(article)の場合、著者、発行日、セクションなどの追加情報を提供できます。これはニュースフィードでより豊富な情報を表示するのに役立ちます。

<meta property="article:author" content="田中太郎">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="ブログ">
<meta property="article:tag" content="SEO">

ステップ5: デバッグとテスト タグを追加した後は必ずテストする必要があります。Facebookシェアデバッガー(https://developers.facebook.com/tools/debug/)にURLを入力すると、オープングラフがどのように表示されるかをプレビューできます。エラーがあればすぐに修正してください。

ステップ6: キャッシュの更新 すでに共有されたURLのオープングラフを変更した場合、ソーシャルプラットフォームのキャッシュを更新する必要があります。Facebookシェアデバッガーで「再スクレイプ」ボタンをクリックすると、最新情報に更新されます。各プラットフォームは同様のツールを提供しています。

例​

例1: ブログ記事の基本オープングラフ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>バックリンクとは? SEO初心者ガイド</title>

  <!-- 基本オープングラフタグ -->
  <meta property="og:title" content="バックリンクとは? SEO初心者のための完全ガイド">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="バックリンクの定義と重要性、獲得方法まで初心者でも簡単に理解できるように説明します。">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="ja_JP">

  <!-- 記事関連追加タグ -->
  <meta property="article:author" content="田中太郎">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="バックリンク">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="検索エンジン最適化">
</head>
<body>
  <!-- ページコンテンツ -->
</body>
</html>

例2: 画像最適化を含むオープングラフ

<head>
  <!-- 基本情報 -->
  <meta property="og:title" content="2024年デジタルマーケティングトレンド">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- 詳細な画像情報 -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="2024年デジタルマーケティングトレンドインフォグラフィック">

  <!-- 複数の画像提供(プラットフォームが選択) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- 追加情報 -->
  <meta property="og:description" content="AI、インフルエンサーマーケティング、ショートフォームコンテンツなど、2024年に注目すべきデジタルマーケティングトレンドを分析します。">
  <meta property="og:site_name" content="マーケティングインサイト">
</head>

例3: Eコマース商品ページ

<head>
  <!-- 商品基本情報 -->
  <meta property="og:title" content="プレミアムワイヤレスBluetoothイヤホン - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="ノイズキャンセリング機能を搭載した高品質ワイヤレスイヤホン。最大30時間再生可能。">

  <!-- 商品特化情報 -->
  <meta property="product:price:amount" content="12900">
  <meta property="product:price:currency" content="JPY">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- 追加画像 -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

例4: 動画コンテンツ

<head>
  <!-- 動画基本情報 -->
  <meta property="og:title" content="ブログ収益化完全ガイド(2024年最新)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="ブログで月10万円稼ぐ。AdSense、アフィリエイトマーケティング、デジタル製品販売まですべての方法をお教えします。">

  <!-- 動画特化情報 -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:type" content="video/mp4">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  <meta property="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- YouTube埋め込みURL -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

例5: Webサイトホームページ

<head>
  <!-- Webサイト全体情報 -->
  <meta property="og:title" content="Zero-Coke - ブログSEO最適化専門メディア">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="ブログSEO、検索エンジン最適化、Web開発に関する専門知識を共有します。初心者から専門家まですべての方のための実用的なガイド。">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:locale:alternate" content="en_US">

  <!-- ソーシャルメディアプロフィール -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

メリットとデメリット​

メリット​

  • クリック率の大幅向上: 魅力的なサムネイルと説明を含むリンクは、テキストのみのリンクよりクリック率が2〜3倍高くなります。ソーシャルメディアトラフィックを増やす最も効果的な方法です。

  • ブランドイメージの強化: 一貫したオープングラフ画像と説明を使用することで、専門的で信頼できるブランドイメージを構築できます。よくデザインされたサムネイルはブランド認知度を高めます。

  • 汎用性と互換性: 一度設定すれば、Facebook、Twitter、LinkedIn、KakaoTalk、Slackなど、ほとんどのプラットフォームで自動的に適用されます。プラットフォームごとに個別に設定する必要はありません。

デメリット​

  • 画像制作の負担: 各ページごとに適切なオープングラフ画像を制作する必要があるため、デザインリソースが必要です。特にブログ記事が多い場合は、かなりの作業量になる可能性があります。

  • キャッシュの問題: ソーシャルプラットフォームはオープングラフ情報をキャッシュするため、変更がすぐに反映されません。手動でキャッシュを更新する必要があり、すでに共有されたリンクは更新されない可能性があります。

  • プラットフォーム間の違い: ほとんどのプラットフォームがオープングラフをサポートしていますが、一部は独自のタグを優先します。例えば、TwitterはTwitter Cardを優先使用するため、完璧な最適化のためには追加作業が必要な場合があります。

FAQ​

Q: オープングラフがない場合はどうなりますか? A: オープングラフタグがなくてもリンク共有は可能ですが、ソーシャルプラットフォームがページから情報を任意に抽出します。この場合、意図しない画像やテキストが表示される可能性があり、サムネイルが全く表示されないこともあります。結果的にクリック率が大幅に低下します。

Q: オープングラフ画像の最適サイズは? A: Facebookは1200x630px(比率1.91:1)を推奨しています。最小サイズは600x314pxで、これより小さいと品質が低下します。正方形の画像(1200x1200px)も一緒に提供すると、さまざまなプラットフォームでよりよく表示されます。ファイルサイズは8MB以下、形式はJPGまたはPNGが良いです。

Q: og:titleとHTML titleタグの違いは? A: HTML <title>タグはブラウザタブと検索結果に表示されるタイトルで、og:titleはソーシャルメディアで共有される際に表示されるタイトルです。2つは同じでも構いませんが、ソーシャルメディアではより短く強烈なタイトルを使用する方が効果的な場合があります。例: <title>は「バックリンクとは? 定義、特徴、獲得方法完全ガイド | Zero-Coke」、og:titleは「バックリンクでブログランキングを上げる方法」

Q: オープングラフを修正しましたが変更されません。どうすればいいですか? A: ソーシャルプラットフォームはパフォーマンス向上のためにオープングラフ情報をキャッシュします。Facebookシェアデバッガー(https://developers.facebook.com/tools/debug/)で「再スクレイプ」ボタンをクリックしてキャッシュを更新してください。LinkedInはPost Inspector(https://www.linkedin.com/post-inspector/)、TwitterはCard Validatorを使用できます。すでに共有された投稿は更新されないため、重要な変更であれば再共有が必要な場合があります。