SNSでサイトのURLをシェアしたとき、タイトルや画像がうまく表示されなくて困った経験はありませんか？その原因の多くは、OGPタグの設定が不十分であることにあります。OGPタグを正しく設定することで、SNS上のプレビュー表示を意図通りにコントロールできるようになります。本記事では、OGPタグの基本から実際の設定方法・確認ツールまでを丁寧に解説します。

OGPタグとは？SNSシェア時のプレビューを制御する仕組み

OGPタグとは？SNSシェア時のプレビューを制御する仕組み

OGPタグとは、SNSでURLをシェアしたときに表示されるタイトル・画像・説明文などのプレビュー情報をコントロールするためのHTMLタグです。各H3では、その意味・役割、未設定時の影響、対応するSNSの種類について詳しく見ていきます。

OGPタグの基本的な意味と役割

OGPとは「Open Graph Protocol（オープングラフプロトコル）」の略で、Facebookが策定したWebページの情報をSNSに伝えるための仕組みです。HTMLの<head>タグ内に<meta>タグとして記述し、ページのタイトル・説明文・サムネイル画像・URLといった情報をSNS側に正確に伝える役割を担います。

わかりやすく例えると、OGPタグはWebページの「名刺」のようなものです。SNSのクローラー（情報を収集するプログラム）がページを巡回したとき、この名刺を読み取り、シェアカードとして表示する仕組みになっています。OGPタグがあることで、ユーザーがリンクをクリックする前から「どんな内容のページか」を視覚的に伝えることができます。

OGPタグがないとSNSでどんな表示になるか

OGPタグが設定されていない場合、SNSはページ内の情報を独自のルールで自動取得しようとします。その結果、意図しない画像が選ばれたり、タイトルが不完全な形で表示されたり、説明文が空欄になったりすることがあります。

特に問題になりやすいのが画像です。OGPタグで画像を指定していないと、SNSがページ内の画像を無作為に選んでしまい、アイキャッチとは無関係な小さなアイコンや装飾画像が表示されてしまうケースもあります。こうした見栄えの悪いプレビューは、ユーザーの目に止まりにくくなり、クリック率の低下につながる可能性があります。OGPタグは「設定しなくても問題ない」ではなく、「設定しないと損をする」ものだと理解しておきましょう。

OGPタグが使われている主なSNSの種類

OGPタグは、現在多くのSNSやメッセージングアプリで広く活用されています。主な対応サービスは以下の通りです。

SNS・サービスOGP対応状況
FacebookOGPタグをフル活用（App-ID設定も推奨）
X（旧Twitter）OGPをベースにTwitterカード独自タグも使用
LINEOGPタグを読み取りプレビュー表示
SlackOGPタグをもとにリンクプレビューを生成
DiscordOGPタグを読み取りリッチプレビューを表示

XはOGPタグに加えてtwitter:cardなどの独自タグも用いるため、より細かい表示設定が可能です。LINEやSlack、Discordなどのチャットツールでも対応しており、OGPタグを設定しておくことで幅広い場面でリッチな表示を実現できます。

OGPタグを設定すべき理由

OGPタグを設定すべき理由

OGPタグの設定は、SNSシェア時の見栄えを整えるだけにとどまらず、クリック率の改善やブランドイメージの統一、さらにはSEOへの間接的な効果も期待できます。それぞれの理由を詳しく解説します。

SNSシェア時のクリック率が上がりやすくなる

SNSのタイムラインは情報があふれており、ユーザーが投稿に目を止める時間はわずかです。そのような環境において、視覚的に魅力的なプレビュー表示はクリックを促す大きな要因になります。

OGPタグで適切なタイトル・説明文・画像を設定することで、「このリンクを開くと何が得られるのか」が一目でわかるようになります。特にog:imageで高品質な画像を指定した場合、テキストのみのリンクと比べてクリック率（CTR）が大幅に向上するケースが報告されています。シェアされるたびに自動で正確な情報が表示されるため、SNSを通じたサイトへの流入増加が期待できます。

意図しない画像やタイトルが表示されるリスクを防げる

OGPタグを設定しておくことで、SNSが勝手に情報を選ぶ「誤表示」のリスクをほぼゼロにできます。これはブランドイメージの保護という観点でも非常に重要です。

