动态生成title和description、正确使用语义化标签、规范设置alt/canonical/viewport、准确声明lang和charset是SEO落地的四大关键，缺一不可。
title 和 description 必须动态生成，不能写死
全站共用一个 <title> 或 CMS 模板里硬编码 <title>首页</title>，是导致搜索结果标题雷同、点击率低的主因。搜索引擎会把这种页面判为“低价值模板页”，直接降权。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<title>控制在 50–60 字符（含空格），核心词前置，比如文章页用<title>HTML表格SEO优化技巧 | 前端实战笔记</title>，别反过来 -
meta name="description"每页手写，120–155 字符，开头嵌主词，用自然语句说明本页解决什么问题，避免引号、特殊符号 - 服务端渲染（如 Next.js）或静态生成时，必须从数据上下文注入，不能靠 JS 后置修改——爬虫不执行 JS，改了也白改
语义化标签不是“加分项”，是内容坐标系
搜索引擎靠 <header>、<nav>、<main>、<section> 等标签定位内容主次。一堆 <div class="wrapper"> 套着 <div class="content">，等于告诉爬虫：“你自己猜哪块是正文”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个页面只用一个
<h1>，且必须包含页面核心主题词，比如<h1>HTML表格SEO优化技巧</h1> -
<main>必须包裹主体内容，这是明确告诉爬虫“这里才是正文”，不是可选 -
<nav>包导航链接，<aside>包侧边栏，<time datetime="2024-05-20">标时间——机器可解析的信息，别省
alt、canonical、viewport 这三个标签一错就掉排名
它们不显眼，但出错直接导致收录异常、移动排名下滑、图片不入图搜。尤其 canonical 写成相对路径，会让 Google 把不同 URL 当作重复内容处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<img>必须带alt属性，描述图片实际内容，比如<img src="seo-table.png" alt="HTML表格SEO优化对比表">；纯装饰图写alt=""，别留空 -
<link rel="canonical">所有页面都要有，href必须是绝对 URL，比如<link rel="canonical" href="https://example.com/html-seo-guide"> -
<meta name="viewport">必须存在，值为<meta name="viewport" content="width=device-width, initial-scale=1">；漏掉它，移动端排名基本归零
lang、charset、缩进这些细节决定爬虫是否信任你
超过 30% 的网站没设 lang 属性，导致搜索引擎无法识别语言，本地化搜索排名直线下滑；charset 放错位置或用 GB2312，轻则乱码，重则被判定为低质量站点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<html lang="zh-CN">是强制项，多语言站点需按内容动态切换，不能固定写死 -
<meta charset="UTF-8">必须放在<head>第一行，紧随<head>标签之后 - 所有属性值用双引号包裹，布尔属性写完整形式，比如
<input type="text" required="required">；class/id 用 kebab-case，比如user-profile-card
<h1>，而是 canonical 的协议+域名+路径写全、lang 动态切换、alt 描述准确这三件事——它们不难，但一旦漏掉，SEO 就在起跑线掉队。 
