Costruisci un componente testa di SEO-friendly per Nextjs / React

Mentre reagire è una potente libreria JavaScript, non include tutti i pezzi necessari per costruire un semplice, funzionante Layout del sito web . NextJS è un framework reagito che consente di creare applicazioni e siti Web renderizzati dal server.

NextJS include anche un numero di strumenti e caratteristiche direttamente dalla scatola come il webpack, Babel, Routing dinamico e prefetching. Soprattutto, ho scoperto che Nextjs è molto seo-friendly.

Questo framework consente di utilizzare il rendering sul lato server, che non solo le app e i tuoi siti Web caricano notevolmente più veloci, ma rende anche i tuoi siti Web reagire molto più facili per i motori di ricerca a gattonare.

NextJS semplifica anche una facile creare un'architettura del sito ben segmentata utilizzando routing dinamico o routing del server personalizzato . Ad esempio, è possibile segmentare facilmente il tuo sito web in diversi silos come / articoli /, / prodotti / prodotti / e / servizi / per una migliore strutturatura dei contenuti.

Meglio di tutti, è possibile utilizzare tutte le cose che reagiscono molto come componenti, proprietà dei componenti e stati componenti per implementare tecniche di ottimizzazione on-page veramente flessibili. In questo articolo, ho intenzione di dettagliare la costruzione di un componente testa ben ottimizzato per reagire.

L'importanza dell'elemento della testa per SEO

Ora prima di entrare su come costruire questo componente capo, parliamo per la prima volta il motivo per cui è importante e cosa stiamo ottimizzando.

L'elemento della testa sul tuo sito web sarà una delle sezioni più importanti quando si tratta di SEO tecnico. Per uno, tutti i metadati del sito Web sono impostati nella testa. Questi tag includono il titolo, la meta Descrizione, le parole chiave della pagina, le informazioni relative all'autore pertinenti e le impostazioni di vista.

L'elemento della testa è anche responsabile della definizione di altri tag importanti come il tuo tag dell'URL canonico, eventuali tag OpenGraph Facebook pertinenti (tag OGB) o schede Twitter e i tag Meta Robots. Ognuno di questi tag è responsabile della trasmissione di informazioni diverse a Google o nei social network in modo che possano capire meglio, indice e condividere i tuoi contenuti.

Avere metadati configurati in modo improprio sul tuo sito web può essere catastrofico per l'ottimizzazione complessiva del sito Web e può sicuramente far sì che le tue classifiche facciano una base.

Ad esempio, due delle peggiori sanzioni che il tuo sito web potrebbe essere dovuto da un punto di vista dell'ottimizzazione on-page è una penalità di "tag duplicata titolo" e una penalità di "meta tag duplicata". Questi due tag sono responsabili di dare il "passo dell'ascensore" del tuo sito web a Google. Diccano anche il testo che un utente vedrà quando il tuo sito web si presenta nei risultati di ricerca di Google.

Se ogni pagina sul tuo sito web ha lo stesso titolo esatto e lo stesso set esatto Descrizione, Google avrà un momento difficile capire cosa riguarda il tuo sito web. Di conseguenza, Google non pagherà troppa attenzione al tuo sito web e sicuramente non lo considererà una proprietà dell'autorità.

Se sei interessato a saperne di più su Technical on-Page SEO , Vedi di più sul mio approccio a Speckyboy .

Ora che capisci un po 'di più sull'elemento della testa e perché è così importante sotto il cappuccio, diamo un'occhiata a come costruire un componente della testa di SEO-friendly per reagire.

Costruisci un componente capo amichevole SEO

Il componente principale del SEO-friendly che i dettagli in questo articolo è specifico per Nextjs. Tuttavia, se si utilizza un diverso quadro reagire o stai usando reagire, è possibile utilizzare Reagire il casco al posto del componente della testa Nextjs.

La prima cosa che vorresti fare è configurare la tua struttura della testa di base. Il codice qui sotto può servire come esempio, ma sentiti libero di aggiungere o rimuovere le cose ad esso come si vede in forma. Al minimo indispensabile, tuttavia la tua testa dovrebbe includere un tag del titolo, tag Meta Descrizione, URL canonico e eventuali tag sociali pertinenti.

