什么是 SERP？
SERP 是 Search Engine Results Page（搜索引擎结果页）的缩写，指的是用户在 Google、Bing 等搜索引擎中输入关键词后看到的结果页面。
每条搜索结果通常包含三个核心元素：
- Meta Title（标题）：蓝色可点击链接，是用户最先看到的内容
- URL / 面包屑：显示网页地址，帮助用户判断来源
- Meta Description（描述）：灰色摘要文本，概述网页内容
搜索结果页就像一个广告位——你的 Title 和 Description 直接影响用户是否会点击你的链接。因此，优化 Meta Tag 不仅是技术工作，更是提升点击率（CTR）的关键手段。
为什么需要像素级检测？
传统的 Meta Tag 长度检测工具通常基于字符数来判断是否超长，例如"标题不超过 60 个字符"。但这种方式存在一个根本性问题：
不同字符占据的像素宽度不同。
例如，字母 W 的宽度约是字母 i 的 3-4 倍。一个由宽字符组成的标题可能在 50 个字符时就已超出显示限制，而窄字符组成的标题在 70 个字符时仍能完整显示。
根据 Google 官方文档的说明：<title> 元素的长度没有硬性限制（"there's no limit on how long a <title> element can be"），但搜索结果中的标题链接会根据需要被截断，通常以适配设备宽度为准。同样，Google 关于 Description 的文档也指出：Meta Description 的长度也没有限制（"there's no limit on how long a meta description can be"），但摘要会在搜索结果中按需截断。
实际上，Google 使用的是像素宽度来决定截断位置：
| 项目 | 桌面端 | 移动端 |
|---|---|---|
| Title 最大宽度 | 600px（约 55-60 字符） | 480px（约 40-45 字符） |
| Description 最大宽度 | 920px（约 155-160 字符） | 680px（约 110-120 字符） |
此外，当搜索词匹配到 Title 或 Description 中的关键词时，Google 会将其加粗显示。加粗文本占据的像素宽度更大，这意味着实际可见长度会比预期更短。
Google 如何渲染搜索结果？
Google 搜索结果使用 Roboto 字体渲染文本：
- Title：20px Roboto，蓝色链接文本
- Description：14px Roboto，灰色摘要文本
Google 并不总是使用你提供的 Meta Tag 内容。根据 Google 官方最佳实践，Google 会综合多个来源自动生成标题链接，包括 <title> 元素、页面主视觉标题、<h1> 等标题元素、og:title 标签，甚至外部链接的锚文本。它可能会根据用户的搜索查询动态调整显示内容：
- 从页面正文中提取更匹配的文本片段
- 将多个内容片段组合成新的描述
- 修改 Title 以更好地匹配搜索意图
尽管如此，编写优质的 Meta Tag 仍然至关重要——它为 Google 提供了最佳的默认展示内容。
📖 Google 官方参考文档
- Influencing your title links in search results — Title 标签的最佳实践
- Control your snippets in search results — Meta Description 的最佳实践
本工具的价值
本工具使用与 Google 搜索结果相同的 Roboto 字体，通过 Canvas API 精确测量文本的像素宽度，提供：
- 像素级精准测量：告别字符数估算，直接获取真实像素宽度
- 桌面 / 移动端并排预览：同时查看两端的显示效果
- 实时截断高亮：超出限制的文本自动标红，直观定位截断位置
- 进度条可视化：一目了然地判断当前长度是否在安全范围内
- 多语言支持：中文、日文、韩文等宽字符语言的像素测量同样精准
- 纯浏览器端计算：无需联网，所有数据不离开本地