rel="alternate" 不能用于<a>标签声明移动端版本，仅<link>标签在<head>中配合media属性才被搜索引擎识别；PC页需<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html">，移动页必须反向声明<link rel="canonical" href="https://www.example.com/page.html">。
rel="alternate" 不能用在 <a> 标签上指向移动端版本——这是个常见误解，直接无效。
为什么 a 标签加 rel="alternate" 对移动适配没用
搜索引擎（包括百度、Google）只从 <link> 标签中解析 rel="alternate" 的移动适配语义，且仅当它出现在 <head> 中、配合 media 或 hreflang 等属性时才被识别。浏览器和爬虫完全忽略 <a> 上的 rel="alternate"，它既不会触发跳转，也不会传递任何适配信号。
-
<a rel="alternate" href="http://m.example.com">手机版</a>只是个普通链接，和rel="noopener"这类有运行时效果的值完全不同 - 该写法在 HTML 规范中不被赋予任何特殊含义，W3C 和 WHATWG 都未定义
<a>上rel="alternate"的行为 - 实测：Google Search Console 不会将此类
<a>当作移动版声明；百度移动适配工具也完全不识别
正确写法：必须用 link 标签 + media 属性
PC 页面的 <head> 中，用 <link rel="alternate"> 明确声明对应移动页，并限定设备条件：
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html">
-
media属性是关键：没有它，搜索引擎无法判断这是“移动专用”而非“多语言/打印版”等其他 alternate 类型 -
href必须是绝对 URL（协议+域名），相对路径会被忽略或解析错误 - 不要加
type或hreflang—— 移动适配场景下它们无意义，反而可能干扰识别 - 多个设备断点？只需一条
media覆盖主流窄屏范围即可，不必写(max-width: 480px)和(max-width: 768px)多条
移动端页面必须配 canonical，否则适配关系断裂
只在 PC 页声明 rel="alternate" 是单向的，搜索引擎需要闭环确认——移动页必须反向声明其“权威源”：
立即学习“前端免费学习笔记（深入）”；
<link rel="canonical" href="https://www.example.com/page.html">
- 这个
<link rel="canonical">必须放在移动页的<head>中，且href指向对应的 PC 页面（不是自身） - 漏掉这一步，百度/Google 会认为两个页面是独立内容，可能造成重复收录或移动排名不生效
- 注意：不要在移动页再写
rel="alternate"指回 PC 页——这是过时做法，现代适配体系只要求 PC→mobile 的alternate+ mobile→PC 的canonical
真正起效的移动适配靠的是 <link> 标签组合的语义闭环，不是链接文案或用户点击行为。很多人花时间写响应式跳转脚本，却漏掉这两行 <link>，结果 SEO 层面始终不被识别——这点最容易被忽略，但恰恰是搜索引擎理解“这是同一页面的移动版”的唯一依据。
