Glyph WidgetsGlyph Widgets
ツール概要お問い合わせブログプライバシー利用規約広告を削除Ko-fiでサポート

© 2026 Glyph Widgets LLC. All rights reserved.

·

100%クライアントサイド処理

ブログに戻る

Page SEO Analyzer:無料のオンページSEO監査ツール

ページのHTMLを貼り付けて、メタタグ、見出し構造、canonical、Open Graph、Twitter Card、JSON-LD、アクセシビリティのスコア付き監査を取得できます。

Glyph Widgets
2026年5月5日
約18分で読めます
page seo analyzerオンページseo監査メタタグチェッカーhtml seo監査open graph checkerjson-ldバリデータ

Page SEO Analyzer とは?

Page SEO Analyzer はページのHTMLをパースして、オンページ順位に実際に影響する項目を報告します。titleとdescriptionの長さ、見出し階層、canonical URL、Open GraphとTwitter Cardのカバー範囲、JSON-LD構造化データ、そしてcharset、hreflang、レンダリングをブロックするスクリプト、画像のalt属性などの技術的シグナルの長いリストです。クライアントから1つのテンプレートだけ監査依頼が来てCMSにアクセスできないとき、私はこのツールを使います — レンダリング済みHTMLを1度貼り付ければ、番号付きの修正リストが返ってきます。エラー、警告、情報レベルの所見はカラーコードされ重大度順に並び、5タブの内訳がパーサーで見つかったすべてのシグナルを表面化させるので、欠けているものと同じくらい簡単に存在するものを確認できます。

主な機能

  • カテゴリ別内訳付きSEOスコア — 解析ごとに0-100の総合スコアと、クローラビリティ、コンテンツ、ソーシャル、構造化データ、アクセシビリティ別のサブスコアが出るので、どこで点を落としているかが見えます。
  • メタタグ監査 — title(長さに加えてGoogleのデスクトップ約600px上限に対するピクセル幅推定)、description、canonical、robots、viewport、charset、<html lang> を抽出し検証して、欠落や長すぎるフィールドを指摘します。
  • 見出し階層ビュー — H1からH6を文書順にインデント表示し、H1欠落、H1複数、レベルのスキップ(例:H2から直接H4)をフラグします。
  • Open Graph と Twitter Card のカバー — og:title、og:description、og:image、og:url、og:type、og:site_name と4つの twitter:* フィールドを確認し、og:url と <link rel="canonical"> が一致しないときに警告します。
  • JSON-LDのパースと検証 — すべての <script type="application/ld+json"> ブロックを抽出してパースし、パース不能なブロックを別カウントし、各スキーマの解決済み @type を表示します。
  • 画像alt属性と寸法のチェック — alt がない画像、空 alt の画像、ファイル名がalt(IMG_1234.jpg)になっている画像、明示的な width/height がない画像(Cumulative Layout Shift のシグナル)、loading="lazy" を使っていないファーストビュー外の画像を集計します。
  • リンク監査 — 内部 vs 外部のカウント、汎用アンカーテキスト検出(click here、read more、learn more)、存在しないIDを指すページ内フラグメントリンク、rel="noopener" のない target="_blank"。
  • Tech タブ — canonical、charset、viewport、html lang、robots、favicon、hreflang数、main ランドマーク、preload ヒント、レンダーブロッキングスクリプト、非推奨タグ(<center>、<font>、<marquee> ...)、base href のステータスを一目で確認できます。
  • ブラウザ側パース — ネイティブの DOMParser でHTMLを走査します。アップロードも外部APIも使いません。

Page SEO Analyzer の使い方

ステップ1: HTMLを貼り付ける

ページ唯一の入力は "HTML Input" というラベルのtextareaです。1ページの完全なHTMLソースを貼り付けます — 通常はブラウザの「ソース表示」(Ctrl+U / Cmd+Option+U)、curl -L リクエストのレスポンスボディ、フレームワークからエクスポートしたレンダリング済みHTMLです。2 MBの上限が適用されており、それを超えるページはパースの前にアラートが出ます。メインスレッド上の DOMParser がもたつき始めるためです。

