SNSで共有した画像が出ない｜OGPの設定と確認方法

記事の画像とSNSの共有画像は別に設定される場合があります。タイトル・画像URL・公開範囲をそろえ、実際の共有表示を確認します。

本文に画像があっても、共有画像になるとは限らない

SNSやメッセージでURLを送ったときに出るカードは、ページから取得した情報をもとに作られます。本文の一枚目が必ず採用されるわけではありません。サイト作成サービスに「ソーシャルカバー」「OGP画像」などの項目がある場合は、その設定を確認します。

Open Graph protocolでは、og:title、og:type、og:image、og:urlが基本の情報として定義されています。どのようにカードを表示するかは共有先のサービスにも依存するため、設定した情報と実際の見え方を分けて確かめます。

共有カードの材料（編集部作成）

説明文を設定できる場合も、本文と一致する内容にします。「無料」と書いた画像なのに本文では条件付き、といったずれがないかも確認してください。

共有カードは小さく表示されたり、表示面によって切り抜かれたりします。細かい文章を大量に入れず、中心となる内容が伝わる一枚を用意します。具体的な寸法や容量、対応形式は、対象とする共有サービスの現行の仕様で確認します。

編集部の作成例なら、画像には「フォームが届かないときの確認」という主題と、送信・受付・通知を表す簡潔な図を置き、詳しい説明は記事本文に残します。重要な文字を端へ寄せすぎないことも確認点です。

画像で伝えるもの（編集部作成）

非公開の制作環境では、共有サービスがページを取得できない場合があります。自分がログインして見られることと、外部サービスが取得できることを混同しないようにします。

本文画像だけを更新したのか、OGP画像の設定も変えたのかを確認します。続いて、ページが返す情報と画像URLを見ます。共有先で以前の情報が保持されている場合は、そのサービスの更新方法を確認してください。

同じURLを何度も投稿して確認する前に、公開元が正しい情報を返しているかを調べます。記事のURLを変更して解決しようとすると、既存リンクへの対応も必要になります。

確認する3つの場所（編集部作成）

「記事タイトルと一致」「本文にない約束をしていない」「画像が一般に取得できる」「共有先で文字が切れない」「正規URLへ移動できる」の5点を確認します。複数サービスを試した場合は、それぞれの結果を記録します。一つで正しく表示されたことを、すべての共有先での確認済みとは書かないでください。

SITE PORTで記事を増やしたい方は、共有画像とページごとのタイトルを設定できる範囲も確認しましょう。本文の編集とSNS向けの見え方を一緒に把握できると、公開後に案内する作業を整理しやすくなります。

SITE PORTの完成例を見る・編集のデモを見る。自分で更新する場面を想像しながら、利用できる機能とサポート範囲を申込前に確認してください。

[タイトルと説明文の作り方](/articles/page-title-meta-description)・[画像が表示されないとき](/articles/image-not-showing-path-check)