& lt; head & gt;
& lt; Titolo & GT; & lt; / Titolo & GT;
& lt; meta name = "Descrizione" content = "" / & gt;
& lt; meta-proprietà = "OG: digita" content = "sito web" / & gt;
& lt; meta Name = "OG: Titolo" Property = "OG: Titolo" Content = "" / & gt;
& lt; meta Name = "OG: Descrizione" Property = "OG: Descrizione" Content = "" / & gt;
& lt; meta-proprietà = "OG: sito_name" content = "" / & gt;
& lt; Meta proprietà = "OG: URL" Content = "" / & gt;
& lt; meta name = "twitter: card" content = "riassunto" / & gt;
& lt; meta name = "twitter: titolo" content = "" / & gt;
& lt; meta Name = "Twitter: Descrizione" Content = {puntelli.desc} / & gt;
& lt; meta name = "twitter: sito" content = "" / & gt;
& lt; meta name = "twitter: creatore" content = "" / & gt;
& lt; lt; link rel = "icona" type = "immagine / png" href = "/ statico / immagini / favicon.ico" / & gt;
& lt; link rel = "Apple-touch-icon" href = "/ statico / immagini / favicon.ico" / & gt;
& lt; link rel = "stilsheet" href = "" / & gt;
& lt; Meta proprietà = "OG: Immagine" content = "" / & gt;
& lt; meta name = "twitter: immagine" content = "" / & gt;
& lt; link rel = "canonico" href = "" / & gt;
& lt; script type = "testo / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt; 

Impostare il componente

Successivamente, ti consigliamo di creare un nuovo file parziale per il tuo componente. Puoi chiamare il file parziale SEO-meta.js. o simili. Questo file dovrebbe essere tenuto nel parziali. directory.

Il tuo componente di partenza sembrerà qualcosa del genere:

 Importa la testa da 'Avanti / Head'
Const Meta = (puntelli) = & GT; (
& lt; head & gt;
& lt; Titolo & GT; & lt; / Titolo & GT;
& lt; meta name = "Descrizione" content = "" / & gt;
& lt; meta-proprietà = "OG: digita" content = "sito web" / & gt;
& lt; meta Name = "OG: Titolo" Property = "OG: Titolo" Content = "" / & gt;
& lt; meta Name = "OG: Descrizione" Property = "OG: Descrizione" Content = "" / & gt;
& lt; meta-proprietà = "OG: sito_name" content = "" / & gt;
& lt; Meta proprietà = "OG: URL" Content = "" / & gt;
& lt; meta name = "twitter: card" content = "riassunto" / & gt;
& lt; meta name = "twitter: titolo" content = "" / & gt;
& lt; meta Name = "Twitter: Descrizione" Content = {puntelli.desc} / & gt;
& lt; meta name = "twitter: sito" content = "" / & gt;
& lt; meta name = "twitter: creatore" content = "" / & gt;
& lt; lt; link rel = "icona" type = "immagine / png" href = "/ statico / immagini / favicon.ico" / & gt;
& lt; link rel = "Apple-touch-icon" href = "/ statico / immagini / favicon.ico" / & gt;
& lt; link rel = "stilsheet" href = "" / & gt;
& lt; Meta proprietà = "OG: Immagine" content = "" / & gt;
& lt; meta name = "twitter: immagine" content = "" / & gt;
& lt; link rel = "canonico" href = "" / & gt;
& lt; script type = "testo / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
)
Esporta Meta predefinita 

Noterai che sto passando puntelli o proprietà, al mio componente. Useremo queste proprietà per popolare i nostri meta tag.

Importa il componente.

Dopo aver impostato il componente di base, è quindi possibile importarlo nelle tue pagine. È possibile importare il componente includendo quanto segue nella parte superiore della tua pagina.

 Importa meta da '../partials/seo-meta.js'

Ora puoi posizionare il componente Meta all'interno della funzione di rendering, proprio come faresti con il componente nativo della testa Nextjs.

Creare le proprietà dei componenti

Ora che hai importato e ha inserito il tuo componente Meta, dovrai configurare le proprietà necessarie per i tuoi metadati. In genere dovresti includere il titolo, la descrizione e l'URL per ogni pagina, ma è anche possibile includere immagini e altri dati secondo necessità.

È inoltre possibile che desideri includere proprietà per i file CSS e JavaScript in modo che tu possa caricarli condizionatamente alle pagine necessarie. Con tutte le proprietà impostate, il tuo componente sembrerebbe qualcosa del genere:

 & lt; meta
Titolo = "Questo è un titolo | Nome del sito Web "
Desc = "Questa è la descrizione"
canonical = "https://www.someurl.com"
css = '/ statico / css / stili.css'
js = '/ static / js / scripts.js'
/ & gt; 

Se stai solo costruendo un sito web statico con NextJS, dovresti essere in grado di popolare le proprietà con il contenuto statico. Tuttavia, se stai caricando pagine da rotte dinamiche e popolando i modelli di pagina con il codice dinamico, ti consigliamo di impostare in modo dinamico queste proprietà.

Il nostro sito web, Nome proprio , utilizza l'API di WordPress come origine dati, ma è possibile utilizzare le istruzioni seguenti utilizzando praticamente qualsiasi API di riposo o graphql.

Quando si richiede la pagina, ti consigliamo di afferrare e restituire i pertinenti metadati e i dati della pagina durante il GetinitialProps () Async funzione. Ciò consentirà quindi di utilizzare i dati dinamici all'interno della funzione di rendering in modo che Google e altri robot possano eseguire la scansione delle informazioni.

