晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

備忘録:OGP(Open Graph Protocol)の設定。ブログカードに概要やサムネイル画像を入れる。

はてなブログで、リンクを挿入する場合、ブログカード形式の埋め込みができる。

ブログカードは、記事のタイトル、URL、概要、アイキャッチ(サムネイル)画像を簡潔にまとめて表示する埋め込み形式。ブログカードのサンプルが以下。

OGP(Open Graph Protocol)に対応していれば、はてなブログ以外のWebページでもブログカードとしてリンクできる。OGPは、Twitterなどのソーシャルメディアに、タイトル、URL、概要、アイキャッチ画像を正しく伝えるためにHTMLソースに記述するタグ情報。以下のような記述を入れる。

【HTMLタグにprefixを入れる】

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

【metaタグにpropertyを入れる】

<meta property="og:title" content="タイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:url" content="記事のURL">
<meta property="og:image" content="サムネイル画像のURL">

はてなブログでは、OGP対応でなくても、HTMLのtitleとmetaタグのdescriptionを記述してあれば、ブログカードを作ってくれる。

<meta name="description" content="ページの概要">
<title>タイトル</title>

ただ、これだとアイキャッチ画像が入らない。

アイキャッチ画像を入れるだけなら、OGP対応のタグを全て書かなくても、次のタグを入れるだけで良い。

<meta property="og:image" content="サムネイル画像のURL">