Canonical URLs

Canonical URL — это стандартный способ указания поисковым системам основной версии страницы среди нескольких доступных с одинаковым или схожим контентом. В экосистеме MDX и JavaScript это особенно важно при создании документации, блогов или динамического контента, где один и тот же материал может быть представлен через разные маршруты.

Основы Canonical URL

Canonical URL задаётся с помощью HTML-тега <link rel="canonical" href="..."> в <head> документа. Этот тег сообщает поисковым системам, что данная страница является «канонической» версией контента. Пример базовой установки:

<head>
  <link rel="canonical" href="https://example.com/docs/mdx/introduction" />
</head>

В MDX, где контент часто создаётся через компоненты и маршруты на стороне клиента, добавление canonical URL требует интеграции с React-компонентами, например через next/head или аналогичные механизмы.

Реализация в Next.js с MDX

Для сайтов на Next.js с MDX canonical URL можно устанавливать динамически на основе маршрута страницы. Пример:

import { useRouter } from 'next/router';
import Head from 'next/head';

export default function MDXPage({ content, frontMatter }) {
  const router = useRouter();
  const canonical = `https://example.com${router.asPath}`;

  return (
    <>
      <Head>
        <link rel="canonical" href={canonical} />
        <title>{frontMatter.title}</title>
      </Head>
      <main>
        {content}
      </main>
    </>
  );
}

В этом примере:

  • router.asPath динамически берёт текущий путь страницы.
  • canonical формируется с полным URL.
  • Тег <link rel="canonical" /> помещается в <Head> для корректного SEO.

Управление каноническими URL через frontMatter

MDX позволяет использовать frontMatter для передачи метаданных. Это удобно, когда одна и та же страница может быть доступна по нескольким URL, а canonical необходимо задавать вручную:

---
title: "Введение в MDX"
canonical: "https://example.com/docs/mdx/introduction"
---

# Введение в MDX
Контент страницы...

И соответствующий React-компонент для вставки canonical:

import Head from 'next/head';

export default function MDXLayout({ children, frontMatter }) {
  return (
    <>
      <Head>
        {frontMatter.canonical && (
          <link rel="canonical" href={frontMatter.canonical} />
        )}
        <title>{frontMatter.title}</title>
      </Head>
      <article>{children}</article>
    </>
  );
}

Особенности для блогов и документации

  1. Дублирующийся контент: если одна статья доступна через несколько категорий или тегов, canonical URL предотвращает штрафы за дублирование.
  2. Многоязычные сайты: для разных языковых версий используют атрибут hreflang вместе с canonical для правильного индексирования.
  3. MDX-пакеты и плагины: существуют плагины для автоматической генерации canonical URL на основе структуры папок и frontMatter.

Динамический контент и SEO

MDX позволяет внедрять интерактивные компоненты, что усложняет формирование canonical URL. В таких случаях ключевые моменты:

  • Canonical URL всегда должен указывать на статический, окончательный URL страницы.
  • Компоненты не должны менять canonical динамически после рендера, иначе поисковые системы могут индексировать несколько версий.

Интеграция с генерацией статических сайтов

Для SSG (Static Site Generation) на основе MDX, например с Next.js или Gatsby, canonical URL обычно формируется на этапе сборки. Это гарантирует, что каждая страница имеет уникальный и правильный URL:

export async function getStaticProps({ params }) {
  const post = getPostBySlug(params.slug);
  return {
    props: {
      content: post.content,
      frontMatter: {
        ...post.frontMatter,
        canonical: `https://example.com/posts/${params.slug}`,
      },
    },
  };
}

Практические рекомендации

  • Всегда использовать полный URL, включая протокол (https://), при формировании canonical.
  • Проверять страницы с похожим контентом, чтобы не создавать конкурирующие canonical.
  • Для страниц с пагинацией использовать rel=“prev/next” совместно с canonical только для первой страницы серии.

Canonical URL в MDX — это не просто SEO-декор, а инструмент контроля индексации и управления уникальностью контента на динамических и статических сайтах. Его правильное применение гарантирует, что поисковые системы понимают, какая версия страницы является основной, что критично для ранжирования и предотвращения штрафов за дублированный контент.

Оглавление