使用rel=alternate ,和rel=canonical进行网站优化

首先为什么要在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上有单独的桌面和移动网站时,才会使用该属性。

更多前端开发内容请查看这里:孙鲁意前端开发

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,958评论 1 45
  • 28、29号!这两天是值得一辈子记忆的两天,因为感觉自己长到30岁了,还没有经历过这么极致的突破,以后可能都...
    瑜伽馆专业预售阅读 175评论 0 0
  • A我学习到了什么? 1温习day02的知识点 2css基本样式的讲解 3css样式的继承:子元素对父元素的继承 B...
    尘榆骡厌阅读 223评论 0 0