OGP設定を行うことで、あなたのWebサイトはSNS上で視認性が高まり、クリック率が向上します。HTMLでもWordPressでも簡単に設定可能で、SNSからの集客力を高めたいなら必須の対策です。本記事では、実際のコード例や推奨サイズ、トラブル回避方法まで解説します。
OGPとは、Open Graph Protocolの略で、Webサイトのコンテンツの内容をSNSで伝える際に使用する仕組みです。例えば、SNSでWebの記事をシェアしたときに、その記事のURLとタイトル、簡単な内容やサムネイル画像がボックスにまとめられて表示されるのを見たことがあると思います。OGPはこのボックス内のタイトルは何を表示するか、URLは何か、画像は何か、といった部分を設定するために使います。
OGPを設定することで、共有されたときにユーザーへの訴求力が高まります。一方、OGP設定をしなければ、ユーザーへの訴求力が低くなります。もう少し言うと、SNS側で不適切なWebページの情報が自動的に抽出されやすくなります。そうなれば、わかりずらいWebページの情報が共有されて、ユーザーへの訴求力が下がります。結果、共有が限定的になるので、参照される機会（被リンク獲得）が減る分SEOの効果が薄れるでしょう。こうした良くない状況を回避する為に、OGPを適切に設定して、効果的な共有につなげましょう。
以下のステップバイステップガイドでは、OGP設定の具体的な例を提示。OGP設定のベストプラクティスを紹介し、一般的な間違いを避ける方法を解説します。
OGPを使用するには、 <head> タグ内に以下のようなメタタグを追加します。
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:title" content="サイトタイトル" />
<meta property="og:description" content="サイトの説明文" />
<meta property="og:image" content="https://example.com/image.jpg" />
</head>
<meta> タグの property 属性には、OGPで使用するプロパティ名を指定します。 content 属性には、プロパティの値を指定します。
OGPのog:typeプロパティは、共有されたコンテンツの種類を指定します。種類を指定することで、リンクをクリックした際に、どのような情報が表示されるかを制御することができます。以下は、主要なog:typeプロパティの種類です。
ウェブサイトを表します。通常、ウェブサイトのトップページのURLをog:urlプロパティで指定します。
記事ページを表します。通常、記事ページのURLをog:urlプロパティで指定します。
動画ページを表します。通常、動画ページのURLをog:urlプロパティで指定し、動画のサムネイル画像をog:imageプロパティで指定します。
音楽の曲を表します。通常、曲のURLをog:urlプロパティで指定し、曲のタイトルをog:titleプロパティで指定します。
書籍を表します。通常、書籍のURLをog:urlプロパティで指定し、書籍のタイトルをog:titleプロパティで指定します。
個人プロフィールを表します。通常、プロフィールページのURLをog:urlプロパティで指定します。
これらの種類のほかにも、ビジネス、映画、製品、場所、イベントなどの種類があります。適切なog:typeプロパティを指定することで、共有されたコンテンツの種類に合わせた情報が表示されるようになります。
OGPでは、og:urlプロパティを使用して、コンテンツのURLを指定します。このプロパティを正しく設定することで、共有されたリンクがクリックされた際に、正しいURLがブラウザのアドレスバーに表示されます。
og:urlプロパティは、ウェブサイトの場合はトップページのURLを指定することが一般的ですが、特定のページのURLを指定することもできます。例えば、ブログの記事ページの場合は、各記事のURLを指定することで、記事ごとに異なるOGP情報を設定することができます。
ただし、同じページに複数のURLが存在する場合には、正しいURLを指定する必要があります。例えば、httpとhttps、wwwと非wwwなどのURLの違いがある場合には、正しいURLを選択する必要があります。また、動的なURLの場合には、正しいURLを取得するための適切な設定が必要です。
OGPのURLが正しく設定されていない場合、リンクをクリックしても正しいページにアクセスできない、または正しいOGP情報が表示されないなどの問題が生じることがあります。そのため、OGPのURLの設定には十分に注意する必要があります。
og:titleプロパティは、共有されたリンクに表示されるタイトルを指定するために使用されます。このタグは必須であり、指定しない場合、共有されたリンクのタイトルは不適切なものになる可能性があります。
タイトルは、SEOやユーザビリティにとって非常に重要な役割を果たしています。適切なタイトルを指定することで、ウェブページのコンテンツを正確かつ明確に伝えることができます。また、適切なキーワードを含めることで、ウェブページが検索エンジンでの検索結果に表示される可能性を高めることができます。
適切なタイトルを指定するためには、以下のポイントに注意してください。
共有されたリンクのタイトルは、そのページの内容を正確に伝える必要があります。また、タイトルは簡潔であることが望まれます。一般的に、タイトルは60文字以内に収めることが望ましいとされています。
タイトルにキーワードを含めることで、検索エンジンでの検索結果に表示される可能性が高まります。ただし、キーワードを過剰に使用することは、SEOに悪影響を与える場合があるため、適度に使用するようにしましょう。
タイトルは、ウェブページのユーザビリティにも影響を与えます。タイトルが分かりやすく、ユーザーがページの内容を理解するのに役立つようにすることが重要です。また、タイトルが長すぎる場合は、途中で省略される可能性があるため、60文字以内に収めることが望ましいとされています。
以上のポイントに注意して、適切なタイトルを指定しましょう。
og:descriptionプロパティを使用することで、共有されたリンクに表示される説明文を指定することができます。このプロパティは、ウェブページの簡潔な概要を提供するために非常に重要です。タイトルと同様に、説明文も共有されたリンクをクリックする前に、そのページの内容を簡単に把握できるようにするために役立ちます。
og:descriptionプロパティは、HTMLの<meta>タグの中で以下のように定義されます。
<meta property="og:description" content="サイトの説明文" />
content属性には、最大155文字程度のウェブページの説明文を指定します。説明文は、ページの主な内容を簡単に要約したものである必要があります。
共有されたリンクの説明文は、いくつかのソーシャルメディアプラットフォーム（Facebook、Twitter、LinkedInなど）では、タイトルとともに表示されます。そのため、タイトルと説明文の組み合わせは、共有されたリンクがクリックされるかどうかの決定的な要素になることがあります。したがって、説明文を魅力的かつ簡潔にすることが重要です。
og:imageプロパティは、共有されたリンクに表示されるサムネイル画像を指定するために使用されます。このプロパティには、画像ファイルのURLを指定する必要があります。また、複数の画像を指定することもできます。複数の画像を指定する場合は、og:imageプロパティを複数回使用するか、og:image:urlプロパティを使用して画像のURLを指定します。
画像は、最低でも1200 x 630ピクセル以上のサイズであることが推奨されています。また、ファイル形式としては、JPEGまたはPNG形式が使用できます。さらに、画像のアスペクト比は、1.91:1から1:1までの範囲内であることが推奨されています。
og:imageプロパティを使用することで、共有されたリンクがより魅力的になり、ユーザーがコンテンツに興味を持つようになる可能性が高くなります。また、SNSやメッセンジャーアプリなどのプラットフォームでコンテンツをシェアする場合にも、適切なサムネイル画像が表示されることで、コンテンツの認知度を高めることができます。以上が、基本的なOGPの設定方法です。OGPは、共有されたリンクの見た目を改善し、ウェブサイトのシェアビリティを向上させる役割を担っています。
Q1. OGP設定が反映されないのはなぜ？
A. SNSごとにキャッシュが残っている場合があります。Facebookでは「シェアデバッガー」、X（旧Twitter）では「Card Validator」で確認・更新できます。
Q2. OGP画像はどのサイズがおすすめ？
A. 一般的には1200×630pxが最適です。ただしSNSごとに微妙な違いがあるので、各SNSの仕様も確認しましょう。
Q3. WordPressで簡単にOGP設定する方法は？
A. プラグイン「All in One SEO」や「Yoast SEO」を使えば、コード不要でOGP設定が可能です。
AIさくらさん（澁谷さくら）
ChatGPTや生成AIなど最新AI技術で、DX推進チームを柔軟にサポート。5分野のAI関連特許、品質保証・クラウドセキュリティISOなどで高品質を約束します。御社の業務内容に合わせて短期間で独自カスタマイズ・個別チューニングしたサービスを納品。登録・チューニングは完全自動対応で、運用時のメンテナンスにも手間が一切かかりません。