例えば、企業サイトがSNSでシェアされた際に、ロゴではなく関係のないバナー画像や文字だけの画面キャプチャが表示されてしまったとすると、ブランドの信頼性に傷がつく可能性があります。OGPタグで表示内容を明示的に指定しておけば、誰かがシェアしてくれるたびに一貫した情報が表示されるため、意図しない見え方を未然に防ぐことができます。

SEOへの間接的な効果も期待できる

OGPタグ自体はGoogleの検索順位に直接影響を与えるものではありませんが、間接的なSEO効果は十分に期待できます。

OGPタグによって魅力的なプレビューが表示されると、SNS上でのシェア数・エンゲージメントが増加します。多くシェアされたコンテンツはSNSから多くの流入を生み、サイトへの訪問者数やページの被リンク数が増える可能性があります。Googleはこうした外部からの評価をランキング要因のひとつとして捉えているため、結果的に検索順位の向上にもつながる可能性があります。OGPタグの設定はSNSマーケティングとSEOの両面を支える施策といえるでしょう。

OGPタグの種類と書き方一覧

OGPタグの種類と書き方一覧

OGPタグにはページのURL・タイトル・画像など、様々な情報を指定するためのプロパティが用意されています。ここでは必須・推奨タグを中心に、それぞれの書き方と設定のポイントを解説します。

OGPを使うための宣言タグの書き方

OGPタグを使用するには、まずHTMLの<html>タグにOGPの名前空間を宣言する必要があります。具体的には以下のように記述します。

<html lang="ja" prefix="og: https://ogp.me/ns#">Code language: HTML, XML (xml)

また、<html>タグに追記するのが難しい場合は、<head>タグに下記のようにprefix属性を記述する方法もあります。

<head prefix="og: https://ogp.me/ns#">Code language: HTML, XML (xml)

この宣言がないと、一部の環境でOGPタグが正しく認識されないことがあります。OGPタグを設定する際は、まずこの宣言をHTMLの先頭部分に忘れずに記述しておきましょう。

ページのURL（og:url）

og:urlは、シェアされるページの正規URLを指定するプロパティです。SNSがシェアカードを生成する際にどのURLを正として扱うかを明示する役割を持ちます。

<meta property="og:url" content="https://example.com/sample-page/">Code language: HTML, XML (xml)

URLはスラッシュの有無やHTTP/HTTPSの違いも含めて統一して記述することが重要です。特にリダイレクトが設定されているサイトでは、最終的な正規URLを指定するようにしてください。これにより、同じページがいくつかの異なるURLからシェアされた場合でも、1つのURLにシェア数が集約されます。

ページの種類（og:type）

og:typeは、シェアするページのコンテンツタイプを指定するプロパティです。指定できる主な値は下表の通りです。

値用途
website一般的なWebページ（トップページなど）
articleブログ記事やニュースページ
blogブログのトップページ
video.movie動画コンテンツ
<meta property="og:type" content="article">Code language: HTML, XML (xml)

多くの場合、一般的なページにはwebsite、ブログ記事にはarticleを指定すれば問題ありません。SNSによってはog:typeの値に応じて表示形式が変わることもあるため、コンテンツの性質に合った値を選ぶようにしましょう。

ページのタイトル（og:title）

og:titleは、SNSのシェアカードに表示されるページのタイトルを指定するプロパティです。HTMLの<title>タグと必ずしも同じ内容にする必要はなく、SNSでのシェアを意識した魅力的な文言に調整することも可能です。

<meta property="og:title" content="OGPタグの設定方法を初心者向けにわかりやすく解説">Code language: HTML, XML (xml)

タイトルの文字数はSNSによって表示できる上限が異なります。Facebookでは全角で概ね30〜40文字以内、Xでは70文字程度が表示の目安です。長すぎると途中で切れてしまうため、重要な情報は前半に入れるよう意識しましょう。

サムネイル画像のURL（og:image）

og:imageは、SNSのシェアカードに表示されるサムネイル画像のURLを指定するプロパティです。視覚的な第一印象を決める最も重要なプロパティのひとつです。

<meta property="og:image" content="https://example.com/images/ogp-image.jpg">Code language: HTML, XML (xml)

画像のURLは必ず絶対URLで記述してください。相対URLでは正しく読み込まれないことがあります。また、画像サイズやファイル形式については推奨仕様があるため、詳しくは後述の「OGP画像の推奨サイズと注意点」セクションをご確認ください。

