【初心者向け!】「OGP」について知ろう!

こんにちは。デザイナーの佐竹です。
今回は「OGP」について、簡単にご紹介します。

OGPは「Open Graph Protocol(オープン・グラフ・プロトコル)」の略です。
SNS上でウェブページの内容を伝えるためのプロトコルのことで、「こういうサイトです」と明言するために必要な仕様です。

OGPをタグ内に記述することで、タイトル、説明文、アイキャッチ画像などを正しく表示することができるようになります。 設定していないと、投稿がシェアされたときなどに、アイキャッチ画像が表示されなかったり、URLが適切に表示されなかったりする可能性があります。 OGPがきちんと設定されている投稿は、友達が「いいね」をすると友達のニュースフィールドに適切な情報が掲載されます。多くの人に情報を拡散できる可能性があります。

続いて、記述方法をご紹介します。

まず初めに宣言をします。

 <head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#”>

続いて、タグ内に設定内容を記述します。

<meta property=”og:locale” content=”ja_JP”>

<meta property=”og:site_name” content=”サイト名”>

<meta property=”og:title” content=”コンテンツのタイトル”>

<meta property=”og:type” content=”コンテンツの種類”>

<meta property=”og:url” content=”リンク元のURL”>

<meta property=”og:image” content=”SNS上に表示されるアイキャッチ画像URL”>

<meta property=”og:description” content=”コンテンツの概要。SNS上でシェアされます。”>