WebページのOGP・画像データのチェックリスト｜サイズ・確認方法・反映されない時の対処

Webページは、本文を作り終えても公開準備の半分です。検索結果やSNSのタイムラインに並んだとき、ページを開いてもらえるかどうかは、タイトル・説明文・OGP画像といった「ページの外側に出るデータ」で決まります。中でもOGP画像は、SNSでシェアされたときに最初に目に入る要素で、整っているかどうかでクリック率（CTR）が変わります。

01.Webページを公開する前に揃える画像データは何か

まず、1ページを公開するときに揃える画像・メタデータの全体像を整理します。次の7点が基本セットです。本記事では、このうちOGP画像とアイキャッチを中心に、確認方法と反映トラブルの対処まで踏み込みます。構造化データは扱う範囲が広いため、ここでは概要にとどめ、詳しい実装は別記事で解説します。

この7点のうち、タイトルとメタディスクリプションは検索結果のクリック率に直接効きます。OGP画像とアイキャッチはSNSと記事一覧での見え方を左右します。altと画像の軽量化は、画像検索・読み上げ環境・表示速度に関わります。どれも公開後に直せますが、公開前に一度で揃えるほうが手戻りが少なく済みます。なお、タイトルやメタディスクリプションの字数は文字数カウントで確認できます。

02.OGPとは何か

OGPは<head>内のmetaタグで指定します。最低限おさえるのは次の5つです。

• og:title — シェア時の見出し
• og:description — シェア時の説明文
• og:image — シェア時に表示される画像のURL
• og:url — 正規のページURL
• og:type — ページの種類（記事なら article）

X（旧Twitter）では、これに加えてtwitter:cardを指定します。仕様の一次情報はOpen Graph protocol 公式サイトとX（Twitter）のCardsドキュメントで確認できます。OGPは検索順位を直接上げるものではありませんが、SNS流入と指名想起に効くため、Webページの公開では標準で整えておく要素です。

03.OGP画像の推奨サイズと各SNSの表示

OGP画像のサイズは、1200×630px（比率 1.91:1）を基準にすれば、主要なSNSをまとめてカバーできます。最小は 300×157px、ファイルサイズは 5MB 以下を目安にします。プラットフォームごとの表示は次の通りです。

Xで画像を大きく見せるには、twitter:cardをsummary_large_imageに設定します。指定がないと小さなサムネイル表示に落ちます。FacebookやLINEは、画像が小さすぎたり比率が合わなかったりすると正方形の小サムネに切り替わるため、1200×630pxの1枚を共通で用意するのが運用上は最も確実です。

04.切れない・読めるOGP画像のデザイン

OGP画像は、表示する場所によって周囲が切り取られたり、タイムラインで縮小されたりします。安全に見せるには、重要な文字とロゴを中央寄りのセーフエリアに収めます。

デザインで気をつけるのは次の3点です。

• 文字は少なく、大きく。タイムラインでは縮小表示されるため、長い文章は読めません。記事の主題が伝わる短い見出しに絞ります。
• 端に重要要素を置かない。ロゴ・タイトルは中央のセーフエリア内に収め、切れても困らない装飾だけを端に置きます。
• 背景と文字のコントラストを確保する。縮小しても読めるよう、薄い色同士の重ねを避けます。

05.OGP画像の作り方：手動・テンプレート・自動生成

OGP画像の作り方は、運用する記事の本数で選び方が変わります。大きく3つあります。

1. 1枚ずつ手動で作る：デザインツールで記事ごとに作る方法です。本数が少ないうちは自由度が高く十分です。本数が増えると制作工数がボトルネックになります。
2. テンプレートを用意して差し替える：レイアウトを固定し、タイトル文字だけ差し替える方法です。デザインの統一感を保ちつつ、1枚あたりの工数を下げられます。
3. コードから自動生成する：記事タイトルなどのデータから、ビルド時にOGP画像を自動で書き出す方法です。本数が多いメディアで有効です。

06.公開前にOGPをどう確認するか

OGPは、設定しただけでは正しく表示されるとは限りません。画像のURLが外から開けない、絶対URLになっていない、比率が合わない、といった理由で意図と違う表示になることがあります。公開前に、実際の見え方を確認します。主な確認手段は次の通りです。

• Facebook：シェアデバッガーでタイトル・説明・画像のプレビューと、読み取ったOGPの中身を確認できます。
• X（旧Twitter）：かつての Card Validator のプレビュー機能は現在は廃止されています。実際にURLを下書き投稿して表示を確認するか、第三者のOGP確認ツールを使います。
• LINE：LINE Page Poker でOGPの読み取り結果を確認できます。
• 横断確認：当サイトの無料ツールOGP確認・チェックツールを使うと、URLを入れるだけでGoogle検索結果・X・Facebook/LINE風のプレビューと、不足タグの改善チェックリストをまとめて確認できます。

07.OGPが反映されないときの対処

「OGP画像を差し替えたのに、SNSでは古い画像のまま」というトラブルは頻出します。原因のほとんどはSNS側のキャッシュです。各SNSは一度読み取ったOGP情報を保存し、次回以降はその保存データを表示するため、ページ側を更新してもすぐには反映されません。対処は次の手順です。

1. キャッシュをクリアする：Facebookならシェアデバッガーで再取得（Scrape Again）、LINEなら Page Poker で再読み込みすると、最新のOGPを取り直します。
2. 画像URLを確認する：og:imageが相対パスになっていると読み取れないことがあります。https://から始まる絶対URLで指定します。
3. 画像の公開状態を確認する：画像URLに直接アクセスして開けるか、Basic認証やnoindexで遮断していないかを確認します。

キャッシュのクリアでも反映されない場合は、画像URL末尾にバージョン用のクエリ（例：?v=2）を付けて別URL扱いにする手もあります。ただし運用が煩雑になるため、まずはキャッシュクリアと絶対URLの確認を優先します。

08.構造化データは別に揃える

OGPはSNSでの見え方を整えるデータですが、検索エンジンやAIにページの意味を伝えるのは構造化データ（JSON-LD）の役割です。記事ページなら Article、よくある質問なら FAQPage、パンくずなら BreadcrumbList といったように、ページの中身に合わせて設定します。OGPと構造化データは目的が違うため、どちらも公開前のチェック項目に入れておきます。

構造化データは扱う範囲が広く、Entity（エンティティ）の考え方や実装例まで踏み込むと長くなります。詳しくは次の記事にまとめています。

09.公開前チェックリスト

ここまでの内容を、記事ごとに使えるチェックリストにまとめます。公開直前に上から順に確認すれば、画像・メタデータの抜け漏れを防げます。

OGPタグの抜け漏れは、OGP確認・チェックツール（無料）にURLを入れると、シェア時のプレビューと改善チェックリストで一括確認できます。

10.よくある質問（FAQ）

11.まとめ

Webページに必要な画像データは、タイトル・メタディスクリプション・OGP画像・アイキャッチ・代替テキスト（alt）・画像の軽量化・構造化データの7点です。OGP画像は 1200×630px（比率 1.91:1）を基準に1枚用意し、重要な文字は中央のセーフエリアに収めます。公開前に各SNSで実際の表示を確認し、古い画像が出るときはキャッシュをクリアします。

画像の作り方は本数で選びます。少数なら手動やテンプレートで十分で、本数が増えたらSatoriのようなコードからの自動生成が効いてきます。OGPと構造化データは役割が違うため、どちらも公開前チェックリストに入れて、記事ごとに同じ品質で揃えることが大切です。