Page SEO Analyzer:免费的页面 SEO 审计工具
粘贴页面 HTML,获取带评分的审计报告:meta 标签、标题层级、canonical、Open Graph、Twitter Card、JSON-LD 与可访问性信号。
什么是 Page SEO Analyzer?
Page SEO Analyzer 解析页面的 HTML,报告真正影响页面排名的项目:title 与 description 长度、标题层级、canonical URL、Open Graph 与 Twitter Card 覆盖、JSON-LD 结构化数据,以及一长串技术信号,如 charset、hreflang、阻塞渲染的脚本和图片 alt 文本。当客户发来一份模板要审计但我没有 CMS 访问权限时,我会用这个工具——把渲染后的 HTML 粘贴一次,得到一份编号的修复清单。错误、警告与信息级别的发现按颜色编码并按严重程度排序,五个标签的拆分把解析器找到的每一个信号都呈现出来,所以验证「有什么」和「缺什么」一样轻松。
主要功能
- 带分类拆分的 SEO 评分 — 每次分析都会产出 0-100 的总评分,加上 crawlability、内容、社交、结构化数据和可访问性的分类小项分,便于看出页面在哪儿丢分。
- meta 标签审计 — 提取并校验 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,以及全部四个twitter:*字段,并在og:url与<link rel="canonical">不一致时发出警告。 - JSON-LD 解析与校验 — 提取每一个
<script type="application/ld+json">块并解析,单独统计无法解析的块,并在每个 schema 上展示解析后的@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 landmark、preload hints、阻塞渲染的脚本、过时标签(
<center>、<font>、<marquee>...)与 base href 的状态。 - 浏览器端解析 — 使用原生
DOMParser走读 HTML;不上传,不调用外部 API。
如何使用 Page SEO Analyzer
第 1 步:粘贴你的 HTML
页面上唯一的输入是一个标记为 "HTML Input" 的 textarea。粘贴一个页面的完整 HTML 源码——通常来自浏览器的「查看源代码」(Ctrl+U / Cmd+Option+U)、curl -L 请求的响应体,或者从框架导出的渲染后 HTML。会强制执行 2 MB 上限;超过的页面在解析前会触发提醒,因为主线程上的 DOMParser 会开始卡顿。
第 2 步:点击 Analyze
按下 textarea 下方的 Analyze 按钮。解析在你的浏览器中运行;结果立刻出现。如果 textarea 为空,工具会弹出 "Please enter HTML to analyze" 的 toast,而不是默默失败。
第 3 步:阅读评分摘要
顶部会出现一行 4 张卡片:总 Score(80+ 绿、50-79 黄、低于 50 红)、Errors、Warnings 与发现的 Schemas 数量。卡片下方的 Issues 列表按严重度展示每条发现——先是 errors(红色 XCircle),然后是 warnings(黄色 AlertTriangle),再是 info 提示(蓝色 CheckCircle)。每条 issue 都有 i18n 信息,并填入了相关数字(例如 "8 of 12 images missing alt text")。
第 4 步:深入各个标签
issues 下方有五个标签:
- Meta — title 带字符数与 50-60 字符之间的 "Optimal" 徽章,description 带相同的 150-160 字符徽章,加上 canonical 与 robots。
- Headings — 按文档顺序列出每个标题,带
H1-H6徽章和文本。缩进可视化嵌套深度。 - Social — Open Graph 与 Twitter Card 卡片并排展示,每个字段或者已填或者标为 "Not set"。
- Schema — 每个 JSON-LD 块带
@type与高亮过的 JSON dump。 - Tech — 16 张小状态卡片,覆盖 charset、viewport、hreflang、main landmark、preload hints、阻塞渲染的脚本、缺尺寸的图片、lazy-load 覆盖、过时标签、内/外链计数与 base href。
第 5 步:修复并重新分析
在源代码中修复,粘贴新的 HTML,再次点击 Analyze。每次运行都会记录一条 history,概括 errors、warnings 与标题数,这样可以比较同一模板的两次运行。supporter 还能保存带标签的快照、生成 PDF 报告,并查看常见发现的翻译版修复片段。
实用示例
审计营销 landing 页
一个 landing 页有 <title>Welcome to ProductX — The All-in-One Customer Platform</title>(74 字符,远超 60 字符警告线)且没有 <meta name="description">。粘贴 HTML 后返回:titleTooLong 警告、missingDescription 错误,以及 titlePixelTooLong 警告,因为 title 也超过了 Google 桌面约 600px 的上限。把 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> 里四个 <script src> 既没有 async 也没有 defer。Images Missing Dimensions 显示 12,因为团队没有设置 width 和 height。Lazy Images 显示 1 / 14——只有一个符合条件的下方图片用了 loading="lazy"。每一项都是一个小修复,但跨模板会累积起来。
提示与最佳实践
粘贴渲染后的 HTML,不是源 HTML。 现代框架通过 JavaScript 渲染 meta 标签、标题与 JSON-LD。如果你粘贴预渲染前的模板源码,analyzer 会看到一个空的 <head>,并报告一长串假阳性的错误。在 DevTools 中对 <html> 元素用 "Copy outerHTML",或用 curl -L 请求 URL 来跟随重定向。
先修 errors,再修 warnings,最后是 info。 issue 列表已经按严重度排好。errors(红色)阻断 crawl/索引——noindexDetected、missingViewport、invalidJsonLd。warnings(黄色)是真正的遗漏——title 长度、缺 alt、缺 canonical。info(蓝色)是提醒——metaKeywordsDeprecated、genericAnchorText、paginationLinks。不要为追求满分去屏蔽 info 发现;它们是信号,不是错误。
比较同一模板的两次快照。 在修复前后各运行一次 analyzer,看 Errors 与 Warnings 计数怎么变。工具下方的 history 面板会保留最近几次运行,作为快速 diff 来源。对于较大的审计,supporter 快照允许给运行打标签,稍后还能恢复 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> 加 body 骨架就够了),或把 HTML 存到文件用本地脚本处理。2 MB 上限的存在是因为主线程上的 DOMParser 在更大输入下可能卡顿或冻结标签页。
"Failed to parse HTML" — 解析器无法理解输入。通常意味着输入根本不是 HTML(你不小心粘贴了 JSON 或 URL)。确认输入以 < 开头且包含标签语法。
已知正常的页面评分低于预期。 看 Tech 标签。很多分数来自 issues 摘要里没显示的信息级别发现——缺 favicon、内容丰富的页面没有 preload hints、导航里有通用锚文本。没有任何一项是阻断,但都从评分里扣分。
JSON-LD 计数比预期少一个。 那个 schema 块有 JSON 语法错误,出现在 issues 列表里作为 invalidJsonLd,而不是在 schema 标签里。把块复制到 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,哪些算提醒?
三档严重度对应每个信号的 W3C/Google 指引。errors 是阻断项——noindex 指令、缺失的 <meta viewport>、JSON-LD 的解析失败、内容页缺 H1。warnings 是真实的遗漏,会损害 SERP 表现或可访问性,但不会阻断索引——title 或 description 超出推荐长度、canonical 与 og:url 不一致、target="_blank" 没有 rel="noopener"。info 发现是质量提醒——通用锚文本、缺 favicon、过时标签。严重度在源代码的 issue 生成步骤中确定,无法每次运行单独配置。
analyzer 能不能帮我抓取 URL?
目前不能。textarea 只接受粘贴的 HTML,因为针对任意 origin 的浏览器内 fetch 受 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 在桌面 SERP 上使用的方式。
评分实际上意味着什么?
评分是五个分类的加权和:crawlability(搜索引擎能否索引)、内容(title、description、标题)、社交(Open Graph、Twitter Card)、结构化数据(JSON-LD 的存在与有效性)与可访问性(alt 文本、lang、landmarks)。每个 issue 按严重度扣固定分数。80+ 表示主要信号都有且格式良好;50-79 表示有真实遗漏;低于 50 表示至少有一个 error 级别的阻断在触发。把评分当成方向性总结,不要当成绝对成绩。
工具有没有需要运行页面才能完成的检查?
没有——所有检查都是静态的解析时检查。需要执行或网络的事情(Core Web Vitals 计时、服务器响应码、robots.txt 抓取、sitemap 可达性)在范围之外。这些请用 即将推出: Broken Link Checker 做 crawl 时的链接校验,用 即将推出: Sitemap Tools 做 sitemap 诊断。
我能审计登录保护的页面吗?
能,这正是用这个工具的理由之一。在登录状态下打开页面,从 DevTools 复制渲染后的 HTML(右键点 <html> → Copy → Copy outerHTML),粘贴,分析。没有任何东西离开你的浏览器,所以认证后的页面与未上线模板都可以安全测试。
相关工具
- 即将推出: Meta 标签生成器 — 生成此 analyzer 检查的 title、description、Open Graph 与 Twitter Card 标签。
- 即将推出: Schema 生成器 — 不需要手写 JSON,就能构建有效的 Article、FAQ、Product 与 Organization JSON-LD。
- 即将推出: SERP 预览 — 在发布更改之前,看看 title 与 description 在 Google 上会如何显示。
- 即将推出: 可访问性套件 — 涵盖 ARIA、对比度、键盘导航与表单标签的更深入可访问性审计。
- JSON 格式化 — 重新格式化并校验出问题的块,以排查
invalidJsonLd警告。
立即试用 Page SEO Analyzer:即将推出: Page SEO Analyzer