OGPとは

「Open Graph Protocol」の略。
FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのこと

メリット

OGPを設定することによって、ページや記事の内容を分かりやすくユーザーに伝えることができます。
例えば、SNSを見ている際、タイムラインに誰かがシェアしたページや記事が流れてくることがあります。
その時にページの概要が書かれていたり、関連する画像が一緒に表示されていたら、どんな内容のページなのかが事前に分かりますよね。
読んでみようかなという気持ちになり、ついついクリックしてしまった経験が少なからずあると思います。

設定方法

まずhtmlタグの中にOGPを使うことを宣言する

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

基本的な記述

下記をheadタグの中に書き込む

<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>

og:title
ページのタイトルを記述します。

og:type
ページのタイプを記述します。
トップページの場合websiteまたはblog、下層ページはarticleです。

og:description
ページの概要として表示される説明文を記述します。

og:url
ページのURLを記述します。絶対パスで指定してください。

og:site_name
サイト名を記述します。

og:image
SNSでシェアされた場合に表示される画像を設定します。
ここで画像を設定しない場合は、ページ内で使用されている画像からランダムで画像が選ばれて表示されます。

※SNS用記述もあったりする