Bygg en SEO-vennlig hode komponent for NextJs / Reaging

Mens reagere er et kraftig JavaScript-bibliotek, inneholder det ikke alle brikkene du trenger for å bygge en enkel, fungerende Nettstedslayout . NextJs er et reagert rammeverk som lar deg bygge server-gjengitte applikasjoner og nettsteder med letthet.

NextJs inneholder også en rekke verktøy og funksjoner rett ut av boksen som WebPack, Babel, Dynamic Routing og Prefetching. Viktigst, jeg har funnet ut at NextJs er veldig seo-vennlig.

Dette rammeverket lar deg bruke server-side gjengivelse, som ikke bare gjør at appene dine og nettstedene lastes betydelig raskere, men gjør også reakt-nettstedene dine mye lettere for søkemotorer å krype.

NextJs gjør det også enkelt å lage en velgmentet nettstedarkitektur ved å bruke dynamisk ruting eller Egendefinert serverruting . For eksempel kan du enkelt segmentere nettstedet ditt til forskjellige siloer som / artikler /, / produkter /, og / tjenester / for bedre innholdsstrukturering.

Best av alt, du kan bruke alle de tingene som gjør reagere gode som komponenter, komponentegenskaper og komponentstater for å implementere virkelig fleksible optimaliseringsteknikker på side. I denne artikkelen skal jeg detaljere å bygge en godt optimalisert hode komponent for reagere.

Betydningen av hodet elementet for SEO

Nå før jeg kommer inn på hvordan du bygger denne hodekomponenten, la oss først snakke om hvorfor det er viktig og hva vi vil optimalisere.

Hodelementet på nettstedet ditt kommer til å være en av de viktigste avsnittene når det gjelder teknisk SEO. For en, er alle nettstedet metadata satt i hodet. Disse kodene inkluderer tittel, meta beskrivelse, side søkeord, relevant forfatterinformasjon og visningsporteinnstillinger.

Hodelementet er også ansvarlig for å sette andre viktige koder som din kanoniske URL-tagger, eventuelle relevante Facebook-OpenGraph-tagger (OG-koder) eller Twitter-kort, og Meta Robots-tagger. Hver av disse kodene er ansvarlige for å formidle forskjellig informasjon til Google eller sosiale nettverk, slik at de bedre kan forstå, indeksere og dele innholdet ditt.

Å ha feil konfigurert metadata på nettstedet ditt kan være katastrofalt for din generelle nettstedoptimalisering og kan definitivt føre til at rangeringene dine tar en nosedive.

For eksempel, to av de verste straffer som nettstedet ditt kan møte fra et sider på siden, er en "duplikat tittel tag" straff og en "duplikat meta tag" straff. Disse to kodene er ansvarlige for å gi nettstedets 'heisbane' til Google. De dikterer også teksten som en bruker vil se når nettstedet ditt vises i Google-søkeresultater.

Hvis hver side på nettstedet ditt har samme eksakte tittel og samme eksakte beskrivelse sett, vil Google ha en tøff tid å forstå hva nettstedet ditt handler om. Som et resultat, vil Google ikke betale for mye oppmerksomhet til nettstedet ditt, og det vil definitivt ikke vurdere det en autoritetseiendom.

Hvis du er interessert i å lære mer om teknisk på siden av SEO , Se mer om min tilnærming på Speckyboy .

Nå som du forstår litt mer om hodelementet og hvorfor det er så viktig under hetten, la oss ta en titt på hvordan du bygger en seo-vennlig hode komponent for reagere.

Bygg en SEO-vennlig hode komponent

Den SEO-vennlige hode komponenten som jeg beskriver i denne artikkelen er spesifikk for NextJs. Men hvis du bruker et annet reagert rammeverk eller bare bruker reagere, kan du bruke Reagere hjelm i stedet for NextJs Head-komponenten.

Det første du vil gjøre er å sette opp din grunnleggende hodestruktur. Koden nedenfor kan tjene som et eksempel, men gjerne legge til eller fjerne ting på det som du passer. På det minste minimum, bør hodet ditt inneholde en tittel-tag, Meta Beskrivelse Tag, Canonical URL og eventuelle relevante sosiale koder.