サイト名（og:site_name）

og:site_nameは、Webサイト全体の名称を指定するプロパティです。個々のページタイトルとは別に、「このページがどのサイトに属するか」をSNSに伝えるために使用します。

<meta property="og:site_name" content="ブログ名・サービス名">Code language: HTML, XML (xml)

Facebookのシェアカードでは、タイトルの下にサイト名が表示されることがあります。ブランドの認知向上につながるため、全ページで一貫したサイト名を設定することをおすすめします。記事ページごとに個別の名前を設定する必要はなく、サイト共通の名称を使い回すのが一般的です。

ページの説明文（og:description）

og:descriptionは、シェアカードに表示されるページの概要テキストを指定するプロパティです。ユーザーがリンクをクリックするかどうかを決める重要な要素です。

<meta property="og:description" content="OGPタグの基本から設定手順・確認ツールまでをわかりやすく解説します。">Code language: HTML, XML (xml)

HTMLの<meta name="description">と同じ文章を流用することも可能ですが、SNSでシェアされることを意識した訴求力のある文章に調整すると効果的です。推奨される文字数については後述のセクションで詳しく解説しますが、概ね全角80〜120文字以内に収めると見切れにくくなります。

言語の指定（og:locale）

og:localeは、ページのコンテンツが使用している言語と地域を指定するプロパティです。日本語のサイトであればja_JPを指定します。

<meta property="og:locale" content="ja_JP">Code language: HTML, XML (xml)

og:localeは必須ではありませんが、SNSが適切な言語設定でコンテンツを処理するために設定しておくことが推奨されます。多言語対応のサイトの場合は、og:locale:alternateタグで他の言語バージョンのロケールを追加指定することも可能です。日本語のみのサイトであれば、ja_JPを記述しておくだけで十分です。

OGPタグをHTMLに設定する手順

OGPタグをHTMLに設定する手順

OGPタグの各プロパティを理解したら、実際にHTMLへの記述方法を確認しましょう。記述場所・コード例・画像サイズの注意点をステップごとに解説します。

OGPタグを記述する場所（headタグ内）

OGPタグは、HTMLの<head>タグの内側に記述します。<body>タグの中には記述できませんので注意してください。

具体的には、<meta charset="UTF-8">や<title>タグの近くに並べて記述するのが一般的です。<head>タグ内であればどの位置でも機能しますが、他のメタタグとまとめて管理すると見やすくなります。

WordPressなどのCMSを使用している場合は、テーマファイルのheader.php、または専用のプラグインを使って一括設定することが多いです。直接HTMLを編集する場合は、各ページの<head>内に同様のタグを記述してください。

基本的なOGPタグのコード例

以下は、一般的なWebページに設定する基本的なOGPタグのコード例です。

<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>

  <!-- OGPタグ -->
  <meta property="og:url" content="https://example.com/sample-page/">
  <meta property="og:type" content="article">
  <meta property="og:title" content="ページのタイトル">
  <meta property="og:description" content="ページの説明文をここに記述します。">
  <meta property="og:image" content="https://example.com/images/ogp-image.jpg">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:locale" content="ja_JP">
</head>Code language: HTML, XML (xml)

この7つのプロパティが揃っていれば、主要なSNSでのプレビュー表示に対応できます。各content属性の値を自分のサイトの内容に合わせて書き換えて使用してください。

OGP画像の推奨サイズと注意点

SNSのプレビューで画像が正しく表示されるよう、og:imageに指定する画像のサイズと形式には推奨仕様があります。

推奨サイズ： 1200px × 630px（アスペクト比 1.91:1）

このサイズはFacebook・X・LINEなど多くのSNSで最適に表示されます。以下の注意点も合わせて確認しておきましょう。

  • ファイル形式はJPEGまたはPNGが推奨（WEBPは一部SNSで未対応の場合あり）
  • ファイルサイズは8MB以下が目安
  • 画像URLは絶対パスで記述する
  • 小さすぎる画像（600px未満など）は表示されないことがある
  • テキストを画像に入れる場合は、重要な情報が端に寄りすぎないよう中央寄りに配置する

画像サイズをあらかじめ1200×630pxに合わせて制作しておくと、様々なSNSで崩れのないきれいな表示が実現しやすくなります。

