Мультиязычные URL в Next.js: асимметричная vs симметричная структура

Организация мультиязычных URL в Next.js App Router требует тщательного планирования структуры, особенно при асимметричном подходе с русским языком по умолчанию без префикса и английским с префиксом /en. Для SEO-оптимизации необходимо корректно реализовать hreflang теги и canonical ссылки, создав четкую иерархию для поисковых систем, особенно для Яндекса. Хотя асимметричная структура может показаться удобной для основной аудитории RU, она создает сложности для индексации и требует дополнительных редиректов.

Содержание

• Основы мультиязычных URL структур в Next.js App Router
• Асимметричная vs симметричная структура URL: плюсы и минусы
• Реализация асимметричной структуры: ru без префикса, en с /en
• Оптимизация для SEO: hreflang и canonical теги
• Особенности работы с Яндексом: потенциальные проблемы
• Практическая реализация и лучшие практики

Основы мультиязычных URL структур в Next.js App Router

Next.js предоставляет встроенную поддержку интернационализации через i18n routing, которая позволяет создавать многоязычные веб-приложения с различными структурами URL. В App Router вы можете настроить локали, пути к ним и домены для каждой локали через специальную конфигурацию в файле middleware.ts или через параметры в маршрутах.

Основные концепции, которые необходимо понимать при организации мультиязычных URL:

Локали (Locales): Языковые коды, например, ru для русского и en для английского.

Префиксы локалей (Locale Prefixes): Часть URL, которая указывает на язык. Может быть обязательной или опциональной.

Домены локалей (Locale Domains): Разные домены для разных языков, например, site.com для русского и en.site.com для английского.

Локаль по умолчанию (Default Locale): Основной язык сайта, который может отображаться без префикса в URL.

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

Асимметричная vs симметричная структура URL: плюсы и минусы

Симметричная структура

При симметричной структуре все языковые версии имеют префиксы:

• /ru/about - русский
• /en/about - английский

Преимущества:

• Единообразие для всех языков
• Четкая структура для поисковых систем
• Отсутствие путаницы в индексации
• Упрощенная реализация hreflang тегов

Недостатки:

• Длинные URL для основного языка
• Необходимость всегда использовать префиксы
• Меньше удобства для основной аудитории

Асимметричная структура

При асимметричной структуре основной язык (в вашем случае русский) не имеет префикса:

• /about - русский
• /en/about - английский

Преимущества:

• Более короткие и чистые URL для основного языка
• Удобство для основной аудитории
• Соответствует поведению пользователей, ищущих контент на русском

Недостатки:

• Риск дублирования контента
• Сложности с индексацией поисковыми системами
• Требует дополнительных настроек для SEO
• Проблемы с пониманием структуры для Яндекса

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

Реализация асимметричной структуры: ru без префикса, en с /en

Конфигурация в Next.js

Для реализации асимметричной структуры в Next.js App Router необходимо правильно настроить параметры интернационализации в файле middleware.ts:

import { createMiddleware } from 'next-intl/middleware';
 
export default createMiddleware({
 // Локали, поддерживаемые сайтом
 locales: ['ru', 'en'],
 
 // Локаль по умолчанию (без префикса)
 defaultLocale: 'ru',
 
 // Настройка префиксов локалей
 localePrefix: 'as-needed' // Только для английского будет использоваться префикс
});
 
export const config = {
 // Матч всех путей
 matcher: ['/((?!api|_next|_vercel|.*\..*).*)']
};

Создание маршрутов

Для создания мультиязычных маршрутов используйте папку [locale] в структуре проекта:

app/
├── [locale]/
│ ├── page.tsx
│ ├── about/
│ │ └── page.tsx
│ └── products/
│ └── page.tsx
└── globals.css

Создание /ru URL и 301 редиректов

Для создания /ru URL или редиректов на / необходимо добавить дополнительную логику:

Вариант 1: Редирект с /ru на / для русской версии

import { createMiddleware } from 'next-intl/middleware';
 
export default createMiddleware({
 locales: ['ru', 'en'],
 defaultLocale: 'ru',
 localePrefix: 'as-needed',
 onRedirect: ({ locale }) => {
 if (locale === 'ru') {
 // Редирект с /ru на / для русской версии
 return { pathname: '/' };
 }
 }
});

Вариант 2: Поддержка /ru URL без редиректа

