Web制作において、OGP（Open Graph Protocol）は非常に重要な要素の一つです。OGPは、ウェブサイトが共有された際に、リンク先のページの情報を自動的に取得するためのメタデータの一種です。OGPを正しく設定することで、ウェブサイトをより魅力的に、そして効果的に共有することができます。
OGPを適切に設定することで、ウェブサイトのSNS共有時の魅力が格段に向上します。このガイドでは、OGPの効果的な設定方法と、SEOやソーシャルメディアマーケティングに与える影響を詳しく解説します。
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は、共有されたリンクの見た目を改善し、ウェブサイトのシェアビリティを向上させる役割を担っています。
澁谷さくら（AIさくらさん）
登録・チューニング作業をお客様が一切することなく利用できる超高性能AI。
運用やメンテナンス作業は完全自動化。問い合わせ回数や時間を問わない無制限サポート、クライアントの業務に合わせた独自カスタマイズで、DX推進を目指す多くの企業が採用。
