HTML 差分アナライザー
2 つの HTML スニペットを並べて比較し、グラフやコンテンツ タイプの内訳を使用して、行ごと、タグごとに相違点を正確に確認します。
エラー
全体的な概要
HTML Diff Analyzer の使用方法
クイックスタート
- 1 元の HTML を左側のテキストエリアに貼り付けるか、.html ファイルをアップロードします
- 2 変更した HTML を右側のテキストエリアに貼り付けます
- 3 reCAPTCHA を完了し、「HTML の比較」をクリックします。
- 4 各タブを確認します: 概要メトリクス、グラフ、タグの変更、SEO の違い、完全な行ごとの差分
何が見えるか
- タイトル、見出し、各段落の単語ごとの差分
- 両方の HTML バージョンのレンダリングされたプレビューを並べて表示
- 構造的およびテキストの類似性スコア (0 ～ 100%)
- 追加、削除、または変更された HTML タグの数
- SEO フィールドの差分: タイトル、メタディスクリプション、カノニカル、オープングラフ、ロボット
- 生の HTML の色付きの行ごとの差分
このツールが分析する内容
コンテンツとテキストの違い
- A と B の間の各見出し、段落、リスト項目、ブロック引用符をテキストの類似性によって照合します。
- 追加、削除、変更、移動されたコンテンツ ブロックを単語レベルの強調表示で表示します
- <title> を比較します。微妙な言い換えを一文字ずつキャッチする
- 各ドキュメント内の単語、文字、行、要素をカウントします。
- サンドボックス化された iframe 内で両方の HTML バージョンをレンダリングして視覚的に比較します
構造とSEOの違い
- メタタイトル、説明、正規、ロボット、ビューポート、言語の差分
- ソーシャル共有用の Open Graph タグと Twitter Card タグを比較します
- 画像 (alt ありまたはなし)、内部および外部リンク、スクリプト、スタイルシート、フォームをカウントします。
- 各バージョンの JSON-LD 構造化データ ブロックを検出します
- デルタを含む完全なタグごとのカウント テーブルと、生の行ごとの統合差分を表示します。
SEO チームとコンテンツ チームにとって HTML の差分が重要な理由
編集上の変更を確認する
コンテンツを更新する前後に、2 つの HTML バージョンを比較して、どのタイトル、見出し、段落が更新されたかを正確に確認し、重要な文言、キーワード、CTA が誤って削除されていないことを確認します。
レンダリングの違いをデバッグする
生の HTML とレンダリングされた HTML (またはモバイル出力とデスクトップ出力) を比較して、欠落しているコンテンツ、非表示になっているコンテンツ、または Googlebot とは異なる方法で提供されているコンテンツを特定します。これは、JavaScript を多用するサイトでランキングが低下する一般的な原因です。
サイレントテンプレートの変更を追跡する
デプロイまたは CMS 更新によってテンプレートが変更されると、ランキングが反応するずっと前に、タグ分布図と SEO タグの差分によって、削除されたスキーマ、変更された正規化、または削除されたメタ タグが明らかになります。
コンテンツ優先の差分
読者が実際に見るテキスト (タイトル、見出し、段落、リスト項目) に焦点を当て、単語レベルのハイライトを使用してバージョン間で一致させます。
レンダリングされたプレビュー
どちらの HTML バージョンもサンドボックス化された iframe 内で並べて表示されるため、レイアウト、見出し、コピーの違いを視覚的に確認できます。
ビジュアルチャート
棒グラフとドーナツ グラフでは、コンテンツ タイプ、タグの分布、レベルごとの見出し、および差分構成を一目で比較できます。
SEOタグの差分
タイトル、メタディスクリプション、カノニカル、オープングラフ、Twitter カード、ロボット、言語属性が変更ステータスと並べて表示されます。
タグ数の比較
A、B、およびデルタのカウントを含むすべての HTML タグの完全な内訳 — どの要素が追加、削除、または複製されたかを即座に確認できます。
統合されたラインの差分
コンテキスト内で追加および削除されたすべての行を検査したいレビュー担当者向けの、生の HTML のクラシックな色の統合差分。