【SNSの時代に必須】静的なWebサイトでのOGPの設定の仕方

2018年12月11日2021年11月27日

OGPはTwitterやFacebookなどのSNS媒体に投稿された時に、「どのような見栄えで表示させるか」を指定できる規格です。

HTMLのメタタグとしてフォーマットが決まっているので、ルールに沿ってタイトルや画像などを各ページに設定していきます。表示としては以下のような感じになります。

OGPを設定するメリットしては、とにかく目立つ！OGPが設定されたURLを入力するだけで、以下のように大きなサムネイル画像とタイトル、説明文が表示されるようになります。

OGPの優れている点は、誰がシェアしても表示される点です。WebサイトでOGPに設定するサムネイル画像は、シェアされて色んな人の目に触れることを考えて、クリックされやすいだろうか、中身がイメージできるだろうか、みたいなことを考えて作成するといいかもしれません。

ちなみにWordPressの場合は「All in One SEO Pack」というプラグインを使えば簡単に設定可能です。
→ 「All in One SEO Pack」で「できること」と最低限で設定しておくべきこと！

OGPの設定方法

基本的には「共通」のものを記載しておけば、おおよそは大丈夫です。細かい部分で各種SNSで指定があったりするので、後で個別に紹介していきます。

HTMLの先頭で宣言

下記の通り、HTMLタグにprefix="og: http://ogp.me/ns#"を追加して「OGPを使います！」宣言をしてください。

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

共通の記述

まずは共通部分です。以下の記述を<head>内に記載してあげてください。

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="https://haniwaman.com/cms/">
<meta property="og:image" content="https://haniwaman.com/img/ogp.png">
<meta property="og:site_name" content="">
<meta property="og:description" content="">

og:title	表示させたいタイトルを記載します。
og:type	トップページは「website」または「blog」、下層ページは「article」
og:url	表示するページのURL（絶対パス）を記載します。
og:image	表示する画像のURL（絶対パス）を記載します。
og:site_name	サイト名を記載します。
og:description	表示するページの説明文を記載します。

このOGPの記事を例にすると以下のような記述になります。

<meta property="og:title" content="SNSの時代には必須な静的なWebサイトでのOGPの設定の仕方 | HPcode" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://haniwaman.com/ogp/" />
<meta property="og:image" content="https://haniwaman.com/cms/wp-content/uploads/2018/12/ogp0.jpg">
<meta property="og:site_name" content="HPcode" />
<meta property="og:description" content="静的なWebサイトでのOGPの設定の仕方を紹介します。SNSでシェアされた時の反応が変わってくる大事な仕組みですので忘れずに設定するようにしておきましょう！" />

Facebook用の記述

FacebookのアプリIDは必須とのことですが、指定がなくてもOGPとして表示はされます。
（なのでわたしは指定していません…）

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

アプリIDは、開発者用ページから登録可能です → Facebook for Developers

Twitter用の記述

Twitterで指定すべきは、カードタイプです。「summary」か「summary_large_image」のいずれかを選びます。わたしは「summary_large_image」の方が目立つので好きです。

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

summary	小さい画像サイズで横並びに表示されます。
summary_large_image	大きい画像サイズで縦並びに表示されます。

画像サイズの目安

画像の目安のサイズが各SNSで決まっています。縦横比であったり、最小サイズを意識するとともに、シェアされた時にどのような表示になるかを考えて画像を作成することが大事です。

Twiterでの画像サイズの目安

横幅 → 300 px ～ 4,096 px
縦横比 → 2 : 1の比率
サイズ → 5MB未満

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300×157 or maximum of 4096×4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
Summary with large image
Summary with large image

Facebookでの画像サイズの目安

横幅 → 1,080 px以上
縦横比 → 1.91 : 1の比率（こ、細かい・・・）

高解像度デバイス上で最適に表示されるよう、幅が1080ピクセル以上の画像を使用します。画像リンク広告を表示するには、幅が600ピクセル以上の画像を使用してください。画像リンク広告でのパフォーマンスを高めるため、広告素材には1:1の画像を使用することをおすすめします.
（中略）
Open Graph story以外の画像は長方形で表示されます。1.91:1の比率の画像を使用してください(たとえば、600 x 314ピクセル)。
ベストプラクティス – シェア機能
ベストプラクティス – シェア機能