WhatsAppのリンクプレビューが表示されない？og:imageを修正する
WhatsAppのリンクプレビューが表示されない場合、その原因はほぼ常に次の5つのいずれかです：ページにog:imageタグがない、画像URLが公開的に取得できない、画像の形状が適切でないためWhatsAppが切り取ってしまう、切り取りは問題ないがプレビューが古い、またはストアのSEOプラグインが競合するタグを出力している。このガイドでは、各原因と、WhatsAppに更新を強制できない理由、そしてWooCommerceストアで変更すべき点について説明します。
簡単な答え
WhatsAppはページのOpen Graphタグからリンクプレビューを生成します。og:imageが存在しない、アクセスできない、または1200×630のカード形式になっていない場合、共有は素のリンク、グレーのタイル、または不自然に切り取られた商品写真として届きます。ほとんどのWooCommerceストアでは、商品ページにog:imageがまったく設定されていません。SEOプラグインは静的アイキャッチ画像にフォールバックするため、正方形や縦長の商品写真は左右または上部が切り取られてしまいます。
1. ページにog:imageタグがない
これはストアで最もよくある原因です。WordPressとWooCommerceは、デフォルトでは商品ページ、カテゴリページ、ショップページにog:imageを出力せず、Open Graphを処理しないテーマではタグが完全に省略されます。
修正方法: ページのソースを表示し、og:imageタグが存在することを確認してください。タグは絶対URL（完全なhttps://… URL、相対パスは不可）であり、読み込み後にJavaScriptで注入されるのではなく、サーバー側でレンダリングされている必要があります。WhatsAppはJavaScriptを実行しません。
curl -s https://your-store.com/product/example | grep -i 'og:image'
結果が空であれば、それが答えです。WhatsAppに表示できる画像がありません。
2. 画像URLが公開アクセス可能でない
WhatsAppのクローラーは、通常の匿名クライアントと同じ方法で画像を取得します。ログインの背後にあるURL、localhost上のURL、生のIPアドレス上のURL、またはrobots.txtでブロックされたパス上のURLは失敗します。
修正方法: そのURLが認証情報なしで画像を返すことを確認してください。
curl -I https://your-store.com/wp-content/uploads/product.jpg
200 OKと、image/pngまたはimage/jpegのContent-Typeが必要です。
robots.txtの落とし穴。 ソーシャルクローラーはrobots.txtを尊重するため、画像を保持するパスをブロックするルールがあるとプレビューが壊れます。しかも、誤診しやすい形で壊れます。Metaのデバッガーはその後、*「画像として処理できませんでした。破損しているか、形式が無効な可能性があります」*と報告しますが、これは壊れたレンダリングとまったく同じように読めます。curlではこれを再現できません。なぜならcurlはrobots.txtを無視するからです。画像がDisallow:ルールでカバーされるパスから配信されている場合、ファイルがどれほど有効でもプレビューは失敗します。私たち自身もFastOGのレンダリングパスでこれに遭遇し、最長一致のAllow:オーバーライドで修正しました。
3. WhatsAppが商品画像を切り抜く — 写真を編集しても解決しない
これは、販売者が 「WhatsAppで商品画像が切り抜かれる」 と表現する症状であり、正しく理解する価値のある問題です。
プラットフォームは渡された画像を1200×630のフレームに切り抜きます。正方形や縦長の商品写真は左右または上部が切り落とされ、ロゴタイルは引き伸ばされます。Photoshopで元の写真を手動で切り抜いても勝ち目はありません。なぜなら、WhatsAppはカードのアスペクト比に基づいて切り抜きを決定し、あなたが選んだ構図には基づかないからです。しかも、次の商品写真はまた別の形状になります。
解決策は、所有している写真ではなく、配信する画像を変えることです。 商品写真を内部に収めた、あらかじめ 1200×630で構成されたカードを送信してください。そうすれば、プラットフォームには切り抜くものが残りません。
4. WhatsAppリンクプレビュー画像の適切なサイズ
標準のOpen Graph画像サイズは1200×630ピクセル（1.91:1の比率）で、WhatsAppを含む主要なプラットフォームすべてが想定している形状です。1200×630で配信すればプレビューは意図どおりに表示されますが、1000×1000の正方形で配信すると、WhatsAppはフレームを埋めるように画像を切り抜きます。
ファイルサイズは5 MB未満に抑えてください。テキストと商品カードを含む1200×630の画像は、PNGの場合、通常200 KB〜500 KBになります。
この比率が標準となった理由については、OG画像サイズ：1200×630の解説を参照してください。
5. プレビューが古い — そしてWhatsAppに更新を強制することはできない
タグ、URL、構造がすべて正しいのにプレビューがまだ間違っている場合、それはキャッシュが原因です。
WhatsAppはプレビューをキャッシュします。これは受信者のアプリ内に保持されるため、どのツールもWhatsAppに更新を要求することはできません — デバッガーでも、APIでも、私たちでもありません。WhatsAppはプログラムによる更新手段を一切公開していないため、押せるボタンは存在しません。そうでないと主張する人は、WhatsAppではなくFacebookの挙動を説明していることになります。
できることは、次にWhatsAppがページを読み込むときに正しい画像が待機しているようにすることです。これがFastOGのカバーURLがコンテンツアドレス方式（content-addressed）である理由です。商品のタイトル、価格、画像を変更するとURLもそれに合わせて変わるため、次の読み込みで古いカードを取得することはありません。その読み込みがいつ行われるかはWhatsApp次第です。
関連する2つのプラットフォームも同じ挙動をします — LinkedInとXも無効化APIを公開しておらず、通常は約1週間以内に再読み込みします。急いでいる場合は、各プラットフォームのインスペクターツールで再読み込みを促せます：
| プラットフォーム | ツール | プレビューの更新を強制できるか？ |
|---|---|---|
| (なし) | 不可 — プレビューは受信者のアプリにキャッシュされる | |
Sharing Debugger — developers.facebook.com/tools/debug |
可 — 「Scrape Again」、およびプログラムによる更新 | |
Post Inspector — linkedin.com/post-inspector |
再読み込みを促す | |
| X / Twitter | Card Validator — cards-dev.twitter.com/validator |
再読み込みを促す |
WhatsAppの問題にFacebookデバッガーを使う。 WhatsAppを更新できなくても、Sharing DebuggerにURLを貼り付ける価値はあります。なぜなら、WhatsAppと同じ方法でページを取得し、実際に検出した内容（欠落したタグ、到達不能な画像、不正な形式）を報告するからです。これはWhatsAppのキャッシュを修正するものではなく、タグのバリデーターとして扱ってください。
6. WooCommerceストアでの修正方法
WooCommerceでは、失敗の原因は通常テーマではなくSEOプラグインであるため、ワークフローを正確に述べておく価値があります。
- タグはデフォルトでは存在しません。 WooCommerceには、
og:image、product、product_cat、またはショップページ用のタグは同梱されていません。 - SEOプラグインがそのギャップを不適切に埋めます。 Yoast、Rank Math、All in One SEO、SEOPressは
og:imageを出力しますが、商品の場合には静的なアイキャッチ画像を使用します。これは正方形または縦長の写真であり、まさにWhatsAppが切り抜く画像です。 - 重複タグに注意してください。 2つのプラグインが両方とも
og:imageを出力する場合、プラットフォームはいずれかを選択し、それが期待したものではない可能性があります。ソースを表示して、ページが出力するog:imageタグの数を数えてください。
FastOG for WooCommerceは異なるアプローチを取ります。独自のレンダリングサービス上で、ライブカタログデータ（タイトル、価格、セールバッジ、評価、商品写真）から1200×630のカードを生成し、競合するタグを出力する代わりに、そのカードを既に使用しているSEOプラグインに引き渡します。これにより、ページ上にog:imageが1つだけ保持され、それは生の商品写真ではなく、1.91:1のフレームに合わせて構成されたカードになります。
カードはライブカタログデータから描画されるため、カード上の価格はページ上の価格と一致し、割引商品にはセールバッジが表示されます。商品を保存すると、プラグインはFacebookにもページの再読み取りを要求します。Facebookはプログラムによる更新を提供する唯一のプラットフォームです。WhatsApp、LinkedIn、Xは独自のスケジュールに従うため、プラグインは実現できない更新を約束するのではなく、その旨を明確に伝えます。
- インストール: WordPress.orgのFastOG for WooCommerce
- 詳細とFAQ: WooCommerce統合ページ
WhatsAppが実際に表示する内容を確認する
何かを変更する前に、クローラーと同じ方法でページを確認してください。任意の商品URLを購入者のようにリンクを確認に貼り付けると、ページを取得して現在のOpen Graphタグを読み取り、WhatsApp、X、Messengerでレンダリングされるプレビューを、同じ商品データから作成したFastOGカバーと並べて表示します。サインアップは不要です。
生のタグを確認したい場合は、Open Graphメタタグジェネレーターでマークアップを確認するか、og:imageが表示されない？修正方法のリファレンスを参照してください。
FAQ
WhatsAppで商品画像が切り抜かれてしまうのはなぜですか？
WhatsAppは渡された画像を1200×630のフレームに切り抜きます。正方形や縦長の商品写真は、左右または上下が切り落とされます。商品写真をカード内に収めた、1200×630で既に構成されたカードを配信すれば、プラットフォーム側に切り抜く余地がなくなります。
WhatsAppにリンクプレビューの更新を強制できますか？
いいえ。WhatsAppには更新用のAPIやデバッガーは公開されておらず、キャッシュされたプレビューは受信者のアプリ内に存在します。できるのは、次回読み込まれる際に正しい画像が待機しているようにすることだけです。Facebookは例外で、プログラムによる再取得（re-scrape）が可能です。
Facebookシェアデバッガーでは画像が表示されるのに、WhatsAppでは何も表示されないのはなぜですか？
両者は別々のキャッシュであり、デバッガーはページのタグについて報告しています。このタグは両プラットフォームが読み取るものです。デバッガーで正しい画像が表示されるのにWhatsAppで表示されない場合、タグは正常で、更新されていないWhatsAppのキャッシュを見ていることになります。デバッガーでも何も表示されない場合は、タグが欠落しているか画像に到達できない状態です。原因1と2を順に確認してください。
WhatsAppはog:imageとtwitter:imageのどちらを使用しますか？
og:image。Open Graphタグを設定してください。twitter:imageはX用です。
プラグインが必要ですか、それとも自分でタグを追加するだけでよいですか？
テーマに静的なog:imageタグを自分で追加することは可能です。機能し、何もないよりははるかに優れています。ただし、商品ごとに個別のカードを生成するには商品ごとに画像を手作業で作成する必要があり、価格が変わるたびに古くなってしまいます。その時点で動的カバー（dynamic cover）の価値が出てきます。
私のサイトはFastOGを使っていませんが、それでも役立ちますか？
はい。5つの原因はプラットフォームの動作であり、FastOGの動作ではありません。curl、ページソース、デバッガーを使って順番に確認してください。