Bouw een SEO-vriendelijke hoofdcomponent voor NEXTJS / REACT

Hoewel reageert een krachtige JavaScript-bibliotheek, bevat deze niet alle stukken die u nodig hebt om een ​​eenvoudig, functioneren te bouwen Website-indeling ​NEXTJS is een reactieframework waarmee u met gemak server-weergegeven applicaties en websites kunt bouwen.

NEXTJS bevat ook een aantal hulpmiddelen en functies recht uit de doos zoals Webpack, Babel, Dynamic Routering en Prefetching. Het belangrijkste is dat ik heb gevonden dat NEXTJS erg SEO-vriendelijk is.

Met dit kader kunt u server-side-weergave gebruiken, waardoor uw apps en websites niet alleen sneller worden geladen, maar maakt uw react-websites ook veel gemakkelijker voor zoekmachines om te kruipen.

NEXTJS maakt het ook gemakkelijk om een ​​goed gesegmenteerde site-architectuur te maken met behulp van dynamische routering of Aangepaste serverroutering ​U kunt bijvoorbeeld uw website eenvoudig in verschillende silo's zoals / artikelen / / producten / en / services / voor betere inhoudsstructurering worden gesegmenteerd.

Het beste van alles is, je kunt alle dingen gebruiken die een reageren van grootachtige componenten, componenteigenschappen en componentstaten maken om echt flexibele technieken op pagina-optimalisatie te implementeren. In dit artikel ga ik in detail het bouwen van een goed geoptimaliseerde hoofdcomponent voor reageren.

Het belang van het hoofdelement voor SEO

Nu voordat ik aankom dat ik dit hoofdcomponent kan bouwen, laten we eerst praten over waarom het belangrijk is en wat we zullen optimaliseren.

Het hoofdelement op uw website wordt een van de belangrijkste secties als het gaat om technische SEO. Voor één is alle website metadata in het hoofd ingesteld. Deze tags bevatten titel, meta-beschrijving, pagina-trefwoorden, alle relevante informatie- en viewport-instellingen.

Het hoofdelement is ook verantwoordelijk voor het instellen van andere belangrijke tags zoals uw canonieke URL-tag, relevante Facebook OpenGraph-tags (OG-tags) of Twitter-kaarten, en uw meta-robots-tags. Elk van deze tags is verantwoordelijk voor het overbrengen van verschillende informatie naar Google of sociale netwerken, zodat ze uw inhoud beter kunnen begrijpen, indexeren en delen.

Het hebben van onjuist geconfigureerde metadata op uw website kan catastrofaal zijn voor uw algehele website-optimalisatie en kan zeker ervoor zorgen dat uw ranglijst een nosedive heeft.

Bijvoorbeeld, twee van de ergste boetes die uw website kan worden geconfronteerd met een standpunt van een on-pagina-optimalisatie, zijn bijvoorbeeld een 'duplicate title tag' boete en een 'duplicate meta tag' boete. Deze twee tags zijn verantwoordelijk voor het geven van de 'lift pitch' van uw website naar Google. Ze dicteren ook de tekst die een gebruiker zal zien wanneer uw website verschijnt in Google-zoekresultaten.

Als elke pagina op uw website dezelfde exacte titel heeft en dezelfde exacte beschrijvingset, heeft Google een moeilijke tijd inzicht waar uw website over gaat. Als gevolg hiervan zal Google niet te veel aandacht besteden aan uw website en het zal het absoluut niet beschouwen als een autoriteitsbezit.

Als je geïnteresseerd bent in het leren van meer over technische op-pagina SEO ​ Bekijk meer op mijn benadering bij Speckyboy ​

Nu dat u een beetje meer begrijpt over het hoofdelement en waarom het zo belangrijk is onder de motorkap, laten we eens kijken hoe u een SEO-vriendelijke kopcomponent kunt bouwen voor reageer.

Bouw een SEO-vriendelijke hoofdcomponent

