<title>标签应使用自然主谓宾结构，前置核心关键词，控制50–60字符；<meta description>虽不参与排名但影响点击率，需120–160字符、行动导向、唯一且动态生成。
title 标签里别堆砌关键词，用自然主谓宾结构
搜索引擎现在更倾向理解语义而非匹配词频。把 <title> 写成“SEO优化｜HTML标签教程｜title写法｜前端入门”这类堆砌式文案，反而可能被降权。真实用户搜索时，常带意图和上下文，比如“怎么写 HTML 的 title 标签才利于 SEO”。
- 主标题放核心主题，控制在 50–60 字符（超长会被截断，移动端尤其明显）
- 前置关键信息：浏览器标签页只显示前半段，
<title>HTML title 标签 SEO 写法 - 前端实操指南</title>比<title>前端实操指南 - HTML title 标签 SEO 写法</title>更有效 - 避免每页都用相同后缀，如统一加“- CompanyName”，容易让 Google 视为模板化低质内容
- 动态页面务必确保每个 URL 有唯一
<title>，CMS 或 SSR 渲染时漏掉title变量会导致大量页面 title 为空或重复
meta description 不参与排名，但决定点击率
Google 明确表示 <meta name="description"> 不是排名信号，但它直接出现在搜索结果摘要中——这是你唯一能控制的“广告文案”。写得差，再好的内容也没人点。
- 长度建议 120–160 字符（含空格），过短显得不完整，过长会被截断并加省略号
- 包含目标关键词，但必须嵌入自然句式中，比如：“本文详解 HTML 中
<title>和<meta name="description">的正确写法，覆盖常见错误、字符限制与 CMS 实际配置方式。” - 不要复制页面第一段文字，要重写成行动导向句式：“了解如何避免 title 重复、description 截断和动态渲染遗漏。”
- 静态站点可手写；Next.js/Nuxt 等框架建议用
useHead或Head组件动态注入，避免所有页面共用同一份默认 description
服务端渲染（SSR）或静态生成（SSG）时，title 和 description 容易被忽略
单页应用（SPA）如纯 React/Vue 客户端渲染时，初始 HTML 的 <title> 和 <meta name="description"> 往往是占位值，等 JS 加载完才更新——而爬虫（尤其是旧版 Googlebot）可能根本没等就走了。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Next.js 用户优先用
getStaticProps+Head或新版generateMetadataAPI，确保 HTML 返回时已含正确值 - Vue 3 + Nuxt 请用
useSeoMeta，而非在 mounted 里改 document.title - 若必须客户端更新，至少给
<title>设一个有意义的 fallback，比如按路由路径生成：“/blog/seo-title → ‘SEO title 写法指南 | 博客’”，而不是留空或写“Loading...” - 检查实际返回的 HTML：右键「查看网页源代码」，搜索
<title>，确认内容不是 JS 运行后才插入的
特殊页面类型要差异化处理
首页、列表页、详情页、404 页的 <title> 和 <meta name="description"> 逻辑完全不同，混用一套模板是常见疏漏。
立即学习“前端免费学习笔记（深入）”；
- 首页：
<title>产品名｜解决什么问题｜品牌名</title>，避免只写“首页”或“Welcome” - 文章详情页：标题含 H1 文字主体，description 用首段精简版，结尾加时效提示（如“2024 年实测有效”）提升可信度
- 分类页（如 /category/html）：加入范围说明，例如“HTML 标签 SEO 优化技巧汇总（含 title、meta、canonical 实操）”
- 404 页面：title 写“页面未找到｜返回首页”，不要用“Error 404”，description 明确引导操作，比如“您访问的链接可能已失效，请检查网址或回到主页重新搜索。”
