rel="alternate"仅在标签的中配合media属性和移动端反向canonical才有效；a标签无效，media必须为"only screen and (max-width: 640px)"，href须绝对url，且优先采用响应式设计。
rel="alternate" 在 <link> 标签中指移动端，只有一条有效路径：PC 页用 <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page"> 声明移动页地址，且移动页必须反向配 <link rel="canonical" href="https://www.example.com/page">。其他写法基本无效。
为什么不能用 a 标签加 rel="alternate" 指移动页
搜索引擎（Google、百度）完全忽略 @#@#@#@#@#@#@#@#@#@0
<link> 放在 media 属性，只写 <link rel="alternate" href="..."> —— 这会被当成多语言或 RSS 链接，不是移动适配
media 属性怎么写才被识别
必须用标准媒体查询语法，且仅限窄屏设备范围。搜索引擎靠这个判断“这是给手机看的”，不是随便写个断点就行。
- 推荐写法：
media="only screen and (max-width: 640px)"—— 覆盖主流小屏设备，兼容性好 - 不要拆成多条，比如同时写
(max-width: 480px)和(max-width: 768px)，重复声明反而可能干扰解析 - 不能省略
only screen，写成media="(max-width: 640px)"有些旧版爬虫会忽略 -
href必须是绝对 URL，相对路径如/m/page会被忽略或解析失败
移动端页面必须配 rel="canonical"，否则白干
只在 PC 页声明 rel="alternate" 是单向的，搜索引擎需要闭环确认。移动页不加 <link rel="canonical" href="https://www.example.com/page">，就等于告诉爬虫：“这俩页面没关系”，结果是重复收录、移动排名不生效、甚至被降权。
-
canonical的href必须指向对应 PC 页面的完整 URL，不能是自身或相对路径 - 不要在移动页再写
rel="alternate"指回 PC 页 —— 这是 2015 年前的过时做法，现代适配体系只要求 PC → mobile 单向声明 + 移动页反向 canonical - 如果移动页用了不同域名（如
m.example.com），该域名必须已配置 DNS 且可公开访问，否则 Google 抓取失败后整个适配失效
真正该优先考虑响应式，而不是折腾 rel="alternate"
除非你有明确的历史包袱（比如 PC 站基于重前端框架，电商频道却必须用轻量级独立 H5 站），否则 rel="alternate" 不是首选方案。Google 自 2015 年起明确将响应式设计列为首选适配方式。
简单验证：如果加了 <meta name="viewport" content="width=device-width, initial-scale=1"> 后，用 CSS 媒体查询就能让同一 URL 在手机和桌面正常显示，那就别碰 rel="alternate" —— 多维护一套移动页、双 canonical/alternate 同步、DNS 和 HTTPS 配置、缓存策略，全是隐性成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
