首先为什么要在PC站(rel="alternate")和移动站(rel="canonical")使用该标签,该标签的作用是什么。
当你拥有独立的PC站和移动站点时,即需要使用该标签,每个PC页面只能有一个移动对应页面,反之亦然。
如何使用:
在PC站点当中,在</head>前加入
<link rel="alternate" href="http://m.abc.com/">
在对应的移动站点中</head>前加入
<link rel="canonical" href="http://www.abc.com/">
以上两者关系为互指关系,意思是告诉搜索引擎,我这两个页面是对应的关系,以帮助他们了解向其用户提供的网站以及防止出现重复内容问题。
切记URL书写时要写成绝对路径,即使它不符合链接标记的规范,但一般的共识是在定义rel属性时不使用相对URL。相对URL更有可能被搜索引擎解释为错误。相同的最佳实践适用于链接标记的其他用途:规范URL,href、lang属性和分页属性。
多个页面的情况下使用:
//PC站:
<link rel="alternate" href="http://m.abc.com/">
<link rel="alternate" href="http://m.abc.com/about/">
<link rel="alternate" href="http://m.abc.com/news/1.html">
//移动站:
<link rel="canonical" href="http://www.abc.com/">
<link rel="canonical" href="http://www.abc.com/about/">
<link rel="canonical" href="http://www.abc.com/news/1.html">
如果你有响应式网站,则无需使用该标签。只有在不同的URL上有单独的桌面和移动网站时,才会使用该属性。
更多前端开发内容请查看这里:孙鲁意前端开发