WordPressでOGPタグを設定する方法

WordPressでOGPタグを設定する方法

WordPressでOGPタグを設定するには、テーマの標準機能を活用する方法と、SEOプラグインを使う方法の2つがあります。それぞれの特徴と手順を確認しましょう。

テーマの機能を使って設定する方法

WordPressの一部テーマには、OGPタグを自動で出力する機能が標準搭載されています。代表的なものとして「SWELL」「JIN:R」「Cocoon」などの国産テーマが挙げられます。

これらのテーマでは、管理画面の「外観」→「テーマオプション（カスタマイズ）」から、SNSシェア画像やサイト名などを一括設定できる場合があります。また、個別の投稿・固定ページの編集画面においても、専用のOGP設定フィールドが用意されていることが多いです。

テーマの機能でOGPが出力されているかどうかは、ページのHTMLソース（Ctrl + Uで表示）でog:から始まるメタタグが存在するかを確認することで把握できます。すでにOGPが出力されている場合、プラグインと重複しないよう注意が必要です。

プラグインを使って設定する方法（All in One SEOなど）

テーマにOGP機能がない場合や、より細かく管理したい場合はSEOプラグインを活用するのが便利です。代表的なプラグインには以下のものがあります。

プラグイン名特徴
All in One SEO（AIOSEO）国内利用者も多く、OGP・Twitterカードをまとめて管理できる
Yoast SEO世界シェアNo.1のSEOプラグイン。OGP設定も充実
The SEO Framework軽量・シンプルで初心者にも扱いやすい

設定手順の一例として、All in One SEOの場合は以下の流れになります。

  1. WordPress管理画面からプラグインをインストール・有効化
  2. 「All in One SEO」→「ソーシャルネットワーク」へ移動
  3. Facebook・Twitterのタブで画像・タイトル・説明文の各設定を入力
  4. 各投稿・固定ページの編集画面下部に表示されるOGP欄でページごとに個別設定

プラグインを利用する際は、テーマとの二重出力を防ぐためにテーマ側のOGP機能をオフにしておくことをおすすめします。

X（旧Twitter）向けのOGP設定方法

X（旧Twitter）向けのOGP設定方法

XはOGPタグを読み取りますが、より表示を最適化するためにTwitterカードと呼ばれる独自のmetaタグも用意されています。ここではTwitterカードの種類と、投稿者情報の設定方法を解説します。

Twitterカード（twitter:card）の役割と種類

twitter:cardは、Xでリンクをシェアした際のプレビュー表示形式を指定するためのメタタグです。OGPタグと同様に<head>内に記述します。代表的な2つの種類について解説します。

サマリーカード（Summary Card）

Summary Cardは、テキストと小さなサムネイル画像を横並びで表示するタイプのカードです。コンパクトな表示でタイトル・説明文・画像がまとめて確認できます。

<meta name="twitter:card" content="summary">Code language: HTML, XML (xml)

サムネイルは正方形（推奨サイズ：144×144px以上）で表示され、記事の概要を簡潔に伝えるのに適しています。視覚的なインパクトよりも、テキスト情報を重視したいページに向いています。

大きな画像付きサマリーカード（Summary Card with Large Image）

Summary Card with Large Imageは、横幅いっぱいに大きな画像を表示するタイプのカードです。視覚的なインパクトが強く、クリックを促しやすい形式です。

<meta name="twitter:card" content="summary_large_image">Code language: HTML, XML (xml)

推奨画像サイズは1200×628px以上（アスペクト比 2:1）です。ブログ記事やLP、メディアサイトなど、ビジュアルでアピールしたいページに積極的に活用されています。og:imageで指定した画像がそのままカード画像として使用されるため、OGPタグと組み合わせて設定するのが基本です。

投稿者のユーザー名（twitter:site）の設定方法

twitter:siteは、Xのシェアカードに表示するアカウントのユーザー名（@から始まるID）を指定するためのメタタグです。

<meta name="twitter:site" content="@youraccountname">Code language: HTML, XML (xml)

このタグを設定することで、カードの下部にXのアカウント名が表示されるようになります。公式アカウントを持つメディアや企業サイトではブランド認知の向上につながるため、設定しておくことをおすすめします。個人ブログの場合も、自分のXアカウントを連携させることでシェア時の信頼感が増します。twitter:creatorタグを使えば、記事の執筆者アカウントを別途指定することも可能です。