Если вы хотите поддерживать /ru URL, но не хотите делать редиректы, настройте middleware следующим образом:

import { createMiddleware } from 'next-intl/middleware';
 
export default createMiddleware({
 locales: ['ru', 'en'],
 defaultLocale: 'ru',
 localePrefix: 'as-needed'
});

Альтернативный подход с /ru префиксом

Если вы решите использовать симметричную структуру, настройте middleware следующим образом:

import { createMiddleware } from 'next-intl/middleware';
 
export default createMiddleware({
 locales: ['ru', 'en'],
 defaultLocale: 'ru',
 localePrefix: 'always' // Всегда используем префиксы
});

Это создаст симметричную структуру: /ru/about и /en/about, что упростит SEO-оптимизацию.

Оптимизация для SEO: hreflang и canonical теги

Реализация hreflang тегов

Hreflang теги критически важны для мультиязычных сайтов, так как они указывают поисковым системам на языковые и региональные версии страницы:

import { useTranslations } from 'next-intl';
import { useRouter } from 'next/router';

export default function HomePage() {
 const t = useTranslations();
 const router = useRouter();
 const { locale } = router;

 const alternateLanguages = [
 { href: '/', hreflang: 'ru', locale: 'ru' },
 { href: '/en', hreflang: 'en', locale: 'en' }
 ];

 return (
 <div>
 <Head>
 <title>{t('home.title')}</title>
 {alternateLanguages.map(lang => (
 <link
 key={lang.locale}
 rel="alternate"
 hrefLang={lang.hreflang}
 href={`${process.env.NEXT_PUBLIC_BASE_URL}${lang.href}`}
 />
 ))}
 </Head>
 {/* Контент страницы */}
 </div>
 );
}

Настройка canonical тегов

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

<Head>
 <link
 rel="canonical"
 href={`${process.env.NEXT_PUBLIC_BASE_URL}${router.asPath}`}
 />
</Head>

Для асимметричной структуры важно правильно настроить canonical теги, чтобы основная версия (русская) не имела дублирования с английской версией.

Проблемы с дублированием контента

При асимметричной структуре существует риск дублирования контента, так как:

• Страница /about и /en/about могут содержать аналогичный контент
• Поисковые системы могут воспринимать их как разные версии одного контента
• Это может негативно сказаться на SEO-показателях

Решением является использование canonical тегов, указывающих на основную версию страницы, и корректная настройка hreflang.

Особенности работы с Яндексом: потенциальные проблемы

Требования Яндекса к мультиязычным сайтам

Яндекс имеет особые требования к мультиязычным сайтам, которые отличаются от международных стандартов:

1. Предпочтение локальных доменов: Яндекс лучше индексирует сайты, где каждый язык на своем домене (например, site.ru и site.com)

2. Строгая структура URL: Неоднозначные структуры URL могут вызывать трудности с индексацией

3. Качество перевода: Яндекс учитывает качество перевода и может понижать страницы с плохим переводом

4. Геолокация: Яндекс учитывает географическое положение пользователей и предпочитает локальные версии контента

Проблемы асимметричной структуры для Яндекса

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

1. Путаница в индексации: Яндекс может не понять, что /about и /en/about - это разные языковые версии

2. Дублирование контента: Поисковая система может воспринимать страницы с одинаковым контентом на разных языках как дубликаты

3. Сложность понимания структуры: Неоднозначность URL может привести к неправильной индексации языковых версий

4. Проблемы с приоритетом: Яндексу сложно определить, какая версия страницы является основной

Рекомендации для работы с Яндексом

1. Явное указание языка: Используйте мета-теги для указания языка страницы:

<html lang="ru"> или <html lang="en">

2. Геолокация: Указывайте регион целевой аудитории через мета-теги

3. Качественный перевод: Обеспечьте высокое качество перевода для всех языковых версий

4. Структурированные данные: Используйте структурированные данные для указания языковых версий

5. Мониторинг индексации: Регулярно проверяйте индексацию страниц в Яндекс.Вебмастере

Для SEO-ориентированного сайта, где основная аудитория из России, асимметричная структура может создать дополнительные сложности с индексацией в Яндекс.

Практическая реализация и лучшие практики

Шаг 1: Выбор структуры URL

Для вашего случая, с основной аудиторией RU и необходимостью полноценной EN версии, рекомендуется:

