Зачем SEO в Next.js?
SEO (Search Engine Optimization) — это настоящее искусство. Это как разрабатывать интерфейс, но не для пользователей, а для поисковиков, таких как Google, Bing и даже... DuckDuckGo. С Next.js все становится проще, ведь он предоставляет серверный рендеринг (SSR) и статическую генерацию (SSG), что позволяет странице быть сразу готовой для индексации.
Но без правильно настроенных мета-тегов (описывающих содержание страницы), Open Graph или Twitter Cards поисковики могут не понять, о чём ваш сайт. Или ещё хуже — соцсети покажут некрасивую превьюшку.
Добавление мета-тегов в Next.js
У Next.js есть встроенный компонент <Head> из библиотеки next/document. Он позволяет легко управлять мета-тегами для каждой страницы.
Вот пример базового компонента <Head>:
import Head from 'next/head';
export default function HomePage() {
return (
<>
<Head>
<title>Мой React-приложение</title>
<meta name="description" content="Лучшее приложение на React с использованием Next.js и TypeScript!" />
<meta name="keywords" content="React, Next.js, TypeScript, SEO" />
<meta name="author" content="Ваше Имя" />
</Head>
<main>
<h1>Добро пожаловать на мой сайт!</h1>
</main>
</>
);
}
Что тут происходит?
<title>задаёт название вкладки браузера.<meta name="description">— краткое описание страницы. Это то, что Google обычно показывает в результатах поиска.<meta name="keywords">— ключевые слова для поисковиков. Правда, современные алгоритмы (например, Google) уже не так сильно обращают на это внимание.<meta name="author">— имя автора страницы.
Практика: настройка мета-тегов для нашего проекта
На данный момент у нас есть приложение, в котором необходимо добавить уникальные мета-теги для каждой страницы (например, для страницы товара). Давайте создадим динамическую страницу /product/[id]:
import { GetStaticProps, GetStaticPaths } from 'next';
import Head from 'next/head';
interface Product {
id: string;
name: string;
description: string;
price: number;
}
export const getStaticPaths: GetStaticPaths = async () => {
// Получаем список всех ID продуктов
const products = await fetch('https://api.example.com/products').then(res => res.json());
const paths = products.map((product: Product) => ({
params: { id: product.id },
}));
return { paths, fallback: false };
};
export const getStaticProps: GetStaticProps = async (context) => {
const { id } = context.params!;
const product = await fetch(`https://api.example.com/products/${id}`).then(res => res.json());
return {
props: {
product,
},
};
};
export default function ProductPage({ product }: { product: Product }) {
return (
<>
<Head>
<title>{product.name} - Мой Магазин</title>
<meta name="description" content={`Купить ${product.name} всего за ${product.price} рублей!`} />
<meta property="og:title" content={`${product.name} - Мой Магазин`} />
<meta property="og:description" content={`Купить ${product.name} всего за ${product.price} рублей!`} />
<meta property="og:image" content={`https://api.example.com/images/${product.id}.jpg`} />
</Head>
<main>
<h1>{product.name}</h1>
<p>{product.description}</p>
<p>Цена: {product.price} руб.</p>
</main>
</>
);
}Детали данного примера:
- Мы используем функцию
getStaticPathsдля генерации всех страниц товаров. - Динамические мета-теги, такие как название и описание, подтягиваются из данных нашего товара.
- Добавлены Open Graph теги для лучшего отображения превьюшек в соцсетях. Подробнее про Open Graph читайте здесь.
Интеграция с Open Graph и Twitter Cards
Open Graph (OG) — это протокол, разработанный Facebook для улучшения представления ссылок в соцсетях. Twitter Cards работают аналогично.
Пример мета-тегов для Open Graph:
<meta property="og:title" content="Мой магазин электроники" />
<meta property="og:description" content="Купите лучшие товары по выгодным ценам!" />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />
Пример Twitter Cards:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Мой магазин электроники" />
<meta name="twitter:description" content="Купите лучшие товары по выгодным ценам!" />
<meta name="twitter:image" content="https://example.com/images/preview.jpg" />
Автоматизация: создание компонента MetaTags
Давайте вынесем все мета-теги в отдельный компонент MetaTags:
import Head from 'next/head';
interface MetaTagsProps {
title: string;
description: string;
image: string;
url: string;
}
export default function MetaTags({ title, description, image, url }: MetaTagsProps) {
return (
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
</Head>
);
}Теперь в любой странице мы можем добавить:
<MetaTags
title="Продукт 1 - Мой Магазин"
description="Купите Продукт 1 всего за 1000 рублей!"
image="https://example.com/images/product1.jpg"
url="https://example.com/product/1"
/>
Типичные ошибки и их решение
Отсутствие уникальных мета-тегов для страниц: если все ваши страницы используют одинаковые мета-теги, поисковики и соцсети будут путаться. Убедитесь, что каждая страница имеет уникальные
<title>и<meta>.Неполные теги Open Graph и Twitter Cards: забудете
<meta property="og:image">, и в соцсетях покажется неудобная картинка или ничего.Длинные строки в описаниях: Google рекомендует использовать описание длиной до 160 символов. Всё, что длиннее, бесполезно.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