Open Graphメタチェッカー

任意のHTMLページのOpen GraphおよびTwitter Cardメタタグをチェックします。og:title/og:description/og:imageとTwitterタグを抽出し、欠落または無効な値を強調表示し、共有可能なJSON/PDFレポートを生成します。リダイレクトサポートと生テキスト出力を備えたSEOおよびソーシャルプレビューデバッグ用に設計されています。

Loading…

このツールについて Open Graphメタチェッカー

URLを貼り付けて、ソーシャルプラットフォームがあなたのページから読み取れる内容（Open Graph (og:*) タグとTwitter Cardメタデータ）を確認します。このツールは、タイトル/説明の欠落、壊れたまたは非公開のog:image URL、リダイレクトの問題、一般的なプレビューの落とし穴を発見するのに役立ちます。これにより、X/Twitter、Facebook、LinkedIn、Slack、Discordなどでのリンク表示が適切になります。

機能

  • Open Graphメタを抽出：存在する場合、og:title、og:description、og:imageおよび関連するOGプロパティ。
  • Twitter Cardタグを抽出：存在する場合、twitter:card、twitter:title、twitter:description、twitter:image。
  • リダイレクトを追跡し、最終的な正規の宛先（HTTP→HTTPS、www、ロケールルートで一般的）を検査します。
  • メタタグに焦点を当てたHTML専用検証モード（非HTMLリソースは対象外）。
  • 発見事項＋スコアカードと「問題のみ」フィルターで迅速なクリーンアップを実現。
  • コピー、差分比較、共有が容易な生テキスト出力。
  • チケットやドキュメント用に結果をコピー。
  • 自動化と監査用にJSONをエクスポート。
  • クライアントへの成果物やSEO監査用にPDFレポートをエクスポート。

🧭 使い方 for open-graph-meta-checker

1

ページのURLを貼り付ける

プレビューしたいページ（例：ランディングページ、ブログ記事、商品ページ）のURLを入力します。このツールはHTMLページ用であり、画像やAPIは対象外です。

2

サイトがリダイレクトする場合はそれに従う

「リダイレクトを追跡」を有効にしたままにし、ソーシャルクローラーが到達する可能性の高い最終宛先をツールがチェックできるようにします。

3

OGとTwitterの値を確認する

タイトル、説明、画像フィールドをチェックします。空の値、プレースホルダー、重複、またはOGタグとTwitterタグ間の不一致を探します。

4

一般的なプレビューの問題を修正する

og:imageが絶対URLであり、公開アクセス可能で、正しいアセットを指していることを確認します。タイトルと説明が簡潔でページごとに一意であることを確認します。

5

レポートをエクスポートして共有する

自動化用にJSONを、またはSEO/クライアントレポート用にPDFをダウンロードします。生テキストビューを使用して、値をチケットに迅速に貼り付けます。

技術仕様

リクエストと解析モデル

このツールはターゲットページ（HTML）を取得し、ドキュメントのメタ要素からOpen GraphおよびTwitter Cardメタタグを抽出します。効果的な宛先を検査するためのリダイレクト追跡をサポートします。

