【基础】HTML5查缺补漏（语义化 / SEO）

语义化标签

语义化标签主要优势：

css加载失败时能让页面呈现清晰的结构。
有助于SEO，帮助爬虫获取更多有效信息。
提升可访问性，方便其他设备（屏幕阅读器）渲染页面。
便于团队开发维护。

有哪些语义化标签：

最常用的：header / nav / main / footer / section / article / aside

最容易犯错的也是最重要的：h1 ~ h6，屏幕阅读器用户可以通过标题快速跳转页面段落，类似目录导航。如果层级断裂（h1 → 直接 h3），中间的内容会被跳过，用户根本不知道它的存在。

次级：

figure + figcaption 配图 + 图注
details + summary 可展开折叠的详情
mark 高亮文本
time 日期/时间
address 联系信息

blockquote 块级引用

<figure>
  <img src="photo.jpg" alt="日出自拍">
  <figcaption>今早阳台拍的，光真好</figcaption>
</figure>

<details>
  <summary>查看详情</summary>
  <p>这里是被折叠的内容</p>
</details>

<p>她说<mark>绝对不行</mark>，但我没听她的。</p>

SEO（Search Engine Optimization）搜索引擎优化

元数据

做好网页的 title / description / keywords (TDK)。

title：品牌词放前面，每页独立。

description：网站的广告文案，要含关键词，需要有吸引力。

keywords：渐渐不看重了，但写上不亏。

<head>
	<title>我的网站</title>
	<meta name="description" content="这是老白的个人网站，记录技术/思考/生活" />
	<meta name="keywords" content="老白,技术博客,个人网站,生活记录" />
</head>

内容策略

这是最重要的长期因素。高质量原创内容远大于任何技术手段。

技术SEO

提供 robots.txt：告诉爬虫哪些能爬、哪些不能。通常用于隐藏后台页面和无价值页面，给爬虫指向 sitemap 路径。

提供 sitemap.xml：给搜索引擎看你的站点地图，保证所有页面都被发现。

优化 web 核心指标（Core Web Vitals）：Google将网站性能纳入排名参考信号。有三个指标：LCP（Largest Contentful Paint），FID（First Input Delay），CLS（Cumulative Layout Shift）

结构&规范

使用语义化标签，方便爬虫理解，使文档结构清晰。

非装饰性图片用 alt，一方面更规范，另一方面提高关键词密度。特别是产品介绍类型网站，大量图片，缺少文字，爬虫完全看不懂是什么。

符合 W3C 规范：嵌套正确，属性闭合，标签大小写统一。

链接策略

外链：高质量的外链是 Google 最重要的排名信号之一。

友情链接：站点互换，有助权重传递。

内部链接：站内页面互相链接，形成拓扑结构，帮爬虫爬得更深。

提交站点：向主流搜索引擎提交站点。生成/sitemap.xml后提交一次，搜索引擎会定期来抓。