Bygg en SEO-vänlig huvudkomponent för NEXTJS / reagera

Medan reagerar är ett kraftfullt JavaScript-bibliotek, inkluderar det inte alla de delar du behöver bygga en enkel, funktion Webbplatslayout . Nextjs är en reagerande ram som låter dig bygga server-gjorda applikationer och webbplatser med lätthet.

Nextjs innehåller också ett antal verktyg och funktioner direkt ur lådan som webbhylla, Babel, dynamisk routing och prefetching. Viktigast, jag har funnit att Nextjs är väldigt SEO-vänliga.

Denna ram gör att du kan utnyttja serverns återgivning, vilket inte bara gör dina appar och webbplatser laddas betydligt snabbare, men gör också dina reaktionswebbplatser mycket enklare för sökmotorer att krypa.

Nextjs gör det också enkelt att skapa en välsegmenterad webbplatsarkitektur med hjälp av dynamisk routing eller Custom Server Routing . Du kan till exempel enkelt segmentera din webbplats till olika silosiklar / artiklar /, / produkter /, och / tjänster / för bättre innehållsstrukturering.

Bäst av allt kan du använda alla de saker som gör att reagera bra som komponenter, komponentegenskaper och komponenttillstånd för att implementera riktigt flexibla optimeringstekniker på sidan. I den här artikeln ska jag detaljera att bygga en väl optimerad huvudkomponent för reaktion.

Betydelsen av huvudelementet för SEO

Nu innan jag kommer in i hur man bygger den här huvudkomponenten, låt oss först prata om varför det är viktigt och vad vi kommer att optimera.

Huvudelementet på din webbplats kommer att bli en av de viktigaste avsnitten när det gäller teknisk SEO. För en är all webbplats metadata i huvudet. Dessa taggar inkluderar titel, meta beskrivning, sidformat, eventuell relevant författarinformation och visningsinställningar.

Huvudelementet är också ansvarigt för att ställa in andra viktiga taggar som din kanoniska URL-tagg, alla relevanta Facebook OpenGraph-taggar (OG-taggar) eller Twitter-kort och dina Meta Robots-taggar. Var och en av dessa taggar är ansvarig för att transportera olika uppgifter till Google eller sociala nätverk så att de bättre kan förstå, indexera och dela ditt innehåll.

Att ha felaktigt konfigurerad metadata på din webbplats kan vara katastrofala till din totala webbplatsoptimering och kan definitivt orsaka att dina rankningar tar en nosedive.

Till exempel är två av de värsta sanktionerna som din webbplats kan möta en optimeringssynpunkt på sidan en "Duplicate Title Tag" straff och en "duplikat metatag" straff. Dessa två taggar är ansvariga för att ge din webbplats "hisspitch" till Google. De dikterar också texten som en användare kommer att se när din webbplats visar upp i Googles sökresultat.

Om varje sida på din webbplats har samma exakta titel och samma exakta beskrivning, kommer Google att ha svårt att förstå vad din webbplats handlar om. Som ett resultat kommer Google inte att betala för mycket uppmärksamhet åt din webbplats och det kommer definitivt inte att överväga det en myndighetsfastigheter.

Om du är intresserad av att lära dig mer om teknisk på sidan SEO , Se mer på mitt tillvägagångssätt på Speckyboy .

Nu när du förstår lite mer om huvudelementet och varför det är så viktigt under huven, låt oss ta en titt på hur man bygger en seo-vänlig huvudkomponent för att reagera.

Bygg en SEO-vänlig huvudkomponent

Den SEO-vänliga huvudkomponenten som jag detaljerar i den här artikeln är specifik för NEXTJs. Men om du använder en annan reageringsram eller bara använder reagera kan du använda Reagera hjälm i stället för NEXTJS-huvudkomponenten.

Det första du vill göra är att ställa in din grundläggande huvudstruktur. Koden nedan kan fungera som ett exempel, men var god att lägga till eller ta bort saker till det som du tycker är lämplig. Vid det minsta minimumet bör ditt huvud innehålla en titelmärke, Meta Description Tag, Canonical URL och eventuella relevanta sociala taggar.

