WebサイトのURLをSNSでシェアしたとき、タイトルや画像が正しく表示されず、クリック率が伸び悩んだ経験はないでしょうか。その原因の多くは、OGP（Open Graph Protocol）の設定不足にあります。OGPとは、FacebookやX（旧Twitter）などのSNSでリンクが共有された際に、ページのタイトル・説明文・画像などを美しく表示するための仕組みです。正しいOGPの使い方を理解すれば、SNSでのクリック率向上やブランドイメージの統一に大きく貢献します。本記事では、OGPの基本的な仕組みから具体的な設定方法、確認手順、よくあるトラブルの対処法まで、初心者の方にもわかりやすく丁寧に解説します。
- OGPの基本的な仕組みと役割
OGPはHTMLのmetaタグを用いてSNSに情報を伝える仕組みで、適切に設定することでリンク共有時の見栄えが大幅に向上します。
- OGPの具体的な設定方法と記述例
HTMLに記述すべきmetaタグの種類や書き方を、コード例とともにわかりやすく解説しています。
- OGP設定後の確認方法とトラブル対処
設定が正しく反映されているかを検証するツールの使い方や、画像が表示されないなどのよくある問題の解決策を紹介します。
OGPの基本的な仕組み
OGPの使い方を正しく理解するためには、まずOGPがどのような仕組みで動作するのかを把握することが大切です。OGP（Open Graph Protocol）は、Facebookが2010年に提唱したオープンな規格であり、現在ではX（旧Twitter）やLINE、はてなブックマークなど、多くのSNSやWebサービスで採用されています。
OGPが果たす役割
OGPは、WebページのHTMLにmetaタグとして記述することで、SNSのクローラーにページの概要情報を正確に伝える役割を担います。具体的には、ページのタイトル、説明文、サムネイル画像、URLなどの情報をSNS側に提供します。
OGPが設定されていないページをSNSでシェアした場合、SNS側が自動的にページの情報を取得しようとしますが、意図しないテキストや画像が表示されてしまうことがあります。一方、OGPを正しく設定しておけば、常に狙い通りの情報を表示できるため、ユーザーの興味を引きやすくなります。
OGPを設定するメリット
OGPを適切に設定するメリットは多岐にわたります。以下の表に主なメリットをまとめました。
| メリット | 詳細 |
|---|---|
| クリック率の向上 | 目を引くサムネイル画像や的確な説明文が表示され、リンクのクリック率が高まる |
| ブランドイメージの統一 | どのSNSでシェアされても統一感のある表示になり、信頼性が向上する |
| 情報の正確な伝達 | 意図しないテキストや画像が表示されるリスクを回避できる |
| SNS経由の流入増加 | 見栄えのよいリンクカードは拡散されやすく、サイトへの流入が期待できる |
OGPの使い方をマスターすることは、SNSマーケティングにおいて非常に効果的な施策のひとつと言えます。設定自体は難しくないため、Webサイトを運営している方はぜひ導入を検討してみてください。
OGPが使われる主なSNS
OGPはさまざまなプラットフォームで活用されています。代表的なSNSとその対応状況を以下にまとめます。
| SNS | OGP対応 | 備考 |
|---|---|---|
| 対応 | OGPの提唱元であり、最も忠実にOGP情報を反映する | |
| X（旧Twitter） | 対応 | 独自のTwitter Cardタグも併用すると表示の制御がしやすい |
| LINE | 対応 | トーク画面でリンクを送信した際にOGP情報が表示される |
| はてなブックマーク | 対応 | ブックマーク一覧にOGP画像が表示される |
このように、主要なSNSのほとんどがOGPに対応しています。一度設定すれば複数のプラットフォームで効果を発揮するため、コストパフォーマンスの高い施策と言えるでしょう。
OGPは一度設定すれば複数のSNSで効果が出るので、まだの方は早めに取り組んでみましょう。
OGPの使い方と記述方法
ここからは、OGPの使い方として具体的な記述方法を解説します。OGPの設定はHTMLのhead要素内にmetaタグを追加するだけで完了します。難しいプログラミング知識は不要ですので、初心者の方でも安心して取り組めます。
必須のOGPタグ一覧
OGPの使い方で最も重要なのは、必須とされるmetaタグを正しく記述することです。以下が基本的なOGPタグの一覧です。
| プロパティ名 | 役割 | 記述例 |
|---|---|---|
| og:title | ページのタイトル | OGPの設定方法を解説 |
| og:type | ページの種類 | website（トップページ）、article（記事ページ） |
| og:url | ページの正規URL | https://example.com/page/ |
| og:image | サムネイル画像のURL | https://example.com/image.jpg |
| og:description | ページの説明文 | OGPの基本的な使い方を解説する記事です。 |
| og:site_name | サイト名 | サンプルブログ |
上記のタグのうち、og:title、og:type、og:url、og:imageの4つは特に重要とされています。これらを最低限記述しておくことで、SNSでのリンク表示が大幅に改善されます。
HTMLへの具体的な記述例
実際にHTMLファイルへOGPタグを記述する際の手順を確認しましょう。head要素の中に、以下のようなmetaタグを追加します。
まず、HTMLのhead要素の冒頭付近でprefix属性を宣言する必要があります。具体的にはhtmlタグに「prefix=”og: https://ogp.me/ns#”」と記述します。次に、各OGPプロパティをmetaタグのproperty属性とcontent属性の組み合わせで記述します。
og:imageには絶対URLを指定し、推奨サイズは幅1200px×高さ630pxとされています。相対パスで記述するとSNS側が画像を取得できない場合があるため注意が必要です。
OGPタグ記述時のチェックポイント
- htmlタグにprefix属性を追加しているか
- og:title、og:type、og:url、og:imageの4つを最低限記述しているか
- og:imageは絶対URLで指定しているか
- og:urlには正規化されたURLを記述しているか
Twitter Card用タグの追加
X（旧Twitter）でリンクカードを最適に表示するには、OGPタグに加えてTwitter Card専用のmetaタグを記述することが推奨されます。代表的なタグとして「twitter:card」「twitter:site」「twitter:title」「twitter:description」「twitter:image」があります。
twitter:cardの値を「summary_large_image」に設定すると、大きなサムネイル画像付きのリンクカードが表示されるため、クリック率の向上が期待できます。「summary」を指定した場合は、小さい正方形の画像付きカードになります。用途に応じて使い分けるとよいでしょう。
WordPressでの設定方法
WordPressを使用している場合、OGPの使い方はさらに簡単になります。多くのテーマやプラグインがOGPタグの自動出力機能を備えているためです。
たとえば、SEO系のプラグインを導入すると、投稿画面からOGPのタイトルや説明文、画像を個別に設定できるようになります。また、SWELLやCocoonといった国産テーマでは、テーマの設定画面からOGPの出力をコントロールできる場合もあります。HTMLを直接編集する必要がないため、初心者の方にはプラグインやテーマの機能を活用する方法がおすすめです。
OGPタグの記述は意外とシンプルです。WordPressならプラグインで手軽に設定できるので、まず試してみてください。
バクヤスAI 記事代行では、
高品質な記事を圧倒的なコストパフォーマンスでご提供！
OGPの確認方法と検証ツール
OGPタグを記述した後は、設定が正しく反映されているかを必ず確認する必要があります。ここでは、OGPの使い方における重要なステップである確認・検証の方法を解説します。
Facebook用の検証ツール
Facebookでは「シェアデバッガー」という公式ツールが提供されています。URLを入力するだけで、FacebookがそのページからどのようなOGP情報を取得しているかを確認できます。
シェアデバッガーには「スクレイピングし直す」というボタンがあり、これをクリックするとFacebook側のキャッシュが更新され、最新のOGP情報を再取得できます。OGPの設定を変更した際は、必ずこのボタンを押してキャッシュをクリアしましょう。
X（旧Twitter）用の検証方法
X（旧Twitter）では、以前「Card Validator」という公式ツールが提供されていましたが、現在はプレビュー機能が制限されています。そのため、実際にポスト画面でURLを入力し、リンクカードのプレビューを確認する方法が一般的です。
Xでリンクカードが正しく表示されない場合は、OGPタグだけでなくTwitter Card用のmetaタグが正しく設定されているかもあわせて確認してみてください。また、キャッシュの影響で古い情報が表示されることもあるため、時間をおいて再確認するのも有効な手段です。
その他の汎用検証ツール
Facebook・X以外にも、OGP情報を一括で確認できる汎用的なツールがあります。以下に代表的なツールをまとめました。
| ツール名 | 特徴 | 対応SNS |
|---|---|---|
| Facebookシェアデバッガー | Facebook公式、キャッシュのクリアが可能 | |
| ラッコツールズ OGP確認 | 日本語対応、OGP情報を一覧表示 | 汎用 |
| OGP Checker（Chrome拡張） | ブラウザ上で手軽にOGP情報を確認可能 | 汎用 |
複数のツールを組み合わせて使うことで、各SNSでの表示状況を網羅的に確認できます。OGPの設定を行った後は、上記のツールを使って必ず検証を実施しましょう。
OGP設定後の検証チェックリスト
- Facebookシェアデバッガーでタイトル・画像・説明文が正しく表示されるか
- X（旧Twitter）でリンクカードが意図通りに表示されるか
- LINEのトーク画面でリンクを送信し、サムネイルが表示されるか
- og:imageのURLにアクセスして画像が正しく表示されるか
設定して終わりではなく、各SNSでの表示確認まで行うことが、OGP運用のポイントです。
バクヤスAI 記事代行では、高品質な記事を圧倒的なコストパフォーマンスでご提供！
バクヤスAI 記事代行では、SEOの専門知識と豊富な実績を持つ専任担当者が、キーワード選定からAIを活用した記事作成、人の目による品質チェック、効果測定までワンストップでご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。
サービス導入事例
株式会社ヤマダデンキ 様
生成AIの活用により、以前よりも幅広いキーワードで、迅速にコンテンツ作成をすることが可能になりました。
親身になって相談に乗ってくれるTechSuiteさんにより、とても助かっております。
▶バクヤスAI 記事代行導入事例を見る
OGPのトラブル対処法
OGPの使い方を正しく実践していても、思い通りに表示されないケースは少なくありません。ここでは、OGP設定時によく発生するトラブルとその解決策を紹介します。原因を正しく把握すれば、スムーズに問題を解消できるはずです。
画像が表示されない場合
OGPに関するトラブルで最も多いのが、SNSでシェアした際にサムネイル画像が表示されないケースです。主な原因としては、画像URLが相対パスになっている、画像のファイルサイズが大きすぎる、画像のURLが間違っているといったものが考えられます。
og:imageには必ず「https://」から始まる絶対URLを指定し、画像サイズは幅1200px×高さ630pxを目安に設定するのが効果的です。また、画像のファイルサイズは5MB以下に抑えることが推奨されています。
古い情報が表示される場合
OGPの設定を変更したにもかかわらず、SNS上で古いタイトルや画像が表示され続けることがあります。これはSNS側がOGP情報をキャッシュとして保持しているためです。
Facebookの場合はシェアデバッガーの「スクレイピングし直す」ボタンでキャッシュを更新でき、LINEの場合は「Page Poker」というツールでキャッシュクリアが可能です。Xについては明確なキャッシュクリア手段がないため、時間をおいてから再度確認する方法が一般的です。
タグの記述ミスを防ぐ方法
OGPタグの記述ミスも、表示トラブルの原因としてよく見られます。property属性のスペルミスや、content属性の値が空になっているケースなどが典型的です。
記述ミスを防ぐためには、テンプレートを用意しておくことが有効です。以下のチェックリストを参考に、公開前に確認を行いましょう。
OGPタグの記述ミス防止チェックリスト
- property属性のスペル（og:title、og:descriptionなど）に誤りがないか
- content属性に値が正しく入っているか（空欄になっていないか）
- 閉じタグやクォーテーションの記述漏れがないか
- metaタグがhead要素の中に記述されているか
テンプレートと検証ツールを活用すれば、OGPの設定ミスによるトラブルを大幅に減らすことができます。
トラブルの原因はキャッシュか記述ミスであることがほとんどなので、落ち着いて一つずつ確認すれば解決できるはずです！
OGPの使い方で押さえたい注意点
OGPの使い方をマスターするうえで、設定時に見落としがちな注意点がいくつかあります。ここでは、より効果的にOGPを運用するためのポイントを解説します。
ページごとの個別設定
OGPタグはサイト全体で共通の値を使い回すのではなく、ページごとに個別の値を設定することが重要です。すべてのページで同じタイトルや画像が表示されると、ユーザーはどのページへのリンクなのか判断しにくくなります。
特にog:titleとog:descriptionは、各ページの内容を的確に反映した固有のテキストを設定することで、ユーザーのクリック意欲を高められます。WordPressの場合は、投稿ごとにOGP設定を変更できるプラグインを活用すると効率的です。
OGP画像の最適なサイズ
OGP画像のサイズはSNSごとに推奨値が異なりますが、幅1200px×高さ630pxの画像を用意しておけば、ほとんどのSNSで適切に表示されます。このサイズはアスペクト比が約1.91対1となり、Facebookの推奨比率と一致しています。
画像の中央部分にテキストやロゴなどの重要な要素を配置すると、SNSごとのトリミング差異にも対応しやすくなります。画像の端に重要な情報を配置すると切れてしまう恐れがあるため、余白を意識したデザインを心がけましょう。
og:typeの正しい使い分け
og:typeはページの種類を示すプロパティで、適切な値を設定することでSNS側がページの性質を正しく認識します。主にトップページには「website」、ブログ記事やニュース記事には「article」を設定するのが一般的です。
og:typeの値を誤って設定しても表示に大きな影響が出ることは少ないですが、正確に設定しておくことでSNSのアルゴリズムがページの内容を適切に判断する助けになります。細かい部分ではありますが、正しく設定しておくに越したことはありません。
OGP運用で意識したいポイント
- ページごとに固有のog:titleとog:descriptionを設定する
- OGP画像は1200px×630pxで作成し、重要な要素は中央に配置する
- og:typeはトップページと記事ページで使い分ける
- 新しいページを公開したら検証ツールで表示を必ず確認する
細かい設定の積み重ねがSNSでの見栄えとクリック率に直結するので、丁寧に取り組む価値があります。
よくある質問
OGPの使い方に関して、読者の方からよく寄せられる疑問とその回答をまとめました。
- OGPを設定しないとどうなりますか？
-
OGPを設定しない場合、SNSでリンクをシェアした際に意図しないテキストや画像が表示されることがあります。ページのタイトルや説明文がSNS側の自動取得に依存するため、見栄えが悪くなりクリック率の低下につながる可能性があります。
- OGPの設定はSEOに影響しますか？
-
OGPの設定自体がGoogleの検索順位に直接影響することはないと言われています。ただし、SNSでのクリック率や拡散性が向上することで、結果的にサイトへの流入増加やブランド認知の向上につながり、間接的にSEO効果をもたらす可能性があります。
- OGP画像が更新されない場合はどうすればよいですか？
-
SNS側がOGP情報をキャッシュしている場合、画像を変更してもすぐには反映されないことがあります。Facebookの場合はシェアデバッガーでキャッシュをクリアし、LINEの場合はPage Pokerを使用してください。Xについては時間をおいてから再確認するのが一般的な対処法です。
まとめ
OGPとは、SNSでリンクを共有した際にページのタイトル・画像・説明文を適切に表示するための仕組みです。HTMLのhead要素内にmetaタグを記述するだけで設定でき、クリック率の向上やブランドイメージの統一に大きく貢献します。
OGPの使い方で重要なのは、必須タグの正しい記述、ページごとの個別設定、そして設定後の検証です。Facebookシェアデバッガーなどのツールを活用し、各SNSで意図通りに表示されているかを必ず確認しましょう。
画像が表示されない、古い情報が表示されるといったトラブルも、原因を把握すれば簡単に解決できます。本記事で紹介した手順やチェックリストを参考に、ぜひ自サイトのOGP設定を見直してみてください。