1. Симметричная структура: Использовать префиксы для обоих языков (/ru/ и /en/)

• Упрощает SEO-оптимизацию
• Уменьшает риск дублирования контента
• Лучшая индексация в Яндексе

2. Асимметричная структура: Если вы все же предпочитаете асимметричную, необходимо:

• Создать редиректы с /ru на /
• Настроить canonical теги
• Использовать hreflang теги

Шаг 2: Настройка middleware

Для симметричной структуры настройте middleware:

import { createMiddleware } from 'next-intl/middleware';
 
export default createMiddleware({
 locales: ['ru', 'en'],
 defaultLocale: 'ru',
 localePrefix: 'always' // Всегда используем префиксы
});

Шаг 3: Создание мультиязычных компонентов

Создайте компонент для переключения языков:

'use client';

import { useRouter, usePathname } from 'next/navigation';
import { useLocale } from 'next-intl';
import { useTranslations } from 'next-intl';

export default function LanguageSwitcher() {
 const router = useRouter();
 const pathname = usePathname();
 const locale = useLocale();
 const t = useTranslations('Navigation');

 const handleLanguageChange = (newLocale: string) => {
 const segments = pathname.split('/').filter(Boolean);
 segments[0] = newLocale;
 router.push(`/${segments.join('/')}`);
 };

 return (
 <div>
 <button 
 onClick={() => handleLanguageChange('ru')}
 disabled={locale === 'ru'}
 >
 {t('russian')}
 </button>
 <button 
 onClick={() => handleLanguageChange('en')}
 disabled={locale === 'en'}
 >
 {t('english')}
 </button>
 </div>
 );
}

Шаг 4: Оптимизация для SEO

1. Настройка sitemap.xml: Создайте карту сайта для каждой языковой версии

2. Анализ производительности: Убедитесь, что загрузка страниц быстрой для всех языковых версий

3. Мобильная оптимизация: Оптимизируйте сайт для мобильных устройств на всех языках

4. Контент-стратегия: Разрабатывайте контент, учитывающий особенности каждой аудитории

Шаг 5: Мониторинг и анализ

1. Отслеживание позиций: Мониторьте позиции для целевых запросов на всех языках

2. Анализ трафика: Анализируйте трафик с разных языковых версий

3. Поведенческие факторы: Отслеживайте поведенческие факторы для каждой языковой версии

4. Регулярный аудит: Проводите регулярный SEO-аудит мультиязычного сайта

Рекомендации по выбору структуры

Для вашего случая, с основной аудиторией RU и необходимостью полноценной EN версии, я рекомендую использовать симметричную структуру (/ru/ и /en/), так как она:

1. Упрощает SEO-оптимизацию
2. Уменьшает риск дублирования контента
3. Лучше индексируется в Яндексе
4. Создает единообразный пользовательский опыт

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

Источники

1. Next.js Internationalization — Официальная документация по интернационализации в Next.js: https://nextjs.org/docs/app/building-your-application/routing/internationalization

2. Ahrefs Multilingual SEO — Статья о мультиязычной SEO-оптимизации от специалистов Ahrefs: https://ahrefs.com/blog/multilingual-seo/

3. Hreflang Tags: The Ultimate Guide — Подробное руководство по hreflang тегам для мультиязычных сайтов: https://ahrefs.com/blog/hreflang-tags-guide/

4. Yandex Webmaster Guidelines — Официальные рекомендации Яндекса для вебмастеров: https://yandex.ru/support/webmaster/

5. Google Search Central Multilingual SEO — Рекомендации Google по SEO для мультиязычных сайтов: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics

Заключение

Организация мультиязычных URL в Next.js App Router требует тщательного подхода, особенно при выборе между асимметричной и симметричной структурой. Для вашего случая с основной аудиторией RU и необходимостью полноценной EN версии, симметричная структура с префиксами /ru/ и /en/ является более предпочтительной для SEO-оптимизации.

Асимметричная структура, где русский язык является основной без префикса, может создать дополнительные сложности с индексацией в Яндексе и увеличить риск дублирования контента. Если вы решите использовать асимметричную структуру, обязательно создайте редиректы с /ru на / и корректно настройте hreflang и canonical теги.

Независимо от выбранной структуры, ключевыми факторами успеха являются: качественный перевод контента, правильная настройка технических параметров SEO и регулярный мониторинг индексации и позиций в поисковых системах.