OGP（Open Graph Protocol）とは、FacebookやTwitterなどのソーシャルメディアでWebページを共有する際に使用されるHTML要素の集まりです。OGPを適切に設定することで、共有される情報が正確かつ魅力的に表示され、ユーザーへの訴求力が高まります。この記事では特に初心者の方にもわかりやすく解説します。
OGP（Open Graph Protocol）とは、FacebookやTwitterなどのソーシャルメディアでWebページを共有する際に使用されるHTML要素の集まりです。OGPを利用することで、共有されたWebページのタイトル、概要、イメージ画像、URLなどの詳細情報を正確に伝えることができます。
OGPを実装するためには、HTMLファイルのheadタグ内でprefix属性を使用してOGPの宣言を行います。そして、metaタグのproperty属性を使用して、タイトルや説明文（ディスクリプション）、画像などの属性値を指定し、Webページの詳細情報をマークアップします。
これにより、ソーシャルメディア上で共有されるコンテンツが正しく表示され、ユーザーにとってより魅力的な情報となります。また、正確で興味を引く情報が表示されることで、ユーザーの関心を高めることができます。
適切に設定されたOGPは、共有の増加やウェブページへのアクセス増加、被リンクの獲得など、SEOの効果を向上させることができます。
OGPを設定する理由は、ユーザーへの共有が限定的になる可能性があるからです。
OGPを設定せずにWebページを共有すると、SNSのクローラーはOGPを認識することができません。そのため、クローラーは自動的にWebページ内の情報を抽出しようとしますが、自動抽出される情報は必ずしも適切ではありません。特に概要や画像の選択はクローラーに任されているため、意図しない情報や不適切な情報が表示される可能性があります。
このような状況では、共有されるWebページの情報が魅力的でなくなり、ユーザーの興味を引くことができません。その結果、多くのユーザーによる共有が制限されてしまいます。
したがって、OGPを適切に設定することは非常に重要です。OGPを設定することで、共有される際の情報が正確かつ魅力的に表示され、ユーザーの関心を引くことができます。これにより、共有が増え、より多くのユーザーにアクセスしてもらう機会や被リンクの獲得など、SEOの効果も高まるでしょう。
基本的な OGPを設定するための基本的な記述を紹介します。
<head prefix="og: https://ogp.me/ns#">
<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="ページの種類" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="サムネイル画像のURL" />OGPを設定する際に避けるべき注意点。
- 同じ内容を設定すること
全てのページにおいて、OGPの内容を完全に同じに設定することは避けるべきです。異なるページにはそれぞれ独自の情報がありますので、OGPもそれに合わせて適切に設定する必要があります。ページのタイトルや説明文、サムネイル画像などはページの内容や特徴に応じて個別に設定しましょう。全く同じ内容のOGPを設定してしまうと、ユーザーに対して訴求力が低下し、共有時の興味関心も薄れる可能性があります。 - OGPに対応しているか確認すること
OGPは主にソーシャルメディアやプラットフォームでのシェア時に表示される情報ですが、すべてのウェブサイトがOGPを設定できるわけではありません。特定のサイトやプラットフォームがOGPに対応しているかを事前に確認しましょう。適切な設定が行われていない場合、OGP情報が正しく表示されず、シェア時の効果が得られない可能性があります。
これらを適切なOGP設定を行い、共有時にユーザーに対して情報を提供することができます。
OGP設定が反映されない場合の対処法としては、キャッシュをクリアすることが重要です。
FacebookやTwitterなどのプラットフォームでは、一度取得したページ情報をキャッシュしていることがあります。そのため、ページの内容やOGP設定が変更されても、古い情報が表示されることがあります。
対処法としては、以下の手順を試してみることが有効です。
- Facebookの場合
- シェアしたURLをFacebookのシェアデバッカー（https://developers.facebook.com/tools/debug/）に入力します。
- デバッガーが最新のページ情報を取得するために「デバッグ」を実行します。
- これにより、Facebookのキャッシュがクリアされ、最新のOGP情報が反映されるはずです。
- Twitterの場合
- シェアしたURLをTwitterのCard validator（https://cards-dev.twitter.com/validator）に入力します。
- プレビューを再度取得するために「プレビューカード」を実行します。
- これにより、Twitterのキャッシュがクリアされ、最新のOGP情報が反映されるはずです。
キャッシュのクリアには時間がかかる場合もありますので、上記の手順を試しても即座に反映されない場合は、しばらく時間をおいて再度試してみてください。
適切なOGP設定を行うことで、以下の利点を得ることができます。
- 引き立つシェア内容
正確で魅力的なタイトルや説明、目を引く画像を設定することで、ユーザーの興味を引く共有が可能です。これにより、他のユーザーがより多くの関心を持ち、共有や拡散の機会が増えます。 - 誤った情報の回避
正確なOGP設定により、情報の誤解や混乱を避けることができます。適切なタイトルや説明を設定することで、ユーザーがコンテンツの内容や性質を正しく理解し、共有の意図に沿った反応を得ることができます。 - ブランドの統一性
OGPを使ってウェブページやコンテンツを共有する際には、ブランドの統一性も重要です。統一されたロゴやデザイン、カラースキームを使用することで、ブランドの一貫性を維持し、ユーザーに信頼感を与えることができます。
適切なOGP設定を行うことで、共有や拡散の効果を最大化することができます。この機会にOGP設定を意識しましょう。
