この記事は、自社のホームページの URL を LINE・SNS・note などに貼ったとき、画像が出ない・思った通りに見えない、と感じている事業者の方に向けて書いています。
当方のページで起きたこと
自社のサイトのページの URL を note の記事に貼りました。
- 最初は、画像の無い文字だけのカードでした。記事の中で見逃されやすい見た目です
- 共有用の画像を用意すると、今度は画像の左右が切れて見えました。note のカードは、画像の中央を横長の小さな枠で切り取るからです
- 中身を画像の真ん中に収めた専用の画像に替えました
- それでも、すぐには変わりませんでした。note が同じ URL の古い情報を覚えているようでした。URL の末尾の「/」を外して貼り直すと、新しい画像が出ました
見え方を決めているのは、ページの中の数行
カードの題・説明・画像は、ページの中に書いてある数行で決まります。
- 題（title）と説明（description）: 検索結果の題と説明の候補になります（実際に何を出すかは検索エンジンが決めます）
- 共有用の題・説明・画像（og: で始まる行）: LINE・Facebook・note などのカード
- X のカードの形（twitter:card）
- 正規の URL（canonical）: 同じ中身の URL がいくつかあるとき、どれを正とするか
当方のサイト全体（62 ページ）を機械で数えたときは、こうした不整合が 5 種類見つかりました。共有用の画像が汎用のままのページがあったり、自己紹介の文が 2 通りあったり。1 ページずつではなく、ページを作る仕組みの側で直しました。
自分で確かめる 3 つ
- ページのソースを見る。 ブラウザで右クリック →「ページのソースを表示」。og:image の行が無ければ、画像の無いカードになる原因の 1 つです
- 使う共有先で、実際に貼る。 切り方は共有先ごとに違います。直したのに変わらないときは、共有先が古い情報を覚えていることがあります
- 自社名で検索して、説明を見る。 ページに書いた説明と同じかを確かめます
依頼するなら、受け取るもの: 対象のページ全部について、欠けているもの・食い違っているものの一覧。
本家の読み物の下に、ページのソースを貼ると、欠けているもの・食い違っているものと、カードの見本を出す画面を置きました。ブラウザの中だけで読み、どこにも送りません（画像も読み込みません）。
全文は本家に
点検で分かること、依頼の前に用意するもの（と送らないもの）は、本家の記事にまとめています。
サイトの URL を貼っても画像が出ない。検索結果の説明も思っていたのと違う
Sumitsuke は、事業者の方（法人・個人事業主）から、ホームページやシステムの点検と修理を納品型で受けています。