備忘録的プログラミングリファレンス

<meta> OGP について

　<meta> エレメントに設定する OGP ( Open Graph Protocol )とは、Twitter や FaceBook などのSNS上で web ページやブログがシェアされたときに、そのページのタイトルや概要、URL、画像などの情報を提供するためのメタ設定です。

OGP
<html prefix="og: https://ogp.me/ns#">
<head>
	...
	<meta property="og:title" content="備忘録的プログラミングリファレンス" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://www.smpl-rfrns.net/" />
	<meta property="og:image" content="https://www.smpl-rfrns.net//img/example.jpg" />
	...
</head>
	...
</html>
詳しくは 動作の確認 を参照してください

　この <meta> による OGP の設定は <head> エレメントに包括します。

　OGP にはまず <html> エレメントに OGP の利用宣言をする必要があります。そして、タイトルや概要、URL、画像などの情報を設定します。
　詳しくは以下のOGP の使い方を参照してください。

- ad -

OGP の使い方

　OGP を利用するにはまず <html> エレメントに OGP の利用宣言をします。

OGP の利用宣言
<html lang="ja" prefix="og: http://ogp.me/ns#">

　そして、<meta> で以下のようなパラメータを使用してタイトルや概要、URL、画像などの情報を設定します。

OGP の設定値

　<meta> の property 属性と content 属性を使用して OGP を設定します。
　もしもこの設定がなくても SNS 側で自動でページ情報を取得します。自動で取得された内容が趣旨と違う場合には以下の設定を行った方がよいでしょう。

property 値content 値Extra information
og:titleページタイトル。サイト名は以下の og:site_name に
og:typeOGP が示すオブジェクトのタイプ。トップページには website, blog。トップページ以外は article など
og:descriptionページの紹介文
og:urlページのURL。SNS 側からみたページのURL
og:site_nameサイト名
og:imageサイト紹介用イメージ URL

　その他のプロパティはThe Open Graph protocolを参照してください。


　Twitter や FaceBook といった SNS での OGP の設定はそれぞれの仕様を参照してください。

- ad -

関連（Related）