メタタグ・Open Graph チェックリスト

公開予定の HTML を確認する

head をメタタグプレビューに貼り付け、title、description、canonical、viewport を確認します。このツールは貼り付けたコードを読み取ります。公開済みページを取得する場合は URL 確認ツールを使ってください。

<title>Image to PDF Converter | Example</title>
<meta name="description" content="Combine JPG and PNG images into a PDF.">
<link rel="canonical" href="https://example.com/image-to-pdf/">

共有カードのタグを確認する

Open Graph では og:title、og:type、og:image、og:url が基本プロパティです。説明には og:description を追加します。画像 URL が一般公開されていることを確認してください。HTML プレビューはリモート画像の URL を表示しますが、画像自体は取得しません。

<meta property="og:title" content="Image to PDF Converter">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/image-to-pdf/">
<meta property="og:image" content="https://example.com/share.png">

相対 URL を解決し、公開済みページを確認する

画像が /share.png のような相対パスを使っている場合は、基準 URL を入力して解決結果を確認します。公開後、公開ページの値を URL 確認ツールと比較してください。ログイン要件やクローラー制限により、一部の値を取得できない場合があります。

キャッシュされたカードと書き換えられたスニペットを考慮する

HTML を更新しても、共有サービスが古いカードを保持している場合があります。公式の共有デバッガーでページの再取得を依頼してください。検索エンジンが検索内容に合わせて別の説明を選ぶこともあるため、表示されるスニペットが description タグと異なる場合があります。

このガイドで使用するツール

• HTML メタタグプレビュー
• URL メタタグ確認

参考資料

• The Open Graph protocol
• Google: Control your snippets