[{"content":" 页面标题 (Title Tag) — 建议 ≤ 60 字符 0 字符 页面描述 (Meta Description) — 建议 ≤ 160 字符 0 字符 页面 URL (Canonical URL) 🖥️ Google 桌面端预览 📱 Google 移动端预览 什么是 SERP Preview 工具? SERP Preview(Search Engine Results Page Preview)是 SEO 优化必备工具。它模拟你的网页在 Google 搜索结果中的实际显示效果,帮你在上线前就判断标题/描述是否会被截断、移动端是否好看、是否吸引点击。\n很多站长写完 meta 才发现移动端被截断 — 本工具提前预览桌面 + 移动两种效果,避免上线后才发现问题。\n核心功能 Google 桌面端 + 移动端实时预览 — 像素级还原搜索结果样式 字符计数警告 — 标题 60 字符、描述 160 字符,超出立刻高亮 像素截断检测 — 标题超过 580px 自动显示截断提示 URL 显示优化 — 自动处理 breadcrumb 格式(based on URL structure) 关键词高亮 — 输入目标关键词,模拟中真实 Bold 效果 纯前端运行 — 所有预览在浏览器本地完成,数据绝不上传 常见问题 (FAQ) SERP 是什么? SERP = Search Engine Results Page(搜索引擎结果页面)。用户在 Google 搜索关键词后看到的页面,包含自然结果、广告、Featured Snippet、PAA(People Also Ask)等多种元素。本工具主要预览自然结果的标题 + 描述 + URL 三个字段。\nGoogle 标题截断长度是多少? Google 桌面端标题截断阈值约 580-600 像素(约 60 个英文字符 / 30 个中文字符)。移动端截断更短,约 920 像素宽度但实际显示约 50-60 个字符。建议:英文标题控制在 50-60 字符,中文控制在 30 字以内。\n描述截断长度? Google 桌面端描述截断阈值约 920 像素(约 160 个英文字符 / 80 个中文字符)。移动端约 130 字符。建议:英文描述 150-160 字符,中文 70-80 字。\n标题和描述怎么写才好? 标题包含主关键词 + 吸引点击的修饰(数字、年份、形容词)。描述补充标题未尽信息 + Call-to-Action。示例:标题\u0026quot;充电时间计算器 — 7kW/11kW/22kW 全场景\u0026quot;,描述\u0026quot;免费在线计算电动车充电时长,支持家用桩、特斯拉超充,毫秒级响应,纯前端运行,数据 100% 不上传。\u0026quot;\n怎么提高 SERP 点击率? 四个核心:① 标题前 30 字含主关键词(突出相关性);② 描述含数字或年份(显得新鲜);③ 加入行动词(免费 / 即时 / 在线 / 一键);④ 使用括号或破折号((2026 评测) / — 完整指南),在 SERP 更显眼。\nmeta description 还重要吗? 重要,但不像以前那么直接。Google 经常从页面内容自动生成描述(约 60% 情况)。但写好 meta description 仍然是最佳实践:1) 给你控制权;2) CTR 高时 Google 会优先采用;3) 社交分享时显示的就是 meta description。\n","permalink":"https://seo.webpenson.com/tools/serp-preview/","summary":"\u003cdiv class=\"tool-container\" id=\"serp-tool\"\u003e\n  \u003cstyle\u003e\n    #serp-tool { max-width: 920px; margin: 24px auto; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif; }\n    #serp-tool .sp-input { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; margin-bottom: 20px; }\n    #serp-tool .sp-field { margin-bottom: 16px; }\n    #serp-tool label { display: block; font-weight: 600; margin-bottom: 4px; color: #1f2937; font-size: 14px; }\n    #serp-tool input { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; box-sizing: border-box; }\n    #serp-tool input:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.1); }\n    #serp-tool .sp-counter { font-size: 13px; color: #6b7280; margin-top: 4px; }\n    #serp-tool .sp-counter.warn { color: #ea580c; font-weight: 600; }\n    #serp-tool .sp-counter.over { color: #dc2626; font-weight: 600; }\n    #serp-tool .sp-section-title { font-size: 18px; font-weight: 600; color: #1f2937; margin: 24px 0 12px 0; }\n    #serp-tool .sp-desktop { max-width: 600px; }\n    #serp-tool .sp-mobile { max-width: 400px; }\n    #serp-tool .sp-result { font-family: arial, sans-serif; padding: 8px 0; }\n    #serp-tool .sp-result .sp-url { font-size: 14px; color: #202124; line-height: 1.3; }\n    #serp-tool .sp-result .sp-breadcrumb { font-size: 12px; color: #5f6368; }\n    #serp-tool .sp-result .sp-title { font-size: 20px; color: #1a0dab; line-height: 1.3; cursor: pointer; text-decoration: none; display: block; margin: 4px 0; }\n    #serp-tool .sp-result .sp-title:hover { text-decoration: underline; }\n    #serp-tool .sp-result .sp-desc { font-size: 14px; color: #4d5156; line-height: 1.58; word-wrap: break-word; }\n    #serp-tool .sp-result .sp-desc b { font-weight: normal; color: #4d5156; }\n    #serp-tool .sp-mobile .sp-result .sp-title { font-size: 18px; }\n    #serp-tool .sp-mobile .sp-result .sp-desc { font-size: 13px; }\n    @media (prefers-color-scheme: dark) {\n      #serp-tool .sp-input { background: #1e293b; border-color: #334155; }\n      #serp-tool label { color: #e2e8f0; }\n      #serp-tool input { background: #0f172a; color: #e2e8f0; border-color: #334155; }\n      #serp-tool .sp-section-title { color: #e2e8f0; }\n      #serp-tool .sp-result .sp-url { color: #b1b3b4; }\n      #serp-tool .sp-result .sp-breadcrumb { color: #9aa0a6; }\n      #serp-tool .sp-result .sp-title { color: #8ab4f8; }\n      #serp-tool .sp-result .sp-desc, #serp-tool .sp-result .sp-desc b { color: #b1b3b4; }\n    }\n  \u003c/style\u003e\n\n  \u003cdiv class=\"sp-input\"\u003e\n    \u003cdiv class=\"sp-field\"\u003e\n      \u003clabel\u003e页面标题 (Title Tag) — 建议 ≤ 60 字符\u003c/label\u003e\n      \u003cinput type=\"text\" id=\"sp-title\" value=\"充电时间计算器 — 7kW/11kW/22kW 全场景在线估算\" maxlength=\"200\"\u003e\n      \u003cdiv class=\"sp-counter\" id=\"sp-title-counter\"\u003e0 字符\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sp-field\"\u003e\n      \u003clabel\u003e页面描述 (Meta Description) — 建议 ≤ 160 字符\u003c/label\u003e\n      \u003cinput type=\"text\" id=\"sp-desc\" value=\"免费在线充电时间计算器,输入电池容量 kWh、充电功率 kW 即可算出 0-100%/50%/80% 充电时长,覆盖家用桩、特斯拉超充,纯前端运行。\" maxlength=\"500\"\u003e\n      \u003cdiv class=\"sp-counter\" id=\"sp-desc-counter\"\u003e0 字符\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sp-field\"\u003e\n      \u003clabel\u003e页面 URL (Canonical URL)\u003c/label\u003e\n      \u003cinput type=\"text\" id=\"sp-url\" value=\"https://elec.webpenson.com/tools/charging-time-calculator/\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"sp-section-title\"\u003e🖥️ Google 桌面端预览\u003c/div\u003e\n  \u003cdiv class=\"sp-desktop\"\u003e\n    \u003cdiv class=\"sp-result\" id=\"sp-desk-result\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"sp-section-title\"\u003e📱 Google 移动端预览\u003c/div\u003e\n  \u003cdiv class=\"sp-mobile\"\u003e\n    \u003cdiv class=\"sp-result\" id=\"sp-mob-result\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cscript\u003e\n  (function(){\n    function getChars(s) { return Array.from(s).length; }\n    function getPixel(s) { return s.length * 7.5; }\n    function updateCounter(input, counter, soft, hard) {\n      var len = getChars(input.value);\n      counter.textContent = len + ' 字符 (约 ' + Math.round(getPixel(input.value)) + ' 像素)';\n      counter.classList.remove('warn', 'over');\n      if (len \u003e hard) counter.classList.add('over');\n      else if (len \u003e soft) counter.classList.add('warn');\n    }\n    function escapeHtml(s) { return s.replace(/\u0026/g,'\u0026amp;').replace(/\u003c/g,'\u0026lt;').replace(/\u003e/g,'\u0026gt;'); }\n    function parseUrl(url) {\n      try {\n        var u = new URL(url);\n        var host = u.hostname.replace(/^www\\./, '');\n        var path = u.pathname === '/' ? '' : u.pathname;\n        return { host: host, path: path, full: host + path };\n      } catch (e) {\n        return { host: url, path: '', full: url };\n      }\n    }\n    function render(containerId, mobile) {\n      var t = document.getElementById('sp-title').value;\n      var d = document.getElementById('sp-desc').value;\n      var u = document.getElementById('sp-url').value;\n      var urlData = parseUrl(u);\n      var html = '';\n      if (urlData.path) {\n        html += '\u003cdiv class=\"sp-breadcrumb\"\u003e' + escapeHtml(urlData.host) + ' \u003cspan style=\"color:#70757a\"\u003e›\u003c/span\u003e ' + escapeHtml(urlData.path.replace(/\\//g,' › ')) + '\u003c/div\u003e';\n      } else {\n        html += '\u003cdiv class=\"sp-breadcrumb\"\u003e' + escapeHtml(urlData.host) + '\u003c/div\u003e';\n      }\n      html += '\u003ca href=\"#\" class=\"sp-title\" onclick=\"return false\"\u003e' + escapeHtml(t) + '\u003c/a\u003e';\n      var date = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });\n      html += '\u003cdiv class=\"sp-desc\"\u003e' + escapeHtml(date) + ' \\u2014 ' + escapeHtml(d) + '\u003c/div\u003e';\n      document.getElementById(containerId).innerHTML = html;\n    }\n    function update() {\n      var t = document.getElementById('sp-title');\n      var d = document.getElementById('sp-desc');\n      updateCounter(t, document.getElementById('sp-title-counter'), 50, 60);\n      updateCounter(d, document.getElementById('sp-desc-counter'), 140, 160);\n      render('sp-desk-result', false);\n      render('sp-mob-result', true);\n    }\n    ['sp-title','sp-desc','sp-url'].forEach(function(id){\n      document.getElementById(id).addEventListener('input', update);\n    });\n    update();\n  })();\n  \u003c/script\u003e\n\u003c/div\u003e\n\u003ch3 id=\"什么是-serp-preview-工具\"\u003e什么是 SERP Preview 工具?\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eSERP Preview\u003c/strong\u003e(Search Engine Results Page Preview)是 SEO 优化必备工具。它模拟你的网页在 Google 搜索结果中的实际显示效果,帮你在上线前就判断标题/描述是否会被截断、移动端是否好看、是否吸引点击。\u003c/p\u003e","title":"SERP Preview 工具 — Google 搜索结果在线模拟器"},{"content":" 页面标题 (Title Tag) 充电时间计算器 — 7kW/11kW/22kW 全场景在线估算 字符数 (Unicode)0 像素宽度 (估算)0 px 桌面端截断阈值580 px 移动端截断阈值920 px 0580 (桌面端)920 (移动端) ✓ 安全区间 什么是标题长度检测器? 标题长度检测器是 SEO 编辑必备工具。它实时计算你的页面标题字符数 + 像素宽度,按 Google 搜索结果的截断阈值给出红/橙/绿三色警告,确保标题在桌面端和移动端都不会被截断。\n网页标题(title tag)是 SEO 三大要素之首 — 写不好直接损失点击率。本工具替代手工数字符的繁琐,所见即所得。\n核心功能 字符数实时计数 — 中英文统一按 Unicode 字符计算(中文 1 字 = 1 字符) 像素宽度估算 — 按 Arial 字体平均宽度估算(每字符约 7-8px) 三色警告系统 — 绿色(安全)/ 橙色(临界)/ 红色(超限) 桌面端 580px + 移动端 920px 双阈值 — 一次看清两端表现 中英文混排支持 — 中文按 2 字符宽度计算(实际英文宽度 ×2) 纯前端运行 — 输入不上传,适合敏感 SEO 词分析 常见问题 (FAQ) 标题最佳长度是多少? Google 桌面端:580 像素 ≈ 60 字符(英文)/ 30 字(中文) Google 移动端:920 像素 ≈ 90 字符(英文)/ 45 字(中文)\n黄金区间:桌面端 50-60 字符,移动端 60-70 字符。建议保持在 50-55 字符,两端都不截断。\n为什么用像素而不是字符数? Google 截断基于像素宽度,不是字符数。\u0026ldquo;i\u0026quot;和\u0026quot;W\u0026quot;宽度差异很大。中文 1 字 ≈ 英文 2 字符的宽度。本工具按经验值估算像素,接近真实显示效果。\n标题被截断有什么影响? 关键信息丢失 — 主关键词在末尾会被切掉,影响 SEO CTR 下降 — 截断的标题看起来不专业,用户倾向跳过 品牌曝光不足 — 品牌名在末尾会被截,削弱认知 移动端和桌面端截断不同吗? 是的。移动端搜索结果显示区域更窄(约 920px),所以可以显示更长的标题。但桌面端更严格(580px),所以以桌面端为准。\n标题里放几个关键词合适? 1-2 个主关键词。Google Penguin 算法会惩罚堆砌,过多重复会被降权。最佳结构:主关键词 - 修饰词 | 品牌名(例:充电时间计算器 — 7kW/11kW 全场景 | 电工工具箱)。\n标题分隔符用什么? 三种推荐:|(竖线最常用,如 HubSpot)、-(连字符简洁,如 Moz)、—(破折号醒目,如 Backlinko)。**避免用** :;,.~` 等容易与正文混淆的符号。\n","permalink":"https://seo.webpenson.com/tools/title-length-checker/","summary":"\u003cdiv class=\"tool-container\" id=\"tl-tool\"\u003e\n  \u003cstyle\u003e\n    #tl-tool { max-width: 720px; margin: 24px auto; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif; }\n    #tl-tool .tl-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; }\n    #tl-tool label { display: block; font-weight: 600; margin-bottom: 8px; color: #1f2937; font-size: 15px; }\n    #tl-tool textarea { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px; min-height: 70px; resize: vertical; box-sizing: border-box; font-family: inherit; }\n    #tl-tool textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }\n    #tl-tool .tl-meter { margin-top: 16px; padding: 16px; border-radius: 10px; transition: background 0.2s; }\n    #tl-tool .tl-meter.green { background: #f0fdf4; border: 1px solid #86efac; }\n    #tl-tool .tl-meter.orange { background: #fff7ed; border: 1px solid #fdba74; }\n    #tl-tool .tl-meter.red { background: #fef2f2; border: 1px solid #fca5a5; }\n    #tl-tool .tl-stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed rgba(0,0,0,0.06); }\n    #tl-tool .tl-stat-row:last-child { border-bottom: none; }\n    #tl-tool .tl-stat-label { color: #475569; font-size: 14px; }\n    #tl-tool .tl-stat-val { font-weight: 700; font-size: 15px; }\n    #tl-tool .tl-meter.green .tl-stat-val { color: #15803d; }\n    #tl-tool .tl-meter.orange .tl-stat-val { color: #c2410c; }\n    #tl-tool .tl-meter.red .tl-stat-val { color: #b91c1c; }\n    #tl-tool .tl-bar { margin-top: 14px; }\n    #tl-tool .tl-bar-track { width: 100%; height: 8px; background: rgba(0,0,0,0.06); border-radius: 4px; overflow: hidden; position: relative; }\n    #tl-tool .tl-bar-fill { height: 100%; border-radius: 4px; transition: width 0.2s, background 0.2s; }\n    #tl-tool .tl-meter.green .tl-bar-fill { background: #22c55e; }\n    #tl-tool .tl-meter.orange .tl-bar-fill { background: #f97316; }\n    #tl-tool .tl-meter.red .tl-bar-fill { background: #ef4444; }\n    #tl-tool .tl-bar-mark { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; margin-top: 4px; }\n    #tl-tool .tl-msg { margin-top: 14px; font-size: 14px; font-weight: 600; }\n    #tl-tool .tl-meter.green .tl-msg { color: #15803d; }\n    #tl-tool .tl-meter.orange .tl-msg { color: #c2410c; }\n    #tl-tool .tl-meter.red .tl-msg { color: #b91c1c; }\n    @media (prefers-color-scheme: dark) {\n      #tl-tool .tl-card { background: #1e293b; border-color: #334155; }\n      #tl-tool label, #tl-tool .tl-stat-label { color: #cbd5e1; }\n      #tl-tool textarea { background: #0f172a; color: #e2e8f0; border-color: #334155; }\n      #tl-tool .tl-meter.green { background: #052e16; border-color: #14532d; }\n      #tl-tool .tl-meter.orange { background: #431407; border-color: #7c2d12; }\n      #tl-tool .tl-meter.red { background: #450a0a; border-color: #7f1d1d; }\n      #tl-tool .tl-meter.green .tl-stat-val, #tl-tool .tl-meter.green .tl-msg { color: #86efac; }\n      #tl-tool .tl-meter.orange .tl-stat-val, #tl-tool .tl-meter.orange .tl-msg { color: #fdba74; }\n      #tl-tool .tl-meter.red .tl-stat-val, #tl-tool .tl-meter.red .tl-msg { color: #fca5a5; }\n    }\n  \u003c/style\u003e\n\n  \u003cdiv class=\"tl-card\"\u003e\n    \u003clabel\u003e页面标题 (Title Tag)\u003c/label\u003e\n    \u003ctextarea id=\"tl-input\" placeholder=\"输入你的页面标题...\"\u003e充电时间计算器 — 7kW/11kW/22kW 全场景在线估算\u003c/textarea\u003e\n\n    \u003cdiv class=\"tl-meter green\" id=\"tl-meter\"\u003e\n      \u003cdiv class=\"tl-stat-row\"\u003e\u003cspan class=\"tl-stat-label\"\u003e字符数 (Unicode)\u003c/span\u003e\u003cspan class=\"tl-stat-val\" id=\"tl-chars\"\u003e0\u003c/span\u003e\u003c/div\u003e\n      \u003cdiv class=\"tl-stat-row\"\u003e\u003cspan class=\"tl-stat-label\"\u003e像素宽度 (估算)\u003c/span\u003e\u003cspan class=\"tl-stat-val\" id=\"tl-pixels\"\u003e0 px\u003c/span\u003e\u003c/div\u003e\n      \u003cdiv class=\"tl-stat-row\"\u003e\u003cspan class=\"tl-stat-label\"\u003e桌面端截断阈值\u003c/span\u003e\u003cspan class=\"tl-stat-val\"\u003e580 px\u003c/span\u003e\u003c/div\u003e\n      \u003cdiv class=\"tl-stat-row\"\u003e\u003cspan class=\"tl-stat-label\"\u003e移动端截断阈值\u003c/span\u003e\u003cspan class=\"tl-stat-val\"\u003e920 px\u003c/span\u003e\u003c/div\u003e\n\n      \u003cdiv class=\"tl-bar\"\u003e\n        \u003cdiv class=\"tl-bar-track\"\u003e\u003cdiv class=\"tl-bar-fill\" id=\"tl-fill\" style=\"width:0%\"\u003e\u003c/div\u003e\u003c/div\u003e\n        \u003cdiv class=\"tl-bar-mark\"\u003e\u003cspan\u003e0\u003c/span\u003e\u003cspan\u003e580 (桌面端)\u003c/span\u003e\u003cspan\u003e920 (移动端)\u003c/span\u003e\u003c/div\u003e\n      \u003c/div\u003e\n\n      \u003cdiv class=\"tl-msg\" id=\"tl-msg\"\u003e✓ 安全区间\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cscript\u003e\n  (function(){\n    function isCJK(c) {\n      var code = c.codePointAt(0);\n      return (code \u003e= 0x4E00 \u0026\u0026 code \u003c= 0x9FFF) || (code \u003e= 0x3040 \u0026\u0026 code \u003c= 0x30FF) || (code \u003e= 0xAC00 \u0026\u0026 code \u003c= 0xD7AF);\n    }\n    function calc(s) {\n      var chars = Array.from(s);\n      var charCount = chars.length;\n      var px = 0;\n      for (var i = 0; i \u003c chars.length; i++) {\n        var c = chars[i];\n        if (c === ' ') { px += 4; continue; }\n        if (isCJK(c)) { px += 14; continue; }\n        if (/[a-z]/.test(c)) { px += 6; continue; }\n        if (/[A-Z]/.test(c)) { px += 7; continue; }\n        if (/[0-9]/.test(c)) { px += 7; continue; }\n        px += 8;\n      }\n      return { chars: charCount, px: Math.round(px) };\n    }\n    function update() {\n      var s = document.getElementById('tl-input').value;\n      var r = calc(s);\n      document.getElementById('tl-chars').textContent = r.chars;\n      document.getElementById('tl-pixels').textContent = r.px + ' px';\n      var meter = document.getElementById('tl-meter');\n      var fill = document.getElementById('tl-fill');\n      var msg = document.getElementById('tl-msg');\n      var level, text, pct;\n      if (r.px \u003c= 540) {\n        level = 'green'; text = '\\u2713 安全区间 - 桌面移动都不会截断'; pct = Math.min(r.px / 920 * 100, 50);\n      } else if (r.px \u003c= 580) {\n        level = 'orange'; text = '\\u26a0 临界 - 接近桌面端截断阈值,建议缩短 5-10 字符'; pct = r.px / 920 * 100;\n      } else if (r.px \u003c= 920) {\n        level = 'orange'; text = '\\u26a0 桌面端会被截断,移动端仍能完整显示'; pct = r.px / 920 * 100;\n      } else {\n        level = 'red'; text = '\\u2717 严重超限 - 桌面移动端都会被截断,必须缩短'; pct = 100;\n      }\n      meter.className = 'tl-meter ' + level;\n      fill.style.width = pct + '%';\n      msg.textContent = text;\n    }\n    document.getElementById('tl-input').addEventListener('input', update);\n    update();\n  })();\n  \u003c/script\u003e\n\u003c/div\u003e\n\u003ch3 id=\"什么是标题长度检测器\"\u003e什么是标题长度检测器?\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e标题长度检测器\u003c/strong\u003e是 SEO 编辑必备工具。它实时计算你的页面标题字符数 + 像素宽度,按 Google 搜索结果的截断阈值给出\u003cstrong\u003e红/橙/绿\u003c/strong\u003e三色警告,确保标题在桌面端和移动端都不会被截断。\u003c/p\u003e","title":"标题长度检测器 — Title Length Checker 像素截断预警"}]