facebookのリンク表示を四角いボックスにする方法:OGP設定とは

デザインのあれやこれ

Posted on 2015/1/5 by Kentaro

facebookのリンク表示を四角いボックスにする方法:OGP設定とは

facebook上でシェアされてるあの記事は、四角いボックスにイメージ写真付きで綺麗に表示されている…なのに、自分のサイトをシェアした時はURLしか表示されないのは何故?この違いはOGP設定というものにあるんです。

facebookに他サイト記事へのリンクを貼った時、イメージ画像とタイトル・説明文がまとまって四角い箱で表示される事があります。
記事ページに飛ぶ前から大体の内容やイメージが掴めるので、とてもわかりやすいですよね。大きな写真画像もインパクト抜群。見る人へのアピール効果は、青い太字のリンク表示と比べたら段違いですよね。
でも、いざ自分で作ったサイトやブログ記事のリンクを貼ってみると、ただの青い太字リンク表示になっていたり、または全然関係のない画像が表示されてしまったり…

この違いは、リンク先ページのOGP設定によるものなんです。

概要

<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# article: http://ogp.me/ns/article# ">
	<meta property="og:type" content="article" />
	<meta property="og:title" content="タイトル" />
	<meta property="og:image" content="イメージ画像のURL" />
	<meta property="og:description" content="説明の文章" />
	<meta property="og:site_name" content="サイトの名前" />
</head>

このような記載を付け加えると、facebook等のソーシャルメディアにリンクを貼った時、図のように四角いボックスで内容が表示されるようになるんですね。

実はこのOGP設定は、リンクの表示形式が変わるだけではなく、記事ページの「いいね!」ボタン等が押された際にニュースフィードに表示されるようになるという効果もあるんです。
逆に言うと、OGP設定がされていなければ「いいね!』ボタンを押されてもニュースフィードに表示されず、記事の拡散効果が全くない…なんて結果に繋がるので、OGP設定はすごく重要な要素なんです。
自作したサイトで、かつソーシャルボタンを設置しているサイトならば、OGP設定は必須項目のひとつですね。

以下で詳しく説明をしていきます。

OGPってなに?

OGPとはOpen Graph Protocolの略なんですが、サイト(記事)のタイトルや画像・説明文等のメタ情報をまとめて記述するためのもので、facebookやmixi・はてな等の各ソーシャルメディア共通の仕様なんです。
要するに『このサイトを紹介する時は、この設定通りに紹介をしてね』という指示書のようなものだと考えればいいと思います。

OGP設定の宣言

OGP設定は、htmlの<head>タグ内に記載をしていきます。
※ここでは紹介していない設定も沢山ありますが、とりあえず最低限必要なものだけ抜粋して紹介しています。
また、下記は執筆時2015年1月の仕様ですが、今後変更になる可能性は多いにあるので、都度チェックをしていってください。

まず<head>タグに、OGP設定の宣言を記載します。

ページがブログ記事等の場合

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

一般的なWebページの場合

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

これは『http://ogp.me/ns#の仕様にそってOGPの設定をしますよ』という宣言です。
次のfb:に続くものは『facebookの場合の仕様はこれですよ』といったもので、article:やwebsite:は、ページ種類毎の仕様の宣言です。
ページ種類の宣言はこの他にも色々な種類がありますが、基本的にはこの2つのどちらかで問題ありません。ブログ記事の場合はarticle、それ以外の時はwebsite、と覚えておけば大丈夫ですね。(これ以外のページ種類はかなり特殊なものが多いので、出番が殆どないんです)

headタグ内に各要素を記載

OGP設定の宣言をしたら、<head>タグ内にタイトルや画像などの指定を記述していきます。

<meta property="設定する項目" content="内容" />

各項目の設定は簡単で、上記のパターンにそって記載をするだけでOKです。

og:type

このページの種類を記載します。

website
一般的なWebページ
article
ブログの記事ページ

これも先ほどのページ種類宣言と同じように、基本的にはこの2つのどちらかで問題ありません。

og:title

ページのタイトルを記載します。
基本的には記事タイトルを記載すれば問題ありませんが、「サイト名:記事タイトル」といった見せ方もできますので、ケースに合わせて捻ってみるのも面白いと思います。

og:image

ページのイメージ画像のURLを記載します。見た目に大きく関わる重要な項目ですね。
imageは他の項目とは異なり、複数の画像を指定することができます。

よくある不具合で、ブログ記事とは全く関係のない画像が表示されてしまった…というのは、このimage画像の指定が正しくなされていないのが原因なんですね。(ブログサイトのトップ画像が指定されていたり、またサイト内の全ての画像が指定されていたり…)

画像サイズはどれくらいがいいの?

facebookの場合は、推奨画像サイズは1200px×630px(以上)とされています。
でも、これより小さいサイズでも大丈夫で、1.91:1の比率の画像で、かつ600px×315px以上ならば問題はないようです。
また、これ以外のサイズでも表示はされるんですが、画像の上下がカットされたり、表示形式が変わってしまったりするんですね。
例えば200px×200pxの画像だった場合は、現在のように大きな画像の下にタイトルと説明文が表示される形式ではなく、一昔前のような横に細長いボックスの中に画像と文章が並んで表示されるようになります。この形式でも綺麗にまとまっているので問題はありませんが、アピール効果はちょっと弱いので、なるべくなら600px×315px以上のサイズにするのが良さそうですね。

og:description

ページの説明文を記載します。
ブログサービスやプラグイン等で自動設定されている場合は、本文中の最初の数十文字を抜粋して指定されるケースが多いようです。でも、この説明文も重要なアピール要素なので、説明文として別途に書くか、あるいは記事の最初は説明文となるよう意識して書くのがいいと思います。

og:site_name

サイトの名前を記述します。※記事タイトルではなく、そのサイトの名前です。
説明文の下にちょこんと小さく表示される、コピーライトのような役割ですね。

Facebookデバッガーで確認

以上のOGP設定を終えたら、Facebookデバッガーという表示確認用のページで見え方をチェックしてみましょう。

Facebookデバッガー

Facebookデバッガー画面

この画面で、確認するページのURLを入力して「Debug」をクリックします。

OGP設定プレビュー画面

先ほど設定したOGP設定がつらつらと並び、スクロールすると下のほうにプレビューが表示されているので、見え方を確認して問題がなければ、OGP設定は無事完了です。

思い通りに指定できないのは自動化されているから?

既成のブログサービス等ではこのOGP設定を自動化させているものが多いですね。記事中の画像を自動的にog:imageとして設定したり、本文の最初の数十文字をog:descriptionとして指定したり…ゆえに、思った通りに画像指定がされないといった事も生じるようです。

このように自動化されているがゆえに、OGPという設定があった事に気付かないケースも多いんじゃないかと思うんですね。しかし(何度も言うようですが)OGP設定はとてもとても重要なアピール要素の一つなので、意識してしっかり設定をし、より多くの人にコンテンツを届けましょう。

※この記事では、OGPについてはかなり端折って説明しています。
今回は割愛した項目やfacebookインサイト設定、プラグインや自動化の手法など、別記事として紹介していく予定です。

Thank you for reading! 読んでくれてありがとう!