import { Metadata } from 'next';
interface Props {
params: { id: string };
}
async function getProduct(id: string) {
const res = await fetch(`https://api.exemplu.ro/products/${id}`, {
next: { revalidate: 3600 }
});
return res.json();
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const product = await getProduct(params.id);
return {
title: `${product.title} | Magazinul Meu`,
description: product.description,
openGraph: {
title: product.title,
description: product.description,
images: [{ url: product.imageUrl }],
},
};
}Salutare! Azi vorbim despre cum facem SEO dinamic în Next.js 16 fără să ne prindem urechile în server-side rendering. Trecem direct prin generateMetadata și cum legăm JSON-LD-ul de datele reale, ca să nu mai vezi erori ciudate în Google Search Console.
Cum funcționează de fapt generateMetadata
Am avut acum vreo trei luni un proiect, un catalog de produse cu peste 12.000 de pagini dinamice. Proprietarul voia SEO perfect, imagini de share pe Facebook personalizate pentru fiecare produs și microdate de tip Produs. În Next.js, chestia asta se rezolvă elegant cu generateMetadata, dar vine cu un cost ascuns pe care mulți îl ignoră.
Next.js rulează funcția asta pe server înainte de a trimite orice byte de HTML către client. Asta înseamnă că dacă API-ul tău de unde iei datele are o latență de 500ms, utilizatorul va aștepta acele 500ms în plus doar ca să înceapă descărcarea paginii.
Sfatul meu de pățit: folosiți fetch nativ cu opțiuni de cache sau React cache dacă folosiți un ORM direct în server components. Next.js face dedublarea request-urilor (request deduping) automat. Dacă apelezi același endpoint și în generateMetadata și în componenta de pagină, baza de date primește o singură interogare. Am economisit cam 30% din timpul de TTFB (Time to First Byte) doar asigurându-mă că request-urile sunt dedublate corect.
Imaginile Open Graph dinamice
Pentru imagini OG dinamice, cel mai simplu e să folosești ruta specială opengraph-image.tsx în același director cu pagina ta. Next.js se ocupă de generarea imaginii folosind satori sub capotă.
Dar atenție la trade-off-uri. Satori e foarte bun pentru că scrii HTML/CSS și scoate PNG, însă suportul pentru proprietățile CSS e limitat. Am pierdut vreo 4 ore încercând să aliniez un text cu flexbox doar ca să aflu că anumite proprietăți de shorthand nu sunt suportate de motorul lor de randare. Sfatul meu? Păstrați design-ul imaginii OG cât mai simplu: un logo, titlul produsului și eventual un preț. Nu încercați să faceți layout-uri complexe acolo.
Structured Data (JSON-LD) fără bătăi de cap
Pentru JSON-LD, adică acele date structurate care îi spun lui Google exact ce preț are produsul sau ce review-uri a primit, nu avem nevoie de generateMetadata. Cel mai curat mod este să injectezi un tag <script> direct în componenta de pagină.
Multe ghiduri de pe net îți zic să pui asta în root layout, dar e mult mai greu de gestionat când datele vin dinamic pe fiecare pagină de produs. Punând scriptul direct în componenta paginii, totul devine izolat și ușor de testat. Am văzut îmbunătățiri masive la indexare de când am trecut pe structura asta curată.
Voi cum gestionați randarea imaginilor OG în proiectele mari? Mergeți pe satori sau aveți un serviciu extern care le generează asincron?