SNSでページをシェアしたときの画像やタイトルなどを設定できるOGPの使い方

［最終更新日］2019年6月26日

代表取締役

児島大

ブログやサイトを更新してSNSでシェアしたら、シェアで表示してされた画像が希望の画像じゃなかったりした経験はないでしょうか。
SNSからのアクセスを集めるためには、コンテンツに共感してもらってシェアされることももちろん重要ですが、シェアされた記事が目に止まってクリックしてもらうことも重要です。

1 OGPとは
2 OGP設定のメリット
3 OGP設定の注意点
- 3.1 1ページごとに設定をすること
- 3.2 WordPressでのOGPの設定方法
4 OGP設定の方法

OGPとは

OGPとは「Open Graph Protocol」の略で、FacebookやTwitterなどのSNSでURLをシェアした際に表示される情報をコントロールできる機能のことをいいます。
ページごとにOGPタグというHTMLのmetaタグを記述することで、設定しておいたタイトルや説明文、画像などを正しくSNS側に伝えることができます。

OGP設定のメリット

OGP設定をしていないと、ページからSNSが自動的に説明文や画像を抽出するため、本文とは関係のない文章や画像が表示されてしまうことも多々あります。
せっかくシェアされたURLなのに、タイムライン上で正しい情報が表示されていなければ、クリックしてくれるひとも少なくなってしまいます。

OGP設定の注意点

1ページごとに設定をすること

OGPはシェアしたいページに設定することで、そのページがどんな内容のページなのかをタイトルや説明文、画像をつかって伝えることができます。
そのため、ページごとに内容や画像が適切に設定されているほうが、目にとまったりシェアされる可能性は高くなります。

WordPressでのOGPの設定方法

WordPressをつかってサイトを構築している場合、テーマ側でOGPに対応しているものもあれば、プラグインなど入れる必要があるものなど、利用している環境によって様々です。
プラグインであれば、［All in One SEO］や［Yoast SEO］などが有名ですが、プラングインをつかわなくてもOGPを導入することもできます。

OGP設定の方法

<head>要素のprefix属性への記述

ページでOGPを使用することを宣言するためのタグを<head>要素に記述します。トップページには「website」で、トップページ以外のページには「article」と若干異なりますので注意が必要です。

トップページ

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

トップページ以外

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

［og:］はOpen Graphのプロパティ、［fb:］は Facebook独自のプロパティ、［website: / article:］は OGPのオブジェクトタイプのことです。

［:］の後には必ず［半角スペース］が必要です。

基本のOGPタグ

はじめに基本のOGPタグになります。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:locale" content="ローカル言語" />

og:title

ページのタイトルを指定します。ここではサイト名などの情報は含まないようにしましょう。
設定しない場合には<title>要素の内容が代わりに表示されます。

サイト名などは［og:site_name］で別途指定します。

og:type

ページの種類（オブジェクトタイプ）を指定します。
たくさんの種類がありますが、以下の2つが代表的なものです。

website…Webサイトやブログのトップページに指定します。
article…トップページ以外の記事ページで指定します。

og:url

ページのURLを指定します。
必ず絶対パスで記述するようにしましょう。

もう迷わない相対パスの書き方をどこよりも丁寧にわかりやすく解説

og:image

表示させる画像をURLで指定します。
こちらも絶対パスで記述するようにしましょう。

og:site_name

サイト名を指定します。
［og:title］にはページの記事タイトルだけを指定し、［og:site_name］でサイト名を指定するようにしましょう。

og:description

ページの説明文を指定します。
一般的には<meta name="description">と同様の内容を指定していることが多いですが、OGPで表示される文字数は80〜90文字程度が最適とされています。そのため、最適文字数が120文字前後の<meta name="description">と同様の内容の場合には文章が途中で途切れてしまう可能性があります。

Facebook専用のOGPタグ

<meta property="fb:app_id" content="App ID（15文字の半角数字）" />

App Idは、 FacebookにOGPを表示させるために必要なプロパティとです。

AppIDの代わりにadminIDも使うことができますが、adminIDは個人のFacebookアカウントと紐付いたIDのため個人情報保護の観点からおすすめしません。

Twitter専用のOGPタグ

Twitterでは、OGPのことをTWitterカードとよんでいます。
Twitterカードに画像などを表示させるためには必要なプロパティは2種類です。

<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="サイトの@ツイッターユーザー名" />
<meta name="twitter:creator" content="コンテンツ作成者の@ツイッターユーザー名" />

twitter:card

Twitter上で表示させるタイプを指定するタグです。
ブログやWebサイト用、アプリ用、動画用と全部で4種類あり、それぞれレイアウトが変わりますので。