ステップ2: Analyze をクリック

textareaの下の Analyze ボタンを押します。パースはブラウザ内で走り、結果はすぐ表示されます。textareaが空の場合は、無音で失敗するのではなく "Please enter HTML to analyze" のトーストが出ます。

ステップ3: スコアサマリーを読む

上部に4枚のカードが並びます。総合 Score(80以上で緑、50-79で黄、50未満で赤)、Errors、Warnings、見つかった Schemas の件数です。カードの下の Issues リストがすべての検出を重大度順で表示します — まずエラー(赤い XCircle)、次に警告(黄色の AlertTriangle)、次に情報(青い CheckCircle)。各 issue は実数が埋め込まれた i18n メッセージを持ちます(例: "8 of 12 images missing alt text")。

ステップ4: タブを掘り下げる

issues の下に5つのタブがあります。

  • Meta — 文字数表示と50-60文字での "Optimal" バッジ付きのtitle、150-160文字での同じバッジ付きのdescription、加えて canonical と robots。
  • Headings — 文書順の各見出しに H1-H6 バッジと本文。インデントが入れ子の深さを可視化します。
  • Social — Open Graph と Twitter Card のカードを横並びで表示し、各フィールドが埋まっているか "Not set" になっています。
  • Schema — 各JSON-LDブロックを @type とシンタックスハイライトされたJSON出力で表示します。
  • Tech — charset、viewport、hreflang、main ランドマーク、preload ヒント、レンダーブロッキングスクリプト、寸法のない画像、lazy-load カバー率、非推奨タグ、内部/外部リンク数、base href をカバーする16の小さなステータスカード。

ステップ5: 修正して再解析する

ソース側で修正を入れ、新しいHTMLを貼り付けて、もう一度 Analyze をクリックします。各実行はエラー、警告、見出し数を要約した履歴エントリを記録するので、同じテンプレートに対する2回の実行を比較できます。サポーターはラベル付きスナップショットを保存し、PDFレポートを生成し、よくある検出に対する翻訳済み修正スニペットを取得することもできます。

実用例

マーケティングランディングページの監査

ランディングページが <title>Welcome to ProductX — The All-in-One Customer Platform</title>(74文字、60文字の警告ラインを大幅超過)を持ち、<meta name="description"> がありません。HTMLを貼り付けると、titleTooLong 警告、missingDescription エラー、そしてtitleがGoogleのデスクトップ約600pxキャップより広いため titlePixelTooLong 警告が返ってきます。titleを約50-60文字に切り詰め、150-160文字のdescriptionを書き、再実行すると、Metaタブが両方の長さの隣に緑の "Optimal" バッジを出します。

公開前のArticle構造化データの検証

ブログ記事テンプレートが Article JSON-LDブロックを追加します。レンダリング済みHTMLを貼り付けると、Schema タブにブロック全体が整形された Schema #1 (Article) が表示されます。カンマが抜けていれば、issues リストに件数付きの invalidJsonLd が出てそのブロックは schema タブには表示されません — pushの前のクイック検証です。隣の Open Graph カードは og:type が article かどうかも示します(Facebookは記事の投稿でこれを期待します)。

アクセシビリティとパフォーマンスの匂いを見つける

あるページが手早いLighthouseスキャンには通っても、Tech タブはより徹底しています。Render-blocking scripts は黄色で 4 を表示します。<head> 内の4つの <script src> が async も defer も持たないからです。Images Missing Dimensions が 12 を表示します。チームが width と height を設定していないからです。Lazy Images は 1 / 14 を示し、対象のファーストビュー外画像のうち1つだけが loading="lazy" を使っています。それぞれは小さな修正ですが、テンプレート全体で積み上がります。

ヒントとベストプラクティス

