PRACTICAL GUIDE / OGP
OGP画像と説明文を整える個人サイトの基本
OGPのタイトル・説明・画像・URLをページ内容とそろえる方法。公開HTMLと共有プレビューを分け、古い画像が出る場合の確認順を紹介します。
まずは30秒で
この記事の要点
OGPは、共有先へページのタイトルや画像などを伝える情報です。ページごとの内容をそろえ、画像とURLを実際に取得できるか確かめます。タグを書いたことと、各サービスで期待どおり表示されたことは分けて確認しましょう。
1. ページの内容を短く伝える
- og:title
- どのページか分かるタイトル。
- og:type
- 記事やWebサイトなど、内容に合う種別。
- og:image
- ページを代表する画像のURL。
- og:url
- そのページの正式なURL。
- og:description
- ページで何が分かるかを短く説明する文章。
Open Graphの仕様では、最初の4項目を基本の必須情報として説明しています。記事ページにトップページのタイトルとURLをそのままコピーせず、本文と対応させます。
2. タグと画像を公開先で確かめる
- 公開HTMLに意図した情報が含まれるか確認する。
- og:urlが正式なページを指すかを見る。
- 画像URLを開き、取得できるか確認する。
- 画像内の文字が小さい表示でも読めるか見る。
- 利用する共有先の公式プレビュー確認方法があれば使う。
架空の確認メモ
対象：操作ガイドの記事。
HTML：記事名と説明は一致。
画像：正式URLから取得できた。
共有先：まだ未確認。
結論：設定と取得を確認。共有表示まで確認済みとはしない。
画像のサイズや切り抜き方は共有先で異なる場合があります。仕様には画像の幅、高さ、代替説明などの項目もあります。重要な文字を画像の端へ寄せすぎないようにします。
3. 古い表示は原因を分けて調べる
まず公開HTMLが古いのか、画像が古いのか、共有先だけが古いのかを分けます。設定変更が公開先へ反映されていないのに、共有サービスの保存だけを原因と決めつけないでください。
共有先が再取得する時期や確認方法は、そのサービスの現行案内で調べます。見え方の確認のために、実際のSNS投稿を何度も公開する必要はありません。
参考：Open Graph protocol（2026年10月19日確認）。正式URLの整理はcanonicalの基本、更新確認は更新メモへ。