Open Graph и динамические OG-картинки

OG-теги не влияют на ранжирование, но решают, кликнет ли кто-то по вашей ссылке в LinkedIn, Slack, Telegram или X. Теги — через Metadata API:

export const metadata: Metadata = {
  openGraph: {
    title: "SEO-чеклист для Next.js",
    description: "Все слои SEO в App Router.",
    type: "article",
    images: [{ url: "/og/next-seo-checklist.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
  },
};

Недооценённая фича — генерируемые OG-картинки. Положите файл opengraph-image.tsx рядом с любым роутом, и Next.js отрендерит картинку 1200×630 на edge — не нужен дизайнер для каждого поста:

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function OgImage({ params }) {
  const post = await getPost(params.slug);
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          height: "100%",
          justifyContent: "center",
          padding: 80,
          background: "#0a0a0a",
          color: "#fff",
        }}
      >
        <div style={{ fontSize: 64, fontWeight: 700 }}>{post.title}</div>
        <div style={{ fontSize: 28, marginTop: 24, color: "#a1a1aa" }}>
          example.com/blog
        </div>
      </div>
    ),
    size,
  );
}

Чеклист:

• OG title/description/image на каждой «расшариваемой» странице
• Картинка 1200×630; текст на ней читается в размере превью
• twitter.card установлен в summary_large_image
• Превью проверено в opengraph.xyz или LinkedIn Post Inspector