Google 搜索结果片段预览
查看标题和 meta 描述在 Google 搜索结果中的大致效果。用 canvas API 测量像素宽度，并像 Google 一样在约 600 px 处截断。
https://example.com › blog › cold-brew-coffee
How to Make Cold Brew Coffee at Home: A Complete Step-by-Step Guide for Beginners
Learn how to make smooth, low-acid cold brew coffee at home with just two ingredients. Our guide covers ratios, steeping times, equipment and storage tips.
Google 按像素宽度而非字符数截断。宽度在您的浏览器 中通过 canvas API 用 Arial 字体测量（标题 20 px，描述 14 px），接近 Google 桌面版结果。Google 也可能改写标题或选用其他摘要。
什么是 SERP 预览？
SERP 预览会根据页面标题、URL 和 meta 描述渲染出 Google 风格的搜索结果。它不是数字符数，而是测量文字的真实像素宽度，并在 Google 桌面端结果会截断的位置以“ ...”截断，这样你就能看出重要的词是否仍然可见。
如何使用 SERP 预览
- 输入页面标题；像素宽度和字符数会显示在标签旁边。
- 输入页面 URL，查看面包屑风格的显示 URL。
- 输入 meta 描述。
- 查看预览，以及关于标题或描述被截断的警告。
示例
输入
How to Make Cold Brew Coffee at Home: A Complete Step-by-Step Guide for Beginners (81 characters)
输出
The title measures about 780 px, wider than 600 px, so it is shown cut off with " ..." after the last whole word that fits.
该标题测量约 780 px，超过 600 px，因此在能放下的最后一个完整单词之后以“ ...”截断显示。
何时使用 SERP 预览
适合在撰写标题和描述时，确保关键信息落在可见部分。Google 经常改写标题并自行选择摘要文字，而且移动端结果使用不同的宽度，所以请把预览当作参考而非保证。
SERP 预览 的工作原理
文字宽度在你的浏览器中用 CanvasRenderingContext2D.measureText() 测量，字体为 Arial，标题 20 px、描述 14 px，与 Google 桌面端的排版一致。如果标题超过 600 px（描述为 920 px，约两行），则通过二分查找找出连同“ ...”一起能放下的最长前缀，并在附近有词边界时回退到词边界。URL 显示为主机 › 路径段。
常见用例
- 缩短商品标题，直到品牌名不再被截断。
- 检查宽字符（W、M、大写字母）有没有把标题推过限制。
- 为一组落地页预览 meta 描述。
- 向客户展示他们的搜索结果大致会是什么样子。
常见问题
为什么用像素而不是字符数？
Google 按宽度截断。60 个窄字符（i、l）可以轻松放下，而 50 个宽字符（W、M）可能放不下。
Google 一定会显示我的标题吗？
不一定。Google 可能改写过长、堆砌关键词或与页面不符的标题，并且经常从页面内容中选取描述文字。
它会模拟移动端结果吗？
它使用桌面端宽度。移动端结果会把标题折成更多行，所以桌面端是更严格的限制。