时间戳

首页 > 解决方案 > 具有参数和 SEO 优化的角度路线

angular - 具有参数和 SEO 优化的角度路线

问题描述

我目前正面临 Angular 应用程序的 SEO 优化问题。我有一个主要组件，它有一堆到报告页面的链接，看起来像这个报告/测试1，报告/测试2，报告/测试3，......此刻的路由看起来像这样：

const routes: Routes = [
  { path: '', component: Page1Component },
  { path: 'page1', component: Page1Component },
  { path: 'report/:name', component: ReportComponent }
];

因此，根据报告的名称，我在该页面上显示了不同的内容（报告）。而且我需要为每个显示的报告设置单独的元标记和标题。所有可能的报告名称都是已知的，所以我的想法是为每个报告创建一个路由，就像这样

const routes: Routes = [
  { path: '', component: Page1Component },
  { path: 'page1', component: Page1Component },
  { path: 'report/test1', component: ReportComponent },
  { path: 'report/test2', component: ReportComponent },
  { path: 'report/test3', component: ReportComponent }
];

然后在组件内部，根据路由显示不同的元标记，但我不确定它是否会被正确解释。我已经为应用程序使用了服务器端渲染。有没有人知道它是否可以以不同的方式完成，或者这种方法可能会奏效？我不确定我的方向是正确的。谢谢！

标签： angularroutesangular2-routingurl-routingangular-seo

解决方案

此解决方案的问题：

{ path: 'report/test1', component: ReportComponent },
{ path: 'report/test2', component: ReportComponent },
{ path: 'report/test3', component: ReportComponent }

是你没有利用路由系统的优势，而且每次你​​有新的报告要管理时，你都会复制你的路由。

对我来说，正确的方法是在路由中使用带有参数的路由系统，如下所示：

{ path: 'report/:name', component: ReportComponent }

根据您的“姓名”，您可以根据需要设置/显示数据。

推荐阅读