Как сгенерировать динамическое OG-изображение для каждой страницы в Next.js
Один маршрут может отрисовывать фирменную картинку для соцсетей на каждую страницу по её заголовку и метаданным — без графических редакторов и ручного экспорта. Разбираем паттерн.
Рисовать отдельное изображение для шеринга под каждую страницу не масштабируется. Более удачный подход — один динамический маршрут, который отрисовывает фирменную карточку по требованию, опираясь на заголовок и метаданные самой страницы.
Маршрут opengraph-image
Next.js читает файл opengraph-image в сегменте маршрута и отдаёт то, что тот возвращает, как og:image этого маршрута. Отрисованный через next/og, это просто JSX, превращённый в изображение.
import { ImageResponse } from "next/og";
export default function Image() {
return new ImageResponse(
<div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
{ width: 1200, height: 630 },
);
}Сделайте его индивидуальным для каждой страницы
- Берите заголовок из параметров маршрута или из вашего слоя данных.
- Оформляйте карточку в фирменном акцентном цвете, чтобы вся сеть выглядела единообразно.
- Не выходите за ограничения платформ по размеру, чтобы картинка всегда загружалась.
Навык «OG Image» разворачивает этот маршрут в стиле вашего сайта и прописывает openGraph.images по всем страницам, так что ни один маршрут не делит превью с другим.