OGP画像の設定方法と表示されないときの対処法【HTML】

こんにちは！コーダーのゆうしです。

SNSでURLをシェアしたときに画像やタイトルがカード形式で表示されるのを見たことがありますよね。あれが OGP（Open Graph Protocol） の設定によるものです。OGPを設定しておくとSNSでシェアされたときの見栄えが良くなり、クリック率アップにつながります。この記事ではOGPの基本的な設定方法から、画像が表示されないときの対処法まで解説します。

OGPとは？
OGP画像設定・設置方法
OGPの基本的な設定方法
OGP画像のサイズ
OGPが設定できているか確認する
画像が表示されないときの対処法
まとめ

OGPとは？

OGPとはSNSやメッセージアプリでURLをシェアしたときに表示される画像・タイトル・説明文などのメタ情報の仕組みです。X（Twitter）・Facebook・LINE・はてなブックマークなど多くのサービスが対応しています。

OGP画像設定・設置方法

以下の記事にてheadタグで置くべきコードをまとめています。（OGPも含まれています。）

こちらの中のコードをコピペして、コーディングするサイトの情報に書き換えていけば、基本的に大丈夫だと思います。

OGPの基本的な設定方法

HTMLの <head> 内に以下の <meta> タグを追加します。

<head>
  <!-- 基本のOGP設定 -->
  <meta property="og:title" content="ページのタイトル" />
  <meta property="og:description" content="ページの説明文（120文字程度）" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/page/" />
  <meta property="og:image" content="https://example.com/image/ogp.png" />
  <meta property="og:site_name" content="サイト名" />

  <!-- X（Twitter）用の設定 -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@アカウント名" />
</head>

各タグの解説

タグ	内容
og:title	シェアされたときに表示されるタイトル
og:description	シェアされたときに表示される説明文
og:type	ページの種類。トップページは `website`、記事ページは `article`
og:url	ページの正規URL
og:image	シェアされたときに表示される画像のURL（絶対パスで指定）
og:site_name	サイト名
twitter:card	Xでのカード表示形式。`summary_large_image` で大きい画像表示
twitter:site	XのアカウントID（省略可）

OGP画像のサイズ

OGP画像のサイズは 1200×630px が推奨です。正方形（600×600px）にするとLINEなどでも崩れにくいですが、Xで大きく表示したい場合は横長の1200×630pxが最適です。

OGPが設定できているか確認する

設定後はツールで確認するのがおすすめです。ラッコツールズのOGP確認ツールにURLを貼り付けるだけで、各SNSでのシェア時の表示イメージを確認できます。

画像が表示されないときの対処法

① 絶対パスで指定しているか確認する

一番よくあるミスが相対パスで画像URLを指定していることです。OGP画像は必ず 絶対パス（https://〜から始まるURL） で指定してください。

<!-- NG：相対パスで指定している -->
<meta property="og:image" content="image/ogp.png" />

<!-- OK：絶対パスで指定している -->
<meta property="og:image" content="https://example.com/image/ogp.png" />

② 画像サイズが小さすぎないか確認する

画像が小さすぎるとSNS側で無視されることがあります。推奨の1200×630px以上の画像を使用してください。

③ キャッシュが残っていないか確認する

OGPの設定を変更しても、SNS側にキャッシュが残っていると古い情報が表示されることがあります。Facebookにはシェアデバッガー、XにはCard Validatorというキャッシュをクリアするツールがあります。

④ httpsになっているか確認する

画像URLが http:// になっている場合、セキュリティの都合でSNS側に読み込まれないことがあります。https:// になっているか確認してください。

WordPressの場合

WordPressでOGPを設定する場合はプラグインを使う方法が手軽です。SEO SIMPLE PACK や All in One SEO などのSEOプラグインにOGP設定機能が含まれています。Cocoonテーマを使っている場合は「Cocoon設定」→「OGP」タブから設定できます。