ソースHTMLではなくレンダリング済みHTMLを貼り付けます。 現代のフレームワークはメタタグ、見出し、JSON-LDをJavaScriptで生成します。プリレンダリング前のテンプレートソースを貼ると、analyzer は空の <head> を見て偽陽性のエラーを大量に報告します。DevToolsで <html> 要素に対して "Copy outerHTML" を使うか、-L 付きで curl してリダイレクトを追ってください。

まずエラー、次に警告、最後に情報を直します。 issue リストはすでに重大度順に並んでいます。エラー(赤)はクロール/インデックスをブロックします — noindexDetected、missingViewport、invalidJsonLd。警告(黄)は実害のある抜け漏れです — title 長、alt の欠落、canonical の欠落。情報(青)はナッジです — metaKeywordsDeprecated、genericAnchorText、paginationLinks。情報の検出を黙らせて満点を狙わないでください。それらはシグナルであってエラーではありません。

同じテンプレートの2つのスナップショットを比較します。 修正の前後で analyzer を走らせて、Errors と Warnings のカウントの変化を見ます。ツール下の履歴パネルに直近のいくつかの実行が残るので、簡易な diff になります。より大きな監査では、サポータースナップショットを使うと実行にラベルを付けて後でHTMLを復元できます。

文字数だけでなくピクセル幅チェックを信用します。 60文字のtitleでも、文字の形のせいで異なるピクセル幅にレンダリングされます — "WWW Information Initiative" は同じ文字数の "lily lily lily lily lily i" より幅が広いです。GoogleのSERP切り捨てはピクセルベースで約600pxです。titlePixelTooLong 警告は文字数の予算には収まっても切られるtitleを捕まえます。

よくある問題とトラブルシューティング

"Please enter HTML to analyze" — textarea が空、または空白だけです。実際のHTMLを貼り付けてください(<!DOCTYPE html> で始まる必要はなく、部分的なフラグメントでも問題なくパースされますが、<head> がないとほとんどのフィールドは "not set" になります)。

"HTML too large (max 2 MB)" — 入力が2 MBを超えています。気になるセクションだけにトリミングするか(多くのチェックには <head> プラスボディの骨格で十分です)、HTMLをファイルに保存してローカルスクリプトを使ってください。2 MBの上限はメインスレッド上の DOMParser が大きな入力でタブを固める可能性があるためです。

"Failed to parse HTML" — パーサーが入力を解釈できませんでした。たいていは入力がHTMLでない場合です(誤ってJSONやURLを貼り付けた)。入力が < で始まりタグ構文を含むことを確認してください。

問題のないはずのページでスコアが想定より低い。 Tech タブを見てください。多くの点は issues リストの要約に出ない情報レベルの検出から差し引かれます — favicon の欠落、コンテンツリッチなページに preload ヒントなし、ナビ内の汎用アンカーテキストなど。どれもブロッカーではありませんが、すべてスコアから引かれます。

JSON-LDのカウントが想定より1つ少ない。 そのスキーマブロックにJSON構文エラーがあり、schema タブではなく issues リストに invalidJsonLd として出ています。ブロックを JSON Formatter にコピーすると、抜けたカンマや閉じ忘れた括弧が見つかります。

hreflang のカウントは合っているのに hreflangInvalid が発火する。 hreflang の値はBCP-47でなければなりません — en、en-US、pt-BR、または特殊な x-default。ツールは ^([a-z]{2,3}(-[A-Za-z0-9]+)*|x-default)$ (大文字小文字を区別しない)に一致しないコードをフラグします。よくある原因はアンダースコア付きの en_US、english、または末尾の空白です。

プライバシーとセキュリティ

Page SEO Analyzer はネイティブの DOMParser を使ってあなたのブラウザでHTMLをパースします。貼り付けたHTMLは端末から外に出ず、それを受け取るサーバーエンドポイントもありません。これはステージングや未公開ページに重要です — まだ認証の裏にあるドラフトテンプレートを、サードパーティのクローラーにさらすことなく監査できます。ツールのJavaScriptが読み込まれた後は、解析自体はオフラインで動きます。

