← Wszystkie wpisy
5 min czytania

Wygeneruj dynamiczny obraz OG dla każdej podstrony w Next.js

Jedna trasa potrafi wyrenderować firmowy obraz społecznościowy dla każdej podstrony na podstawie jej tytułu i metadanych — bez narzędzia graficznego, bez ręcznego eksportu. Oto wzorzec.

Projektowanie osobnego obrazu do udostępniania dla każdej podstrony się nie skaluje. Lepszym wzorcem jest jedna dynamiczna trasa, która na żądanie rysuje firmową kartę na podstawie tytułu i metadanych każdej podstrony.

Trasa opengraph-image

Next.js odczytuje plik opengraph-image w segmencie trasy i serwuje to, co zwraca, jako og:image danej trasy. Renderowany za pomocą next/og, to po prostu JSX narysowany do obrazu.

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

Zrób go osobnym dla każdej podstrony

  • Pobierz tytuł z parametrów trasy lub z warstwy danych.
  • Ostyluj kartę firmowym kolorem akcentu, by cała witryna sprawiała spójne wrażenie.
  • Zmieść się w limitach rozmiaru platformy, by zawsze się ładował.

Umiejętność Obraz OG tworzy szkielet tej trasy ostylowany pod Twoją witrynę i wpina openGraph.images we wszystkie podstrony, dzięki czemu żadne dwie trasy nie dzielą tego samego podglądu.

Wygeneruj dynamiczny obraz OG dla każdej podstrony w Next.js