可以将Angular routerLink添加到HTML <a>标签中以避免SEO问题吗？

Question

如果我将routerLink添加到HTML标记中，则routerLink会完美工作，这意味着它将优先于自然的新http请求。

示例：

<a href="/page" [routerLink]="['/page']">Go to page view</a>

我为什么要这样做？

让爬网程序正确识别链接，同时保持Angular提供的平滑流畅的routerLink行为。

当然，这是针对同一SPA下的链接的。

问题是：这会变成问题吗？

我的问题可能是：“为什么会变成问题？”

好吧，对我来说，似乎会发生两种“自然”行为：

• 要转到URL的浏览器
• 想要更改视图的角度

因此，我想知道：这会引起冲突吗？

这不是SEO问题，必须在其他地方提出，这是一个面向Angular的技术问题。

Answer 1

首先，让我们讨论href属性或routerLink指令之间的区别。

href是HTML定位标记属性，用于导航到另一个页面。这里将加载一个新页面。

RouterLink用于实现相同的功能，但Angle 2或更高版本是单页应用程序，不应重新加载页面。 RouterLink导航到“新网址”，并且在不重新加载页面的情况下代替了routeroutlet呈现了组件。

所以您的问题是-这会变成问题吗？

使用href不会出现任何错误或破坏功能，但是会影响性能，因为每次href重定向都会加载角度包和块。

Answer 2

Angular routerLink指令将根据提供的routerLink属性替换或创建href。因此，如果您要手动提供href，那不会有任何区别，也不会有任何冲突。

Answer 3

https://developers.google.com/search/docs/advanced/guidelines/links-crawlable

声明 Google 抓取工具：

可以关注：

<a href="https://example.com">
<a href="/relative/path/file">

无法关注：

<a routerLink="some/path">
<span href="https://example.com">
<a onclick="goto('https://example.com')">

因此，如果您想考虑 SEO 效果，则必须将 href 与 routerLink 一起使用，因为 google bot 不会检查 routerLink。