SNSシェアの基礎知識!OGPの基本と設定方法について解説

2016.11.12

SNSシェアの基礎知識!OGPの基本と設定方法について解説

Webサイトの流入を考える上でSNSはいまや最重要とも言えるほど大切です。どれだけコンテンツがシェアされるかで、サイトへの訪問数やコンバージョンも左右されてくるのです。

本稿では、SNSシェアを効果的に行う時に欠かせないOGPについて解説します。FacebookのOGPを設定する方法についても取り上げていますので、Web制作の参考にしていただければと思います。

OGPとは?

FacebookやTwitterなどのSNSでは、他のユーザーがシェアしたWebページなどのコンテンツがタイムラインに流れてくることがあります。この時、ページのタイトルやトップ画像、要約なども一緒に表示されているかと思います。

こういったページ情報を指定しているのが、本稿のテーマであるOGP(Open Graph Protocol)です。SNSでシェアされた時に表示するタイトルやトップ画像は、OGPによって決められているのです。

OGPが正しく設定されていることは、ユーザーにとっては嬉しいことです。なぜかと言うと、シェアされたリンクをクリックする前にページの概要がわかるからです。OGPが適切であることは、Webサイトで成果を出すための必須条件と言うこともできるでしょう。

Facebook OGPの設定方法

OGPの設定方法は、SNSごとに異なります。ここではFacebookに注目して、OGPの設定方法について解説していきましょう。

OGPをHTMLに書き込む

WebページをFacebookのOGPに対応させるには、HTMLソースにOGPを書き込む必要があります。書き込む内容は、主に下のような内容になっています。

<code>
<meta property=”og:title” content=”ページのタイトル” />
<meta property=”og:type” content=”ページの種類” />
<meta property=”og:url” content=”ページのURL” />
<meta property=”og:description” content=”ページの説明文” />
<meta property=”og:image” content=”トップ画像のURL” />
<meta property=”og:site_name” content=”ホームページの名称” />
</code>

この時の注意点としては、Webサイトの全ページ(全HTML)にOGPを書き込むということ。OGPが設定してないと、SNSでシェアされた時に関係のない画像が表示されたりもするので気をつけましょう。

設定したOGPを確認する

OGPが設定できたら、内容が正しいか確認しておきましょう。Facebookが公式でリリースしているデバッガーというツールで確認ができます。

» デバッガー – 開発者向けFacebook

デバッガーのトップから、OGPをチェックしたいページのURLを入力すればOKです。

新着情報

TOP