Facebookで「いいね!」したサイトの画像や文章が表示される仕組み『OGP』とは? | おるずラボ

おるずラボ

発想、プログラミング、デザイン・・あなたも『Creative』な力を手に入れませんか?

Facebookをお使いの方がどれくらい居るのか分からないですが、
僕にとっては無くてはならないツールになりつつあります(笑)

仕事のやり取りも、
メールでなくFacebookメッセージで完結する事が多いですね。

で、そのFacebookでよく見るものなのですが。

例えば友達が「いいね!」した記事とかって
自分のニュースフィードにも表示されると思うのですが、
記事によって画像が表示されたりされなかったりしますよね。

あれって何なんだ?というお話なのですが、
実は「OGP」というものをサイトに設定しているかどうか、なのです。
(OGP = Open Graph Protocol)

この設定、アメブロなどの無料ブログでは
用意されているものしか使えない事が多いのですが、
独自でHTMLから作る場合や、WordPressで作る場合などは
かなり細かく設定できるので今や必須の設定でしょう。

やり方


HTMLを直接書けるなら、簡単。
<head></head>の中に以下のようなタグを埋め込むだけ。

<meta property="og:title" content="ここにタイトル" />
<meta property="og:description" content="ここに解説文" />
<meta property="og:image" content="ここに画像URL" />

こんな感じで設定しておけば、
Facebookがを表示する際にHTMLを読んで・・

「おっ、この記事はOGP設定されてるな。
 じゃあこのog:imageに書いてあるURLで画像を表示するか」

と、表示してくれるわけですね。

OGPは他のソーシャル系サービスでも有効になったりするので、
いいね!やシェアを集めたいWebサイトを作りたい時には必須です。


現在発信しているメルマガの方でも
実際にOGP設定などを施したランディングページを作り
リアルタイムに検証している様子などを発信しているので、
良ければご購読ください!

【無料メルマガ】武器としてのプログラミング

特に、会社や組織という枠組みを超えて
自分で何かを作ってネットで販売していったり
マネタイズしたいという方は、聴いておいて損は無いはずです。