いまさら聞けない！OGPとは？

赤猫

webサイトを制作していざ公開！という時に、「OGP」の設定をし忘れていることはありませんか？

この「OGP」の設定、webページやブログの記事をSNS上でシェアしたい、シェアされたい方にとってはとても重要な設定事項です。

OGPとは？

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

ogp_sample

OGPを設定するメリットは？

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

どのように設定するの？

HTMLにはメタタグをいう、ブラウザ上には表示されることのない、ホームページの設定などを記述する箇所があります。
OGPはそのメタタグの一つなので、タグの中に記述をします。

ですがその前に、これからogpを使いますよ！という宣言をする必要があり、その宣言をhtmlタグの中に追加します。
prefix=”og: http://ogp.me/ns#”という記述を追加しましょう。

<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でシェアされた場合に表示される画像を設定します。
ここで画像を設定しない場合は、ページ内で使用されている画像からランダムで画像が選ばれて表示されます。

Facebook用の記述

サイトやブログの管理者をFacebookに伝えるためのタグだそうですが、この記述がなくても上記のみでページの情報は表示されます。
この記述をすることによって、Facebookからサイトへのトラフィック分析ができるFacebookインサイトを利用できるようになるようです。

<meta property="fb:app_id" content="[app_id]">

Twitter用の記述

Twitter用に指定するのは、カードのタイプ（大きさ）です。「summary」か「summary_large_image」のどちらかを選んで指定します。

<meta name="twitter:card" content="summary_large_image">

summaryの場合

画像とテキスト情報が横並びに表示されます。

summary_large_image

画像が横いっぱいに表示され、その下にテキスト情報が続きます。

以上が基本的なOGPの設定です。正しく設定をし、アクセスされやすい表示を作成しましょう！

コラム