Как настроить SEO на проекте Next.js: современные подходы и лучшие практики

bash
npm install next-seo 
#или
yarn add next-seo

export const metadata = {
  title: {
    default: 'Мой сайт',
    template: '%s | Мой сайт',
  },
  description: 'Описание сайта по умолчанию',
  metadataBase: new URL('https://my-site.com'),
  openGraph: {
    title: 'Мой сайт',
    description: 'Описание для социальных сетей',
    images: ['/og-image.jpg'],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Мой сайт',
    description: 'Описание для Twitter',
    images: ['/twitter-image.jpg'],
  },
};

import { NextSeoProps } from 'next-seo';

export default {
  title: 'Онлайн-магазин — товары и аксессуары',
  titleTemplate: '%s | Онлайн-магазин',
  defaultTitle: 'Онлайн-магазин — товары и аксессуары',
  description:
    'Демонстрационный интернет-магазин с широким выбором товаров и аксессуаров. Удобный поиск, актуальные предложения и быстрая доставка по всему миру.',
  canonical: 'https://example-shop.com/',
  openGraph: {
    url: 'https://example-shop.com/',
    title: 'Онлайн-магазин — товары и аксессуары',
    description:
      'Выбирайте товары и аксессуары в демонстрационном интернет-магазине. Все предложения обновляются регулярно и сопровождаются подробными описаниями.',
    images: [
      {
        url: 'https://example-shop.com/images/og-image-1.jpg',
        width: 1200,
        height: 630,
        alt: 'Демонстрационное изображение товара',
      },
      {
        url: 'https://example-shop.com/images/og-image-2.jpg',
        width: 800,
        height: 600,
        alt: 'Пример акций и предложений',
      },
    ],
    site_name: 'Онлайн-магазин',
  },
  twitter: {
    handle: '@example_shop',
    site: '@example_shop',
    cardType: 'summary_large_image',
  },
} as NextSeoProps;

html
<title>Заголовок страницы</title>

html
<meta name="description" content="Описание содержимого страницы." />

html
<meta property="og:title" content="Заголовок для соцсетей" />
<meta property="og:description" content="Описание для соцсетей" />
<meta property="og:image" content="URL_изображения" />

export const metadata = {
  title: {
    default: 'Заголовок сайта по умолчанию',
    template: '%s | Название сайта',
  },
  description: 'Описание сайта по умолчанию',
  metadataBase: new URL('https://your-domain.com'),
  openGraph: {
    title: 'Заголовок для соцсетей',
    description: 'Описание для соцсетей',
    images: ['/og-image.jpg'],
  },
};

import { NextSeo } from 'next-seo';
import defaultSEOConfig from '../next-seo.config';

export function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextSeo {...defaultSEOConfig} />
      <Component {...pageProps} />
    </>
  );
}

const seoTitle = `Купить ${productName} по выгодной цене`;
const seoDescription = `На нашем сайте можно купить ${productName} с гарантией качества. Доставка по удобным условиям: ${deliveryLocation}.`;
const seoCanonical = `${process.env.NEXT_PUBLIC_SITE_URL}/products/${productId}`;

return (
  <>
    <NextSeo
      title={seoTitle}
      description={seoDescription}
      canonical={seoCanonical}
      openGraph={{
        title: seoTitle,
        url: seoCanonical,
        description: seoDescription,
      }}
    />
    <YourComponent />
  </>
);

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin/', '/api/'],
    },
    sitemap: 'https://example.com/sitemap.xml',
  };
}

User-agent: [Имя_робота]
Disallow: [Путь_к_запрещенной_области]
Allow: [Путь_к_разрешенной_области_внутри_запрещенной]
Sitemap: [URL_вашей_карты_сайта]

User-agent: *
Disallow: /admin/
Disallow: /private/
Disallow: /tmp/
Allow: /public/assets/
Sitemap: https://example.com/sitemap.xml

User-agent: *
Disallow: /

User-agent: Yandex
Disallow: /cgi-bin
Disallow: /?sort=

User-agent: *
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2023-10-25</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/about</loc>
    <lastmod>2023-10-20</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://example.com/blog/post-1</loc>
    <lastmod>2023-10-26</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.6</priority>
  </url>
</urlset>

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://example.com/sitemap-posts.xml</loc>
    <lastmod>2023-10-26</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap-pages.xml</loc>
    <lastmod>2023-10-25</lastmod>
  </sitemap>
</sitemapindex>

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 1,
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.8,
    },
  ];
}

