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

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

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} />
    </>
  );
}

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

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

const BlogPostPage = ({ post }) => {
  return (
    <>
      <ArticleJsonLd
        useAppDir={true} // Если используете Next.js 13+ с директорией app
        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: "Описание изображения",
      },
    ],
  }}
/>
:cite[2]:cite[4]

jsx
<NextSeo
  twitter={{
    handle: "@handle",
    site: "@site",
    cardType: "summary_large_image",
  }}
/>
:cite[2]

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}`,
          },
        ]}
      />
      {/* Содержимое страницы */}
    </>
  );
};
:cite[2]:cite[8]

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",
          },
        ]}
      />
      {/* Содержимое страницы */}
    </>
  );
};
:cite[2]:cite[8]