如何正确使用和实现canonical和 alternate标签：完整指南(2023)
rel=”canonical” 标签用于通过指示页面的首选版本来解决重复内容的问题，rel=”alternate” 标签用于为不同的语言和地理目标指定页面的替代版或版本，若遇到一些页面本质相同，但包含的是不同内容的页面，则告诉 Google 这些页面属于同一序列的最好方法是使用Rel “prev”和“next”标签。
Rel=canonical 规范标签只能用于具有完全或相似内容的页面，告知搜索引擎页面的首选路径。
示例：
-
http://example.com/article-on-veggies/
-
https://example.com/article-on-veggies/
-
https://www.example.com/article-on-veggies/
-
http://example.com/article-on-veggies/comments/
-
http://example.com/article-on-veggies/1/
以上5个页面内容相同，但路径不同，对于谷歌索引来说，这5个页面是重复内容页面
若想保留 https://example.com/article-on-veggies/页的排名， 以上所有页面都应具有以下规范标签：
<link rel=”canonical” href=”https://example.com/article-on-veggies/” />
通过向这些页面添加规范标签，可以轻松地通知 Google和其他搜索引擎所有这些页面都只是单个原始页面https://example.com/article-on-veggies/的变体。
添加位置：html中的<head>部分。
rel="alternate" 本身意味着目标是当前页面的某种替代表示（如语言）或版本（如桌面端或移动端）
Rel alternate使用范围：
1. 内容相同但使用不同语言编写的页面，如英语，德语，西语
2. 内容相同但显示在不同媒体设备上的页面，如桌面端和移动端
Rel=”alternate”标签对于提供多种语言内容或针对不同地理区域的网站
以下是如何使用 rel=”alternate” 标签的示例：
<head>
<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com/en-us/page/” />
<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/en-gb/page/” />
<link rel=”alternate” hreflang=”fr-fr” href=”https://www.example.com/fr-fr/page/” />
</head>
示例如下：
每个语言页面使用rel=”alternate” 和hreflang时，这个页面的语言版本的html标记里要包含关于这个页面的所有的语言版本，包括它自己。
Rel alternate 应用于mobile和desktop：
作用：
-
在桌面页面添加一个特殊的链接 rel=”alternate” 标签，指向相应的移动 URL。这使 Googlebot 可以轻松地在您的子域中找到您网站的移动页面。
-
在移动页面上添加链接 rel=”canonical” 标签，指向相应的桌面 URL。这有助于将索引和排名信号（包括外部链接）整合到桌面版本，并避免重复内容的混淆。
-
提醒谷歌 - desktop网站的mobile版本的方式：
在桌面页面添加一个rel=”alternate”标签，指向相应的移动页面 URL。
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”https://mobile.nytimes.com/”>
结合规范标签canonical，桌面端网页上添加的即是：
<head>
<link rel=”canonical” href=”https://nytimes.com/”>
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”https://mobile.nytimes.com/”>
</head>
-
提醒谷歌 - mobile网站的desktop版本的方式：
在移动页面 ( https://mobile.nytimes.com/ ) 上，添加一个链接 rel=”canonical”标签，指向相应的桌面 URL，如下所示：
<head>
<link rel=”canonical” href=”https://nytimes.com/”>
</head>
使用“alternate”标签告诉谷歌该网站有一个替代的移动版本可用。
media 属性告诉谷歌移动版本用于宽度小于 640 像素的设备——换句话说，智能手机。
添加位置：html中的<head>部分。
'rel prev' 和 'rel next' 标签（rel=”prev” 和 rel=”next”）可用于在属于分页序列的不同网页之间建立关系。
分页序列的例子如下：
-
网站存档页面分成许多不同的页面
-
一个论坛线程分成多个页面
-
一篇文章分成几个页面
-
产品列表页面拆分为多个页面
示例 - blog分页添加'rel prev' 和 'rel next'方法：
Blog首页在桌面端有分页，这些分页路径上看着相同，但页面上的内容是不同的。可使用rel prev 和rel next标签告知谷歌这些页面是属于同一序列的
假设 blog URL 如下所示：
https://example.com/blog/
https://example.com/blog/page-2/
https://example.com/blog/page-3/
https://example.com/blog/page-4/
方法如下：
第一页添加方法：
对于blog首页，也就是第一页https://example.com/blog/，我们将使用以下标签：
<link rel='next' href=' https://example.com/blog/page-2/' />
第二页添加方法：
第二页https://example.com/blog/page-2/ 将具有以下标签：
<link rel='prev' href=' https://example.com/blog/' />
<link rel='next' href=' https://example.com/blog/page-3/' />
第三页添加方法：
第三页同理第二页方法。
第四页即最后一页添加方法：
序列中的第四页https://example.com/blog/page-4/也是最后一页将具有以下标签：
<link rel='prev' href=' https://example.com/blog/page-3/' />
添加位置：html中的<head>部分。
备注：
-
第一页仅包含标记rel="next"，没有rel="prev"标记。
-
倒数第二页的第二页应该使用 bothrel="next" 和rel="prev"标记进行双重链接。
-
最后一页只包含的标记rel="prev"，不包含rel="next"。
-
这种方法告诉谷歌这个页面是序列的延续，因此会有下一页，有上一页和下一页，有上一页标签说明。
扩展 -对于blog的分页，完美标签使用示例：
<link rel=”canonical” href=”http://example.com/page/1/”>
（告知谷歌蜘蛛这个页面是规范页面）
<link rel=”next” href=”http://example.com/page/2/” >
<link rel=”prev” href=”http://example.com/page/” >
（以上这两个告知谷歌这个页面是序列的延续）
<meta name=”robots” content=”noindex,follow”>
（告知谷歌可抓取这个页面上的任何链接，但这个页面不用出现在搜索结果里）
总结
1. rel=”canonical” 标签告诉搜索引擎应该将哪个页面视为内容的“主”或原始版本，以及哪些页面只是重复的。通过使用rel=”canonical”标签，站长可以确保一个页面只有一个版本被搜索引擎收录，这有助于提高该页面的搜索引擎排名。
本篇文章来源于微信公众号: 喃姐SEO日志
