跨境男孩 | HTML 中 rel 链接关系属性解读

跨境头条 1年前 (2022) iow
7.3K 0 0

什么是链接关系属性?

在 SEO 行业中,链接关系属性(在源代码中表示为<link rel="value">)最常用于将页面之间的关系传达给搜索引擎。

然而,链接关系属性已经使用了十多年,用于许多其他目的,例如加载 CSS 样式表、favicon 和指示页面的打印友好版本。

在本文中,我们将描述您应该了解的最常见的 SEO 链接关系属性。

link rel="alternate" hreflang

跨境男孩 | HTML 中 rel 链接关系属性解读图片来源:Ahrefs

hreflang 属性表示页面的翻译版本

rel="alternate" hreflang="x" 属性,hreflang简称属性,用于指示页面的目标受众。这可以仅基于语言(例如“英语”),或语言和地理位置的组合(例如“加拿大的英语”)。

hreflang 属性是什么样的?

hreflang页面源中的属性示例:

<link rel="alternate" hreflang="en" href="https://www.example.com/" /> <link rel="alternate" hreflang="es" href="https://www.example.es/" />

为什么要关心 hreflang 属性?

如果你有一个提供多种语言版本的网站,你希望搜索引擎向正确的受众显示正确的内容。使用该hreflang属性向搜索引擎传达内容的目标受众,搜索引擎更有可能向正确的受众显示正确的内容。

除了让搜索引擎清楚地知道他们应该为用户提供哪种变体之外,还有一个额外的好处就是可以防止重复的内容问题。

link rel="alternate" media

跨境男孩 | HTML 中 rel 链接关系属性解读图片来源:Ahrefs

rel="alternate"媒体属性,mobile简称属性,用于表示桌面端和移动端网站与搜索引擎的关系。仅当你有单独的桌面和移动网站时才需要使用移动属性。目前只有 Google 和 Yandex 支持使用移动属性。

移动属性是什么样的?

mobile页面源中的属性示例:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/">

为什么要关心移动属性?

如果你有一个单独的桌面和移动网站,并且你关心 SEO,则需要使用移动属性。移动属性帮助搜索引擎为正确的用户提供正确的页面,这意味着:桌面用户在 Google 和 Yandex 中搜索时将看到桌面版本,而移动设备用户将看到移动版本。

同样,除了让搜索引擎清楚地知道他们应该为用户提供哪种变体之外,还有一个额外的好处,那就是在使用移动属性时可以防止出现重复的内容问题。否则,桌面和移动网站将相互竞争。

link rel="prev"/"next"

和链接属性,简称属性,用于向搜索引擎表明一系列页面之间的关系rel="next"、rel="prev"pagination

跨境男孩 | HTML 中 rel 链接关系属性解读图片来源:Ahrefs -使用分页属性

分页属性是什么样的?

pagination页面源中的属性示例:

<link rel="prev" href="http://www.example.com/page-2.html"> <link rel="next" href="http://www.example.com/page-4.html">

为什么要关心分页属性?

该pagination属性帮助搜索引擎了解一系列页面之间的关系。通常这些页面序列不包含很多独特的内容,因此搜索引擎知道您更喜欢它们提供替代内容而不是分页页面。

link rel="amphtml"

跨境男孩 | HTML 中 rel 链接关系属性解读图片来源:Ahrefs-AMP 可帮助您针对移动设备进行优化

用于link rel="amphtml" attribute指示非 AMP 页面和 AMP 页面之间的关系。

link rel="amphtml"是什么样子的?

URL 的非 AMP 版本(例如 )https://www.example.com/ice-cream/引用了 URL 的 AMP 版本:<link rel="amphtml" href="https://www.example.com/ice-cream/amp/"。

版权声明:iow 发表于 2022年12月14日 am7:37。
转载请注明:跨境男孩 | HTML 中 rel 链接关系属性解读 | 蘑菇跨境

相关文章