canonical 标签必须用绝对 url、静态写在 head 中、所有变体页都需添加；preload 用于当前页关键资源，prefetch 用于下一页；base 和 favicon 影响爬虫解析稳定性；heading 和语义标签才是内容结构核心。
为什么比还容易被忽略
很多开发者花大力气优化 <title></title> 和 <meta name="description">，却在生成 HTML 时把 <link rel="canonical"> 写成相对路径或漏掉。结果是：同一内容出现在 /product?id=123、/product/123、https://example.com/product/123 多个 URL 下，搜索引擎当成不同页面抓取，权重分散甚至触发重复内容惩罚。
必须满足三个硬条件才有效：
-
href值必须是**绝对 URL**，例如https://example.com/product/iphone-15-pro；写成/product/iphone-15-pro或//example.com/...都可能被某些爬虫解析失败 - 该标签必须静态存在于 HTML 的
中，服务端渲染（如 Next.js 的generateMetadata）可动态生成，但纯客户端 JS 修改document.head无效——爬虫不执行 JS - 所有可能产生变体的页面都得加：分页页（
?page=2）、筛选页（?color=black&size=xl）、带 UTM 参数的分享链接
rel="preload"和rel="prefetch"别混用，否则SEO没收益还拖慢首屏
rel="preload" 是给当前页用的，rel="prefetch" 才是为下一页预加载资源。误把产品列表页的详情页 JS 写成 preload，浏览器会立刻抢占带宽下载，导致首屏图片和关键 CSS 加载延迟，LCP 指标恶化——而 SEO 越来越看重 Core Web Vitals。
正确做法看场景：
- 当前页马上要渲染的字体、首屏大图、关键 CSS：用
rel="preload"，并指定as属性，例如<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> - 用户大概率点击进入的下一页 HTML 或其核心 JS：用
rel="prefetch"，例如<link rel="prefetch" href="/product/123" as="document"> - 如果下一页资源来自 CDN（如
https://cdn.example.com），先加<link rel="preconnect" href="https://cdn.example.com" crossorigin>，省掉 DNS + TLS 时间
favicon 和 base 标签不是“装饰”，它们影响爬虫解析稳定性
看似无关 SEO 的 <link rel="icon"> 和 <base>，其实会影响资源路径解析一致性。比如未设 <base href="https://example.com/">，又在页面中大量使用相对路径的 <a href="about"></a> 和 <link href="css/main.css">，当某条外链指向 https://example.com/blog/post 时，爬虫可能把 about 解析成 https://example.com/blog/about，造成死链或错误跳转，间接拉低站点可信度。
<link rel="icon"> 虽不直接影响排名，但缺失时部分爬虫（如 Bingbot）会额外发起 /favicon.ico 404 请求，增加服务器无谓负载；更稳妥的是显式声明：<link rel="icon" href="/favicon.svg" type="image/svg+xml">，支持现代格式且避免默认请求。
不要依赖做语义化，heading 和 section 才是爬虫读内容的主干
<link> 标签本身不传递页面主体内容结构。Google 明确表示：它通过 <h1></h1>–<h6></h6> 判断主题层级，用 <section></section>、<article></article>、<nav></nav> 区分内容区块意图。把所有标题都写成 <div class="title"> + CSS，等于主动屏蔽爬虫对主次关系的理解。
<p>实操底线：</p>
<ul>
<li>每个页面有且仅有一个 <code><h1></h1>，直接概括本页核心（如 <h1>React Server Components 入门实战</h1>），不是网站名或导航栏文字
<h1></h1> 后跟 <h2></h2>，再 <h3></h3>；不用 <h1></h1> + <h3></h3> 跳过 <h2></h2>
<link rel="stylesheet"> 只负责样式，别指望它帮爬虫理解“这部分是侧边栏”或“这是评论区”——得靠 <aside></aside> 和 <footer></footer> 这类语义标签真正影响 SEO 的，从来不是你写了多少个 <link>，而是每个 <link rel="canonical"> 是否精准指向唯一源，以及每个 <h1></h1> 是否让爬虫一眼看懂这页到底在讲什么。
