delalunaofficedaysのブログ

WORDPRESSとEC CUBEくらいしか触っていないWEBデザイナーの日記とかメモ。

OGP(Open Graph Protocol)設定

SNSなんかでシェアされる時にサムネイル付きでおしゃれにシェアされているのをよく見ますね。 あれってどうやって設定しているのでしょうか? ってことでサイトにOGP(Open Graph Protocol)を設定する方法をここに記しておきます。 [html] <!– 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" /> [/html] こーんな感じです。

HTML5用に設定する場合は [html] <html prefix="og: ">http://ogp.me/ns#"> [/html]

XHTMLで設定する場合は [html] <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="">http://ogp.me/ns#"> [/html]

で設定できるようです。