設定動作デフォルト
HTMLのみHTMLページとメタ情報抽出に焦点を当てる有効（ツールの能力による）
リダイレクトを追従最終URLを検査するためにリダイレクトを追従する有効
最大リダイレクト数ループを防ぐためのリダイレクト上限10
タイムアウトリクエストのタイムアウト制限15000 ms
ユーザーエージェントリクエストのユーザーエージェントを識別するEncode64Bot/1.0 (+https://encode64.com)
プライベートネットワーク安全性のためプライベートネットワーク範囲へのアクセスをブロックする無効（プライベートネットワークは許可されていません）

推奨メタセット（ベースライン）

堅実なベースラインには、Open GraphとTwitter Cardの両方のフィールドを含め、プレビューがプラットフォーム間で一貫して表示されるようにします。

プラットフォーム最小タグ備考
Open Graphog:title, og:description, og:image該当する場合はog:urlとog:typeを追加
Twitter Cardtwitter:card, twitter:title, twitter:description, twitter:imagetwitter:cardは通常summaryまたはsummary_large_image
ブラウザではページが正常に見えても、クローラーは取得したHTMLレスポンス内の情報しか認識しません。クライアント側のみのメタ情報注入は確実に取得されない場合があります。

og:imageで注意すべき落とし穴

プレビューの失敗で最も一般的な原因は画像URLです。到達可能で絶対パスであり、クローラーの取得ルールと互換性がある必要があります。

問題症状修正方法
相対画像URLプレビューに画像が表示されないog:imageとtwitter:imageには絶対URLを使用する
認証/ロボット/ファイアウォールによるブロックプレビューが欠落または一貫性がないクローラーに公開アクセスを許可。フィルタリングする場合はソーシャルユーザーエージェントを許可
画像URLのリダイレクト一部のプラットフォームで取得に失敗直接で安定した画像URLを使用（リダイレクトなし）
誤ったコンテンツタイプ画像が認識されない正しいContent-Typeを提供（例：image/png、image/jpeg）

コマンドライン

HTMLを取得してmetaタグをgrepすることで、ターミナルからOG/Twitterタグを検証できます。CIチェックやSSR問題のデバッグに便利です。

macOS / Linux

HTMLを取得してOG/Twitterメタタグを一覧表示

curl -Ls https://example.com/page | grep -i -E "<meta[^>]+(property=\"og:|name=\"twitter:)"

ソーシャルプレビューに影響するメタタグを表示。-Lでリダイレクトを追従します。

リダイレクト後の最終URLを確認

curl -ILs https://example.com/page | awk '/^HTTP\//{print} /^location:/I{print}'

リダイレクトチェーンのステータス行とLocationヘッダーを出力します。

Windows (PowerShell)

HTMLをダウンロードしてOG/Twitterタグを検索

$html = (Invoke-WebRequest https://example.com/page).Content; $html -split "`n" | Select-String -Pattern "<meta" | Select-String -Pattern "og:|twitter:"

配信されるHTMLにタグが存在することを確認する簡易的な方法です。

アプリがSPA中心の場合は、信頼性のためにOG/Twitterタグがサーバーサイド（SSR/SSG）でレンダリングされていることを確認してください。クローラーはブラウザのようにクライアントJavaScriptを実行しない場合があります。

ユースケース

壊れたソーシャルプレビューを修正

リンクが誤ったタイトル、画像なし、または古いテキストで共有される場合、このツールは不足または誤ったメタフィールドを迅速に見つけるのに役立ちます。

  • og:titleとtwitter:titleを検証
  • og:imageが到達可能で絶対パスであることを確認
  • 空の説明文やプレースホルダーを検出

動的ページとSSRのQA

フレームワークが各ルートのHTMLレスポンスにOG/Twitterタグを出力していることを確認します（特にNext.js、Nuxt、SvelteKitなど）。

  • ページごとのメタ情報がHTMLに存在することを確認
  • クライアントのみのメタ生成を捕捉
  • 正規ロケールへのリダイレクトを検証

SEOとコンテンツ公開ワークフロー

サイト全体でプレビューを標準化：一貫したタイトル/説明文、正しいOGタイプ、安定した画像により、リンク共有時のCTRが向上します。

  • 不足しているOGフィールドのテンプレートを監査
  • 編集チェックリスト用にPDF/JSONをエクスポート
  • 複数ページ間でのメタ情報の重複を検出

クライアント向けレポートと監査

ソーシャルプレビューの状態と推奨修正点を文書化する、クリーンでエクスポート可能なレポートを生成します。

  • ステークホルダー向けPDFレポート
  • 経時的な変更を追跡するためのJSONレポート

❓ Frequently Asked Questions

❓Open GraphとTwitter Cardsの違いは何ですか？

Open Graph (og:*) は多くのプラットフォーム（Facebook、LinkedIn、Slack/Discordなど）で使用されます。Twitter Cards (twitter:*) はX/Twitterで使用されます。多くのサイトは両方を公開して最大限のカバレッジを確保しています。

❓プレビューに古い画像やタイトルが表示されるのはなぜですか？

プラットフォームはプレビューをキャッシュします。タグを修正した後は、プラットフォームのデバッガーツールを使用して再スクレイピングする必要があり、キャッシュの更新を待つ必要がある場合があります。

❓og:imageが表示されないのはなぜですか？

一般的な原因：URLが相対パスである、ブロックされている（認証/WAF/robots）、リダイレクトが多すぎる、コンテンツタイプが間違っている、または公開アクセス可能でない。このツールで抽出された値を確認し、画像URLを直接テストしてください。

❓og:titleとtwitter:titleの両方が必要ですか？

両方の設定が推奨されます。一部のプラットフォームはOGタグに依存し、他のプラットフォームはTwitterタグに依存します。両方を持つことで不整合を減らせます。

❓ログインが必要なページをテストできますか？

ソーシャルクローラーは一般に認証済みコンテンツにアクセスできないため、プレビューは確実に機能しません。共有可能なコンテンツには、公開プレビューページまたは公開OGエンドポイントを使用してください。

❓ここにURLを貼り付けても安全ですか？

このツールは提供されたURLに対してサーバーサイドのリクエストを行い、プライベートネットワークターゲットをブロックします。クエリ文字列にシークレット（トークン）を入れないでください。

Pro Tips

Best Practice

og:imageとtwitter:imageには絶対URLを使用し、安定させてください（リダイレクトを避ける）。これによりクローラーの失敗を減らせます。

Best Practice

OG画像を決定的に生成してください（テンプレート＋パラメータ）。これにより、ページごとのURLを安定させたままブランディングを更新できます。

Best Practice

Next.js/SSRアプリの場合、ハイドレーション後のDOMだけでなく、初期HTMLレスポンス（ソース表示）でタグを確認してください。

Best Practice

タイトルは簡潔に、ページごとに一意に保ってください。長すぎるタイトルはプレビューで切り詰められ、CTRを低下させる可能性があります。

Best Practice

JSONレポートをエクスポートし、リリースチェックリストに追加して、メタテンプレートの退行を検出してください。

Additional Resources

Open Graphプロトコル
Documentation
Twitter Cards (X) ドキュメント
Documentation
ソーシャルプレビューのためのメタタグ (MDN: <meta>)
Documentation
Google Search Central: スニペットの制御（メタタグ）
Documentation

Other Tools

Open Graphメタチェッカー — OG & Twitter Cardプレビューの検証 | Encode64