OGP タグでブログの情報をソースに埋め込んでみる。

Web サイト

たとえば Facebook でブログをシェアするときに、適切なサムネイル画像を選択できないことがあります。

OGP タグを埋め込んでおくとページの情報を伝えることができるので、自分のブログにも埋め込んでおくことにしました。

OGP というのは、HTML ソースコード内に専用のタグを埋め込んで、そのページの情報を Facebook などのソーシャルメディアに正確に伝えるための仕組みです。

OGP タグは、次の書式で、HTML ソースコードの<head> タグ内に<meta> タグとして埋め込みます。

<meta property="" content=""/>;

ここのproperty に指定できるものとしては、次のものがあるようでした。

property	content
og:title	ページのタイトルです。基本的には`<title>` と同じものを指定すれば良さそうです。
og:type	ページの種類です。Web ページの場合、サイトトップでは "website" を、それ以降の記事では "article" を指定することになるようです。
og:url	ページの URL です。複数の URL でアクセスできるページの場合は Canonical URL を指定すれば良さそうです。
og:image	ページのサムネイル画像を URL で指定します。ページ内で使っていない画像を指定することもできます。
og:site_name	必要に応じてこのページが置かれているサイト名を指定できます。
og:description	必要に応じてこのページの説明文を指定できます。これを指定しないで検索エンジン向けの説明文で一般的な`<meta name="description" content=""/>` に任せてしまって良いかもしれません。