Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

OGP(Open Graph Protocol)について

f:id:tbpg:20150620032802j:plain

概要

OGP(Open Graph Protocol)について

OGPとは?

Webページの内容をグラフィカルに、分かりやすく表示するための仕様です。

設定例

metaタグを設定しておくことで、表示内容を指定することができます。 貼り付けるのは先日私がクリエイターズネクスト社のTech Blogとして作成した記事

には、下記のようなOGPを設定しました。

<meta property="og:title" content="秒速でSlack,esa,Trelloを導入" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://cnxt.jp/topics/slackesatrello/" />
<meta property="og:image" content="http://cnxt.jp/wordpress/wp-content/uploads/2015/06/speed.jpg" />
<meta property="og:site_name" content="株式会社クリエイターズネクスト" />
<meta property="og:description" content="クリエイターズネクストの開発体制の改善(Slack,esa,Trelloの導入)が秒速で行われた話。その他、経営のスピード感を生み出すモットーが伝わるエピソード付き。" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="クリエイターズネクストの開発体制の改善(Slack,esa,Trelloの導入)が秒速で行われた話。その他、経営のスピード感を生み出すモットーが伝わるエピソード付き。" />

はてなにOGP対応のページをブログカードとして貼り付ける

下記ページの手順に沿ってみます。

ブログカードとして貼り付けた結果が以下です。 OGPの設定がしてあるため、設定した表示がされています。

cnxt.jp

OGPの設定確認をするツール

Facebook OGP Debug Tools

外部資料

ogp.me

staff.hatenablog.com

cnxt.jp