PAGE TOP

OGPの設定 ソーシャルメディアでWebサイトがシェアされた場合に意図した通りに表示させる方法

OGPの設定はSMO(ソーシャルメディア最適化)対策では重要です。

OGPとはOpenGraph Protocol(オープン・グラフ・プロトコル)の略です。
簡単にいってしまうと、自身のサイトにソーシャルメディア用の付加情報(おまじない)を入れると、
シェアされた時に、意図したとおりにソーシャルメディアで表示してくれます。

OGP設定

OGPを設定しないとFacebookが勝手にホームページから文字や画像を拾って表示してしまいます。

たとえば、FacebookでWebサイトをシェアした場合、OGPを設定していないと自分が意図しない画像や説明文がでてしまい、うまく友達に伝わりません。

これはFacebookのシステムがシェアしたホームページをクローリング(循環)して、関係のない画像や説明文を表示させるからです。
これを避け、意図する画像や説明文を表示させる方法です。

具体的には、オープン・グラフ・プロトコル(Open Graph Protocol)に対応したMETAタグをホームページに埋め込むというやり方です。

ホームページにMETAタグというのがあるのはご存じだと思います。

<meta name="description" content="横浜・神奈川、東京を中心にホームページ制作から運用・集客までトータルにお客様をサポートします。” />
<meta name="keywords" content="ホームページ制作,web制作,横浜,神奈川、SEO,ソーシャルメディア” />

これと同じように、ソーシャルメディア用の付加情報をHTMLの<head>タグ内に指定します。

<meta property="og:title" content="ソーシャルメディアとWebサイトの連携でどんどんお客さんを呼び込みましょう" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.site-support.jp/" />
<meta property="og:image" content="http://www.site-support.jp/images/ogp_banner.jpg
<meta property="og:site_name" content="Webサイト制作とインターネット集客は株式会社ネット・ビー・ウェイブ
<meta property="fb:admins" content="100001416286052" />
<meta property="og:description" content=" ソーシャルメディアとWebサイトの連携でアクセスアップ、新規顧客獲得、売上アップに繋げます!" />
 
og:title:ページのタイトル
og:type:コンテンツタイプ
og:url:ホームページアドレス
og:image:表示させる画像
og:site_name:サイトのタイトル
og:description:サイトの説明
fb:admins:facebookページの管理者ID

 

 

 
上記のMETAタグを自社用に変更してホームページに組み込んで下さい。
これで、FACEBOOKユーザーがあなたのホームページをシェアした場合に、
ホームページの見せ方をサイト側で指定することができます。

ワードプレスに「All in One SEO」プラグインを導入すればOK!

応用としては動画も対応可能!

動画コンテンツの場合、属性を指定できます。


<meta property="og:video" content="動画のURL">
<meta property="og:video:width" content="600">
<meta property="og:video:height" content="400">
<meta property="og:video:type" content="application/x-shockwave-flash" />

オーディオ

<meta property="og:audio" content="mp3等のURL">
<meta property="og:audio:title" content="曲名">
<meta property="og:audio:artist" content="アーティスト名">
<meta property="og:audio:album" content="アルバム名">
<meta property="og:audio:type" content="application/mp3" />

 
設定が正しいかどうかはこちらでチェックできます。
デバッカー
 
https://developers.facebook.com/tools/debug
 
チェックするホームページのURLを入力してデバックボタンを押して下さい。
デバッカー



いかがでしたか、基本的に設定自体は大したことありません。

Facebookでブログ記事紹介するなら、必ず、設定しておきましょう。