OGPタグは、WebページがSNS、チャット、ブックマークサービスなどで共有されたときに、タイトル、説明文、画像、URLをどう扱うかを伝えるためのmetaタグです。本文そのものではなく、ページの共有プレビューを作るための補足情報として使われます。
基本になる4つのタグ
まず確認したいのは og:title、og:description、og:image、og:url です。これらがそろっていると、共有先のサービスがページの内容を読み取りやすくなります。
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの短い説明文" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page" />titleタグやmeta descriptionとは別に考える
検索結果向けのtitleやdescriptionと、共有プレビュー向けのOGPは似ていますが、役割は同じではありません。検索結果では検索意図との一致が重要で、共有プレビューでは画像や短い文脈で内容が伝わることが重要です。
実装後に確認すること
- og:title が空ではない
- og:description がページ内容と合っている
- og:image が絶対URLで、外部から取得できる
- og:url が正規URLと矛盾していない
- テンプレート変更後に古い値が残っていない
OGPはページを公開して終わりではなく、テンプレート、画像生成、canonical URLを変えたときに崩れやすい部分です。TOOLPOOLのOGPチェッカーでは、公開URLからOGP関連のmetaタグを抽出し、共有プレビューに必要な基本情報を確認できます。