Next.js SEO
Come aggiungere JSON-LD in Next.js: schemi per articoli, prodotti, software e breadcrumb
Aggiungi JSON-LD sicuro e accurato alle pagine App Router di Next.js con esempi Article, Product, SoftwareApplication e BreadcrumbList.
I dati strutturati devono essere una rappresentazione tipizzata della pagina visibile agli utenti. Non sono un secondo canale di marketing in cui riempire i fatti mancanti con ipotesi ottimistiche.
Scegli l'entità prima dello schema
Chiediti cosa rappresenta principalmente la pagina. Una notizia o un post del blog può essere Article. Un articolo acquistabile può essere Product con Offer. Una landing page di software può descrivere SoftwareApplication. BreadcrumbList descrive la gerarchia di navigazione e può accompagnare un'altra entità principale.
Non scegliere un tipo perché il suo aspetto nei risultati di ricerca è attraente. I requisiti di idoneità dei risultati vanno oltre la validità del JSON e pubblicare markup non garantisce un risultato avanzato. Il primo obiettivo è una descrizione accurata leggibile dalle macchine e coerente con la pagina visibile.
Renderizza JSON-LD sul server
Crea l'oggetto in un Server Component usando lo stesso record che renderizza la pagina. Serializzalo in uno script con type application/ld+json. Sostituisci i caratteri minore di nel valore serializzato, così le stringhe controllate dall'utente non possono chiudere l'elemento script e iniettare markup.
Mantieni piccolo l'helper. Deve serializzare i dati in sicurezza, non decidere i fatti commerciali. Crea oggetti Article, Product o SoftwareApplication in funzioni tipizzate che validino i campi obbligatori e omettano valori facoltativi sconosciuti.
export function JsonLd({ data }) {
const json = JSON.stringify(data).replaceAll("<", "\u003c");
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: json }}
/>
);
}Descrivi un articolo
Usa titolo canonico, descrizione, date di pubblicazione e modifica, autore, editore, immagine principale e URL della pagina principale. Aggiorna dateModified solo per una modifica sostanziale dell'articolo. Ricompilare tutto il sito non è una revisione editoriale.
L'autore deve corrispondere alla firma visibile. Se la pagina accredita un'organizzazione, rappresenta l'organizzazione; se accredita una persona, usa quella persona. Collega pagine stabili dell'autore o dell'editore quando disponibili e mantieni assoluto l'URL del logo.
const article = {
"@context": "https://schema.org",
"@type": "Article",
headline: post.title,
description: post.excerpt,
datePublished: post.publishedAt,
dateModified: post.updatedAt,
mainEntityOfPage: SITE_URL + "/blog/" + post.slug,
author: { "@type": "Organization", name: "Acme" },
};Descrivi un prodotto acquistabile
I dati Product possono includere nome, descrizione, immagini, SKU, marchio e offerte. I valori Offer come prezzo, valuta, URL, condizione e disponibilità devono corrispondere a ciò che l'acquirente può vedere e acquistare. Generali dallo stesso record commerciale usato dalla pagina.
Le varianti richiedono un modello chiaro. Non pubblicare prezzi contraddittori come un'unica offerta senza spiegare l'intervallo e non dichiarare InStock se il checkout rifiuta l'articolo. Recensioni e valutazioni aggregate devono provenire da recensioni reali e visibili e rispettare le politiche di ricerca pertinenti.
const product = {
"@context": "https://schema.org",
"@type": "Product",
name: item.name,
image: item.images,
sku: item.sku,
offers: {
"@type": "Offer",
price: item.price.amount,
priceCurrency: item.price.currency,
availability: item.inStock
? "https://schema.org/InStock"
: "https://schema.org/OutOfStock",
},
};Descrivi onestamente un'applicazione SaaS
SoftwareApplication può identificare nome dell'applicazione, categoria, sistema operativo, URL e descrizione. Aggiungi Offer solo se prezzo e condizioni corrispondono a un'opzione visibile. Se il prezzo varia o richiede un contatto, rappresentalo accuratamente, senza forzare un'offerta fuorviante a prezzo zero.
I dati strutturati non sostituiscono una pagina prodotto chiara. La pagina visibile deve spiegare funzione, pubblico, caratteristiche, vincoli, percorso dei prezzi e azione successiva. Ometti affermazioni come valutazioni o premi se pagina ed evidenze non le sostengono.
Valida dati e comportamento in caso di errore
Valida sintassi JSON, struttura dello schema e requisiti dei risultati di ricerca, poi confronta ogni valore rilevante con la pagina visibile. Verifica virgolette, parentesi angolari, Unicode, immagini mancanti, prezzo assente, prodotti esauriti, articoli non pubblicati e URL canonici modificati.
Se manca un campo facoltativo, di solito va omessa la proprietà. Se manca un fatto commerciale obbligatorio, la pagina potrebbe non essere pronta per quello schema. Registra gli errori di validazione durante sviluppo e acquisizione dei contenuti, senza restituire valori predefiniti inventati.
Verifica i dati strutturati sulla route promossa
Adios permette allo stesso rilascio Next.js di servire pagina visibile e JSON-LD da un unico ambiente di esecuzione persistente. Distribuisci la candidata, recupera la route generata e valida lo script nell'HTML effettivo. I log della compilazione mostrano errori di serializzazione o tipi; quelli dell'ambiente di esecuzione aiutano a individuare record che falliscono solo con dati di produzione.
Dopo il successo della verifica dello stato, mantieni dominio personalizzato e TLS gestito associati alla versione promossa. Ripeti la validazione sull'URL canonico, perché host, reindirizzamenti, valori di ambiente e URL delle immagini possono differire da un test locale.
env:
NEXT_PUBLIC_SITE_URL: https://www.example.com
runtime:
name: node@24
port: 3000
health_path: /api/health