Softonic

Open Graph チェッカー

ステップ 1 / 3
次へ

ページの HTML を貼り付けると(<head> だけでも十分です)、このチェッカーが見つけたすべての og: および twitter: メタタグを解析し、6 つの必須タグのうちどれがあり、どれが欠けているか、そして各タグの正確な値を報告します。実際の URL を取得するのではなく、貼り付けたマークアップを読むため、オンラインのスクレイパーが到達できないステージングサーバー、localhost、ログインの向こう側にあるページでも動作します。

チェッカーがタグを読み取る方法

  1. 1

    ページのソースを開く

    Ctrl+U(macOS では Cmd+Option+U)を押して、ソーシャルクローラーが実際に受け取る生の HTML を表示します。

  2. 2

    head セクションをコピー

    `<head>` から `</head>` まで選択します。本文(body)は不要ですが、ページ全体を貼り付けても問題ありません。

  3. 3

    チェッカーに貼り付ける

    入力するそばからすべての `<meta>` タグが解析されます。URL は取得せず、貼り付けたマークアップだけを調べます。

  4. 4

    チェックリストを読む

    6 つのチェックが緑または赤に変わります: og:title、og:description、og:type、og:url、og:image、twitter:card。

  5. 5

    見つかった値を確認する

    すべての og: および twitter: タグが内容とともに一覧表示されるので、誤字、空の値、相対的な画像パスがひと目でわかります。

チェッカーが探す Open Graph タグ

タグ 用途 チェックリストに含まれる？
og:title カードの見出し はい、必須
og:description カードの副題 はい、必須
og:type website、article、video など はい、必須
og:url 正規(canonical)URL はい、必須
og:image プレビュー画像の URL はい、必須
og:site_name 見出しの上のブランド行 ある場合に一覧表示
og:locale en_US、es_ES など ある場合に一覧表示

マークアップにあるその他の og: タグも、チェックリストに含まれていなくてもすべて一覧表示されます。

Twitter Card タグ

X(Twitter)は自身のタグがないと Open Graph にフォールバックするため、チェックリストにあるのは twitter:card だけです。残りはチェッカーが見つけたときに一覧表示されます。

タグ 用途
twitter:card summary、summary_large_image など
twitter:site 投稿アカウントの @ハンドル
twitter:creator 著者の @ハンドル
twitter:title og:title を上書き
twitter:description og:description を上書き
twitter:image og:image を上書き

どこでも通用する画像仕様

チェッカーは og:image が宣言されていることを確認しますが、ファイルをダウンロードすることはないので、次の項目は手動で確認してください:

  • サイズ: 1200 x 630 px(Facebook、LinkedIn、大きな Twitter カード)。
  • アスペクト比: summary_large_image は 1.91:1。
  • ファイルサイズ: 5 MB 未満、クローラーがタイムアウトしないよう理想的には 1 MB 未満。
  • 形式: JPG または PNG。WebP と AVIF は、いまだにサポートが一貫していません。
  • 絶対 URL: 常に完全な https://... アドレスを使い、プロトコル相対パスやルート相対パスは使わないでください。

レポートが明らかにするよくある問題

  • og:image がない。 最もよくある単一の失敗です。画像がないと、カードはスタイルのない青いリンクに成り下がります。
  • あるのに空のタグ。 チェッカーはすべての値を表示するので、後ろに何もない og:title はすぐに見つかります。
  • 相対的な画像パス。 og:image は絶対 URL でなければなりません。/img/card.jpg のようなパスはスクレイピングを壊します。
  • og:url の不一致。 og:url が実際の正規 URL と異なると、プラットフォームがページのスクレイピングを拒否することがあります。
  • JavaScript で挿入されたタグ。 view-source には現れないため、ここにも現れず、ほとんどのクローラーも見ません。
  • Facebook 上の古いカード。 マークアップの問題ではありません。Facebook はスクレイプ結果をキャッシュします。Sharing Debugger から強制的に更新してください。

よくある質問

マークアップを貼り付けると、ソーシャルクローラーが生のレスポンスで見るものを正確に表示でき、しかもクローラーが到達できないページ、つまりステージングサーバー、localhost、イントラネット、ログインの向こう側にあるあらゆるページでも動作するからです。ページを開き、Ctrl+U を押してソースをコピーし、ここに貼り付けてください。

厳密には必要ありません。X は twitter: タグがないと Open Graph タグにフォールバックするため、チェックリストにあるのは twitter:card だけです。X で他のすべてのプラットフォームとは違うタイトル、説明、画像を使いたいときにのみ、残りを追加してください。

検証ツールは JavaScript が実行された後の DOM を表示しますが、ソーシャルクローラーは生の HTML レスポンスを読みます。検証ツールではなく view-source(Ctrl+U)を使い、その内容を貼り付けてください。タグが DOM にしか存在しない場合は、サーバーサイドレンダリングやプリレンダーサービスを追加して、クローラーが見られるようにしてください。

1200 x 630 px、JPG または PNG です。大きな Facebook と LinkedIn のカードに推奨されるサイズで、X でも受け入れられ、Slack、Discord などのリンク展開アプリでもきれいに拡大縮小されます。チェッカーは og:image が宣言されていることを確認しますが、ファイルを開くことはないので、サイズはご自身で確認してください。

Facebook はスクレイプ結果を最大 30 日間キャッシュします。developers.facebook.com/tools/debug の Sharing Debugger に URL を貼り付けて再スクレイプし、キャッシュを無効にしてください。

関連ツール

メタディスクリプション長チェッカー

メタディスクリプションの文字数と推定ピクセル幅を測り、編集上の目安やデスクトップ・モバイルのレイアウト例と比較します。

外部リンク抽出ツール

生のHTMLを貼り付け、必要に応じてベースURLを指定すると、コード内の外部http/httpsリンクを重複なしで一覧表示します。リンク監査やSEOレビューに最適です。

FAQスキーマ生成ツール

質問と回答のペアからFAQPageのJSON-LDマークアップを生成します。Googleのリッチリザルトや強調スニペットの対象になるための構造化データを数秒で用意できます。

Google SERP シミュレーター

モバイルとデスクトップの文字数上限を使って、Google 風の検索スニペットを概算で確認します。下書きはこのブラウザーセッション内にのみ残ります。

Canonicalタグジェネレーター

任意のURLに対して有効なrel=canonical linkタグを生成します。URLの検証と、避けるべきよくあるミスも含みます。

HTTPセキュリティヘッダーチェッカー

HTTPレスポンスヘッダーを貼り付け、HSTS、CSP、クリックジャッキング、MIME、リファラ、クロスオリジン設定をブラウザー内で確認します。

このツールは他の言語でも利用できます