- 公開日： 最終更新日：
OGPとは？タグの設定方法、画像サイズ、表示の確認方法
SNSでシェアされた際に、適切なタイトルや画像を表示し、目立たせるために重要なのがOGPです。OGPを正しく設定すると、FacebookやX、LINEなどでリンクを共有した際に、指定した画像やテキストが適切に表示され、視認性が向上します。
本記事では、OGPの基本からOGPタグの設定方法、最適な画像サイズ、表示の確認方法までを解説します。「OGP画像が表示されない」「設定したのに反映されない」などのトラブルにも対応できるよう、よくある原因と対処法も紹介します。
OGPを正しく設定し、SNSでホームページのリンクを見やすく、クリックされやすい状態にしましょう。
目次
OGPとは
OGP（Open Graph Protocol）は、SNSでリンクを共有した際に、ページのタイトルや画像、説明文を適切に表示するための仕組みです。OGPタグを設定することで、意図したタイトルや説明文、画像を指定でき、SNSごとに異なる表示仕様に対応し、正確な情報を伝えることができます。
また、OGPは、Facebookが開発した技術で、現在ではXやLINEなど多くのSNSで利用されています。
OGPを設定するメリット
SNSでの拡散を意識した場合に、OGPは欠かせない要素の一つです。ここでは、OGP設定による主なメリットを紹介します。
リンクの視認性が向上してクリックされやすくなる
OGPを設定すると、SNS上でリンクのタイトルや説明文、画像が正しく表示され、視認性が向上します。SNSでシェアされた際に、適切な画像やテキストが表示されることで、他のリンクより目立ち、クリックされる確率が高まります。
特に、視覚的に魅力的な投稿が求められる現代において、OGP設定は不可欠です。
SNS上でのブランドイメージを統一できる
OGPを設定することで、コンテンツと関係のない画像が表示されることを防ぎ、意図したデザインを一貫して伝えることができます。これにより、ブランドイメージがSNS上でも統一され、ユーザーに信頼感を与えることができます。
また、SNSごとの仕様に合わせて最適な画像を表示できるため、ブランドの整合性を保つことが可能です。
コンテンツの内容を適切に伝えることができる
OGPを設定することで、SNSでリンクがシェアされた際に、表示される画像やタイトル、説明文が適切に反映され、コンテンツの内容を正確に伝えることができます。
視覚的に整理された情報は、ユーザーにとって分かりやすく、興味を引きやすいものです。これにより、シェアされたコンテンツが目立ち、ユーザーの関心を引き、より多くのクリックやエンゲージメントを促進することが可能になります。
OGPタグの設定方法と必要なHTMLタグ
OGPタグを正しく設定することで、SNSでリンクをシェアした際に、ページのタイトルや画像、説明文が適切に表示されます。ここでは、OGPタグを設定するために必要な基本的なHTMLタグや、各SNSで使用されるタグの記述方法について説明します。
基本設定
OGPタグを設定するために、まずはOGPの使用を宣言するために、<head>タグ内でprefix属性を記述します。以下のコードは、OGPを利用するための基本的な設定です。
<head prefix="og: https://ogp.me/ns#">
<!-- OGPタグをここに追加 -->
</head>
この設定を行うことで、OGPメタタグをページに追加する準備が整います。続いて、各SNSで使用するOGPタグを設定していきます。
Facebookで使用されるOGPタグの基本的なフォーマットは以下の通りです。
<meta property="og:title" content="OGPとは？タグの設定方法、画像サイズ、表示の確認方法" />
<meta property="og:description" content="OGPの設定方法を解説します。" />
<meta property="og:url" content="https://yourdomain.com/blog/ogp/" />
<meta property="og:image" content="https://yourdomain.com/ogp.png" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="セブンデザインのブログ" />
ここで記述するプロパティは、タイトル、説明文、画像、URLなどです。これらのタグを<head>タグ内に記述することで、Facebookでシェアした際に情報が正しく表示されます。
X
Xでは、OGPタグに加えて、独自のTwitterカードタグを使用して、シェアされた際の表示内容をさらに細かく設定できます。例えば、以下のように記述します。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_account" />
<meta name="twitter:title" content="OGPとは？タグの設定方法、画像サイズ、表示の確認方法" />
<meta name="twitter:description" content="OGPの設定方法を解説します。" />
<meta name="twitter:image" content="https://yourdomain.com/ogp.png" />
これにより、Twitterでは画像が大きく表示され、シェアしたリンクの視覚的なインパクトが増します。
LINE・LinkedIn
LINEとLinkedInでは、FacebookのOGPタグをそのまま利用できます。特別な設定をしなくても、設定した画像やタイトル、説明文がそのまま表示されます。
適切なOGP設定を行うことで、シェアされたリンクが魅力的に表示されます。
WordPressならプラグインでOGPを設定
WordPressでは、プラグインを使用することでOGPの設定を簡単に行うことができます。
All in One SEOやYoast SEOなどのSEOプラグインには、OGPを設定するための専用の画面が用意されています。プラグインを利用すると、OGPタグを手動で記述する必要がなく、直感的な操作でタイトルや画像を設定できるため、HTMLの知識がなくても簡単に対応可能です。
以下はAll in One SEOのOGP設定画面の例です。
プラグインを活用することで、OGP設定のミスを防ぎ、適切な画像やタグを自動で生成することが可能です。特に、OGP画像が表示されないといったトラブルを避けるためにも、プラグインを活用するのが有効です。
WordPressを使用している場合は、これらのプラグインを導入し、適切なOGP設定を行いましょう。
最適なOGP画像サイズ
OGP画像のサイズは、SNSでの表示を最適化するために重要です。適切なサイズを設定することで、画像が正しく表示され、視認性を向上させることができます。
推奨OGP画像サイズは1200×630pxです。このサイズで設定すれば、Facebook、X、LINE、LinkedInなどの主要なSNSで適切に表示されます。
推奨サイズより小さい画像を使用すると、SNSによっては意図しないトリミングや画質の劣化が発生する可能性があります。また、OGP画像はPNGまたはJPEG形式で保存し、ファイルサイズを軽量化することも重要です。
画像サイズが大きすぎると、ページの読み込み速度に影響し、SEOにも悪影響を与える可能性があります。適切なOGP画像サイズを設定し、SNSでの表示を最適化しましょう。
OGP表示の確認方法
OGPタグを正しく設定したら、SNS上で意図したとおりに表示されるかを確認することが重要です。SNSによっては、公式のチェックツールが提供されており、タグのエラーや設定ミスを素早く発見できます。ここでは、SNSごとの確認方法を紹介します。
Facebookでは、シェアデバッガーを利用してOGPの設定が正しく反映されているか確認できます。
シェアデバッガーにアクセスし、チェックしたいURLを入力してデバッグボタンをクリックすると、OGPタグの情報が表示されます。設定ミスがある場合は警告が出るため、修正後にもう一度スクレイピングを実行すると、最新の情報を取得できます。
X
Xでは、Twitterカードバリデーターを使用してOGP情報を確認できます。
Twitterカードバリデーターにアクセスし、URLを入力してPreview cardボタンをクリックすると、設定したOGP情報が正しく表示されているかを確認できます。画像が表示されない場合は、OGPタグのtwitter:imageが正しく設定されているかを確認する必要があります。
LINE・LinkedIn
LINEとLinkedInでは、Facebookで設定したOGPタグがそのまま適用されるため、公式のデバッガーツールは提供されていません。そのため、実際にリンクを送信し、目視で表示を確認するのが最も確実な方法です。
LINEでは、トークにURLを送信すると、設定したOGP情報が表示されます。LinkedInは、投稿画面でリンクを追加するとOGPのプレビューが表示されるため、意図したとおりに反映されているかチェックできます。
もし表示がおかしい場合は、FacebookのシェアデバッガーでOGP設定を再確認するとよいでしょう。
OGPが表示されない理由と対処法
OGPを正しく設定しても、画像が表示されない、意図した内容が反映されないといったトラブルが発生することがあります。ここでは、OGPが表示されない主な理由とその対処法を紹介します。
キャッシュが残っている
OGPが反映されない場合、キャッシュが原因であることが多いです。キャッシュとは、Webページの読み込み速度を向上させるために、一度アクセスしたページのデータをブラウザが保存する仕組みです。この機能により、OGPの設定を変更しても、古いデータが残ってしまい、新しい設定が反映されないことがあります。
この問題を解決するためには、ブラウザのキャッシュをクリアするか、シークレットモードでページを開く方法があります。また、FacebookのシェアデバッガーやXのTwitterカードバリデーターを利用して、OGPの情報を再取得すると、正しく反映されることがあります。
SVG画像を設定している
SVG形式の画像はOGPに対応していないため、設定しても表示されません。OGPでは、JPEG、PNG、WebP、GIFの画像形式のみが対応しています。
SVG画像を使用している場合は、JPEGやPNG形式に変換し、OGP画像として再設定する必要があります。
画像を相対パスで設定している
OGPタグで画像を指定する際に相対パスを使用すると、SNS上で画像が正しく表示されないことがあります。
この問題を防ぐために、OGP画像のURLは必ず絶対パスで指定する必要があります。og:imageの値を、https://～から始まるフルパスのURLに修正することで、正しく表示されるようになります。
OGPのまとめ
OGPを適切に設定することで、SNS上でのリンクの視認性が向上し、クリック率の向上が期待できます。Facebook、X、LINEなどの主要なSNSでは、OGPタグを正しく設定することで、意図した画像やテキストが表示されます。
OGPの設定には、適切なHTMLタグの記述、最適な画像サイズの選定、キャッシュのクリアなどが重要です。特に、OGP画像の表示トラブルを防ぐために、画像フォーマットをJPGやPNGにする、絶対パスを使用するなどのポイントを押さえておきましょう。
OGP設定後は、シェアデバッガーやTwitterカードバリデーターを活用し、正しく反映されているか確認することが大切です。
ホームページ制作において、SNSでの情報共有をスムーズに進めることは大切になるので、OGPを適切に設定し、サイトの拡散力を最大限に高めましょう。