& lt; huvud & gt;
& lt; titel & gt; & lt; / title & gt;
& lt; meta namn = "Beskrivning" innehåll = "" / & gt;
& lt; meta egendom = "OG: Skriv" innehåll = "hemsida" / & gt;
& LT; Meta Name = "OG: Titel" Fastighet = "OG: Titel" Innehåll = "" / & GT;
& lt; Meta Namn = "OG: Beskrivning" Fastighet = "OG: Beskrivning" Innehåll = "" / & GT;
& lt; meta egendom = "och: site_name" content = "" / & gt;
& lt; meta egendom = "och: url" innehåll = "" / & gt;
& lt; Meta Namn = "Twitter: Kort" innehåll = "Sammanfattning" / & GT;
& lt; meta namn = "Twitter: Titel" innehåll = "" / & gt;
& lt; meta namn = "Twitter: Beskrivning" innehåll = {props.desc} / & gt;
& lt; Meta Name = "Twitter: Site" Content = "" / & GT;
& lt; meta namn = "Twitter: Skapare" innehåll = "" / & gt;
& lt; länk rel = "ikon" typ = "Bild / png" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; länk rel = "Apple-touch-ikon" href = "/ static / bilder / favicon.ico" / & gt;
& lt; länk rel = "stylesheet" href = "" / & gt;
& lt; meta egendom = "OG: Bild" Innehåll = "" / & GT;
& lt; Meta Name = "Twitter: Bild" Innehåll = "" / & GT;
& lt; länk rel = "Canonical" href = "" / & gt;
& lt; skripttyp = "Text / javascript" src = "" & gt; & lt; / script & gt;
& LT; / Head & GT; 

Ställ in komponenten

Därefter vill du skapa en ny partiell fil för din komponent. Du kan ringa den partiella filen seo-meta.js eller liknande. Den här filen ska hållas i partials katalog.

Din startkomponent kommer att se ut så här:

 Importera huvudet från "Nästa / huvud"
CONST META = (PROPS) = & GT; (
& lt; huvud & gt;
& lt; titel & gt; & lt; / title & gt;
& lt; meta namn = "Beskrivning" innehåll = "" / & gt;
& lt; meta egendom = "OG: Skriv" innehåll = "hemsida" / & gt;
& LT; Meta Name = "OG: Titel" Fastighet = "OG: Titel" Innehåll = "" / & GT;
& lt; Meta Namn = "OG: Beskrivning" Fastighet = "OG: Beskrivning" Innehåll = "" / & GT;
& lt; meta egendom = "och: site_name" content = "" / & gt;
& lt; meta egendom = "och: url" innehåll = "" / & gt;
& lt; Meta Namn = "Twitter: Kort" innehåll = "Sammanfattning" / & GT;
& lt; meta namn = "Twitter: Titel" innehåll = "" / & gt;
& lt; meta namn = "Twitter: Beskrivning" innehåll = {props.desc} / & gt;
& lt; Meta Name = "Twitter: Site" Content = "" / & GT;
& lt; meta namn = "Twitter: Skapare" innehåll = "" / & gt;
& lt; länk rel = "ikon" typ = "Bild / png" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; länk rel = "Apple-touch-ikon" href = "/ static / bilder / favicon.ico" / & gt;
& lt; länk rel = "stylesheet" href = "" / & gt;
& lt; meta egendom = "OG: Bild" Innehåll = "" / & GT;
& lt; Meta Name = "Twitter: Bild" Innehåll = "" / & GT;
& lt; länk rel = "Canonical" href = "" / & gt;
& lt; skripttyp = "Text / javascript" src = "" & gt; & lt; / script & gt;
& LT; / Head & GT;
)
Exportera standardmetera 

Du märker att jag passerar rekvisita eller egenskaper, till min komponent. Vi använder dessa egenskaper för att fylla i våra metataggar.

Importera komponenten

När du har konfigurerat din grundläggande komponent kan du sedan importera den till dina sidor. Du kan importera komponenten genom att inkludera följande längst upp på din sida.

 Importera meta från '../partials/seo-meta.js'

Du kan nu placera metakomponenten inom din renderfunktion, precis som du skulle med den nativa Nextjs-huvudkomponenten.

Skapa komponentegenskaperna

Nu när du har importerat och placerat din meta-komponent vill du ställa in de egenskaper du behöver för din metadata. Du bör typiskt inkludera titel, beskrivning och webbadress för varje sida, men du kan också inkludera bilder och andra data efter behov.

Du kanske också vill inkludera egenskaper för CSS och JavaScript-filer så att du kan ladda dem villkorligt på sidor efter behov. Med alla dessa egenskaper skulle din komponent se ut så här:

 & lt; meta
Titel = "Detta är en titel | Webbplatsnamn "
Desc = "Detta är beskrivningen"
Canonical = "https://www.someurl.com"
CSS = '/ static / css / stilar.css'
js = '/ static / js / scripts.js'
/ & gt; 

Om du bara bygger en statisk webbplats med Nextjs, borde du kunna fylla fast egenskaperna med statiskt innehåll. Om du fyller på sidor från dynamiska rutter och fyller på sidmallarna med dynamisk kod, vill du ställa in dessa egenskaper dynamiskt.

Vår websida, Rätt substantiv , använder WordPress API som en datakälla, men du kan använda instruktionerna nedan med ganska mycket vila eller graphql API.

När du begär den sida vill du ta tag och returnera relevanta metadata- och siddata under getinitialprops () async fungera. Detta kommer då att låta dig använda de dynamiska data inom renderfunktionen så att Google och andra robotar kan krypa informationen.

