<title>和<meta name="description">必须静态写死在HTML中，因搜索引擎抓取首屏HTML时不执行JS，动态注入内容会被忽略；前者限50–60字符且关键词前置，后者限120–160字符并需自然摘要。
HTML 页面的 SEO 优化不是靠堆关键词或等爬虫“自动发现”，而是让 <title>、<meta name="description">、语义化标签这些基础元素各司其职，且不被 JavaScript 渲染阻塞、不因路径混乱失效。
为什么 <title> 和 <meta name="description"> 必须静态写死在 HTML 中
搜索引擎抓取首屏 HTML 时，通常不执行 JS（尤其首次发现页面时），动态通过 document.title 或 DOM 操作注入的标题/描述大概率被忽略。
-
<title>必须在<head>内直接书写，长度控制在 50–60 字符，前 30 字需含核心关键词 -
<meta name="description">同样必须静态存在，长度建议 120–160 字符，避免重复堆砌关键词，要像一句自然的页面摘要 - 服务端渲染（SSR）或静态生成（如 Next.js 的
getStaticProps）能保证这两项内容随 HTML 一并下发；纯客户端渲染（CSR）若没做预渲染，这两项对 SEO 几乎无效
语义化标签不是“写得好看”，而是给爬虫明确内容层级和主次
<h1> 到 <h6> 不是样式替代品，而是结构信号。Google 明确表示会用 heading 标签判断内容主干和段落关系。
- 每个页面有且仅有一个
<h1>，它应准确概括页面主题（例如产品页写“iPhone 15 Pro 官方售价与配置”，而非“欢迎来到我们的网站”） -
<h2>应为一级子模块（如“核心参数”“用户评价”“购买选项”），<h3>为更细粒度分组；跳级（如<h1>后直接<h3>）会干扰理解 - 避免用
<div>+ CSS 模拟 heading；用<article>、<section>、<nav>等语义标签替代无意义的嵌套<div>，有助于爬虫识别内容区块意图
<link rel="canonical"> 和规范 URL 路径是防止重复内容被判罚的关键
同一内容出现在多个 URL（如带参数的分享链接、HTTP/HTTPS 版本、www/non-www）时，不设 <link rel="canonical">，搜索引擎可能分散权重甚至视为抄袭。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 所有页面都应包含
<link rel="canonical" href="https://example.com/product/iphone-15-pro">，href 必须是**你希望被索引的绝对标准 URL** - 确保服务器对
http://和https://、www.example.com和example.com做 301 重定向，而不是只靠 canonical 标签“提醒” - 动态页面（如搜索结果页、过滤页）应加
<meta name="robots" content="noindex">，避免爬虫抓取大量低价值副本
图片的 alt 属性不是可选填空，而是图文内容的文本锚点
Google 图片搜索、无障碍访问、以及页面文本相关性分析，都重度依赖 alt 文本。留空、写“image123.jpg”或堆关键词（如“手机 手机图片 苹果手机 买手机”）都会被降权。
-
alt必须准确描述图中**实际可见内容与功能**：按钮图标写“微信登录”，产品图写“iPhone 15 Pro 钛金属银色正面实拍”，信息图写“2024 年全球智能手机出货量对比柱状图” - 装饰性图片（如分割线、背景花纹）应设
alt=""（空字符串），而非删掉属性——这明确告诉解析器“此图无信息价值” - 避免在
alt里写“图片”“图示”等冗余词；屏幕阅读器已默认告知用户这是图像
最常被忽略的其实是 HTML 的“初始状态”：当用户或爬虫拿到的 HTML 字节流里没有有效 <title>、没有唯一 <h1>、canonical 指向了 404 页面、或者图片 alt 全是占位符——这些不是“后续再优化”的问题，而是上线即折损索引机会的基础缺陷。