FacebookのOGP設定で知っておくべきこと

FacebookのOGP設定で知っておくべきこと

Facebookが開発したOGP（Open Graph Protocol）プロトコルであり、Facebook特有のfb:app_idなどの追加タグが利用可能です。中でもFacebook App-IDを設定しておくことで、インサイト分析や管理機能を活用できるようになります。

FacebookのApp-IDを使った設定方法

Facebook App-IDとは、Facebookが発行するWebサイト向けの識別番号です。このIDをOGPタグに設定することで、自サイトのシェア状況をFacebookのページインサイトで分析したり、Facebookシェアデバッガーをより詳細に活用したりすることができます。

<meta property="fb:app_id" content="あなたのAPP-ID">Code language: HTML, XML (xml)

App-IDは必須ではありませんが、企業サイトやメディアサイトなどFacebookを積極的にマーケティングに活用している場合は設定しておくことが推奨されます。設定自体はシンプルで、取得したApp-IDの数値をcontent属性に入れるだけです。

Facebook App-IDの取得手順

Facebook App-IDは、Meta for Developersのサイトから取得できます。以下の手順で進めてください。

  1. Meta for Developersにアクセスし、Facebookアカウントでログイン
  2. 右上の「マイアプリ」→「アプリを作成」をクリック
  3. アプリのタイプを選択（一般的なWebサイトなら「なし」または「その他」を選択）
  4. アプリ名と連絡先メールアドレスを入力して「アプリを作成」
  5. アプリの設定から「ベーシック」を選択し、サイトURLとプライバシーポリシーを入力後、アプリモードを「ライブ」に切り替えて表示されるアプリID（15〜16桁の数字）をコピー
  6. コピーしたApp-IDをHTMLの<meta property="fb:app_id">のcontentに貼り付け

ogpタグを正しく機能させるためにも、取得後はページをHTTPS（SSL）で提供していること、プライバシーポリシーが存在することなど、Metaのポリシーに準拠した状態でご使用ください。

OGPタグの表示を確認する方法

OGPタグの表示を確認する方法

OGPタグを設定したら、実際にSNSで正しく表示されるかを確認することが大切です。ここでは、主要なOGP確認ツールの使い方を紹介します。

Facebookシェアデバッガーで確認する手順

Facebookシェアデバッガーは、FacebookがOGPタグをどのように読み取っているかを確認できる公式ツールです。

  1. Facebookシェアデバッガーにアクセス
  2. 確認したいページのURLを入力し「デバッグ」をクリック
  3. 取得された「リンクプレビュー」でタイトル・画像・説明文を確認

OGPを更新した後にキャッシュが残っている場合は、「再度スクレイピング」ボタンを押すことで最新情報を再取得できます。エラーや警告が表示された場合は、その内容に従ってOGPタグの記述を見直しましょう。

XのCard Validatorで確認する手順

XのCard Validatorは、Xでのシェア時にTwitterカードがどのように表示されるかをチェックできる公式ツールです。

  1. X Card Validatorにアクセス（Xアカウントへのログインを推奨）
  2. 確認したいURLを入力して「Preview card」をクリックしてカード情報をログで確認
  3. ログでtwitter:cardやog:imageなどのタグ読み取り状況を確認

OGPタグやtwitter:cardなどのタグが正しく読み取られているかをログで確認できます。なお、2022年以降はプレビュー表示機能が削除されているため、視覚的なプレビューはXの投稿作成画面で確認するとよいでしょう。画像が表示されない場合は、画像URLが正しいか・画像サイズが要件を満たしているかをあわせてご確認ください。

ラッコツールズのOGP確認ツールを使う方法

ラッコツールズのOGP確認ツールは、URLを入力するだけで主要なSNSの表示プレビューをまとめて確認できる便利な無料サービスです。

  1. ラッコツールズ OGP確認にアクセス
  2. 確認したいURLを入力して「OGP確認する」をクリック
  3. Facebook・Twitter・LINEなど複数のSNSでの見え方を一覧で確認

ログイン不要で手軽に使えるため、OGPを設定した直後や修正後の確認に非常に重宝します。各SNSのデバッガーツールを個別に使う手間が省けるため、初心者の方には特におすすめのツールです。

OGP画像シミュレーターで見た目を確認する方法

