近年は、Webサイトの集客にX（旧Twitter）やFacebookなどのSNSを活用するケースが増えています。そうしたSNSでの集客に便利なのが、「OGP」というHTML要素です。OGPを設定するのとしないのとでは、SNSユーザーへの訴求力に大きな差が生じます。
そこで本記事では、OGPの基本的な機能や設定方法を詳しく解説します。より効果的に活用するためのポイントも紹介しますので、ぜひ参考にしてみてください。
目次
OGP（Open Graph Protcol）とは、自社のWebページをSNSでシェアする際に、そのページのタイトルや概要などの情報を正確に伝えるためのHTML要素のことです。OGPをあらかじめ設定しておくと、SNSでWebページを共有した際に、そのページのタイトルやサムネイル、説明文などが自動的に表示されるようになります。SNSの投稿を見たユーザーに対してWebページの情報をより正しく、より魅力的に伝えられるため、SNSを活用したWebサイト集客では欠かせない要素となりつつあります。
OGPを設定しない場合は、SNSが自動的に用意した画像や説明文が表示されるため、ページの内容が正確に伝わらない可能性があるでしょう。一方、あらかじめOGPを利用できるようにしておけば、SNSの投稿を見たユーザーに対して、Webページの情報や魅力を正しく伝えられます。
また、そのWebページで押し出したい強みを効果的にアピールできるので、ユーザーへの訴求力を高めることが可能です。キャッチ―なフレーズや画像を効果的に活用すれば、より多くのユーザーがWebページにアクセスしてくれるようになるでしょう。
このように、OGPには「ユーザーにWebページの強みや魅力をより効果的にアピールできる」というメリットがあります。SNSを組み合わせたWebマーケティングを行う際は、ぜひとも活用したい機能のひとつです。
コンテンツマーケティングとは？実践方法や成果を出すためのポイント
OPGは、おおむね以下の手順で設定できます。
なお、実際はOGPの機能を利用するためには、投稿するSNSごとに個別の設定が必要です。やり方はSNSによって異なるため、後ほど詳しく解説します。まずは、基本的なやり方を把握しておきましょう。
OGPを設定するには、まずOGPを使用することを宣言する必要があります。ここでいう宣言とは、意思を言葉にすることではなく、「プログラミングでどのような処理を行うかを明示する」といったイメージです。
OGPは、Webページを作成する際に使用するプログラミング言語である「HTML」の要素のひとつなので、まずはHTMLに要素を書き込む必要があります。
OGPの使用を宣言する際は、head要素にprefix属性を追加します。headとは、Webページのタイトル情報や著者情報など、ページ全体のメタデータを定義する場所のことです。head部分に書き込んだ内容はブラウザ上で直接表示されるわけではなく、「そのページの設定」としてWebページ全体に反映されます。また、prefix属性には「これからOGPを使用する」と宣言する意味合いがあり、head要素にprefix属性を記述することで、OGPの使用を宣言できます。
具体的には、属性値に以下を書き込みましょう。
<head prefix=”og: http://ogp.me/ns#”>
OGPの使用を宣言したら、次にページタイトルや説明文など、SNSでシェアしたときに表示させたい項目について記述していきます。HTMLの基本的な知識が必要なため、難しい場合はサイト運営の担当者や専門家に任せるのが得策です。
1.ページのURL
HTMLのmeta要素にproperty属性を指定したら、その属性値に 「og:url」 をマークアップするなどしてページのURLを指定します。具体的には、以下のように記述しましょう。
<meta property=”og:url” content=” ページの URL” />
このとき、相対パスではなく、絶対パスで記述することが大切です。相対パスとは、簡単にいうと現在閲覧しているページから、目的のページの位置を相対的に記述するものです。一方、絶対パスとは、目的のページまでの道順を省略せずにすべて記述するものを指します。
2.ページの種類
トップページや製品紹介ページなど、OGPを使用するページの種類を指定しましょう。具体的には、以下のように記述します。
<meta property=”og:type” content=” ページの種類” />
「ページの種類」の部分には、そのページの種類に対応するワードを記述します。たとえば、以下のようなものがあります。
3.ページのタイトル
次に、ページのタイトルを指定します。具体的には、以下のように記述しましょう。
<meta property=”og:title” content=” ページのタイトル” />
Webサイトと同じタイトルを設定するのが一般的ですが、OGPのページタイトルは20文字程度で、サイト情報を含まないタイトルにするのが望ましいとされています。その条件を満たすために、Webサイトとは異なるタイトルを設定しても問題はありません。
4.ページの説明文
Webページの説明文を指定します。いわゆるディスクリプションと呼ばれるものです。具体的には、以下のように記述しましょう。
<meta property=”og:description” content=”ページの説明文” />
説明文の文字数は、80～90文字程度が最適とされています。多すぎると説明文が見切れて、伝えたい情報が見切れてしまう可能性もあるため注意が必要です。
meta descriptionとmeta keywordsの違いとは？SEOにおける効果を解説
5.サイト名
サイト名を指定します。具体的には、以下のように記述しましょう。
<meta property=”og:site_name” content=”サイト名” />
ページタイトルではなくサイト名を設定する部分なので、間違えないように注意しましょう。
6.サムネイル画像
最後に、サムネイル画像を設定します。SNSでWebページをシェアする際、表示したい画像のURLを指定しましょう。このとき、ページのURLと同様、相対パスではなく絶対パスで記述します。サムネイル画像は、SNSに合わせて最適なサイズの画像を設定することが大切です。たとえば、Facebookの場合は1200×630pが推奨されています。
WordPressでWebサイトを制作している場合は、SEO対策のプラグインを使用すると便利です。
代表的なところでは、「All in One SEO」や「Yoast SEO」などが有名です。SEO対策のプラグインにはほかにもさまざまな種類があるので、実際に利用してみて使い勝手のよいものを選択しましょう。
ここからは、SNSごとの設定方法を解説していきます。まずは、Facebookを利用する場合の設定方法です。
Facebookの投稿でOGPを使用するためには、基本的な設定と併せて、「FacebookアプリID（15桁の半角数字）」の追記が必要です。Facebook アプリIDとは、Facebookが提供しているデベロッパー向けツールである「Meta for Developers（旧Facebook for developers）」の取得の際に必要なIDのことを指します。
具体的には、以下のように記述をしましょう。
<meta property=”fb:app_id” content=”FacebookアプリID” />
この設定を行っておくと、投稿に対する「いいね！」の数やどれくらいの人が見てくれたのか、どの時間帯がユーザーの目にとまりやすいかなど、Facebookからサイトへのトラフィック分析を利用できるようになります。
次に、X（旧Twitter）でWebページをシェアする場合の設定方法です。Twitterの場合は、基本的な設定と併せて、「Twitterカードの種類」と「Twitterのユーザー名」を指定する必要があります。
Twitterでの表示タイプを指定します。Webサイト・ブログ用、アプリ配布用など計4種類のなかから、シェアするコンテンツに合わせて選びましょう。具体的には、以下のように記述します。
<meta name=”twitter:card” content=”カードの種類” />
「カードの種類」の部分には、次のなかから、選択するカードの種類に応じて記述します。
公式Twitterの管理者や投稿者のユーザー名を指定します。具体的には、以下のように記述しましょう。
<meta name=”twitter:site” content=”@ユーザー名” />
LINEでWebページをシェアする場合は、基本的な設定以外に特別な設定は必要ありません。なお、LINEに投稿した場合は、設定項目のうち「ページタイトル」「説明文」「サムネイル」の3つが表示されます。
ここからは、各SNSでOGPをきちんと設定できているか確認する方法を紹介します。
Facebookが提供している「シェアデバッカー」で確認するのがおすすめです。まずはFacebookにログイン後、シェアデバッカーを開きます。OGPを設定したページのURLを入力して「デバッグ」ボタンを押すと、OGPの設定がユーザーにどのように表示されているのかチェックできます。
X（旧Twitter）が提供している「Twitter Card Validator」で確認するのがおすすめです。まずはXにログイン後、Twitter Card Validatorを開きます。OGPを設定したページのURLを入力して「preview card」を押すと、OGPの設定がユーザーにどのように表示されているのかチェックできます。
LINEには、FacebookやXのように公式に提供されているチェックツールはありません。LINEの投稿を確認したい場合は、テスト用のLINEグループを作成するのがおすすめです。自分やサイト運営メンバーのみで構成された確認用LINEグループを作成し、実際にWebページをシェアしてみるとよいでしょう。
OGPをより効果的に活用するためには、以下のポイントをおさえることが重要です。
ユーザーのクリック率を上げるためには、魅力的なサムネイルを設定することが大切です。各SNSの画像サイズに合わせて、ユーザーが思わずクリックしたくなるようなサムネイルを作成しましょう。
FacebookやX（旧Twitter）などのSNSには、それぞれ特色があります。そのSNSのユーザーに好まれるトンマナやテイストを意識し、ディスクリプションのテキストや画像を調整することが大切です。
ハッシュタグを上手に活用すると、より多くのユーザーに見てもらえます。投稿との関連性の高いハッシュタグを設定し、より広い範囲に自社のWebページをアピールしましょう。
OGPとは、WebページをSNSでシェアした際に、ユーザーに情報を伝えるためのHTML要素です。OGPを設定すると、Webページのタイトルやサムネイル、説明文などが表示され、訴求力を高められます。OGPを上手に活用し、SNSマーケティングを成功に導きましょう。ただし、OGPを設定するためにはHTMLの知識が必要です。自社リソースでの対応が難しい場合は、専門家に相談することをおすすめします。
コンテンツ作成に関するお悩みは、「アイオイクス 株式会社」までご相談ください。これまで数多くの企業でコンテンツ作成・改善のコンサルティングに取り組んできた弊社だからこそ、貴社のWebサイトにおける課題や的確な改善策を提案いたします。
2002年設立から、20年以上に渡りSEOサービスを展開。支援会社は延べ2,000社を超える。SEO/CRO（コンバージョン最適化）を強みとするWebコンサルティング会社。日本初のSEO情報サイトであるSEO Japanを通じて、日本におけるSEOの普及に大きく貢献。
SEO最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。