& lt; head & gt;
& lt; title & gt; & lt; / title & gt;
& lt; meta navn = "Beskrivelse" Content = "" / & gt;
& lt; meta property = "og: type" content = "website" / & gt;
& lt; Meta Name = "Og: Tittel" Eiendom = "OG: Tittel" Content = "" / & gt;
& lt; Meta Name = "Og: Beskrivelse" Eiendom = "OG: Beskrivelse" Content = "" / & gt;
& lt; meta property = "og: site_name" content = "" / & gt;
& lt; meta property = "og: url" content = "" / & gt;
& lt; meta navn = "Twitter: kort" innhold = "sammendrag" / & gt;
& lt; Meta Name = "Twitter: Tittel" Content = "" / & gt;
& lt; Meta Name = "Twitter: Beskrivelse" Content = {Props.desc} / & GT;
& lt; meta navn = "Twitter: Site" Content = "" / & gt;
& lt; Meta Name = "Twitter: Creator" Content = "" / & gt;
& lt; link rel = "ikon" type = "bilde / png" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; link rel = "apple-touch-ikon" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; link rel = "Stylesheet" href = "" / & gt;
& lt; meta property = "og: image" content = "" / & gt;
& lt; Meta Name = "Twitter: Image" Content = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "tekst / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt; 

Sett opp komponenten

Deretter vil du opprette en ny delvis fil for komponenten din. Du kan ringe den delvise filen SEO-META.JS. eller liknende. Denne filen skal holdes i delvis katalog.

Din startkomponent vil se slik ut:

 Importer hodet fra 'Neste / Head'
const meta = (rekvisitter) = & gt; (
& lt; head & gt;
& lt; title & gt; & lt; / title & gt;
& lt; meta navn = "Beskrivelse" Content = "" / & gt;
& lt; meta property = "og: type" content = "website" / & gt;
& lt; Meta Name = "Og: Tittel" Eiendom = "OG: Tittel" Content = "" / & gt;
& lt; Meta Name = "Og: Beskrivelse" Eiendom = "OG: Beskrivelse" Content = "" / & gt;
& lt; meta property = "og: site_name" content = "" / & gt;
& lt; meta property = "og: url" content = "" / & gt;
& lt; meta navn = "Twitter: kort" innhold = "sammendrag" / & gt;
& lt; Meta Name = "Twitter: Tittel" Content = "" / & gt;
& lt; Meta Name = "Twitter: Beskrivelse" Content = {Props.desc} / & GT;
& lt; meta navn = "Twitter: Site" Content = "" / & gt;
& lt; Meta Name = "Twitter: Creator" Content = "" / & gt;
& lt; link rel = "ikon" type = "bilde / png" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; link rel = "apple-touch-ikon" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; link rel = "Stylesheet" href = "" / & gt;
& lt; meta property = "og: image" content = "" / & gt;
& lt; Meta Name = "Twitter: Image" Content = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "tekst / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
)
Eksporter standard Meta 

Du vil legge merke til at jeg går forbi Rekvisitter eller egenskaper, til min komponent. Vi bruker disse egenskapene til å fylle ut våre Meta-koder.

Importer komponenten

Når du har konfigurert din grunnleggende komponent, kan du deretter importere den til sidene dine. Du kan importere komponenten ved å inkludere følgende øverst på siden din.

 Import Meta fra '../partials/seo-meta.js'

Du kan nå plassere Meta-komponenten i din Render-funksjon, akkurat som du ville med den innfødte NextJs Head-komponenten.

Lag komponentegenskapene

Nå som du har importert og plassert Meta-komponenten, vil du sette opp egenskapene du trenger for din metadata. Du bør typisk inkludere tittel, beskrivelse og URL for hver side, men du kan også inkludere bilder og andre data som nødvendig.

Du vil kanskje også inkludere egenskaper for CSS og JavaScript-filer, slik at du kan laste dem på sider etter behov. Med alle disse egenskapene sett, vil komponenten se ut som dette:

 & lt; meta
tittel = "Dette er en tittel | Nettstedsnavn "
desc = "Dette er beskrivelsen"
canonical = "https://www.someurl.com"
CSS = '/ Static / CSS / Styles.css'
js = '/ static / js / scripts.js'
/ & gt; 

Hvis du bare bygger et statisk nettsted med NextJs, bør du kunne fylle egenskapene med statisk innhold. Men hvis du laster sider fra dynamiske ruter og fyller sidemaler med dynamisk kode, vil du sette disse egenskapene dynamisk.

Vår nettside, Riktig substantiv , Bruker WordPress API som en datakilde, men du kan bruke instruksjonene nedenfor med stort sett hvilemodus eller grafql API.

Når du ber om siden, vil du ta tak i og returnere de relevante metadata- og sidedataene under Getinitialprops () Async funksjon. Dette vil da la deg bruke de dynamiske dataene i Render-funksjonen slik at Google og andre roboter kan krype informasjonen.

