Breaking the Sandbox: Technical SEO для Next.js разработчиков

TL;DR
Технический SEO в Next.js требует больше, чем статические метатеги. Используйте generateMetadata для динамической генерации метаданных и создавайте динамические карты сайта через sitemap.ts, чтобы обеспечить максимальную видимость вашего приложения в поисковых системах.

Введение

Разработчики часто сталкиваются с проблемой: создали качественный продукт, но трафик остается нулевым. Причина в том, что поисковые системы не видят ваш контент так, как нужно. Next.js предоставляет мощные инструменты для решения этой проблемы через интеграцию Technical SEO на уровне архитектуры приложения. В этой статье разберем, как использовать App Router для динамической генерации метаданных и карт сайта.

Динамическая генерация метаданных

Статические метатеги больше не достаточны для современных веб-приложений. Next.js 14+ предлагает API generateMetadata, который позволяет динамически генерировать метаданные для каждой страницы на сервере. Это особенно полезно для платформ с сотнями динамических маршрутов, таких как блоги или профили пользователей.

Пример реализации:

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
import { fetchPostBySlug } from '@/lib/api';

type Props = {
    params: { slug: string }
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const post = await fetchPostBySlug(params.slug);

    if (!post) {
        return { title: 'Post Not Found | Smart Tech Devs' };
    }

    return {
        title: `${post.title} | Smart Tech Devs`,
        description: post.excerpt,
        openGraph: {
            title: post.title,
            description: post.excerpt,
            url: `https://smarttechdevs.in/blog/${post.slug}`,
            siteName: 'Smart Tech Devs',
            images: [
                {
                    url: post.cover_image_url,
                    width: 1200,
                    height: 630,
                },
            ],
            type: 'article',
        },
        alternates: {
            canonical: `https://smarttechdevs.in/blog/${post.slug}`,
        },
    };
}

export default async function BlogPost({ params }: Props) {
    // Логика рендеринга компонента...
}

Этот подход гарантирует, что поисковые системы получают точные метаданные еще до того, как HTML покинет ваш сервер.

Динамические карты сайта

Карта сайта — это карта для поисковых роботов. В традиционных React-приложениях создание динамической карты сайта требовало сложных внешних скриптов. В Next.js это можно сделать через sitemap.ts, который динамически формирует XML-файл на основе данных из вашей базы данных.

Пример реализации:

// app/sitemap.ts
import { MetadataRoute } from 'next';
import db from '@/lib/db';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
    const baseUrl = 'https://smarttechdevs.in';

    const staticRoutes = [
        '',
        '/about',
        '/blog',
        '/services',
    ].map((route) => ({
        url: `${baseUrl}${route}`,
        lastModified: new Date(),
        changeFrequency: 'weekly' as const,
        priority: route === '' ? 1.0 : 0.8,
    }));

    const posts = await db.post.findMany({
        where: { published: true },
        select: { slug: true, updated_at: true }
    });

    const dynamicRoutes = posts.map((post) => ({
        url: `${baseUrl}/blog/${post.slug}`,
        lastModified: post.updated_at,
        changeFrequency: 'monthly' as const,
        priority: 0.6,
    }));

    return [...staticRoutes, ...dynamicRoutes];
}

Этот файл автоматически генерирует актуальную карту сайта каждый раз, когда Google запрашивает ее.

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

Google Search Console: После реализации динамических метаданных и карты сайта добавьте ваш сайт в Google Search Console для мониторинга индексации.
Проверка метаданных: Используйте инструменты, такие как Twitter Card Validator или Facebook Debugger, чтобы убедиться, что метаданные корректно отображаются в социальных сетях.
Оптимизация производительности: Убедитесь, что ваше приложение быстро загружается, так как это также влияет на SEO.

Заключение

Технический SEO — это не дополнительная функция, а обязательная часть архитектуры вашего приложения. Используя возможности Next.js, такие как generateMetadata и динамические карты сайта, вы можете значительно улучшить видимость вашего продукта в поисковых системах. Помните, что трафик — это результат грамотной инженерной работы, а не случайность.

Источник: https://dev.to/iprajapatiparesh/breaking-the-sandbox-technical-seo-for-nextjs-developers-4lap