I titoli delle pagine, i meta tag e le meta descrizioni sono importanti per la SEO. Sono le prime cose che un utente vede sulla SERPS e determinano se fa clic sul tuo sito web. È quindi importante ottimizzare i titoli, i meta tag e la descrizione del tuo sito web.
In Next.js, li aggiungi tramite il componente head personalizzato. Puoi aggiungerli su tutte le pagine dell'applicazione o personalizzarli per ogni pagina.
Aggiunta di un tag Global Head a tutte le pagine Next.js
Next.js fornisce _app.js per inizializzare le pagine. Puoi usarlo per creare meta tag condivisi su tutte le pagine.
importare '../styles/globals.css'
importare Testa da 'successivo/testa'funzioneMiaApp({Componente, pageProps}) {
ritorno <>
<Testa>
<nome meta="autore" contenuto="John Doe"/>
</Head>
<Componente {...pageProps} />
</>
}
esportarepredefinito MiaApp
Se desideri che una pagina abbia un titolo e una descrizione personalizzati, aggiungi il componente head e Next.js lo utilizzerà al posto di quello predefinito nel componente App.
Aggiunta di meta tag e descrizione a una pagina Next.js specifica
I meta tag e le descrizioni statici sono adatti per le pagine il cui contenuto rimane lo stesso, ad esempio una home page.
Apri il file /pages/index.js e modifica il tag head con il titolo e la descrizione appropriati.
importare Testa da "successivo/testa";cost Inizio= () => {
ritorno (
<>
<Testa>
<titolo>Blog</title>
<nome meta="finestra" contenuto="scala-iniziale=1.0, larghezza=larghezza-dispositivo" />
<nome meta='descrizione' contenuto='Articoli di programmazione'/>
</Head>
<principale>
<h1>Benvenuti nel mio blog!</h1>
</main>
</>
);
};
esportarepredefinito Casa;
Si accede al componente Head importandolo da next/head. Funziona aggiungendo elementi al tag head di una pagina HTML. A seconda di dove posizioni questo componente, i meta tag e la descrizione saranno disponibili nell'intera applicazione o su singole pagine.
L'aggiunta del titolo, della larghezza del viewport e della descrizione nel file _app.js assicura che tutte le pagine abbiano gli stessi metadati.
Questa pagina ha contenuto statico, ma a volte potresti voler creare pagine che consumano contenuto dinamico.
Aggiunta di meta titolo e descrizioni dinamici a una pagina Next.js
A seconda del caso d'uso, puoi utilizzare getStaticProps(), getStaticPaths() o getServerSideProps() per recuperare i dati in Next.js. Questi dati determinano il contenuto della pagina. Usalo per creare i metadati per la pagina.
Ad esempio, la creazione dei metadati per l'applicazione Next.js che esegue il rendering dei post del blog sarebbe noiosa.
Il modo consigliato è creare una pagina dinamica che riceva un identificatore che puoi utilizzare per recuperare il contenuto del blog. È quindi possibile utilizzare questo contenuto nel componente head.
importare { getAllPosts, getSinglePost } da "../../utils/mdx";
importare Testa da "successivo/testa";cost Post = ({ titolo, descrizione, contenuto }) => {
ritorno (
<>
<Testa>
<titolo>{titolo}</title>
<nome meta="descrizione" contenuto={descrizione} />
</Head>
<principale>{/* contenuto della pagina */}</main>
</>
);
};esportarecost getStaticProps = asincrono ({ param }) => {
// ottieni un singolo post
cost posta = aspetta getSinglePost (params.id, "post");ritorno {
oggetti di scena: {... post },
};
};esportarecost getStaticPath = asincrono () => {
// Recupera tutti i post
const percorsi = getAllPosts("post").map(({ id }) => ({ parametri: { id } }));ritorno {
sentieri,
ricaderci: falso,
};
};
esportarepredefinito Inviare;
La funzione getStaticProps passa i dati del post al componente Post come oggetti di scena. Il componente Post destruttura il titolo, la descrizione e il contenuto dagli oggetti di scena. Il componente head utilizza quindi il titolo e la descrizione nei meta tag.
Next.js è un framework ottimizzato
Hai appena imparato a utilizzare il componente head per aggiungere meta titoli e descrizioni a un progetto Next.js. Usa questa conoscenza per creare intestazioni SEO-friendly, scalare le SERP e attirare più visitatori sul tuo sito.
Oltre al componente head, Next.js fornisce altri componenti come Link e Image. Questi componenti sono ottimizzati fuori dagli schemi, rendendo più semplice la creazione di siti Web veloci e ottimizzati per la SEO.