Avhengig av datakilden din og noen få andre faktorer, kan du ta en annen tilnærming for å få de første egenskapene, men her er en grunnleggende tilnærming for å komme i gang.

Static Async GetiniTialprops (CTX) {
const res = venter fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
const error_code = res.statuscode & gt; 200? res.statuscode: false;
const data = venter res.json ();
La URL = 'https: //' + ctx.req.heads.host + '/' + ctx.req.params.slug
la meta_title = venter data 
 .meta_title
la meta_desc = venter data 
 .meta_desc
komme tilbake {
feil kode,
   case_study: data,
   Meta_title: Meta_title,
   Meta_desc: Meta_DESC,
   URL: URL.
}
}

Du vil nå kunne få tilgang til egenskapene du angir i din Render-funksjon. Når de brukes i koden, ville de se slik ut.

 & lt; meta
tittel = {this.props.meta_title}
desc = {this.props.meta_desc}
canonical = {this.props.url}
CSS = '/ Static / CSS / Styles.css'
js = '/ static / js / scripts.js'
/ & gt; 

Bruk egenskapene i komponenten din

Det endelige trinnet er å sette opp komponenten din slik at den bruker egenskapene den blir bestått. Mens noen av egenskapene som tittel og beskrivelse vil bli satt på hver side, kan andre som CSS og JS være betinget. Du vil ta hensyn til dette i din komponent.

I vårt eksempel, passerer vi våre egenskaper til komponenten ved hjelp av argumentet Rekvisitter . Vi kan da få tilgang til de enkelte rekvisitaene ved hjelp av navnene sine, for eksempel, Props.Title. eller Props.desc. .

Når du setter de betingede blokkene, kan du ta en tilnærming som dette:

 {
PROPS.CSS & AMP;
& lt; link rel = "Stylesheet" href = {`$ {props.css}`} / & gt;
} 

På denne måten, hvis det ikke er CSS-sett, vil du ikke sette en tom link-tag på siden din. Du kan bruke denne samme tilnærmingen til JavaScript-filene.

Når du er ferdig med å fylle hodekomponenten, bør den se noe slik:

 Importer hodet fra 'Neste / Hodet'
const meta = (rekvisitter) = & gt; (
& lt; head & gt;
& lt; title & gt; {props.title} & lt; / title & gt;
& lt; meta navn = "Beskrivelse" Content = {props.desc} / & gt;
& lt; meta property = "og: type" content = "website" / & gt;
& lt; Meta Name = "Og: Tittel" Eiendom = "OG: Tittel" Content = {Props.title} / & GT;
& lt; Meta Name = "Og: Beskrivelse" Eiendom = "OG: Beskrivelse" Content = {Props.desc} / & GT;
& lt; meta property = "og: site_name" innhold = "riktig substantiv" / & gt;
& lt; meta property = "og: url" content = {`$ {props.canonical}`} / & gt;
& lt; meta navn = "Twitter: kort" innhold = "sammendrag" / & gt;
& lt; meta navn = "Twitter: tittel" innhold = {props.title} / & gt;
& lt; Meta Name = "Twitter: Beskrivelse" Content = {Props.desc} / & GT;
& lt; Meta Name = "Twitter: Site" Content = "@ Propernounco" / & gt;
& lt; Meta Name = "Twitter: Creator" Content = "@ Propernounco" / & gt;
& lt; link rel = "ikon" type = "bilde / png" href = "/ statisk / bilder / favicon.ico" / & gt;
& lt; link rel = "apple-touch-ikon" href = "/ statisk / bilder / favicon.ico" / & gt;
{
PROPS.CSS & AMP;
& lt; link rel = "Stylesheet" href = {`$ {props.css}`} / & gt;
}
{
Props.image? (
& lt; meta property = "og: image" content = {`$ {props.image}`} / & gt;
): (
& lt; Meta Property = "Og: Image" Content = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
Props.Image & amp; & amp;
& lt; meta name = "Twitter: bilde" innhold = {`$ {props.image}`} / & gt;
}
{
Props.canonical & amp; & amp;
& lt; link rel = "canonical" href = {`$ {props.canonical}`} / & gt;
}
{
props.js & amp; & amp;
& lt; script type = "tekst / javascript" src = {`$ {props.js}`} & gt; & lt; / script & gt;
}
& lt; / head & gt;
)
Eksporter standard Meta 

Les mer:

• Utvikle resusable reaktkomponenter
• 14 av de beste JavaScript-APIene
• 15 Essential JavaScript-verktøy du bør bruke