De SEO-vriendelijke kopcomponent die ik in dit artikel gedetailleerd is, is specifiek voor NEXTJS. Als u echter een ander reactieframework gebruikt of gewoon reageert, kunt u gebruiken Reageer helm in plaats van de Hoofdcomponent van de NEXTJS.

Het eerste dat u wilt doen, is uw basiskopstructuur opzetten. De onderstaande code kan als voorbeeld dienen, maar voel je vrij om dingen toe te voegen of te verwijderen zoals je fit ziet. Bij het absolute minimum moet je hoofd een titellabel, meta-beschrijving tag, canonieke URL en relevante sociale tags bevatten.

& LT; HOOFD & GT;
& LT; TITLE & GT; & LT; / TITLE & GT;
& LT; Meta Name = "Beschrijving" Inhoud = "" / & GT;
& LT; Meta Property = "OG: Type" Inhoud = "Website" / & GT;
& LT; Meta Name = "OG: titel" eigendom = "OG: titel" Inhoud = "" / & GT;
& LT; Meta Name = "OG: Beschrijving" Property = "OG: Beschrijving" Inhoud = "" / GT;
& LT; Meta Property = "OG: site_name" Content = "/ & GT;
& LT; Meta Property = "OG: URL" Inhoud = "/ & GT;
& LT; Meta Name = "Twitter: Card" Inhoud = "Samenvatting" / & GT;
& LT; Meta Name = "Twitter: titel" Inhoud = "" / & GT;
& LT; Meta Name = "Twitter: Beschrijving" Inhoud = {Props.desc} / GT;
& LT; Meta Name = "Twitter: Site" Inhoud = "" / & GT;
& LT; Meta Name = "Twitter: Creator" Inhoud = "/ & GT;
& LT; LINK REL = "Pictogram" Type = "Afbeelding / PNG" HREF = "/ STATISCHE / Beelden / Favicon.ico" / GT;
& LT; LINK REL = "Apple-touch-pictogram" HREF = "/ STATIC / Beelden / Favicon.ico" / GT;
& LT; LINK REL = "Stylesheet" Href = "" / & GT;
& LT; Meta Property = "OG: afbeelding" Inhoud = "" / & GT;
& LT; Meta Name = "Twitter: Image" Inhoud = "" / & GT;
& LT; LINK REL = "CANONISCHE" HREF = "/ & GT;
& LT; Script Type = "Tekst / JavaScript" SRC = "" & GT; & LT; / Script & GT;
& LT; / Head & GT; 

De component instellen

Vervolgens wilt u een nieuw gedeeltelijk bestand maken voor uw component. U kunt het gedeeltelijke bestand bellen SEO-META.JS of iets dergelijks. Dit bestand moet in de gedeeltelijk Directory.

Uw uitgangscomponent ziet er zoiets uit:

 Importeer hoofd van 'volgende / head'
const meta = (rekwisieten) = & gt;​
& LT; HOOFD & GT;
& LT; TITLE & GT; & LT; / TITLE & GT;
& LT; Meta Name = "Beschrijving" Inhoud = "" / & GT;
& LT; Meta Property = "OG: Type" Inhoud = "Website" / & GT;
& LT; Meta Name = "OG: titel" eigendom = "OG: titel" Inhoud = "" / & GT;
& LT; Meta Name = "OG: Beschrijving" Property = "OG: Beschrijving" Inhoud = "" / GT;
& LT; Meta Property = "OG: site_name" Content = "/ & GT;
& LT; Meta Property = "OG: URL" Inhoud = "/ & GT;
& LT; Meta Name = "Twitter: Card" Inhoud = "Samenvatting" / & GT;
& LT; Meta Name = "Twitter: titel" Inhoud = "" / & GT;
& LT; Meta Name = "Twitter: Beschrijving" Inhoud = {Props.desc} / GT;
& LT; Meta Name = "Twitter: Site" Inhoud = "" / & GT;
& LT; Meta Name = "Twitter: Creator" Inhoud = "/ & GT;
& LT; LINK REL = "Pictogram" Type = "Afbeelding / PNG" HREF = "/ STATISCHE / Beelden / Favicon.ico" / GT;
& LT; LINK REL = "Apple-touch-pictogram" HREF = "/ STATIC / Beelden / Favicon.ico" / GT;
& LT; LINK REL = "Stylesheet" Href = "" / & GT;
& LT; Meta Property = "OG: afbeelding" Inhoud = "" / & GT;
& LT; Meta Name = "Twitter: Image" Inhoud = "" / & GT;
& LT; LINK REL = "CANONISCHE" HREF = "/ & GT;
& LT; Script Type = "Tekst / JavaScript" SRC = "" & GT; & LT; / Script & GT;
& LT; / HOOFD & GT;
​
Uitvoer Standaard Meta 

