SEO-оптимизация

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Страница | Ваш проект",
  description: "Описание вашей страницы для поисковых систем",
  keywords: ["ключевое слово 1", "ключевое слово 2"],
};

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

  if (!post) {
    return {
      title: "Пост не найден | Блог",
      description: "Запрашиваемый пост не был найден.",
    };
  }

  return {
    title: `${post.title} | Блог проекта`,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://yourwebsite.com/blog/${post.slug}`,
      siteName: "Название вашего блога",
      locale: "ru_RU",
      type: "article",
      publishedTime: post.createdAt.toISOString(),
      authors: ["Ваша команда"],
      images: post.image ? [{ url: post.image, width: 1200, height: 630, alt: post.title }] : [],
    },
    // ...Другие метаданные
  };
}

export const metadata: Metadata = {
  title: {
    template: "%s | Ваш проект",
    default: "Ваш проект - Краткое описание",
  },
  description: "Общее описание вашего проекта",
};

export const metadata: Metadata = {
  // Обычные метаданные
  title: "Заголовок страницы",
  description: "Описание страницы",
  
  // Open Graph метаданные
  openGraph: {
    title: "Заголовок для соцсетей",
    description: "Описание для соцсетей",
    url: "https://yourwebsite.com/page",
    siteName: "Название сайта",
    locale: "ru_RU",
    type: "website",
    images: [
      {
        url: "https://yourwebsite.com/images/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "Описание изображения",
      },
    ],
  },
  
  // Twitter карточки
  twitter: {
    card: "summary_large_image",
    title: "Заголовок для Twitter",
    description: "Описание для Twitter",
    images: ["https://yourwebsite.com/images/twitter-image.jpg"],
    creator: "@username",
  },
};

// Компонент страницы блога
export default function BlogPost({ post }) {
  return (
    <>
      {/* Основное содержимое страницы */}
      <article>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </article>
      
      {/* JSON-LD Schema для SEO */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            headline: post.title,
            description: post.description,
            image: post.image,
            datePublished: post.createdAt.toISOString(),
            dateModified: post.updatedAt.toISOString(),
            author: {
              "@type": "Person",
              name: post.author.name,
            },
            publisher: {
              "@type": "Organization",
              name: "Название вашей организации",
              logo: {
                "@type": "ImageObject",
                url: "https://yourwebsite.com/logo.png",
              },
            },
            mainEntityOfPage: {
              "@type": "WebPage",
              "@id": `https://yourwebsite.com/blog/${post.slug}`,
            },
            keywords: post.tags?.join(", ") || "",
          }),
        }}
      />
    </>
  );
}

# Установка пакета
npm install next-sitemap --save-dev

# Создание файла конфигурации next-sitemap.config.js
module.exports = {
  siteUrl: 'https://yourwebsite.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  exclude: ['/admin/*', '/dashboard/*'],
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://yourwebsite.com/server-sitemap.xml',
    ],
    policies: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/admin', '/dashboard'],
      },
    ],
  },
  // Дополнительные опции для динамических маршрутов
  transform: async (config, path) => {
    // Пользовательская логика для определения приоритета и частоты обновления
    return {
      loc: path, // URL страницы
      changefreq: config.changefreq, // частота обновления
      priority: config.priority, // приоритет
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
}

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

// app/server-sitemap.xml/route.ts
import { getServerSideSitemap } from 'next-sitemap';
import { getAllPosts } from '@/lib/blog';

export async function GET() {
  const posts = getAllPosts();
  
  const sitemapEntries = posts.map((post) => ({
    loc: `https://yourwebsite.com/blog/${post.slug}`,
    lastmod: post.updatedAt || post.createdAt,
    changefreq: 'weekly',
    priority: 0.7,
  }));
  
  return getServerSideSitemap(sitemapEntries);
}

export const metadata: Metadata = {
  // Другие метаданные
  
  // Канонический URL
  alternates: {
    canonical: 'https://yourwebsite.com/page',
  },
}

import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <Image
      src="/images/example.jpg"
      alt="Описательный текст изображения"
      width={800}
      height={600}
      placeholder="blur" // Опционально, для эффекта блюра при загрузке
      blurDataURL="data:image..." // Опционально, базовые данные для превью
      priority={true} // Опционально, для приоритетной загрузки (например, для hero изображений)
    />
  );
}