無料OGインスペクターと
Open Graphチェッカー

Open Graphタグとは何ですか？なぜ重要ですか？

Open Graph（OG）タグは、ページ内の次の部分に配置するHTMLメタコードの断片です： <head> のセクションです。Twitter/X、LinkedIn、Slack、iMessage、Facebookなどで共有した際の表示を制御します。設定がないとプラットフォームが表示内容を推測するため、通常は見栄えが悪くなります。

各ページに必要な4つのタグ

• og:title — リンクプレビューに表示する見出し（60文字未満）
• og:description — 補足の要約（150～160文字が目安）
• og:image — サムネイル画像（1200×630px、JPEGまたはPNG）
• twitter:card — 設定値： summary_large_image でTwitter向けの最適なレイアウトを選びます

ブックマークのプレビューが失われる理由は？

サイトのリニューアル、CMSの変更、コードの更新でOGタグは変わります。6か月前にきれいなプレビュー付きで保存したリンクが、サイトのOG画像パスの削除や名前変更によって、今は空の画像になる場合があります。Savebaseなどのツールでは保存時の元のプレビューサムネイルをアーカイブでき、コレクションの見た目をいつまでも統一できます。

このツールの仕組み

検査ツールはブラウザーCORS制限を避けサーバーでURLを取得し、HTMLの次の区画末尾まで読みます。<head> のセクションから、OG、Twitter Card、標準メタタグをすべて抽出します。重要な6種類のタグの有無と品質をもとに、100点満点で評価します。

OG検証・デバッグに使う

ブラウザーでページが正しく見えても、SNSプレビューは失敗することがあります。診断を使って、タグの欠落、空の値、省略される可能性のあるタイトルや説明文、アクセスできない画像、Open GraphとTwitter Cardのメタデータの不一致を見つけましょう。元のHTMLを修正してURLを再検査し、それでも古い版が表示される場合は、SNS側にキャッシュされたプレビューの更新を依頼してください。

Open Graphチェッカーの活用例

• LinkedIn、Facebook、X、Slackで公開する前に、ブログ記事の表示を確認できます。
• 次のことを確認します： og:image が公開され、サイズが適切で、正しいページに対応していることを確認します。
• プラットフォームによってプレビューが異なる場合は、Open GraphタグとTwitter Cardのフィールドを比較します。
• CMSの移行、再設計、ドメイン変更のあとにランディングページを監査しましょう。

OGインスペクターは何を確認しますか？

公開URLを入力して次の項目を確認： og:title, og:description,og:image、正規URL、Twitter Card、ファビコンなど、SNSのリンクプレビューに影響するメタデータを確認します。診断では、未設定のフィールドや、共有時に省略される可能性のあるタイトル・説明文の長さを指摘します。

Open Graph画像を確認するにはどうすればよいですか？

上にページURLを貼り付け、次を選択します： 検査。ページに次が用意されていれば：og:imageがあれば、検査ツールのX、Slack/iMessage、LinkedInのプレビューに表示されます。なければ、ページのOpen Graphメタデータに、一般公開された1200×630pxの画像URLを追加してください。

OGインスペクターのよくある質問