Open Graph protocolとは (オープングラフプロトコルとは) [単語記事]

Open Graph protocolとは、Facebookが開発した、SNSでウェブページの情報を取り扱うための規格である。略してOGP。

概要

WWW .NICO VIDEO.JP 新・豪血寺一族 -煩悩開放 - レッツゴー！陰陽師レッツゴー！陰陽師（フルコーラスバージョン）

SNSに投稿されたウェブページのリンクの共有で、↑こんなかんじのを見たことが無いだろうか。これがまさにOGPである。

ウェブページに特定のHTML タグを挿入することによって、そのページのタイトル、説明文、画像といったそのウェブページの情報をSNSに伝えることが出来る。これによって、ユーザーがSNSにウェブページを共有した際に、見栄えを良くしたり出来る。

名称にある「Gr aph」とは、棒グラフとかのグラフではなく、「ソーシャルグラフ」を意味している。ソーシャルグラフとは、インターネットにおける人間関係や結びつきを意味する。

狭義ではFacebookで使用されているものを指すが、他のSNSで実装されている同様の機能（代表として「Twitter カード」）についても「OGP」と呼ばれることがある。また、本来「OGP」とはプロトコルを指す言葉であるが、それによって実装されるものについても「OGP」と呼ばれることが多い。

実装

ウェブページにOGPを実装するには、まず、HTMLのhtml タグに特定の属性を追加する必要がある。これを忘れてしまう事例が意外と多い。ただし、ぶっちゃけ無くても動きはする。

<html prefix="og: https://ogp.me/ns#">

そして、head タグ内に専用のmeta タグを挿入する。meta タグには、property属性に設定項目の種別、content 属性に設定内容を記述する。以下は、ニコニコ大百科のトップページに基づいた記述の例。

<meta property="og:title" content="ニコニコ大百科" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dic.nicovideo.jp/" />
<meta property="og:image" content="https://dic.nicovideo.jp/img/og_b.jpg" />
<meta property="og:description" content="(株)ドワンゴが運営するあらゆる言葉についての記事を閲覧・編集したり、コメントをしたりするサイトです。"/>
<meta property="og:site_name" content="ニコニコ大百科"/>
<meta property="og:locale" content="ja_JP" />

詳しくは、OGPの解説サイトを参照のこと。

Twitterカード

Twitterで用いられているOGPと同様の機能。Twitter カードの種類やTwitterのユーザー名といったTwitter独特の情報を記述できる。

OGPのそれと非常に似せて作られており、Twitter自身もそれを認めている。また、Twitter カードのタグがウェブページに記述されていなかった場合、TwitterはOGPのタグを参照するようになっている。このため、OGPとTwitter カードで内容が重複する箇所は、Twitter カード側のタグを省略することが出来る。

Open Graph protocol 単語

概要

実装

Twitterカード

関連リンク

関連項目

おすすめトレンド

ニコニ広告で宣伝された記事