OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。

OGPの設定を正しく行わないと、せっかくSNSでシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があり、注意が必要です。

今回は、WebサイトにおけるOGPの正しい設定方法や、適切な画像サイズ、OGPが正しく設定されているかの確認方法をご紹介したいと思います。

OGPとは?

OGPとは、「Open Graph Protcol(オープングラフプロトコル)」の略称で、TwitterやFacebook、LINEやSlackなどでWebサイトをシェアした時に表示されるタイトルや画像を設定するためのものです。

例えば、TwitterでWebサイトをシェアすると上記の画像のようにリンクがカードで表示されますね。

このように、OGPが正しく設定されていると、SNSやチャットツールでURLがシェアされた時に画像やテキストでページの情報を表示することができます。

最近では、SNSやチャットツールでWebサイトのURLをシェアすることも当たり前になっていて、Webサイトを制作する上でOGPの設定が不可欠と言っていいでしょう。

OGPを設定するメリット

Webサイトの流入経路は様々ですが、検索エンジンとともに重要な流入元がSNSからの流入です。SNS上でWebサイトやページがシェアされ、その投稿を見た人がWebサイトにアクセスしたり、さらにその人がシェアしたりして、多くの人にWebサイトへアクセスしてもらうといったように、SNSからの流入は近年とても重要視されています。

OGPが正しく設定されていないと、SNSやチャットツールでWebサイトがシェアされた場合にURLしか表示されず、Webサイトのタイトルやページのタイトルなどが分からず、非常に分かりづらい表示となってしまいます。

正しくOGPが設定されていると、画像やページのタイトル、サイト名などが自動的に表示され、より多くの人に興味を持ってもらうことができます。SNSやチャットツールでのシェアからアクセス数を伸ばしたいと考えている場合は、必ずOGPを設定しておくようにしましょう。

OGPの正しい設定方法

OGPは、複数のタグによって構成されています。基本的に、下記に紹介するタグをすべてHTMLのコードに記載しておくようにしましょう。

<head prefix="og:http://ogp.me/ns#">
  <meta property="og:title" content="ページのタイトル">
  <meta property="og:description" content="ページの説明文">
  <meta property="og:url" content="ページのURL">
  <meta property="og:image" content="サムネイル画像のURL">
  <meta property="og:type" content="ページの種類">
  <meta property="og:site_name" content="サイトの名前">
</head>

では、それぞれのタグの内容についてご説明してきます。

headタグへの記述

まず、htmlのheadタグに、下記のようなprefix属性を追加します。

<head prefix="og:http://ogp.me/ns#"></head>

これにより、このページがOGPを使用することの宣言となり、各アプリなどがOGPを正しく認識してくれるようになります。

og:title

og:titleは、ページのタイトルを設定します。通常のtitleタグと同じ値を設定しておくといいでしょう。

該当するコードは下記の部分です。

<meta property="og:title" content="ページのタイトル">

og:description

og:descriptionは、ページの説明文を設定します。こちらも、通常のdescriptionと同じ内容を設定しておきます。

文字数は、100文字程度にしておくのが理想ですが、SNSでのシェアの場合全文が表示されなかったり、長くてもほとんど読んでもらえないため、重要な内容は前半に記述するように心がけた方がいいでしょう。

該当するコードは下記の部分です。

<meta property="og:description" content="ページの説明文">

og:url

og:urlは、ページのURLを設定します。ここに設定するURLは、絶対パスで記述する必要があり、相対パスでは上手く動作しないため注意が必要です。

例えば、imgタグだと下記のように記述することがあると思います。

<meta property="og:url" content="/assets/images/xxxx.png">

上記の記述は、相対パスと言われ、ドメインを省略して記述されることがありますが、og:urlは、下記のようにURLを正しく記述する絶対パスで記述するようにしてください。

<img src="https://example.com/assets/images/xxxx.png">

該当するコードは下記の部分です。

<meta property="og:url" content="ページのURL">

og:image

og:imageは、SNSでシェアされた時に表示される画像を設定します。画像は、1200x630pxに設定することが一般的ですが、SNSの種類やチャットツールによって、表示範囲が異なる場合があるため、下記の画像サイズに関する説明を読んで、適切なサイズで画像を作成するようにしましょう。

該当するコードは下記の部分です。

<meta property="og:image" content="サムネイル画像のURL">

og:type

og:typeは、ページの種類を設定します。下記を参考に値を設定しておきましょう。

website トップページなど
blog ブログのトップページなど
article 記事やブログの投稿ページなど

他にもいくつか設定できるものはありますが、一般的なWebサイトで使用するのは上記の3種類です。ただし、そこまで重要ではないので、そこまで神経質にならなくても大丈夫です。

該当するコードは下記の部分です。

<meta property="og:type" content="ページの種類">

og:site_name

og:site_nameは、サイトの名前を設定します。ページ名ではなく、サイト名なので注意してください。

該当するコードは下記の部分です。

<meta property="og:site_name" content="サイトの名前">

Twitter用のOGP設定方法

上記に紹介したOGPの設定以外にも、TwitterとFacebookは特別な設定が必要となります。

SNSでのシェアは、Webサイトへのアクセスを増やすためにとても重要となるため、必ず設定しておくようにしましょう。

<meta name="twitter:card" content="カードの種類"> 
<meta name="twitter:site" content="@Twitterアカウント名">

twitter:card

twitter:cardは、Twitterでシェアされた時の表示方法を設定します。

