Angular маршрутов с параметрами и SEO оптимизацией - PullRequest
Новая
       71

Angular маршрутов с параметрами и SEO оптимизацией

0 голосов
/ 07 мая 2020

У меня сейчас проблема с SEO-оптимизацией приложения Angular. У меня есть основной компонент, который имеет кучу ссылок на страницу отчета, выглядит так: report / test1, report / test2, report / test3, ... Маршрутизация на данный момент выглядит так: 

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

А затем внутри компонента показывать разные метатеги на основе маршрута, но я не уверен, что он будет правильно истолкован. Я уже использую рендеринг на стороне сервера для приложения. Кто-нибудь знает, можно ли это сделать по-другому или может такой подход сработает? Я вообще не уверен, что иду в правильном направлении. Спасибо!

1 Ответ

0 голосов
/ 15 июня 2020

Проблема с этим решением: 

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

заключается в том, что вы не используете преимущества системы маршрутизации и, более того, вы будете дублировать свои маршруты каждый раз, когда у вас будут новые отчеты для управления ..

Для меня правильный способ - использовать систему маршрутизации с параметром в маршруте, например: 

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

На основе вашего «имени» вы можете устанавливать / показывать данные, как вы хочу сделать.

...