SNSでURLをシェアした際に、意図した画像やタイトルが表示されず困った経験はないでしょうか。これはOGPタグが正しく設定されていないことが原因です。OGPを設定すると、FacebookやX、LINEなどのSNSでリンクを共有した際に、指定した画像や説明文が正確に表示されます。
本記事では、OGPタグのHTMLでの書き方から画像サイズの決め方、WordPressでの設定方法、SNSごとの表示確認方法までを解説します。
OGPとは
OGPとは、Open Graph Protocolの略称です。ホームページのURLをSNSでシェアした際に、表示されるタイトルや画像、説明文の内容を指定するための仕組みを指します。
この設定を行っていない場合、SNSごとに挙動が異なります。Facebookのようにページ内の情報を自動で抽出し、意図しない画像やテキストが表示されるSNSもあれば、Xのように該当するタグがなければURLのみのリンクとして表示されるだけになるSNSもあります。
OGPはFacebookが開発した技術で、現在ではX、LINE、LinkedInなど幅広いSNSで採用されています。ホームページのHTML内にOGPタグを記述しておくことで、SNSごとの表示仕様に左右されず、伝えたい情報を正確に届けられるようになり、訪問者の目に留まりやすい表示を実現できます。
OGPを設定するメリット
OGPを設定することで得られるメリットは主に3つあります。SNS上での見え方が変わるだけでなく、間接的にサイト全体の評価向上にもつながります。
クリック率・視認性が向上する
OGPを設定すると、SNSでシェアされた際に指定した画像やタイトル、説明文がカード形式でまとまって表示されます。テキストだけの投稿やOGP未設定のリンクが並ぶタイムラインの中でも、画像付きのカードは視覚的に目立ちやすく、訪問者の目に留まりやすくなります。
また、タイトルと説明文が正しく表示されることで、訪問者はクリックする前にページの内容をある程度把握できます。内容が瞬時に伝わることで興味を持ってもらいやすくなり、結果としてクリックされる可能性が高まるため、ホームページへの流入増加につながります。
ブランドイメージを統一できる
OGPで画像やタイトル、説明文をあらかじめ指定しておけば、Facebook、X、LINEなど、どのSNSでシェアされても同じ内容で表示され、一貫したイメージを保てます。会社のロゴや商品画像、サービスの特徴を伝える文言など、届けたい情報を毎回同じ形で表示できるため、ブランドとしての統一感が生まれます。
SNSごとに表示される画像やテキストがばらついてしまうと、同じ会社の発信だと気づかれにくくなり、印象も分散してしまいます。統一感のある見え方を保つことは、初めてホームページを目にする訪問者に安心感を与え、信頼構築につながる要素です。
間接的にSEO効果が期待できる
OGPの設定自体が検索順位に直接影響するわけではありません。しかしSNS経由のクリック率が向上すれば、ホームページへのアクセス数が増加し、滞在時間や回遊率の改善にもつながりやすくなります。こうした指標の改善は、結果的に検索エンジンからのSEO評価にも良い影響を与える可能性があります。
また、シェアが増えることでホームページの認知度が高まり、会社名やブランド名での指名検索が増える効果も期待できます。直接的な効果ではないものの、長期的な集客力の底上げに貢献する施策といえます。
HTMLを使ったOGPタグの書き方
OGPは、HTMLの<head>内にmetaタグを記述することで設定します。SNSごとに参照するタグが一部異なるため、基本の書き方に加えて画像サイズやX専用タグも押さえておく必要があります。
基本的な書き方
OGPの基本的な書き方は、<head>内に以下のmetaタグを記述します。
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="サイト名">
<meta property="og:type" content="website">
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="画像のURL">
<meta property="og:image:secure_url" content="画像のURL">og:localeはページの言語を示すタグで、日本語ページであれば「ja_JP」を指定します。og:typeはトップページであれば「website」、記事ページであれば「article」を指定しますog:image:secure_urlはog:imageと同じ画像のURLをhttps形式で重ねて指定するタグで、SNS側の読み込みエラーを防ぐ役割があります。
画像サイズの決め方
上記のタグに加えて、OGP画像の縦横サイズを指定するタグも設定できます。
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">推奨サイズは1200×630pxです。このサイズであれば、Facebook・X・LINE・LinkedInいずれのSNSでも大きく崩れることなく表示されます。widthとheightをpx単位で明示しておくと、SNS側が画像サイズを事前に把握できるため、読み込みが安定しやすくなります。
推奨サイズより小さい画像を使うと、拡大表示によって画質が粗くなったり、意図しない範囲でトリミングされたりする恐れがあります。また、画像形式はJPEGまたはPNGを使用しましょう。
X専用のタグ
Xでは、基本のOGPタグに加えて以下のタグを設定できます。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="Xアカウント名">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="ページの説明文">
<meta name="twitter:image" content="画像のURL">このうちtwitter:cardは、og:タグでは代替できないXのみの項目のため、忘れずに記述する必要があります。「summary_large_image」を指定すると画像が大きく表示され、「summary」を指定すると小さいサムネイル形式になります。twitter:siteでXアカウントを紐づけておくと、投稿者情報がカードに表示されるようになります。
twitter:site以下の4つは省略しても、og:title、og:description、og:imageの内容がそのまま参照されます。
WordPressでOGPを設定する方法
WordPressでは、All in One SEOやYoast SEOといったSEOプラグインを導入することで、HTMLタグを直接編集しなくてもOGPを設定できます。
各投稿の編集画面にOGP専用の入力欄が用意されており、タイトルや説明文、画像を指定するだけで、これまで紹介したmetaタグが自動的に出力される仕組みです。
手動でコードを記述する場合と違い、入力ミスによるタグの重複や記述漏れが起きにくいこともメリットです。投稿ごとに異なる画像や説明文を設定できるため、ページの内容に合わせた表示をSNS上で実現できます。
なお、テーマ側にもOGP出力機能が備わっている場合、プラグインとタグが重複して出力されてしまうことがあります。設定前にテーマの機能を確認し、重複している場合はどちらか一方を無効にしておきましょう。
OGP表示の確認方法
OGPタグを設定したら、実際にSNS上でどのように表示されるかを確認しておきましょう。SNSごとに確認方法が異なるため、それぞれの手順を紹介します。
Facebookでは、Meta社が提供するシェアデバッガーを使って確認します。
確認したいページのURLを入力し、デバッグボタンを押すと、現在設定されているOGPタグの情報とプレビューが表示されます。
修正後のOGPが反映されていない場合は、画面上の「もう一度スクレイピング」ボタンを押すことで、Facebook側のキャッシュを強制的に更新し、最新の設定を再取得できます。設定ミスがある場合はエラーが表示されるため、修正すべき箇所も併せて確認できます。
X
Xには、かつてURLを入力するだけでプレビューを確認できる公式ツールがありましたが、現在はプレビュー機能が廃止されています。そのため、投稿の作成画面にページのURLを貼り付け、実際の表示を目視で確認するのが最も確実な方法です。
なお、Xはカード情報を最大7日程度キャッシュする仕様のため、OGPタグを修正しても、しばらく古い表示のままになることがあります。すぐに反映させたい場合は、URLの末尾にパラメータを追加して新しいURLとして認識させる方法があります。
LINE・LinkedIn
LINEとLinkedInは、Facebookで設定したOGPタグをそのまま参照する仕様のため、公式のデバッグツールは提供されていません。実際にリンクを投稿し、目視で表示を確認するのが最も確実な方法です。
LINEでは、トークルームにURLを送信すると、設定したOGP情報がプレビュー表示されます。LinkedInは、投稿画面でリンクを貼り付けた際にプレビューが自動表示されるため、意図した内容になっているかその場で確認できます。
表示がおかしい場合は、共通の仕組みであるFacebookのシェアデバッガーで設定内容を見直すとよいでしょう。
OGPが表示されない原因と対処法
OGPタグを正しく設定したはずなのに、画像やタイトルが反映されないケースがあります。ここでは、よくある3つの原因とその対処法を紹介します。
キャッシュの影響
OGPタグを修正しても、SNS側が以前取得した情報を保持していると、変更が反映されないことがあります。これはSNSごとにページ情報をキャッシュする仕組みを持っているために起こる現象です。
Facebookの場合は、前述のシェアデバッガーで再度スクレイピングを実行すれば、キャッシュが更新され最新の内容が反映されます。一方Xは、公式のキャッシュクリア手段が現状なく、最大7日程度は古い表示のままになることがあります。急ぎで反映させたい場合は、URLの末尾にパラメータを追加し、別のURLとして認識させる方法が有効です。
ブラウザ側のキャッシュが原因の場合もあるため、シークレットモードで開き直して確認するのも一つの方法です。
SVG画像を設定している
og:imageやtwitter:imageにSVG形式の画像を指定しても、OGPでは表示されません。OGPが対応している画像形式は、JPEG、PNG、WebP、GIFのみです。
ホームページのロゴやアイキャッチ画像をSVGで管理している場合は、OGP用に別途JPEGまたはPNG形式へ書き出し、そのURLをog:imageに指定し直す必要があります。対応形式であっても、ファイルサイズが大きすぎると読み込みが遅くなり、表示に影響することがあるため、あわせて容量にも注意しましょう。
画像を相対パスで設定している
OGPのog:imageの値を「/images/thumbnail.jpg」のような相対パスで記述すると、SNSのクローラーが画像を正しく読み込めず、表示されないことがあります。
この場合、画像のURLを「https://」から始まる絶対パスに修正する必要があります。WordPressのプラグインを利用している場合は自動的に絶対パスで出力されますが、HTMLを直接編集している場合は記述ミスが起きやすいため、公開前にURLをブラウザで直接開いて画像が表示されるか確認しておくと安心です。
まとめ
OGPは、SNSでホームページのURLがシェアされた際に、タイトルや画像、説明文を意図した通りに表示させるための仕組みです。基本的なOGPタグに加えて、Xでは専用のtwitter:cardタグの設定も必要になります。画像は1200×630pxを基準にし、JPEGまたはPNG形式で絶対パスを指定することで、表示崩れを防げます。
設定後はFacebook・X・LINEなど各SNSで実際の表示を確認し、反映されない場合はキャッシュや画像形式、パスの指定方法を見直しましょう。