Beroende på din datakälla och några andra faktorer kan du ta ett annat sätt att få de första egenskaperna, men här är ett grundläggande tillvägagångssätt för att komma igång.

statiska async getinitialprops (ctx) {
Const Res = Await hämta ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
const error_code = res.statuscode & gt; 200? res.statuscode: False;
Const Data = Await Res.json ();
Låt URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
Låt meta_title = vänta på data 
 .meta_title
Låt meta_desc = vänta på data 
 .Meta_desc
lämna tillbaka {
felkod,
   Case_study: Data,
   Meta_Title: Meta_Title,
   Meta_DESC: Meta_DESC,
   URL: URL
}
}

Du kommer nu att kunna komma åt de egenskaper du ställer in i din Render-funktion. När de används i din kod skulle de se ut så här.

 & lt; meta
Titel = {This.Props.Meta_Title}
desc = {this.props.meta_desc}
Canonical = {This.Props.url}
CSS = '/ static / css / stilar.css'
js = '/ static / js / scripts.js'
/ & gt; 

Använd egenskaperna i din komponent

Det sista steget är att ställa in din komponent så att den använder de egenskaper som den passerar. Medan några av de egenskaper som titel och beskrivning kommer att ställas på varje sida, kan andra som CSS och JS vara villkorade. Du vill ta hänsyn till detta i din komponent.

I vårt exempel passerar vi våra egenskaper till komponenten med hjälp av argumentet rekvisita . Vi kan sedan få tillgång till de enskilda rekvisita med sina namn, till exempel, PROPS.TITLE eller PROPPS.DESK .

När du ställer in de villkorliga blocken kan du ta ett tillvägagångssätt så här:

 {
PROPS.CSS & AMP; & amp;
& lt; länk rel = "stylesheet" href = {`$ {props.css}`} / & gt;
} 

På så sätt, om det inte finns någon CSS-uppsättning, kommer du inte att ställa in en tom länket på din sida. Du kan använda samma tillvägagångssätt för JavaScript-filerna.

När du är klar med att fylla på huvudkomponenten ska det se ut så här:

 Importera huvudet från "Nästa / huvud"
CONST META = (PROPS) = & GT; (
& lt; huvud & gt;
& lt; titel & gt; {props.title} & lt; / title & gt;
& lt; meta namn = "Beskrivning" innehåll = {props.desc} / & gt;
& lt; meta egendom = "OG: Skriv" innehåll = "hemsida" / & gt;
& LT; Meta Name = "OG: Titel" Fastighet = "OG: Titel" Innehåll = {PROPS.TITLE} / & GT;
& lt; Meta Namn = "OG: Beskrivning" Fastighet = "OG: Beskrivning" Innehåll = {props.desc} / & gt;
& lt; meta egendom = "och: site_name" content = "Proper substantiv" / & gt;
& lt; meta egendom = "och: url" innehåll = {`$ {props.canonical}`} / & gt;
& lt; Meta Namn = "Twitter: Kort" innehåll = "Sammanfattning" / & GT;
& LT; Meta Namn = "Twitter: Titel" Innehåll = {PROPS.TITLE} / & GT;
& lt; meta namn = "Twitter: Beskrivning" innehåll = {props.desc} / & gt;
& lt; Meta Name = "Twitter: Site" Innehåll = "@ Propernounco" / & GT;
& lt; Meta Name = "Twitter: Skapare" Innehåll = "@ Propernounco" / & GT;
& lt; länk rel = "ikon" typ = "Bild / png" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; länk rel = "Apple-touch-ikon" href = "/ static / bilder / favicon.ico" / & gt;
{
PROPS.CSS & AMP; & amp;
& lt; länk rel = "stylesheet" href = {`$ {props.css}`} / & gt;
}
{
PROPS.IMAGE? (
& lt; meta egendom = "OG: Bild" Innehåll = {`$ {PROPS.Image}`} / & GT;
): (
& lt; Meta Property = "OG: Bild" Innehåll = "https://www.propernoun.co/Static/images/Proper-noun-social.png" / & gt;
)
}
{
PROPS.IMAGE & AMP; & amp;
& lt; Meta Name = "Twitter: Bild" Innehåll = {`$ {PROPS.Image}`} / & GT;
}
{
Props.Canonical & Amp; & amp;
& lt; länk rel = "canonical" href = {`$ {props.canonical}`} / & gt;
}
{
Props.js & amp; & amp;
& LT; skripttyp = "Text / javascript" src = {`$ {props.js}`} & gt; & lt; / script & gt;
}
& LT; / Head & GT;
)
Exportera standardmetera 

Läs mer:

• Utveckla resurserbara reagerande komponenter
• 14 av de bästa Javascript API
• 15 Essential JavaScript-verktyg som du ska använda