SERP 搜索结果预览器

写好的 标题 / 描述 / URL 在搜索结果里到底显示几个字?本工具按 像素宽度 模拟 Google 桌面、Google 移动、百度 三种卡片,实时标出截断位置,避免关键卖点被省略号吃掉。

1填写 TDK

像素
0 / 600px
像素
0 / 1200px

2结果预览

* 像素宽度为近似估算(字体渲染、语言、SERP 特性会浮动 ±10%),最终以真实搜索结果为准。

★场景模板与像素预算图

8 套行业 TDK 模板一键填充;自绘三端像素预算标尺实时显示标题与描述占比,并可导出 JSON / CSV 对照表。

三端像素预算标尺 · 自绘 SVG

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

最近方案 暂无

🔍口径说明与常见误填

像素级截断模拟,Google 双端与百度三卡片

像素测量
Canvas 逐字量宽:Google 桌面标题约 600px、移动约 480-520px、百度约 540px。
三种卡片
Google 桌面、Google 移动、百度 SERP 结果卡片切换即预览。
截断标记
标题与描述各带像素进度条,截断位置在预览卡片上直接标出。
长度经验
中文标题桌面约 28 字、百度约 24 字即被截,核心关键词放前 20 个汉字。
适配复制
一键复制调整后的不截断 TDK 组合。

这个工具解决什么问题

SEO 标题到底写 28 字还是 60 字?Google 和百度按像素宽度截断,而不是字符数。本工具填好 标题、描述、URL,按像素模拟 Google 桌面、Google 移动、百度三种搜索结果卡片,实时标出截断位置与进度条,避免关键卖点被省略号吃掉,免注册、纯浏览器本地计算。

三条写法守则

① 关键词放最前:桌面与移动截断差 4 至 6 个字,核心词务必出现在前 20 个汉字,品牌名放最后。

② 卖点写前 80 字符:描述摘要桌面约 2 行、移动约 3 行,把差异化价值与行动号召放进前 80 个字符。

③ 描述影响点击率:描述不直接参与排名,但显著影响 CTR,别让搜索引擎自动生成摘要。

怎么用

  1. 第 1 步 · 填写 TDK
    页面标题、搜索描述、网址与站点名逐项输入(可先载入示例)。
  2. 第 2 步 · 看像素进度
    标题与描述下方像素进度条实时变化,超限即时标红。
  3. 第 3 步 · 切换三种卡片
    Google 桌面、Google 移动、百度三种预览切换,截断位置实时标出。
  4. 第 4 步 · 复制适配 TDK
    按截断提示调整文案后,一键复制不截断的 TDK 贴进页面 head。

更新记录

  • v1.0 2026-11-02
  • 2026-11-02 上线首个版本
  • 2026-11-02 新增百度卡片与像素进度条

常见问题

SEO 标题一般多少字合适?百度呢?
Google 桌面标题约 600px 宽(英文 50 至 60 字符、中文约 28 至 30 字),百度约 540px(中文 24 字左右常被截断)。核心关键词务必放前 20 个汉字内,品牌名放最后。
搜索结果摘要显示不全怎么办?
摘要被截断是因为超出行宽乘行数预算(Google 桌面约 2 行、移动约 3 行)。把卖点与行动号召写进前 80 个字符,避免依赖搜索引擎自动生成的描述;本页会精确标出截断在第几个字。
Google 标题像素长度限制是多少?
Google 不按字符数截断,而是按像素:桌面 20px 字号约 600px,移动 16px 约 480 至 520px。中文一个字约等于一个 20px 方块,所以同样标题在移动端会少显示 4 至 6 个字,本页分端预览。
网站描述 TDK 怎么写,有示例吗?
公式:核心词加差异化价值加行动引导,例如"200+ 免费在线开发者工具,JSON/正则/二维码全本地运行,无需注册"。描述不直接参与排名,但显著影响点击率 CTR;点复制适配后的 TDK 可拿到不截断版本。
有没有搜索结果预览在线工具?
本页即是:免注册、纯浏览器本地计算,用 Canvas 逐字测量像素宽度,同时模拟 Google 桌面、移动与百度三种 SERP 卡片,输入即预览,改一字即可看到截断变化。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言,来抢沙发吧!

✍️ 说点什么
0 / 500
图形验证码
👣 做完这一步,顺便看看
🏛️ 凯撒密码解密 凯撒密码解密 :1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 :把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具:粘贴或输入代码(支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具:输入前景文字色与背景色(支持 #he… →
全部工具 →