5 dk okuma
Next.js'te her sayfa için dinamik bir OG görseli üretin
Tek bir rota, her sayfanın başlığından ve meta verisinden ona özel markalı bir sosyal görsel oluşturabilir — tasarım aracı yok, manuel dışa aktarma yok. İşte bu desen.
Her sayfa için ayrı bir paylaşım görseli tasarlamak ölçeklenmez. Daha iyi desen, her sayfanın kendi başlığından ve meta verisinden markalı bir kartı isteğe bağlı çizen tek bir dinamik rotadır.
opengraph-image rotası
Next.js, bir rota segmentindeki bir opengraph-image dosyasını okur ve döndürdüğü her ne ise onu o rotanın og:image'i olarak sunar. next/og ile oluşturulan bu, aslında bir görsele çizilmiş JSX'ten ibarettir.
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 },
);
}Sayfaya özel hale getirin
- Başlığı rotanın parametrelerinden veya veri katmanınızdan çekin.
- Ağın tutarlı hissettirmesi için kartı marka vurgu renginizle temalandırın.
- Her zaman yüklenmesi için platform boyut sınırlarının altında tutun.
OG Görsel yeteneği, bu rotayı sitenize temalandırılmış şekilde iskeletlendirir ve openGraph.images'i sayfalarınız boyunca bağlar; böylece iki rota aynı önizlemeyi paylaşmaz.