A seconda dell'origine dati e di alcuni altri fattori, puoi prendere un approccio diverso per ottenere le proprietà iniziali, ma qui è un approccio di base per iniziare.

Statico Async GetinitialProps (CTX) {
Cost Res = Await Fetch ('// API.Some-url.com/case_studies/?slug=' + ctx.req.params.slug)
const error_code = res.statuscode & gt; 200? res.statuscode: falso;
Const Data = AWait res.json ();
Let URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
Lascia che Meta_title = attendi i dati 
 .Meta_title
Let Meta_Desc = attendere i dati 
 .Meta_Desc
ritorno {
codice di errore,
   case_study: dati,
   meta_title: meta_title,
   meta_desc: meta_desc,
   URL: URL.
}
}

Ora sarai in grado di accedere alle proprietà impostate all'interno della funzione di rendering. Se usato nel tuo codice, sembrerebbero qualcosa del genere.

 & lt; meta
Titolo = {this.props.meta_title}
Desc = {this.props.meta_desc}
canonical = {this.props.url}
css = '/ statico / css / stili.css'
js = '/ static / js / scripts.js'
/ & gt; 

Utilizzare le proprietà nel tuo componente

Il passaggio finale è configurare il componente in modo che utilizzi le proprietà che viene superato. Mentre alcune delle proprietà come il titolo e la descrizione saranno impostate su ogni pagina, altre come CSS e JS potrebbero essere condizionali. Dovrai prenderlo in considerazione nel tuo componente.

Nel nostro esempio, stiamo passando le nostre proprietà al componente usando l'argomento puntelli . Possiamo quindi accedere ai singoli oggetti di scena usando i loro nomi, ad esempio, Props.title. o Props.Desc .

Quando si impostano i blocchi condizionali, puoi prendere un approccio come questo:

 {
props.css & amp; & amp;
& lt; link rel = "stylesheet" href = {`$ {puntelli.css}`} / & gt;
} 

In questo modo, se non c'è set CSS, non imposterà un tag Link vuoto sulla tua pagina. Puoi usare questo stesso approccio per i file JavaScript.

Una volta terminato la popolazione del tuo componente della testa, dovrebbe essere simile a questo:

 Importa la testa da 'Avanti / Head'
Const Meta = (puntelli) = & GT; (
& lt; head & gt;
& lt; title & gt; {puntelli.title} & lt; / title & gt;
& lt; meta name = "Descrizione" Content = {puntelli.desc} / & gt;
& lt; meta-proprietà = "OG: digita" content = "sito web" / & gt;
& lt; Meta NAME = "OG: Titolo" Property = "OG: titolo" contenuto = {puntelli.title} / & gt;
& lt; meta Name = "OG: Descrizione" Proprietà = "OG: Descrizione" Content = {puntelli.desc} / & gt;
& lt; Meta proprietà = "OG: sito_name" content = "nome corretto" / & gt;
& lt; Meta proprietà = "OG: URL" Content = {`$ {puntelli.canonical}`} / & gt;
& lt; meta name = "twitter: card" content = "riassunto" / & gt;
& lt; meta name = "twitter: titolo" contenuto = {puntelli.title} / & gt;
& lt; meta Name = "Twitter: Descrizione" Content = {puntelli.desc} / & gt;
& lt; meta name = "twitter: sito" contenuto = "@ propernounco" / & gt;
& lt; meta Name = "Twitter: Creator" Content = "@ PROPERNOUNCO" / & GT;
& lt; lt; link rel = "icona" type = "immagine / png" href = "/ statico / immagini / favicon.ico" / & gt;
& lt; link rel = "Apple-touch-icon" href = "/ statico / immagini / favicon.ico" / & gt;
{
props.css & amp; & amp;
& lt; link rel = "stylesheet" href = {`$ {puntelli.css}`} / & gt;
}
{
puntelli.image? (
& lt; Meta proprietà = "OG: immagine" contenuto = {`$ {puntelli.image}`} / & gt;
): (
& lt; Meta proprietà = "OG: Immagine" contenuto = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
puntelli.image & amp; & amp;
& lt; meta name = "twitter: immagine" content = {`$ {puntelli.image}`} / & gt;
}
{
puntelli.canonical & amp; & amp;
& lt; link rel = "canonico" href = {`$ {puntelli.canonical}`} / & gt;
}
{
Props.js & amp; & amp;
& lt; script type = "testo / javascript" src = {`$ {props.js}`} & gt; & lt; / script & gt;
}
& lt; / head & gt;
)
Esporta Meta predefinita 

Per saperne di più:

• Sviluppare componenti reagibili resusibili
• 14 delle migliori API JavaScript
• 15 strumenti essenziali JavaScript che dovresti usare