Je zult merken dat ik passeer rekwisieten of eigenschappen, op mijn component. We zullen deze eigenschappen gebruiken om onze metatags te vullen.

Importeer de component

Zodra u uw basiscomponent hebt ingesteld, kunt u deze vervolgens in uw pagina's importeren. U kunt het onderdeel importeren door de volgende bovenaan uw pagina op te nemen.

 Importeer meta van '../partials/seo-meta.js'

U kunt nu de meta-component binnen uw renderfunctie plaatsen, net zoals u met de inheemse nextjs hoofdcomponent.

Maak de componenteigenschappen

Nu u uw meta-component hebt geïmporteerd en geplaatst, wilt u de eigenschappen instellen die u nodig heeft voor uw metadata. U moet typisch titel, beschrijving en URL voor elke pagina omvatten, maar u kunt ook afbeeldingen en andere gegevens zoals nodig opnemen.

Mogelijk wilt u ook eigenschappen opnemen voor CSS- en JavaScript-bestanden, zodat u deze indien nodig voorwaardelijk op pagina's kunt laden. Met al die eigenschappen set, zou uw component er zoiets uitzien:

 & lt; meta
TITEL = "Dit is een titel | Website naam"
Desc = "Dit is de beschrijving"
canonical = "https://www.someurl.com"
CSS = '/ Static / CSS / STYLES.CSS'
JS = '/ Static / JS / Scripts.js'
/ & GT; 

Als u net een statische website met NEXTJS brengt, moet u de eigenschappen met statische inhoud kunnen vullen. Als u echter pagina's van dynamische routes laadt en de pagina-sjablonen met dynamische code wilt vullen, wilt u deze eigenschappen dynamisch instellen.

Onze website, Eigen naam , gebruikt de WordPress API als gegevensbron, maar u kunt de onderstaande instructies gebruiken met vrijwel elke rust of grafische API.

Bij het aanvragen van de pagina wilt u de relevante metadata- en paginatiegegevens vastzetten en retourneren tijdens de getinitialProps () async functie. Hierdoor kunt u de dynamische gegevens binnen de renderfunctie gebruiken, zodat Google en andere robots de informatie kunnen kruipen.

Afhankelijk van uw gegevensbron en een paar andere factoren, kunt u een andere aanpak aannemen om de eerste eigenschappen te krijgen, maar hier is een basisbenadering om u op weg te helpen.

