share
  • >
  • ブログトップ>
  • Facebookの見え方が変わる!これだけはやっておきたいOGP設定
Facebook
2015年4月15日
タグ : , , ,

Facebookの見え方が変わる!これだけはやっておきたいOGP設定

Facebookmixiで記事を紹介するならサイトに設定しておいた方が良い「OGP設定」。みなさんきちんと設定されているでしょうか?実際にOGP設定したサイトとしていないサイトを比べてみれば、表示の違いは一目瞭然です。今回は、OGPタグの重要性と設定方法についてご説明します。

OGPとは

OGPとは「Open Graph Protocol」の略。Facebookやmixiでサイトがシェアされるとき、表示を「リッチ」かつ「的確」にしてくれる設定です。設定方法は簡単で、あらかじめ表示させたい情報や画像をページのメタタグに設定しておくだけ。

OGP設定をしておくと、記事がシェアされたとき、フィード上に記事の概要や画像など狙った情報を表示できるようになります。この情報が的確でないと、せっかくシェアされてもPVが伸びないということも考えられるので、SNSボタンのあるサイトなら設定しておいて損はありません。

こんなに違う!OGP設定「あり」と「なし」

まず、OGP設定をしていないサイトがFacebookでシェアされた場合です。OGP設定をしていないときに最も問題になりやすいのが画像で、1)表示されない 2)関係ない画像が表示される 3)画像がトリミングされて切れてしまうなどの現象が起きます。

ogpnone

では、OGP設定をするとどうなるでしょうか。記事と関連のある画像が狙ったサイズで表示され、ユーザーの目を引くものになりました。説明などもきちんと表示されています。

ogp

違いは一目瞭然ですね。OGP設定がきちんとされている記事はフィード上で狙った情報を表示できるので、より的確な情報をユーザーに見せることができ、記事が拡散される確率を上げることができます。

なお、この画像表示はサイズなど仕様変更されることがあります。一度設定したらOKと油断せず、常に最新の情報をキャッチアップしていってください。

OGPタグ設定あれこれ

OGP設定をするには、タグにOGP設定用の記述が必要です。その前に、まず内にprefixを設定し、OGP設定が使えるようにしなければなりません。タグを以下のように記述してください。

 

これでOGP設定が使えるようになりました。Facebookへの対応としては「fb: http://ogp.me/ns/fb#」という記述があります。必要な場合は上記の「ns#」の後ろに、半角スペースで区切って追加してください。

OGP設定はかなり詳細に定義することができますが、ひとまずここでは必ずやっておきたい4つの基本設定と2つのオプション設定を押さえておきましょう。設定する際はという形で記述します。

4つの基本設定

og:title

記事のタイトルです。シェアされたときに表示されるものになります。設定していない場合はの要素が表示されるようです。ここでは、純粋に記事のタイトルのみを記述しましょう。サイト名はsite_nameという別の要素(後述)で指定することができます。

og:type

シェアされたときにどう表示されるかを指定するタグです。ブログ記事の場合はarticleを設定します。他にもmusicやvideoなどを指定することもできるので、内容に応じて適切なものを選択してください。デフォルトの値はwebsiteになります。

og:image

シェアされたときに表示される画像を指定します。imageには様々なプロパティがあり、画像サイズを指定したり、複数の画像を設定したりできます。

og:url

記事のURLを指定します。httpから始まる、完全なURLを指定しましょう。パラメータなどは含めないようにします。

以上が必須とされている4つのプロパティです。このほかに、設定が推奨されているプロパティを2つご紹介します。

2つのオプション設定

og:description

シェアする記事の簡単な説明文です。1~2行で記述することが推奨されています。

og:site_name

記事がWEBサイト内のコンテンツの一部である場合、サイト名を指定します。サイトのブランド名はtitleに記述するのではなく、こちらで記述しましょう。

ここでご紹介した以外にも、OGP設定はかなりの種類があるので、いろいろと試してみてください。2015年最新の情報としては「Facebookなどでサイトが共有された時、リッチ表示するOGPの設定」というサイトでかなり詳細に確認することができます。一般的な運用で必要な情報はほぼ網羅されていると思いますので、一度確認されることをおすすめします。もっと細かい設定を行いたいのであればThe Open Graph protocol(公式サイト・英語)を参照してください。

OGP設定を確認する

OGP設定ができたら、表示を確認してみましょう。Facebookが公開している公式ツールOpen Graph Debugger – Facebook Developersを使うと、簡単にエラーチェックができます。確認したいページのURLを入力して、Debugボタンを押してみてください。エラーがあれば詳細を参考に修正をおこないます。

OGP設定をしよう!

ブログサイトでなくてもSNSボタンの運用を考えているのであれば、OGP設定をしておいて間違いはありません。OGPの設定をしておけば、SNSボタンを設置せずにURLを誰かが共有したとしても、整理された情報を伝えることができます。

より的確な情報をシェアできればPV数のアップや記事の拡散も期待できるので、まだ設定していないという方は、ぜひこの機会に基本の4つのプロパティだけでも設定してみてください。

※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。

※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。

この記事を書いた人

投稿者
井上 博登

1980年・大阪生まれ、大阪育ち。立命館大学を卒業後、新卒でヤフー(株)に入社。
1年後に中山(代表取締役)と共に(株)セルバを起業。

見た目は営業、実態は「利益を出すこと」に徹底的にこだわるグロースハッカー。
費用を掛けず、いかにサイトの成果を上げられるのか、日々研究&実践している。

プライベートの趣味は旅行・バスケ・映画鑑賞。 二児のパパ。

セルバではWEBシステム開発からスマートフォンアプリ開発、デザイン、企画/マーケティングまでいかにコストを掛けず、成果を高めるのか研究し実践しています。企業、店舗のWEBシステム/アプリ開発のお手伝いさせていただいておりますので「WEBシステムの開発」「アプリ開発を依頼したい」「既存サイトのアプリ化」「サイト/アプリからの集客を増やしたい」など新規開発やリニューアルにご興味のある方は、ご相談だけでも構いませんのでお気軽にお問い合わせください。

ご相談・お見積
ページトップ