共有時のタイトルと画像を整える：OGPの指定を照合する

ページの見出しを直したのに、共有したリンクには古い名前が出る。共有時のタイトルと画像を整えるには、本文だけでなく、共有用に渡す情報も確認します。今回は静的なHTMLの一ページを対象にします。

OGPはOpen Graph protocolの略で、ページの名前や代表画像などを伝えるための記述です。題材は架空の朗読会です。SNSへの投稿そのものは行わず、指定と確認の手順を学びます。

本文と共有用情報を、一行ずつ対応させる

まず本文を読み、「何のページか」「どの画像が内容を代表するか」「正しい公開URLは何か」を紙に書きます。トップページを複製した案内では、本文だけ直して共有用の情報を残してしまうことがあります。

この例ではページ名を「秋の朗読会」、代表画像を会場の椅子を写した写真にします。写真は架空の設定であり、実際に作業するときは掲載できる素材を用意してください。別のイベントの写真を名前だけ変えて使うと、指定が正しくても内容が一致しません。

タブに表示するtitleとの役割の違いは、ページごとのtitleを付ける記事を参照できます。共有用の名前を別に書く場合も、本文と異なる催しや条件を約束しないようにします。

head内で、ページ名・種類・URL・画像をそろえる

Open Graphの公式仕様は、基本項目としてog:title、og:type、og:url、og:imageを示しています。次は既存のheadへ入れる記述例です。単独のHTML文書ではなく、example.comのURLも説明用なので、実際の公開先へ置き換えます。同名のタグがあれば追加ではなく更新してください。

<meta property="og:title" content="秋の朗読会">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/reading.html">
<meta property="og:image" content="https://example.com/images/reading.jpg">
<meta property="og:description" content="会場と開始時刻を案内します。">
<meta property="og:image:alt" content="朗読会場に並ぶ椅子">

descriptionは短い説明、image:altは画像の内容を説明する項目です。画像内の宣伝文をそのまま長く繰り返す必要はありません。画像のwidthとheightを指定する場合は、用意したファイルの実際のピクセル寸法と一致させます。

公開HTMLと画像を、別々に開いて確かめる

保存したファイルの確認だけでは、公開先への反映は分かりません。公開URLを開き、そのページのHTMLソースに意図した値が入っているかを見ます。生成する仕組みを使っているなら、生成結果に変更が届いているかも確認対象です。

次にog:imageへ指定したURLを開き、想定する画像が表示されるかを確認します。ファイル名の大文字小文字、フォルダ名、公開し忘れを調べましょう。画像が開けたことと、共有先がその画像を取得できたことは分けて記録します。

公開前のページやログインが必要な画像では、共有先から同じ情報を取得できるとは限りません。この練習の完成範囲を、まず公開HTMLと代表画像の対応確認までと決めておくと、未確認の部分が明確になります。

本文・公開HTML・共有先の表示を分けて照合する

ページ名、公開URL、画像URL、画像の内容の四項目を並べ、本文・HTMLの指定・公開先の三つで照合してください。違っている欄だけを修正し、保存後に公開版を再確認します。

共有先のプレビューを確認できる場合は、サービス名と確認時刻も残します。HTMLを修正しても表示が違うなら、その共有先の公式案内で取得条件や再取得方法を確認します。OGPは情報を渡す記述であり、すべての共有先で同じ表示を保証するものではありません。

HTMLのheadとbodyの役割を復習したい場合は、無料レッスンを利用できます。今回の照合表には、まだ試していない共有先を「未確認」と残してください。