概要
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の設定がしてあるため、設定した表示がされています。