title是核心排名信号且须每页唯一、50–60字符内前置关键词；meta description虽不参与排名，但直接影响点击率，需120–155字符自然嵌入关键词；SPA须用服务端渲染或hydration同步确保爬虫抓取正确元信息。
meta description 不影响搜索排名，title 是核心排名信号之一；但两者都直接影响用户是否点进你的页面。
title 标签为什么必须每页唯一且控制在 50–60 字符
搜索引擎用 <title> 判断页面主题，重复或模糊的标题会让 Google 认为内容低质或模板化。移动端 SERP 只显示前约 60 字符（含空格），超长会被截断成“HTML SEO优化指南 | 前端实战笔记……”，丢失关键信息。
- 核心关键词必须前置，比如商品页写
<title>无线蓝牙耳机|主动降噪|XX品牌旗舰款</title>，而不是<title>XX品牌旗舰店|无线蓝牙耳机</title> - CMS 或 SSR 模板里禁用硬编码，改用动态变量，如
<title>{{ page.title }} | {{ site.name }}</title> - 首页别写“首页”，要体现价值，例如
<title>前端开发工具与实战指南 | CodeCraft</title> - 避免全站统一后缀（如 “- CompanyName”），易被识别为低信息量模板
meta description 不参与排名，但决定你有没有人点
Google 明确表示 <meta name="description"> 不是排名因子，但它常被直接用作搜索结果摘要——相当于你唯一能控制的“广告文案”。写得差，再好的内容也没人点；写得好，CTR（点击率）可能翻倍。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 长度严格控制在 120–155 字符（含空格），过短显得单薄，过长被截断加省略号
- 开头嵌入目标关键词，但必须是自然语句，例如：“本文详解 HTML 中
<title>和<meta name="description">的正确写法，覆盖字符限制、CMS 配置与 SPA 渲染陷阱。” - 禁止复制正文第一段，也不要用引号、emoji、营销话术（如“?爆款指南！”）
- 静态页可手写；Next.js/Nuxt 等框架务必用
useHead或Head组件注入，不能共用默认值
SPA 页面中 title 和 description 容易被爬虫忽略
纯客户端渲染（如 Create React App、Vue CLI 默认模式）的初始 HTML 里，<title> 和 <meta name="description"> 往往是占位值，等 JS 加载完才更新。而旧版 Googlebot 或其他爬虫可能不执行 JS，直接抓取空/默认内容。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染（SSR）或静态生成（SSG）是更稳妥的选择，确保首屏 HTML 已含正确元信息
- 若必须用 SPA，需配合
react-helmet-async（React）或@vueuse/core的useHead（Vue）做 hydration 同步 - 上线前用 Google Search Console 的「URL 检查」工具验证：抓取的 HTML 源码里
<title>和<meta name="description">是否已就位
最常被忽略的其实是动态场景下的 fallback 逻辑——CMS 导出为空、API 请求失败、SSR 渲染异常时，<title> 和 <meta name="description"> 很容易退回到“未命名页面”或空字符串，这类问题在线上环境极难复现，但对 SEO 影响是批量性的。
