OGPとは? OGPの意味や設定方法を徹底解説

ブログやオウンドメディアを運営している方にとって、サイト内の記事がFacebookやTwitterなどのSNS上でシェアされることは新しいユーザーを増やすのに重要なことです。

しかし、折角SNSでシェアされたとしても、シェアされたときの見え方で良い印象を与えられなければ、他ユーザーが記事をクリックして開いてくれない可能性もあります。

そこで今回の記事では、SNSでシェアされたときの見え方の設定をすることが出来るOGPについてを解説していこうと思います。

参考までに下の画像は当サイトのトップページがFacebookでシェアされた際に表示される表示画面です。
このように、OGPを設定すると表示画像やタイトル、抜粋分などを設定することが出来ます。

当サイトがSNS上でシェアされた際の表示画面
目次

OGPとは?

OGPとは「Open Graph Protocol」の頭文字をとったもので、FacebookやTwitterのようなSNS上でサイト内の記事がシェアされたときに、シェアされたときの見え方(例: 表示画像やタイトル、抜粋分など)を設定することが出来るHTMLのタグ情報です。

OGPを設定していない場合でも表示画像やタイトルなどを自動的に選んでくれ表示されるようになっているのですが、これらの情報がめちゃくちゃだとその記事では何について書かれているのかがユーザーにとって分からなくなってしまうので、クリックして開いてくれない可能性が高くなります。

 

どれだけ記事の内容が良くても、シェアされたときの表示画面でその記事が何を伝えたいのかが伝わらないと記事が拡散されにくくなるということですね。

OGPの設定を始める前に

OGPを設定するには、OGPの設定を始める前にまずprefix属性と呼ばれる属性を使用して、これからOGPを設定するということを宣言する必要があります。

これはHTML5では以下のようにhtmlタグの属性として、記述することが出来ます。(参照元: OGPの公式サイト、URL: https://ogp.me/)

<html prefix="og: https://ogp.me/ns#">
<head>
  <title>ここにタイトルが入ります</title>
  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  ・・・
</head>

ただし、このprefix属性の位置はheadタグに付けた方が良いとする意見もあり、Facebookではheadタグに付ける方を推奨しているようです。(また記述の仕方も少し異なっていますので、以下を参照して下さい。)

<!-- ■Facebookの仕様に従う場合 -->

<!-- トップページに設定するなら以下を使用 -->
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/website#">

<!-- 記事ページに設定するなら以下を使用 -->
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">

OGPの設定方法

それではここではOGPの設定方法についてを解説していきます。

OGPの設定方法は簡単で、metaタグをHTMLソースコード中のheadタグ内に記述しproperty属性の中にOGPの種類を設定し、content属性の中にその値を入力することで設定をすることが出来ます。

<meta property="og:title" content="PLUSONEWEB | 1を足していくウェブメディア">
<meta property="og:type" content="website">
<meta property="og:url" content="https://plusoneweb.net">
<meta property="og:image" content="https://plusoneweb.net/sample.jpg">

それでは以下では基本的なタグを1つづつ紹介していきます。

OGPの種類

ここでは特に設定すべきOGPの種類についてのみ、紹介しております。

og:title

og:titleでは、表示するページのタイトルを設定します。

og:titleに該当する箇所の画像

基本的にはtitleタグと同じ内容で設定しておけば良いかと思います。

og:description

og:descriptionでは、シェアされたときに表示されるページの抜粋分を設定表示するページの要約となる説明文を設定します。

og:descriptionに該当する箇所の画像

こちらについてもmeta descriptionで設定した内容と基本的には同じ内容で良いのではないかなと思います。

og:image

og:imageでは、シェアされたときに表示する画像を設定します。

og:imageに該当する箇所の画像

画像サイズに関してはSNS毎に表示される表示されるサイズが異なりますが、一般的に横幅1200px、高さ630px​が良いとされていることが多いです。

なお、画像のパスは相対パスで指定すると上手く表示されないといった場合がありますので、絶対パスにて指定するようにしましょう。

og:url

og:urlでは、シェアされるページのURL情報を設定します。

こちらもog:imageと同様、絶対パスを使用しましょう。

og:type

og:typeでは、表示されているページの種類を設定します。

表示されているトップページであれば、content属性の値には「website」と指定し、ブログ記事のようなページには「article」と指定するのが一般的です。

fb:app_id

fb:app_idは、Facebookとの連携をする際に必要となるプロパティで、content属性の値にはFacebook for Developersから取得できるIDを設定します。

なお、このプロパティを設定してFacebookと連携すればFacebookからのサイトへのトラフィックを分析することができるFacebookインサイトと呼ばれるアクセス解析ツールを利用できるようになりますが、特に必要のない方は設定しなくても問題はありません。

twitter:card

twitter:cardはTwitterで記事がシェアされた際、シェアされたときの表示画面の画像の大きさ、見え方をどうするかを設定することが出来ます。

主に使用される値には2つあり、content属性の値を「Summary Card with Large Image」とした場合は少し大き目の画像、「Summary Card」を選択した場合は少し小さ目の画像を表示します。

Summary Card with Large Imageの例
Summary Card with Large Image
Summary Cardの例
Summary Card

実際にどのように表示されているのかを確認する方法

それでは最後に、ここまでで設定したOGPがうまく反映されているのかの確認をする方法をSNS毎に紹介したいと思います。

Facebookの場合

まずはFacebookでのシェアされた際の表示の確認の仕方です。

Facebookの場合は、Facebook シェアデバッガーというツールを使用することで表示確認をすることが出来ます。

Facebook シェアデバッガーを開く

Facebookシェアデバッガーのトップページ

使い方は簡単で、上にある検索窓内に表示確認をしたいWebサイト、ページのURLを入力して、右側にあるデバッグをクリックすればOKです。

Facebookシェアデバッガーのトップページ

Twitterの場合

次にTwitterでのシェアされた際の表示の確認の仕方です。

Twitterの場合は、Card Validatorというツールを使用することで表示確認をすることが出来ます。

Card Validatorを開く

Card Validatorのトップページ

使い方は簡単で、左上にある検索窓内に表示確認をしたいWebサイト、ページのURLを入力して、その下にあるPreview CardをクリックすればOKです。

Card Validatorのトップページ

まとめ

まとめです。今回はSNSでシェアされたときの見え方の設定をすることが出来るOGPについてを解説しました。

OGPの設定をしっかりとしておくことで、記事がシェアされた際にその記事が何についての記事なのかを正しく伝えることが出来、場合によっては記事が拡散されるといったきっかけを作ることが出来ます。

ですので、まだ設定していない方はこちらで紹介したOGPは最低限設定しておくことをおすすめします。

今回は以上になります。最後までご覧頂き、ありがとうございました。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA

目次
閉じる