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

Question

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

示例：

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

我为什么要那样做？

让抓取工具正确识别链接，同时保持 Angular 提供的漂亮流畅的 routerLink 行为。

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

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

我的问题可能是："Why would it ever turn into an issue?"

嗯，对我来说，似乎有两种 "natural" 行为会发生：

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

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

Answer 1

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

Answer 2

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

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

RouterLink 用于实现相同的功能，但 Angular2（或以上）是单页应用程序，不应重新加载页面。 RouterLink 导航到一个新的 URL 并且在不重新加载页面的情况下呈现组件代替 routeroutlet。

所以您的问题是：这会变成一个问题吗？

使用 href 不会引发任何错误或破坏功能，但会影响性能，因为每个 href 重定向都会加载 Angular 捆绑和块。

Answer 3

表示 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。

Is it okay to add Angular routerLink to HTML <a> tags to avoid SEO issues?