0

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!

Machavity
  • 30,841
  • 27
  • 92
  • 100
Julia Sypat
  • 3
  • 3

1 Answers1

0

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.

L Y E S - C H I O U K H
  • 4,765
  • 8
  • 40
  • 57
  • Hi, thank you for your answer, but this is exactly how routing looks like at the moment. The question still remains how to add different set of meta data for each route, if I have 40 possible reports(routes) and each has own meta data, should I use some kind of mapping service to map the name from route with correct data? It is just seems kind of messy :( Also you say about duplication, so basically we cannot avoid it, as if I don't duplicate route, I still need to add part of mapper each time. I didn't find better solution than meta tags mapper – Julia Sypat Jun 18 '20 at 10:49
  • Do you have the possibility to retrieve meta data using XHR call with route name as parameter ? – L Y E S - C H I O U K H Jun 18 '20 at 11:00
  • I think it is possible to do in this case, but don't you think it will slow down app and may have impact on SEO optimization, if I will get data for meta tags form server? – Julia Sypat Jun 23 '20 at 11:46
  • @juliaSypat did you find solution, i was having the same issue for SEO – Kuldeep Jan 14 '22 at 22:31