LoginSignup
4
3

More than 5 years have passed since last update.

OGP

Last updated at Posted at 2015-04-29

OGP (Open Graph Protocol)とは?

facebook、mixi、GREEなどのSNSで使われている共通の仕様のことで、
「このウェブページはこんな内容ですよ」と明言するためのものです。

例えばfacebookでは、あるページにいいね!がされると
「〇〇さんが〇〇についていいね!と言っています」とウォール上に投稿されます。
これはOGPを導入していないサイトの場合に表示される内容です。
OGPを導入しているサイトがいいね!された場合は「記事元のURL、ページタイトル、サイト説明、サムネイル等」を表示させる事ができます。
このように、いいね!された時の表示をサイト側で指定するためのOGPについて少しまとめてみました。

OGPの例

index.html
<meta property="og:type" content="ウェブページが何のページであるか(必須)">
<meta property="og:title" content="ウェブページの名前(必須)">
<meta property="og:image" content="ウェブページのサムネイル(必須)">
<meta property="og:url" content="ウェブページの URL(必須)">
<meta property="og:description" content="ウェブページの説明">
<meta property="og:site_name" content="サイト名">
<meta property="og:email" content="連絡先">
<meta property="og:locality" content="場所">
<meta property="og:latitude" content="経度緯度での位置情報">

基本的には、meta property=”何を指定するか” content=”どのように指定するか”
といったように記述していきます。
他にも様々な設定がありますので下記に本家サイトURLを記載しておきます。

The Open Graph protocol

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3