Как подружить поисковую оптимизацию с вложенными маршрутами в одностраничном приложении?

Question

[nomta]

Как лучше с точки зрения seo оптимизации, использовать обычные параметры маршрута или hash параметры для навигации по разделам на одной странице?
Есть одностраничное приложение на Vue 3 + Vue Router. На одной странице '/products/1' есть разделы 'details' и 'reviews':

<!-- ProductPage.vue -->
<template>
  <div>
    <h1>Страница товара</h1>
    <section id="details">Описание</section>
    <section id="reviews">Отзывы</section>
  </div>
</template>

Оба раздела на одной и той же странице. Классический способ - использовать hash параметры, чтобы ссылка для перехода к секции выглядела так: '/products/1#details'.

Но что с точки зрения SEO, не лучше ли будет использовать вложенный маршрут для перехода к секции на одной и той же странице? Тогда адрес ссылки будет таким: '/products/1/details'. При этом RouterView не используется, т.к. все эти разделы всегда находятся на странице:

const router = createRouter({
  history: createWebHistory(),
  routes: [{    
// один и тот же компонент для родительского и дочерних маршрутов
      path: '/products/:id',
      component: ProductPage,
      children: [
        { path: 'details', component: ProductPage },
        { path: 'reviews', component: ProductPage }
      ]
    }]
});

плюс прокрутка к нужному разделу.
Как лучше с точки зрения SEO? Не будет ли такой способ приводить к дублированию контента с точки зрения поисковиков?

Answer 1

[Михаил Р.]

Но что с точки зрения SEO, не лучше ли будет использовать вложенный маршрут

Лучше.

Не будет ли такой способ приводить к дублированию контента с точки зрения поисковиков?

Будет.

Но я бы начал с типа сайта, если это не ssg/ssr, то в поиске Вы проиграете первому встречному классическом сайту без оптимизации.

Comments

[nomta]

Да, есть в планах попробовать с ssg, потому такой вопрос и возник.