OGP(Open Graph Protocol)設定

2020年10月10日

SNSなんかでシェアされる時にサムネイル付きでおしゃれにシェアされているのをよく見ますね。
あれってどうやって設定しているのでしょうか？
ってことでサイトにOGP(Open Graph Protocol)を設定する方法をここに記しておきます。

<!-- OGP -->
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website　か　blog　か　article" />
<meta property="og:description" content="ページの簡単な説明" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:image" content="サムネイル画像のURL" />

こーんな感じです。

HTML5用に設定する場合は

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

XHTMLで設定する場合は

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#">

で設定できるようです。

Related Posts

HTML/CSS

Posted by bistro