Angular routes with parameter and SEO optimalization

Question

I am currently facing a problem with SEO optimization of Angular app. I have a main component which has bunch of links to Report page, looks like this report/test1, report/test2, report/test3, ... Routing at this moment looks like this:

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

So based on the name of report I show different content(report) on that page. And I need to have separate set of meta tags and title per each report shown. All possible report names are known, so my idea was to create a route for each report, like this

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 }
];

And then inside of the component, show different meta tags based on the route, but I am not sure that it will be correctly interpreted. I already use Server Side Rendering for the app. Does anyone have any idea if it can be done differently or maybe this approach will work? I am not sure I am going right direction at all. Thank you!

Answer 1

The problem with this solution :

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

is that you don't use the advantages of routing system and moreover, you will duplicate your routes each time you have new reports to manage..

For me, the correct way is to use a routing system with a parameter in the route, like this :

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

Based on your 'name', you can set/show data as you want to do.