要让搜索引擎准确抓取和理解页面，HTML结构必须语义清晰、层级合理、关键信息前置；标题与元信息需精准唯一，主体结构须用语义标签，图片、时间、链接等细节影响索引质量，代码组织与加载顺序决定抓取优先级。
要让搜索引擎准确抓取和理解页面，HTML结构必须语义清晰、层级合理、关键信息前置。不是写完能显示就行，而是得让爬虫“一眼看懂”谁是标题、哪块是正文、哪些内容值得索引。
标题与元信息必须精准唯一
<title> 是页面的首要识别信号，长度控制在50–60字符内，前半部分放核心词（如项目名或主题），后半部分补充作者或站点标识。避免“首页”“作品集”这类泛称，也不堆砌关键词。例如：<title>响应式登录页设计｜张明前端作品</title>。
<meta name="description"> 要像广告文案一样写，120–155字符，首句直说价值。不能空着，也不能复制正文前几句。它不参与排名，但影响点击率——而点击率是Google重要的行为信号。
必须声明 <meta charset="utf-8"> 和 <meta name="viewport">，否则移动端抓取可能失败，Google会降权。
立即学习“前端免费学习笔记（深入）”；
主体结构用语义标签不可替代
<main> 必须且只能出现一次，直接嵌套在 <body> 下，不能被 <section> 或 <div> 包裹。它是页面“可独立分发”的核心区块，RSS、分享卡片、Google News 都依赖它定位主内容。
<section> 不是栅格容器，每一块都必须带 <h2>–<h6> 标题。没标题的 <section> 等同于 <div>，爬虫跳过不解析，不进大纲，也不参与结构化摘要生成。比如“技术实现”“用户反馈”“部署说明”这些逻辑块，各自用 <section> 包裹并配对应标题。
<nav> 只用于主导航链接，不要放在 <footer> 里；<header> 和 <footer> 应为直接子元素，别套在 class="wrapper" 这类 div 里——爬虫不读 class 名，只认原生标签的隐式 role。
图片、时间、链接等细节决定索引质量
<img> 的 alt 属性不是可选项。图标按钮写功能（如 "搜索按钮"），数据图表写结论（如 "2026年Q2用户留存率上升12%"），纯装饰图才用 alt=""。缺 alt 的图，Google Images 完全忽略，Lighthouse 也会报错。
<time datetime="2026-05-01"> 的 datetime 值必须是 ISO 8601 格式（YYYY-MM-DD 或更完整），写成 "5月1日" 或 "2026/05/01" 会让时间语义失效，结构化数据无法提取。
链接锚文本要描述性，避免“点击这里”“详情”；表格加 <caption>；关键内容区域建议补充 JSON-LD 结构化数据，比如作品项目可标出 name、description、datePublished、author。
代码组织与加载顺序影响抓取优先级
重要内容的 HTML 代码尽量靠前写。爬虫按顺序抓取，遇到大量 JS 或 CSS 阻塞时，若正文还在后面，可能截断或降权。把主内容放在 <main> 内、<script> 放底部或加 defer/async。
分离 HTML、CSS、JS 文件，别内联大段样式或脚本。搜索引擎不执行 JS，动态渲染的内容若没服务端预渲染，很可能不被抓取。
每个页面设唯一的 <link rel="canonical">，绝对 URL，防止重复内容稀释权重。robots.txt 确保允许抓取关键路径，HTTPS 必须生效——HTTP 页面在 Google 中已基本失去优先索引权。
