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

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

Facebookでの画像サイズの目安

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

高解像度デバイス上で最適に表示されるよう、幅が1080ピクセル以上の画像を使用します。画像リンク広告を表示するには、幅が600ピクセル以上の画像を使用してください。画像リンク広告でのパフォーマンスを高めるため、広告素材には1:1の画像を使用することをおすすめします.

(中略)

Open Graph story以外の画像は長方形で表示されます。1.91:1の比率の画像を使用してください(たとえば、600 x 314ピクセル)。
ベストプラクティス – シェア機能

表示やタグの設定を確認できる公式デバッグツール

OGPのタグを設定したら意図した通りに表示されているかをデバッグツールで確認するようにしましょう。TwitterもFacebookも公式で出してくれているのでそれぞれ紹介します。

Twitterのデバッグツール

「Card URL」から調べたいURLを入力して「Preview Card」ボタンをクリックします。

Card Validator | Twitter Developers

Facebookのデバッグツール

「Facebookでシェアされた時に使用された情報を見るには、URLを入力してください。」に調べたいURLを入力して「デバッグ」ボタンをクリックします。
(「次のプロパティは必須です: fb:app_id」が出てますが、表示はされています…)

デバッガー – 開発者向けFacebook

OGPの画像が変更されない場合

「変更後のOGPの画像が適応されない…」というケースがよくあります。TwitterやFacebook側のサーバーにキャッシュが残っていることが原因です。

そんな時は以下のどちらかの方法で解消できると思うので試してみてください。

デバッグツールで再読込してみる

王道のキャッシュ削除の方法は、先ほど紹介したデバッグツールにURLを再度入力してみることです。たいていの場合はこれで解消されます。

画像のファイル名を変更してみる

上記のデバッグツールを使っても画像の変更が反映されない場合は、画像のファイル名を変更して別物として新たに読み込ませれば大丈夫でした。

HTMLのメタタグ内でファイル名を書き換える手間が発生しますが、割と確実に画像が切り替わるのでおすすめです!

おわり

OGPの設定を直接HTMLに書き込むことを想定してまとめました。こういうお決まりの記述はいつでもコピペして使えるように、テンプレート化したりすぐ参照できる場所にストックしておくと仕事も捗るはずです!

わたしは忘れたらこの記事に戻ってこようと思います(そのために記事書いたところもあるので笑)

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事