よくある質問

ツールはどうやって深刻な issue とナッジを区別していますか?

3段階の重大度が各シグナルについてW3C/Googleのガイダンスに対応します。エラーはブロッカーです — noindex 指示、<meta viewport> の欠落、JSON-LDのパース失敗、コンテンツページのH1欠落。警告はSERP表示やアクセシビリティを損なうがインデックスはブロックしない実害のある抜け漏れです — 推奨長から外れたtitleやdescription、canonicalと og:url の不一致、rel="noopener" のない target="_blank"。情報レベルは品質のナッジです — 汎用アンカーテキスト、favicon の欠落、非推奨タグ。重大度はソースの issue 生成ステップで設定され、実行ごとに変えられません。

analyzer は私の代わりにURLを取得できますか?

今のところできません。textarea は貼り付けられたHTMLだけを受け取ります。任意のオリジンに対するブラウザ内のフェッチはCORSでブロックされ、サーバープロキシが必要だからです。リモートURLを監査したい場合は、ターミナルから curl -L -A "Mozilla/5.0" https://example.com > page.html を実行してファイル内容を貼り付けてください。

title 長チェックは通るのに titlePixelTooLong がまだ発火するのはなぜですか?

Googleが標準的な20px Arialレンダリングで約600ピクセルでtitleを切り詰めるからです。60文字ではありません。幅広い文字(M、W、大文字一般、em-dash)は文字数が問題ない場合でもピクセル数を上限の上に押し上げます。ピクセル推定はcanvasの measureText を 20px Arial,Helvetica,sans-serif に対して使い、Googleがデスクトップの SERPs で使うものに近い近似です。

スコアは実際に何を意味しますか?

スコアは5カテゴリにわたる重み付けされた合計です。クローラビリティ(検索エンジンがインデックスできるか)、コンテンツ(title、description、見出し)、ソーシャル(Open Graph、Twitter Card)、構造化データ(JSON-LDの存在と妥当性)、アクセシビリティ(alt、lang、ランドマーク)。各 issue は重大度に応じた固定の点数を引きます。80以上は主要シグナルが揃って整っていることを示し、50-79は実害のある抜け漏れがあり、50未満は少なくとも1つのエラー級ブロッカーが発火していることを意味します。スコアは方向性を示す要約として扱い、絶対的な評価としては扱わないでください。

ページを実行する必要があるチェックはありますか?

いいえ、すべてのチェックは静的なパース時です。実行やネットワークが必要なもの(Core Web Vitalsの計測、サーバーレスポンスコード、robots.txtの取得、サイトマップの到達性)はスコープ外です。それらにはクロール時のリンク検証に 近日公開: Broken Link Checker、サイトマップ診断に 近日公開: Sitemap Tools を使ってください。

ログイン保護されたページを監査できますか?

はい、それがこのツールを使う理由の1つです。ログイン状態でページを開き、DevToolsからレンダリング済みHTMLをコピー(<html> を右クリック → Copy → Copy outerHTML)、貼り付け、解析します。ブラウザから何も出ないので、認証ページや未公開テンプレートのテストは安全です。

関連ツール

  • 近日公開: Meta Tag Generator — このanalyzerが確認するtitle、description、Open Graph、Twitter Cardタグを生成します。
  • 近日公開: Schema Generator — JSONを手で書かずに有効なArticle、FAQ、Product、Organization JSON-LDを構築します。
  • 近日公開: SERP Preview — 変更を出す前にtitleとdescriptionがGoogleでどう見えるかを確認します。
  • 近日公開: Accessibility Suite — ARIA、コントラスト、キーボードナビゲーション、フォームラベルをカバーするより深いアクセシビリティ監査。
  • JSON Formatter — 該当ブロックを再フォーマット・検証して invalidJsonLd 警告をデバッグします。

Page SEO Analyzer を今すぐ試す: 近日公開: Page SEO Analyzer

最終更新: 2026年5月5日

続きを読む

他の記事Page SEO Analyzerを試す