npm install next-sitemap

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true,
  changefreq: 'daily',
  priority: 0.7,
  sitemapSize: 7000,
  outDir: 'public',
}

{
  "build": "next build",
  "postbuild": "next-sitemap"
}

User-agent: *
Disallow: /admin/
Disallow: /cart/
Sitemap: https://example.com/sitemap.xml

export default function BlogPost({ params }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: 'Заголовок статьи',
    description: 'Описание статьи',
    image: 'https://your-site.com/image.jpg',
    datePublished: '2023-01-01T00:00:00Z',
    author: {
      '@type': 'Person',
      name: 'Автор статьи',
    },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* Остальное содержимое страницы */}
    </>
  );
}

import { ArticleJsonLd } from 'next-seo';

const BlogPostPage = ({ post }) => {
  return (
    <>
      <ArticleJsonLd
        url={`https://your-site.com/blog/${post.slug}`}
        title={post.title}
        description={post.excerpt}
        datePublished={post.publishedAt}
        authorName={post.author.name}
        publisherName="Название вашего сайта"
        publisherLogo="https://your-site.com/logo.png"
        images={[post.image]}
      />
      {/* Остальная часть страницы */}
    </>
  );
};

jsx
import { FAQPageJsonLd } from 'next-seo';

const FAQPage = () => {
  return (
    <>
      <FAQPageJsonLd
        mainEntity={[
          {
            questionName: "Как начать работу?",
            acceptedAnswer: "Чтобы начать, зарегистрируйтесь на нашем сайте.",
          },
          {
            questionName: "Какие методы оплаты вы принимаете?",
            acceptedAnswer: "Мы принимаем кредитные карты и PayPal.",
          },
        ]}
      />
      {/* Содержимое страницы */}
    </>
  );
};

jsx
<NextSeo
  openGraph={{
    title: "Заголовок для соцсетей",
    description: "Описание для соцсетей",
    url: "https://your-site.com/page",
    type: "article",
    article: {
      publishedTime: "2023-01-01T00:00:00Z",
      modifiedTime: "2023-01-02T00:00:00Z",
      authors: ["https://your-site.com/author/john-doe"],
      tags: ["тег1", "тег2"],
    },
    images: [
      {
        url: "https://your-site.com/og-image.jpg",
        width: 800,
        height: 600,
        alt: "Описание изображения",
      },
    ],
  }}
/>

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Явный заголовок для Twitter',
    description: 'Явное описание для Twitter',
    creator: '@username',
    images: ['https://your-site.com/twitter-image.jpg'],
  },
};

<NextSeo
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  }}
  // Явно указываем Twitter данные
  title="Заголовок"
  description="Описание"
  openGraph={{
    images: [
      {
        url: 'https://your-site.com/image.jpg',
        width: 800,
        height: 600,
        alt: 'Alt текст',
      },
    ],
  }}
/>

jsx
import { BreadcrumbJsonLd } from 'next-seo';

const ProductPage = ({ product }) => {
  return (
    <>
      <BreadcrumbJsonLd
        itemListElements={[
          {
            position: 1,
            name: "Главная",
            item: "https://your-site.com",
          },
          {
            position: 2,
            name: "Категория",
            item: "https://your-site.com/category",
          },
          {
            position: 3,
            name: product.name,
            item: `https://your-site.com/product/${product.id}`,
          },
        ]}
      />
      {/* Содержимое страницы */}
    </>
  );
};

jsx
import { SiteLinksSearchBoxJsonLd } from 'next-seo';

const HomePage = () => {
  return (
    <>
      <SiteLinksSearchBoxJsonLd
        url="https://your-site.com"
        potentialActions={[
          {
            target: "https://your-site.com/search?q",
            queryInput: "search_term_string",
          },
        ]}
      />
      {/* Содержимое страницы */}
    </>
  );
};

App Router:
// В layout.tsx или page.tsx
export const metadata = {
  metadataBase: new URL('https://your-domain.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'ru-RU': '/ru-RU',
    },
  },
};

// Для динамических страниц
export async function generateMetadata({ params }) {
  return {
    title: 'Заголовок страницы',
    alternates: {
      canonical: `/blog/${params.slug}`,
    },
  };
}
Pages Router:<NextSeo
  canonical="https://your-site.com/canonical-url"
  languageAlternates={[
    {
      hrefLang: 'ru',
      href: 'https://your-site.com/ru',
    },
  ]}
/>