SNSで共有したときのタイトルと画像を確認する

リンクを共有したときのカードは、ページ本文とは別のメタ情報を参照することがあります。OG設定と画像の公開状態を確認し、共有先での表示も試します。

主なOG項目を揃える

Open Graphではタイトル、種類、画像、URLが基本の項目です。記事ごとに内容と一致する値を設定します。テンプレートのままサイトのトップ画像や別記事のタイトルが残っていないか確認してください。

画像URLを直接開き、ログインなしで取得できるか、想定した画像かを確認します。ページのHTMLだけ開けても画像が見つからなければ、期待したプレビューにならない場合があります。

表示サイズや切り抜き方は共有先によって変わります。端へ重要な文字を置きすぎず、短い見出しを中央寄りに置くなどの案を比較します。決まった寸法の画像で、あらゆるサービスに同じ表示になるとは考えないでください。

OGを直しても以前のプレビューが残る場合があります。共有先に検査や再取得の機能がある場合は、その案内を確認します。自分の検証用の場所で試し、無関係な相手へテスト投稿を送らないようにします。

本文のタイトルを変えても、共有用のメタ情報が別に残っていれば、カードには旧題名が出る場合があります。記事の見出し、HTMLのtitle、共有用の題名と画像を並べて確認します。必ず完全に同じ文言にする必要はありませんが、同じ記事を説明していることはそろえます。

画像は、記事内で使う写真と同じ役割とは限りません。カードでは小さく切り抜かれて見える場合があるため、何の記事かを補う情報が残る構図を選びます。細かな説明を画像へ詰めるより、本文へ進む前に主題を伝える役割を考えます。

記事の対象を絞って題名を変えた場面を考えます。原稿だけでなく共有用の題名と説明を更新し、画像に旧題名が入っているならその扱いも見直します。公開後、ページのHTMLに意図した値があるか、画像URLで正しい画像が開くかを確認します。

それでも共有先に古いカードが出るなら、まず公開側と共有先側を分けます。公開側が新しいことを確かめたうえで、共有サービスの検査や再取得の方法を確認します。何度も本文を変更しても、共有先が以前のカードを保持している問題とは別です。テストは許可された検証先で行い、カードの行き先まで開きます。

確認用のスクリーンショットには、どの共有先で、どのURLを、いつ試したかを制作メモとして添えます。サービスごとに見え方が違う場合も、条件が分かれば比べられます。英語版がある記事なら、英語URLのカードにも対応する言語の情報が出るか確認します。本文と共有カードを一組の公開物として見直します。