一般的に使われるのは、下記の2種類です。

summary 画像が小さく配置された横長のカードで表示
summary_large_image 画像を大きく表示し、その下にタイトルや説明文を表示

おすすめの設定は、「summary_large_image」で、スマホで表示した時に、より大きくカードが表示されるためクリック率の向上が狙えます。

summary_large_imageに設定したい場合は、下記のように記述します。

<meta name="twitter:card" content="summary_large_image">

summaryを使用する場合は、下記のように記述しておきましょう。

<meta name="twitter:card" content="summary">

twitter:site

twitter:siteは、Twitterのユーザー名を設定します。

Webサイトや、サイト運営者のTwitterアカウントがある場合は、下記のようにユーザー名を設定しておきましょう。

該当するコードは下記の部分です。

<meta name="twitter:site" content="@Twitterアカウント名">

Facebook用のOGP設定方法

Facebookについては、Facebook上でシェアされた時の見た目を調整するためのものではありませんが、

fb:app_idというプロパティに、FacebookのアプリIDを設定しておくことで、Facebookインサイトを使ってトラフィックの分析を行うことができるようになります。

コードの例は、下記のとおりです。

<meta property="fb:app_id" content="app_id">

OGPに使われる画像サイズ

OGPに使われる画像サイズは、1200x630pxで作成するようにしましょう。

このサイズで作成しておくと、様々なSNSでシェアされた時に表示崩れが起きづらく、きれいに表示することができます。

また、SNSやチャットツールの種類によって正方形にトリミングされたりする場合もあるため、重要な要素やテキストはなるべく中央に配置することがおすすめです。

OGP画像シミュレータ

画像をアップロードすると、Facebookのシェアにおける複数のパターンでの表示を確認することができるツールです。

画像が正方形の場合に表示がおかしくなってしまわないか、小さな表示の場合でも分かりやすい画像になっているかなどを確認する際に役立ちます。

OGPが正しく設定されているか確認する方法

OGPが正しく設定されているか確認することができるサービスが公開されています。いずれも、ページ公開後でないと確認することができませんが、URLを入力するだけで簡単にチェックすることができるので、確認やデバッグに使用するといいでしょう。

OGP確認ツール

OGPの各プロパティに設定されている値を確認したり、Facebook、Twitterでの見え方を確認することができるツールです。

ラッコツールズ OGP確認

URLを入力すると、Facebook、Twitter、はてなブックマーク、LINEでのそれぞれの見え方を確認することができるツールです。

未公開のページの場合は、画像、タイトル、説明文を入力して確認することもできます。

OGPを設定する時の注意点

各ページごとにOGPタグを整えよう

ページ数の多いWebサイトの場合、それぞれのページにOGPを設定する必要があり、手間に感じるかもしれません。

しかし、OGPがしっかりと設定されていないWebサイトはSNSからのアクセスしてもらうチャンスを減らしているような状態なので、機会損失が大きいです。

なるべく、それぞれのページごとに、そのページに合った内容でOGPを作成するようにしましょう。

手間をかけずにOGPを整えたければ、WordPressを使ってWebサイトを構築することがおすすめです。

WordPressは、投稿や固定ページを作成すれば、自動的にOGP用のタグが出力されるため、わざわざ時間をかけて設定する必要がありません。

構築には時間と手間がかかってしまいますが、OGP以外にもWordPressを利用するメリットは多岐に渡るため、更新の多いWebサイトなどにはおすすめです。

シェアを見越した画像設定を心がけよう

SNSでシェアされた際に、最も注目を集めるのは画像です。特に、Twitterの「summary_large_image」は多くの部分を画像が占めています。

画像のクオリティが低いと、シェアを見た人がアクセスする意欲を失ってしまうかもしれません。

わざわざ自分で画像を作成しなくても、フリー画像を利用したり、画像素材を購入したり、画像を用意する手段は様々なので、自分に合った方法でOGP用の画像を準備してください。

TwitterとFacebookのキャッシュをクリアする方法

TwitterとFacebookは、一度OGP情報を取得したら、それがキャッシュとして保存されます。そのため、情報取得後にWebサイト上のOGP情報を更新しても、キャッシュが保持されているため情報が書き換わりません。

時間が経つと勝手に新しい情報に更新されますが、すぐに更新したい場合は、TwitterとFacebookがそれぞれ提供しているページから再読み込みを行うと、キャッシュを即座にクリアすることができます。

Twitter Card Validator

中央のフォームに、キャッシュをクリアしたいページのURLを入力し、「Preview Card」をクリックすると、プレビューの表示とともにキャッシュがクリアされます。

プレビューの情報が最新の情報になっていれば、正しくキャッシュクリアが完了したことを確認できます。

Facebook シェアデバッガー

こちらもTwitterと同様に、ページ上部の入力フォームにページのURLを入力し、「デバッグ」をクリックするとプレビューが表示されます。

取得された情報が更新前のものの場合は、「もう一度スクレイピング」という部分をクリックすると、最新情報を取得し、キャッシュをクリアすることができます。

まとめ

OGPの設定は、忘れてしまいがちですが、Webサイトにとってとても重要です。特に、近年ではSNSでのWebサイトのシェア数が増えてきていて、検索流入とともにSNSからの流入の比率が高まってきています。

少し手間かもしれませんが、公開時には忘れずにOGPの設定を行うようにしましょう。

その他のおすすめ情報はこちら。

おすすめの記事