OGP画像シミュレーターは、実際にSNSでシェアされたときの画像の見え方をシミュレーションできるツールです。

代表的なツールとして「OGP Image Simulator」などが利用されています。URLを入力すると、Facebook・Twitter・LinkedInなど各SNSでの表示イメージを確認できます。

このツールは、画像のトリミング位置や文字の見え方を事前に確認したい場合に役立ちます。og:imageで指定した画像が意図通りに表示されているか、テキストが途中で切れていないかなどを視覚的にチェックすることで、公開前に品質を確保できます。

OGPタグが正しく表示されないときの対処法

OGPタグが正しく表示されないときの対処法

OGPタグを設定したにもかかわらず、SNSで正しく表示されないことがあります。主な原因と対処法を解説しますので、ひとつずつ確認してみてください。

キャッシュが残っていて反映されない場合の解消方法

OGPタグを修正・追加したのにSNSの表示が変わらない場合、最もよくある原因はSNS側のキャッシュです。SNSは一度取得したOGP情報をキャッシュとして保存しており、しばらくの間は古い情報を表示し続けることがあります。

対処法は以下の通りです。

  • Facebook：Facebookシェアデバッガーで対象URLを入力し、「再度スクレイピング」ボタンを押す
  • X（旧Twitter）：仕様変更によりCard Validatorでのキャッシュクリアができなくなっているため、最大7日程度待つか、URLの末尾にクエリパラメータ（例：?v=2）を付与して短縮URL経由で再取得を試してみる
  • LINE：以前はキャッシュクリア専用ツール（Page Poker）がありましたが現在は提供が終了しており、公式サポートへ問い合わせるか、自動再取得を待つ方法が一般的です。画像変更の場合は約2週間、説明文の変更であれば約2日程度で再取得されます

キャッシュの更新にかかる時間はサービスによって異なり、数時間から最大7日程度かかる場合もあります。Facebookなどデバッガーツールが使えるサービスでは、強制更新してから確認するとスムーズです。

画像が表示されない場合に確認すべきポイント

og:imageを設定したにもかかわらず画像が表示されない場合は、以下のポイントを順番に確認しましょう。

  1. 画像URLが正しいか：ブラウザで直接URLを開き、画像が表示されるか確認する
  2. 絶対URLで記述されているか：/images/ogp.jpgなどの相対URLは正しく認識されない場合がある
  3. 画像のファイル形式：JPEG・PNG以外（WEBPなど）は対応していないSNSがある
  4. 画像サイズが小さすぎないか：200×200px未満など小さすぎる画像は無視されることがある
  5. HTTPSで配信されているか：HTTPで配信されている画像は一部SNSでブロックされる
  6. SNSのクローラーがアクセスできるか：robots.txtや認証設定で画像URLへのアクセスが制限されていないか確認する

一部のサイトでOGP設定ができない場合の対応策

無料ブログサービスやSaaS型CMSなど、HTMLを直接編集できないサービスでは、OGPタグを自由に設定できないことがあります。

その場合は、まず利用中のサービスがOGPの設定画面を提供していないかを確認しましょう。例えば、はてなブログや note などのサービスでは、プロフィール設定や記事設定の中でSNSシェア画像を指定できる機能が用意されていることがあります。

OGPの設定がまったくできないサービスを使っている場合は、独自ドメインでWordPressなどの自分でカスタマイズ可能なCMSへ移行することを検討する価値があります。SNSマーケティングを本格的に活用したいのであれば、OGPを自由に設定できる環境を整えることが長期的に見て効果的です。

OGPタグを設定するときに気をつけること

OGPタグを設定するときに気をつけること

OGPタグを正しく機能させるには、設定の網羅性や画像・テキストの仕様を守ることが重要です。よくある落とし穴と合わせて確認しておきましょう。

全ページにOGPタグを設定する必要がある理由

OGPタグはサイトのトップページだけでなく、すべてのページに個別に設定することが理想です。SNSでシェアされるのはトップページだけとは限らず、ブログ記事や商品ページが直接シェアされるケースも非常に多くあります。

特にog:title・og:description・og:imageはページの内容に合わせた個別の設定が求められます。すべてのページに同じ画像やタイトルを設定してしまうと、ユーザーにとって混乱を招くだけでなく、SNSのアルゴリズムからも評価されにくくなります。WordPressを使用している場合は、SEOプラグインを使って各ページのOGP情報を個別に管理する仕組みを整えることをおすすめします。

