SEO: Структура URL | Next.js Русский

Структура URL является важной частью SEO-стратегии. Хотя Google не раскрывает, какой вес имеет каждая составляющая SEO, качественные URL считаются лучшей практикой, независимо от того, являются ли они большим или малым фактором ранжирования.

Рекомендуется придерживаться следующих принципов:

Семантичность: Лучше использовать семантические URL, то есть содержащие слова вместо идентификаторов или случайных чисел. Например: /learn/basics/create-nextjs-app предпочтительнее, чем /learn/course-1/lesson-1
Логичные и последовательные шаблоны: URL должны следовать определённому шаблону, единообразному для всех страниц. Например, стоит группировать страницы товаров в одной папке, а не создавать разные пути для каждого товара.
Ключевые слова: Google по-прежнему в значительной степени основывает свои алгоритмы на ключевых словах, содержащихся на сайте. Использование ключевых слов в URL помогает поисковым системам понять назначение страниц.
Без параметров: Использование параметров для построения URL, как правило, не лучшая идея. В большинстве случаев они не являются семантичными, и поисковые системы могут их путать, понижая рейтинг таких страниц в результатах поиска.

Как определяются маршруты в Next.js?

Next.js использует файловую маршрутизацию, основанную на концепции страниц. Когда файл добавляется в директорию pages, он автоматически становится доступным как маршрут. Файлы и папки внутри pages могут использоваться для определения наиболее распространённых шаблонов.

Рассмотрим несколько простых URL и способы их добавления в маршрутизатор Next.js:

Главная страница: https://www.example.com → pages/index.js
Списки: https://www.example.com/products → pages/products.js или pages/products/index.js
Детальная страница: https://www.example.com/products/product → pages/products/product.js

Для блога или интернет-магазина, скорее всего, потребуется использовать идентификатор товара или название статьи в качестве части URL (slug). Это называется динамической маршрутизацией:

Товар: https://www.example.com/products/nextjs-shirt → pages/products/[product].js
Блог: https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js

Для использования динамической маршрутизации можно добавить квадратные скобки к имени страницы внутри подпапки products или blogs.

Пример страницы, оптимизированной для этого с использованием SSG (статической генерации):

// pages/blog/[slug].js
 
import Head from 'next/head';
 
export async function getStaticPaths() {
  // Вызов внешнего API для получения статей
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();
 
  // Получение путей для предварительного рендеринга на основе статей
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // Установка fallback в значение 'blocking'. Теперь новые статьи после сборки будут рендериться на стороне сервера (SSR)
  // для обеспечения SEO. Последующие запросы будут статическими
  return { paths, fallback: 'blocking' };
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://www.example.com/api/blog/${params.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </>
  );
}
 
export default BlogPost;

Пример с использованием SSR (рендеринга на стороне сервера):

// pages/blog/[slug].js
 
import Head from 'next/head';
function BlogPost({ blog }) {
  return (
    <div>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </div>
  );
}
 
export async function getServerSideProps({ query }) {
  const res = await fetch(`https://www.example.com/api/blog/${query.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
export default BlogPost;

Структура URL

Как определяются маршруты в Next.js?

Дополнительные материалы

On this page