OG画像シェアのデバッグ: SNSプレビュー確認で詰まった話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
SNS に URL を貼ったとき、リンクのプレビューに大きな画像とタイトルが出ると、見た目の印象がけっこう変わると感じています。この「SNSでURLを貼ったとき出る大きな画像の設定」は、そんなに難しくはないらしいのですが、いざやってみると、画像が出ない・古いまま更新されない・サイズが合わない、といったところで地味に困りました。個人サイトで整えたときに私が詰まった点と、いま落ち着いているチェックの手順をまとめます。先に結論を書くと、1200×630 の画像をページごとに用意して、画像の住所を https から始まる完全な形で書いておき、確認は SNS 各社が用意している表示確認ツールや実際の表示で見る、という形になりました。
設定の基本
ページの頭の部分に、タイトル・説明文・画像・URL を伝える4つの指定を入れておきます。「このページのタイトルはこれ」「説明文はこれ」「使う画像の住所はこれ」「ページ自体の住所はこれ」と書いておく感じです。これがないと、SNS 側がプレビューに何を出していいか分からないようです。
さらに「大きい画像で出る形式にしてください」という一行を足しておくと、対応しているSNSでは、小さなサムネイルではなく大きな画像のカードで表示されやすくなります。タイトルや説明文を画像用に別途上書きすることもできるそうですが、上の4つの指定から自動で拾ってくれるので、私は特別な事情がなければそこは省いています。
ひとつ注意なのが、画像の住所を、https から始まる完全な形で書くようにしたほうが安全だという点です。/ogp/page.png のような途中からの省略した書き方だと、SNS 側がうまく画像を取れないことがありました。
推奨サイズ
画像の大きさは SNS ごとに少しずつ違うらしいのですが、1200×630 ピクセルくらいにしておくと、多くのSNSで扱いやすいと感じました。Facebook では 1200×630 が推奨サイズとして案内されています。X / Twitter など他のSNSでも、横長の画像を前提にしておくと大きく崩れにくい印象です。
画像の種類は PNG か JPEG が無難でした。図形をそのまま保存する形式（SVG）は対応していない SNS が多いそうなので避けています。ファイルの重さはできるだけ軽くしておくと、SNS 側が画像を取りに来るときのトラブルが減る印象でした。私は1MB未満くらいを目安にしています。
縦横の比率は、横長で 1.91 対 1（だいたい 1200 対 628）くらいを基準にしておくと、いくつもの SNS で見たときに、変な余白が出たり端が切れたりしにくいです。正方形でも Facebook では出るのですが、Twitter / X の大きい画像表示だと思っていたのと違う見え方になることがありました。
ページごとに画像を用意するか共通画像にするか
サイト全体で画像を一枚だけ作って全ページ共通にする方式と、ページごとに別々の画像を用意する方式があります。最初は共通の一枚で済ませていたのですが、ページの中身と画像が合っていないとどうも印象が薄い感じがして、主要なページについてはページごとに画像を用意するようにしました。
画像作りは、画像をプログラムで扱うための道具（Python の Pillow）を使って、下地の画像にページのタイトルの文字を書き込んで保存する、というやり方にしています。まとめて自動で作れるので、ページが増えても何とかなりました。
アクセスのたびに画像をその場で作る仕組みもあるそうですが、私のサイトの規模だと、あらかじめ作っておいた画像で十分でした。その場で作ると最初のアクセスで少し待ち時間が乗るので、SNS 側が画像を取りに来るタイミングでうまく返せないことがありそうだと感じました。
デバッグツール
表示を確認するのに、SNS 各社が用意している、表示を確認できるツールを使っています。主に2つでした。
ひとつは X / Twitter 側のカード表示を確認するためのツールや、実際に投稿したときの表示確認です。以前は Twitter Card Validator という確認ツールを使っていましたが、URLや挙動が変わることがあるので、その時点で使える確認方法を探すようにしています。確認ツールが使える場合は、URL を入れると、どう表示されるかのプレビューや、画像を取れているかの状況を確認できます。何かおかしいと理由が出ることもあるので、まずここから当たりをつけると分かりやすかったです。ログインが要ることもあります。
もうひとつは Facebook Sharing Debugger という確認ツールです。URL を入れると、プレビューと、読み取った設定の一覧、それと前回いつ取りに来たかを見せてくれます。「再取得ボタン」（Scrape Again）を押すと取り直してくれるので、画像を差し替えたのに SNS 側が古いまま、というときに、ここから取り直しをお願いできます。
ただ、両方を使っても、SNS によっては前の表示が残っていて、しばらく古いままになることがありました。新しいページを公開してすぐ貼って広めたい、というときは、公開前に確認まで済ませておいた方が安全でした。
ハマったポイント
最初に詰まったのは、画像の住所の書き方でした。途中からの省略した書き方をしていたせいで、SNS 側が画像を取れず、リンクのプレビューに画像が出ない状態だったのです。画像の住所を、https から始まる完全な形で書き直したら直りました。ページを自動で組み立てているサイトだと、この住所の前半部分の組み立てを間違えやすい気がします。
次に詰まったのは、画像の色の出方でした。画像編集ソフトから書き出した画像で、色の指定の方式が違うと色が変に見えることがあって、Facebook で見ると色がおかしく感じる状態になっていました。一般的な方式（sRGB）に変換して書き出し直したら直りました。さきほどの道具（Pillow）で作る分には、最初からその方式になるので、ここは問題が出ませんでした。
もうひとつは、サイト側が住所を安全な形（https）へ自動で切り替える仕組みとの相性でした。画像の住所を http のまま指定してしまうと、SNS 側がその切り替えをうまく追えず、画像が取れないことがありました。最初から https でそろえておくのが安全でした。
キャッシュとの付き合い方
画像を差し替えたとき、SNS 側に前のデータが残っていると、貼ったときの表示が古い画像のままになります。Facebook の確認ツールにある「再取得ボタン」はその場で取り直してくれるので助かるのですが、Twitter / X の方は、残ったデータを自分から消す方法があまりなくて困りました。
私がやっているのは、画像の住所を少し変えると別画像として取り直してくれることがある、というのを利用する方法です。できれば画像のファイル名そのものを変えるようにしています。中身は同じ画像でも住所が変わるので、SNS からは別の画像に見え、新しく取りに来てくれることがあります。
住所を変えたあとは、Facebook と Twitter / X の確認ツールでもう一度見て、しばらく時間を置いてから実際に貼ってみる、という順でやっています。貼った瞬間の見え方をきれいにしたいときは、画像を変えてから確認ツールで見え方を確認し、少し時間を置いてから実際に貼るようにしています。
細かい運用のコツ
画像の中の文字は、実際には小さく表示されるので、大きめに書くのがコツでした。1200×630 ピクセルの画像でも、SNS の一覧では縮んで表示されるので、本文くらいの小さな文字を入れても読めません。私は画像の中の主な文字を、かなり大きめ（60〜80 ピクセルくらい）にしています。
サイトのロゴをどこか隅に小さく入れておくと、貼られるたびに少しずつ覚えてもらえる気がします。文字を詰め込みすぎると窮屈になるので、タイトルとロゴだけのシンプルな構成が無難でした。
この設定は派手なところではないですが、SNS から来てくれた人の第一印象を左右する、地味に大事な部分だと感じました。画像を作る・確認する・古いデータを取り直す、という流れを一度自動の仕組みにしてしまえば、新しいページを足すたびに勝手に整うようになって、だいぶ楽になりました。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