こんにちは、ツバサです。
自社の商品ページのURLをX（旧Twitter）でシェアしたら、画像がまったく表示されなかった。リンクだけがポツンと出ている状態で見栄えが悪い。調べてみたら「OGP画像」というものを設定する必要があるらしい。
OGP画像とは
ひとことで言うと、WebページのURLをSNSでシェアしたときに表示されるサムネイル画像のこと。OGPは「Open Graph Protocol」の略で、Facebookが提唱したWebページのメタ情報を記述する仕組みだ。
OGPの公式仕様サイト（ogp.me）を見ると、og:title、og:description、og:image、og:urlの4つが基本のプロパティとして定義されている。この中のog:imageが、SNSでシェアしたときに表示される画像を指定する部分だ。
HTMLのhead内に以下のようなメタタグを書く。
<meta property="og:image" content="https://example.com/image.png">
ここで指定した画像が、FacebookやX、LINEでURLをシェアしたときにサムネイルとして使われる。Facebookの開発者向けドキュメントにも、OGPタグの設定方法が詳しく載っている。
推奨サイズは1200×630px。さくらインターネットのImageFluxコラムによると、Facebook・Xの両方で大きく表示されるサイズがこの1200×630pxで、LINEでは正方形にトリミングされるため、重要な情報は画像の中央に寄せておくといいらしい。
EC実務で出てくる場面
ECの仕事をしていると、OGP画像の設定不備に遭遇する場面が意外と多い。
SNSでの商品シェア
今回の僕のケースがこれ。商品ページのURLをXに投稿したら画像が出ず、タイトルとURLだけが表示された。ECサイトの場合、商品画像がそのままOGP画像として使われるのが理想だけど、設定がないとSNS側がページ内の適当な画像を拾ってしまったり、まったく画像が表示されなかったりする。
キャンペーンページのシェア
セールやキャンペーンの告知ページをSNSで拡散するとき、OGP画像が設定されていないとただのURLリンクになる。画像付きの投稿と比べるとクリック率が大きく変わるので、キャンペーンページには専用のOGP画像を用意するのが基本だ。PLAN-BのOGP解説記事でも、OGP画像の有無でSNS経由のクリック率に差が出ると紹介されていた。
画像を変更しても反映されない
OGP画像を差し替えたのに、SNSで古い画像が表示され続けることがある。これはSNS側にキャッシュが残っているのが原因。Facebookならシェアデバッガーで「もう一度スクレイピング」を実行すればキャッシュが更新される。Xにも同様の確認ツール（Card Validator）がある。
覚えておきたいポイント
画像URLは絶対パスで指定する
OGP画像のURLは https:// から始まる絶対パスで書く必要がある。相対パス（/images/ogp.png など）で指定するとSNS側が画像を取得できず、表示されない原因になる。僕もこれでハマった。
ECモールの場合は設定不要なことが多い
楽天やAmazonなどのECモールでは、モール側がOGPタグを自動で設定してくれることが多い。自分でOGP画像を設定する必要があるのは、自社ECサイト（Shopifyや独自ドメインのサイト）の場合だ。Shopifyならテーマの設定画面からOGP画像を登録できる。
確認ツールを使って事前チェック
公開前にOGP画像がちゃんと表示されるか確認しておくと安心。Facebookのシェアデバッガー、XのCard Validator、LINEのPage Pokerなど、各SNSが確認ツールを提供している。URLを入れるだけでプレビューが見られるので、設定後に必ずチェックしておきたい。
