HTML 構造・見出し・画像・リンク診断

ページの HTML を貼り付けるだけで、SEO とアクセシビリティの基本項目(見出し構成・メタタグ・OGP・画像の alt・リンク・構造化データ)を一覧で確認できます。検索結果と SNS でのおおよその見え方もプレビューします。

端末内で処理・アップロードなし

ファイルや入力内容はお使いの端末(ブラウザ)の中だけで処理され、サーバーへは送信されません。

ブラウザで「ページのソースを表示」(Ctrl+U)した内容を貼り付けるか、保存した .html ファイルを開いてください。

内部リンクと外部リンクの判定に使います。アクセスはしません。

使い方

  1. 調べたいページをブラウザで開き、「ページのソースを表示」(Ctrl+U / Mac は ⌘+Option+U)で表示された HTML をすべてコピーします。

  2. 「HTML ソース」に貼り付けるか、保存した .html ファイルを開きます。

  3. (任意)ページの URL を入れると、内部リンクと外部リンクを区別して集計します。

  4. 「概要」でスコアと指摘を確認し、「見出し」「メタ・SNS」「リンク」「画像」「構造化データ」の各タブで詳細を見ます。

できること

SEO の基本項目を一括チェック

title と meta description の長さ(日本語の幅を考慮)、canonical の重複・相対 URL、robots の noindex、viewport、lang、hreflang の x-default、meta refresh を確認します。

見出し構成をツリー表示

h1〜h6 を階層どおりに並べ、h1 の有無、階層の飛び、空の見出しを色で示します。

画像・リンク・フォームのアクセシビリティ

alt のない画像、width / height のない画像(CLS の原因)、テキストのないリンク、名前のないボタン、ラベルのない入力欄、重複 id を数えて一覧にします。

構造化データと SNS 表示

JSON-LD を解析して @type を一覧にし、壊れた JSON はエラー内容を表示します。OGP / Twitter カードのタグと、検索結果・SNS でのおおよその見え方をプレビューします。

安全に解析

HTML はブラウザ内で「動かない文書」として読み込むため、スクリプトは実行されず、画像などの外部リソースも読み込みません。

こんなときに

  • 公開前のページで、title・description・canonical・OGP の設定漏れを確認したい
  • 見出しの階層(h1〜h6)が正しく組まれているか確かめたい
  • alt のない画像やテキストのないリンクを洗い出したい
  • JSON-LD の構造化データが JSON として正しいか、どの @type が入っているか確認したい
  • 外注先から納品された HTML を、ブラウザだけで手早くチェックしたい

対応形式

入力

HTML(貼り付け・.html / .htm ファイル)

対応状況

機能対応補足
title・description・canonical・robots・OGP の確認対応—
見出し構成・画像 alt・リンク・フォームの診断対応—
JSON-LD の構文チェックと @type の一覧対応—
Schema.org の必須プロパティの検証(リッチリザルト対象か)非対応—
JavaScript で描画される内容の解析一部対応貼り付けた HTML に含まれる内容のみ
URL を入力してページを取得・リンク切れ確認非対応ソースを貼り付けてください

制限・注意事項

  • ページの取得は行いません。ブラウザの「ページのソースを表示」で HTML をコピーして貼り付けてください。JavaScript で後から描画される内容を調べるには、開発者ツールの Elements からコピーした HTML を使ってください。
  • 読み込めるファイルは 10 MB まで、リンクと画像の一覧は 1,000 件まで表示します。
  • スコアはエラー 1 件 12 点・注意 1 件 5 点を引いた目安で、検索順位を示すものではありません。
  • og:image などの画像は外部サーバーに接続しないよう、URL の表示のみです。

プライバシーと安全性

貼り付けた HTML はブラウザの中だけで解析され、サーバーへ送信・保存されることはありません。スクリプトの実行や外部リソースの読み込みも行いません。

よくある質問

title や meta description は何文字がよいですか?
目安として title は日本語で 30〜35 文字程度、description は 70〜120 文字程度です。長すぎると検索結果で省略されます。このツールは日本語の文字幅を考慮して長さを判定します。
h1 は 1 ページに 1 つだけにすべきですか?
複数あっても問題にはなりませんが、ページの主題を表す h1 を 1 つにすると構成が分かりやすくなります。見出しの階層(h2 の下に h3)を飛ばさないことも大切です。
装飾用の画像にも alt は必要ですか?
alt 属性そのものは必要です。意味のない装飾画像には alt=""(空)を指定すると、読み上げソフトが読み飛ばします。このツールでは alt 属性のない画像だけを指摘します。
JavaScript で表示される部分もチェックできますか?
「ページのソースを表示」の HTML には含まれないため、そのままでは対象外です。開発者ツールの Elements パネルで <html> 要素をコピーして貼り付けると、描画後の内容を診断できます。
貼り付けた HTML は送信されますか?
いいえ。解析はすべてブラウザ内で行われ、内容がサーバーへ送られることはありません。

最終更新: