TL;DR
Я построил Next.js приложение с поддержкой 20 языков и более 1500 статически сгенерированных маршрутов, используя динамический middleware, локализованные метаданные и автоматическую генерацию карты сайта. Это обеспечило идеальные Core Web Vitals и высокий органический трафик.
Введение
Создание микро-SaaS — это только половина пути. Настоящий вызов — заставить Google обратить на него внимание. Когда я начал разрабатывать ProMetadata — набор из 14 инструментов для работы с метаданными изображений и PDF, — я знал, что стратегия роста должна быть полностью основана на органическом поиске. Для этого требовалась архитектура, которая позволила бы масштабироваться глобально с самого начала, сохраняя при этом идеальные Core Web Vitals.
Основная часть
Локализация и динамический маршрутизатор
Чтобы охватить глобальный поисковый трафик, приложение должно было поддерживать 20 языков, включая английский, французский, японский, хинди и арабский. Для этого я использовал Next.js middleware, который динамически обрабатывает маршруты для всех локалей.
// middleware.js
import { NextResponse } from 'next/server';
export function middleware(req) {
const { pathname } = req.nextUrl;
const locale = pathname.split('/')[1];
if (!supportedLocales.includes(locale)) {
return NextResponse.redirect(new URL('/en', req.url));
}
return NextResponse.next();
}
Статическая генерация страниц (SSG)
Скорость загрузки — ключевой фактор ранжирования. Все локализованные маршруты генерируются статически (SSG), что обеспечивает мгновенную загрузку страниц.
// pages/[locale]/index.js
export async function getStaticPaths() {
return {
paths: supportedLocales.map(locale => ({ params: { locale } })),
fallback: false,
};
}
export async function getStaticProps({ params }) {
return {
props: {
locale: params.locale,
},
};
}
Локализованные метаданные
Микроразметка Title, Description и OpenGraph тегов генерируется динамически для каждой локали на сервере перед отправкой клиенту.
// components/Head.js
export default function Head({ locale }) {
const { title, description } = translations[locale];
return (
<>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
</>
);
}
Автоматическая генерация карты сайта
Для управления картой сайта с множеством языков и инструментов я создал автоматический генератор, который выводит все локализованные URL с правилами hreflang, приоритетами и тегами свежести.
// scripts/generateSitemap.js
const generateSitemap = (locales, tools) => {
const urls = locales.flatMap(locale =>
tools.map(tool => ({
loc: `https://prometadata.com/${locale}/${tool}`,
lastmod: new Date().toISOString(),
changefreq: 'weekly',
priority: tool === 'home' ? 1.0 : 0.8,
}))
);
return urls;
};
Структурированные данные
Вместо простой микроразметки я программно добавил JSON-LD схемы для всех страниц инструментов, включая SoftwareApplication, FAQ и HowTo.
// components/Schema.js
export default function Schema({ tool }) {
return (
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "SoftwareApplication",
name: tool.name,
description: tool.description,
applicationCategory: "Utility",
})}
</script>
);
}
Практическое применение
Для захвата трафика на этапе принятия решения были созданы страницы сравнения, такие как /metadata2go-alternative. Эти страницы оптимизированы с целевыми URL, специализированными метаданными и таблицами сравнения.
Заключение
Построение такого уровня технического SEO в Next.js требует значительных усилий, но долгосрочные преимущества органического трафика стоят того. Если вы разрабатываете инструмент, не откладывайте оптимизацию URL структуры, hreflang тегов и микроразметки на потом — интегрируйте их в компоненты с самого начала.
Как вы управляете большими локализованными картами сайта в Next.js App Router? Поделитесь своим опытом в комментариях! 👇