og:imageに指定する画像のファイル形式とサイズの目安

前述の推奨サイズ（1200×630px）と合わせて、ファイル形式とサイズについても改めて整理しておきます。

項目推奨仕様
ファイル形式JPEG（.jpg）または PNG（.png）
推奨サイズ1200px × 630px
最小サイズ600px × 315px（これ以下は表示されない場合あり）
ファイルサイズ8MB以下（できれば1MB以下を推奨）
アスペクト比1.91:1

WEBP形式は一部のSNSで表示されないことがあるため、現時点ではJPEGかPNGを選ぶのが無難です。また、ファイルサイズが大きすぎると読み込みが遅くなるため、画像を最適化してから使用することをおすすめします。

og:descriptionの文字数の目安

og:descriptionに設定する説明文の文字数は、表示されるSNSによって異なります。目安として以下を参考にしてください。

SNS表示される文字数の目安
Facebook全角65〜90文字程度
X（旧Twitter）全角60文字程度
LINE全角70〜100文字程度

文字数が多すぎると途中で切れてしまうため、最も短い表示基準（X向けの全角60文字程度）を意識して記述するのがおすすめです。ただし、極端に短すぎると情報が不足するため、ページの内容を的確に伝えられる文章量を目指しましょう。HTMLのmeta descriptionと内容を揃えてもよいですが、SNS向けに少し親しみやすい表現にアレンジすることで、クリック率の向上が期待できます。なお、ogpタグの仕様はSNSのアップデートによって変わる場合もあるため、定期的に最新情報を確認することをおすすめします。

まとめ

まとめ 26

OGPタグは、SNSでURLをシェアしたときのプレビュー表示をコントロールするためのHTMLタグです。og:title・og:description・og:imageなどの基本プロパティを正しく設定することで、意図通りのリッチなシェアカードを表示できるようになります。

WordPressを使用している場合はSEOプラグインを活用すると設定が簡単です。Xには専用のtwitter:cardタグ、FaebookにはApp-IDの設定も組み合わせると、より細かいコントロールが可能になります。

設定後はFacebookシェアデバッガーやラッコツールズなどの確認ツールで表示を必ず検証し、キャッシュのクリアも忘れないようにしましょう。OGPタグをしっかり整えることが、SNS経由のクリック率改善とサイト流入増加への第一歩です。

OGPタグについてよくある質問

OGPタグについてよくある質問
  • OGPタグとmeta descriptionは何が違うのですか？
    • meta descriptionはGoogleなどの検索エンジンの検索結果ページに表示される説明文を制御するためのタグです。一方、OGPタグ（og:description）はSNSでURLがシェアされたときのプレビュー表示を制御するためのタグです。両者は目的と表示される場所が異なるため、別々に設定することが推奨されます。
  • OGPタグを設定しなくてもSNSシェアはできますか？
    • はい、OGPタグがなくてもSNSでURLをシェアすること自体は可能です。ただし、SNSが独自の判断でページ内の情報を自動取得するため、意図しない画像やタイトルが表示されたり、説明文が空欄になったりするリスクがあります。適切な表示のためには設定しておくことをおすすめします。
  • OGPタグは一度設定したら変更できませんか？
    • いいえ、OGPタグはいつでも変更できます。HTMLを直接編集する方法でも、WordPressのプラグインを使う方法でも、設定内容はいつでも更新可能です。ただし、SNS側にキャッシュが残っている場合は、デバッガーツールで強制更新しないと即座に反映されないことがあります。
  • OGPタグはすべてのページに必要ですか？
    • はい、基本的にはすべてのページに設定することが推奨されます。SNSでシェアされるページはトップページだけとは限らず、記事ページや商品ページが直接シェアされることも多いためです。WordPressであればSEOプラグインを使うことで、全ページへの自動設定が可能になります。
  • OGPタグの設定はSEOに影響しますか？
    • OGPタグはGoogleの検索順位に直接影響するものではありません。ただし、OGPタグによってSNSシェア時のクリック率が向上すると、サイトへの流入数が増え、間接的にSEOへ良い影響をもたらす可能性があります。SEOとSNSマーケティングの両面から、設定しておく価値は十分にあります。