Statische Async GetInitialProps (CTX) {
Const Res = Aw Fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
const-fout_code = res.statuscode & gt; 200? res.statuscode: false;
Const-gegevens = wachten op res.jon ();
Laat URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
laat meta_title = wachten op data 
 .meta_title
laat meta_desc = wachten op data 
 .meta_desc
terugkeer {
foutcode,
   Case_Study: gegevens,
   Meta_Title: Meta_title,
   Meta_desc: Meta_desc,
   URL: URL
​
​

U kunt nu toegang krijgen tot de eigenschappen die u in uw renderfunctie hebt ingesteld. Bij gebruik in uw code zouden ze er zoiets uitzien.

 & lt; meta
titel = {deze.props.meta_title}
Desc = {this.props.meta_desc}
canonical = {this.props.url}
CSS = '/ Static / CSS / STYLES.CSS'
JS = '/ Static / JS / Scripts.js'
/ & GT; 

Gebruik de eigenschappen in uw component

De laatste stap is om uw component in te stellen, zodat deze de eigenschappen gebruikt die het wordt doorgegeven. Hoewel sommige van de eigenschappen zoals titel en beschrijving op elke pagina worden ingesteld, kunnen anderen zoals CSS en JS voorwaardelijk zijn. Je wilt dit in aanmerking nemen in je component.

In ons voorbeeld passeren we onze eigenschappen aan de component met behulp van het argument rekwisieten ​We kunnen dan toegang krijgen tot de individuele rekwisieten met behulp van hun namen, bijvoorbeeld props.title of props.desc ​

Bij het instellen van de voorwaardelijke blokken kunt u zo'n aanpak nemen:

 {
Props.CSS & AMP; & AMP;
& LT; LINK REL = "Stylesheet" HREF = {`$ {Props.css}`} / & GT;
} 

Op deze manier, als er geen CSS-set is, stelt u geen lege koppelingslabel in op uw pagina. U kunt dezezelfde aanpak voor de JavaScript-bestanden gebruiken.

Zodra u klaar bent met het populeren van uw hoofdcomponent, moet het er zoiets uitzien:

 Hoofd importeren van 'volgende / head'
const meta = (rekwisieten) = & gt;​
& LT; HOOFD & GT;
& LT; TITLE & GT; {Props.title} & LT; / TITLE & GT;
& LT; Meta Name = "Beschrijving" Inhoud = {props.desc} / & GT;
& LT; Meta Property = "OG: Type" Inhoud = "Website" / & GT;
& LT; Meta Name = "OG: titel" Property = "OG: titel" Inhoud = {Props.title} / GT;
& LT; Meta Name = "OG: Beschrijving" Property = "OG: Beschrijving" Inhoud = {Props.desc} / GT;
& LT; Meta Property = "OG: site_name" Inhoud = "juiste zelfstandig naamwoord" / GT;
& LT; Meta Property = "OG: URL" Inhoud = {`$ {Props.canonical}`} / & GT;
& LT; Meta Name = "Twitter: Card" Inhoud = "Samenvatting" / & GT;
& LT; Meta Name = "Twitter: titel" Inhoud = {Props.title} / GT;
& LT; Meta Name = "Twitter: Beschrijving" Inhoud = {Props.desc} / GT;
& LT; Meta Name = "Twitter: Site" Inhoud = "@ Propernounco" / GT;
& LT; Meta Name = "Twitter: Creator" Inhoud = "@ Propernounco" / GT;
& LT; LINK REL = "Pictogram" Type = "Afbeelding / PNG" HREF = "/ STATISCHE / Beelden / Favicon.ico" / GT;
& LT; LINK REL = "Apple-touch-pictogram" HREF = "/ STATIC / Beelden / Favicon.ico" / GT;
​
Props.CSS & AMP; & AMP;
& LT; LINK REL = "Stylesheet" HREF = {`$ {Props.css}`} / & GT;
​
​
steunen.​
& LT; Meta Property = "OG: afbeelding" Inhoud = {`$ {props.image}`} / & GT;
​
& LT; Meta Property = "OG: afbeelding" Inhoud = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & GT;
​
​
​
Props.image & AMP; & AMP;
& LT; Meta Name = "Twitter: Image" Inhoud = {`$ {Props.Image}`} / & GT;
​
​
Props.canonical & AMP; & AMP;
& LT; LINK REL = "CANONISCHE" HREF = {`$ {PRETS.CANONICAL}`} / & GT;
​
​
Props.js & AMP; & AMP;
& lt; scripttype = "Tekst / javascript" SRC = {`$ {props.js}`} & gt; & lt; / script & gt;
​
& LT; / HOOFD & GT;
​
Uitvoer Standaard Meta 

Lees verder:

• Ontwikkel resorteerbare reageercomponenten
• 14 van de beste JavaScript-API's
• 15 essentiële JavaScript-tools die u moet gebruiken