Construiți o componentă cap SEO-friendly pentru NextJS / React

laptop cu analize
(Credit de imagine: Spațiu negativ pe Pexels)

În timp ce React este o bibliotecă JavaScript puternică, nu include toate piesele de care aveți nevoie pentru a construi o funcționare simplă aspectul site-ului web . NextJS este un cadru React care vă permite să creați cu ușurință aplicații și site-uri web redate de server.

NextJS include, de asemenea, o serie de instrumente și caracteristici chiar de la început, cum ar fi Webpack, Babel, rutare dinamică și pre-preluare. Cel mai important, am constatat că NextJS este foarte potrivit pentru SEO.



Acest cadru vă permite să utilizați redarea de pe server, ceea ce nu numai că face ca aplicațiile și site-urile dvs. web să se încarce considerabil mai repede, ci și să faciliteze accesarea cu crawlere a site-urilor web React.



NextJS facilitează, de asemenea, crearea unei arhitecturi de site bine segmentate prin utilizarea rutare dinamică sau rutare personalizată a serverului . De exemplu, puteți segmenta cu ușurință site-ul dvs. web în diferite silozuri cum ar fi / articles /, / products / și / services / pentru o mai bună structurare a conținutului.

Cel mai bun dintre toate, puteți utiliza toate lucrurile care fac ca React să fie excelent, cum ar fi componentele, proprietățile componentelor și stările componentelor pentru a implementa tehnici de optimizare pe pagină foarte flexibile. În acest articol, voi detalia detalii despre construirea unei componente de cap bine optimizate pentru React.



Importanța elementului principal pentru SEO

Acum, înainte de a afla cum să construiesc această componentă cap, să vorbim mai întâi de ce este important și ce vom optimiza.

Elementul principal de pe site-ul dvs. web va fi una dintre cele mai importante secțiuni atunci când vine vorba de SEO tehnic. În primul rând, toate metadatele site-ului web sunt setate în cap. Aceste etichete includ titlu, meta descriere, cuvinte cheie pentru pagină, orice informații relevante despre autor și setări pentru vizualizare.

Elementul principal este, de asemenea, responsabil pentru setarea altor etichete importante, cum ar fi eticheta URL canonică, orice etichete relevante Facebook OpenGraph (etichete OG) sau carduri Twitter și etichetele dvs. meta-roboți. Fiecare dintre aceste etichete este responsabilă pentru transmiterea de informații diferite către Google sau rețelele sociale, astfel încât acestea să poată înțelege, indexa și partaja mai bine conținutul dvs.



A avea metadate necorespunzător configurate pe site-ul dvs. web poate fi catastrofal pentru optimizarea generală a site-ului dvs. web și poate determina cu siguranță clasamentul dvs.

A avea metadate necorespunzătoare configurate pe site-ul dvs. web poate fi catastrofal pentru optimizarea generală a site-ului dvs. web și poate determina cu siguranță că clasamentul dvs. nu va fi cunoscut.

De exemplu, două dintre cele mai grave penalizări cu care s-ar putea confrunta site-ul dvs. web din punct de vedere al optimizării în pagină sunt o penalizare „etichetă titlu duplicat” și o penalizare „etichetă duplicat meta”. Aceste două etichete sunt responsabile pentru transmiterea „ascensiunii” site-ului dvs. către Google. De asemenea, dictează textul pe care îl va vedea un utilizator atunci când site-ul dvs. web apare în rezultatele căutării Google.

Dacă fiecare pagină de pe site-ul dvs. web are același titlu exact și același set de descriere exactă, Google va avea dificultăți în a înțelege despre ce este site-ul dvs. web. Prin urmare, Google nu va acorda prea multă atenție site-ului dvs. web și cu siguranță nu îl va considera o proprietate de autoritate.

Dacă sunteți interesat să aflați mai multe despre SEO tehnic pe pagină , vezi mai multe despre abordarea mea la SpeckyBoy .

Acum, că înțelegeți un pic mai multe despre elementul cap și de ce este atât de important sub capotă, să aruncăm o privire la cum să construiți o componentă cap prietenoasă SEO pentru React.

Construiți o componentă cap SEO-friendly

Componenta capului SEO-friendly pe care o detaliez în acest articol este specifică NextJS. Cu toate acestea, dacă utilizați un cadru React diferit sau pur și simplu utilizați React, puteți utiliza Casca React în locul componentei capului NextJS.

Primul lucru pe care doriți să-l faceți este să configurați structura de bază a capului. Codul de mai jos poate servi drept exemplu, dar nu ezitați să adăugați sau să eliminați lucrurile după cum doriți. Cu toate acestea, la minim, capul dvs. ar trebui să includă o etichetă de titlu, o etichetă meta descriere, o adresă URL canonică și orice etichete sociale relevante.

Configurați componenta

Apoi, veți dori să creați un nou fișier parțial pentru componenta dvs. Puteți apela fișierul parțial seo-meta.js sau asemănător. Acest fișier ar trebui păstrat în parțiale director.

dell xps 13 black friday 2016

Componenta dvs. de pornire va arăta cam așa:

import Head from 'next/head' const Meta = (props) => ( ) export default Meta

Veți observa că trec recuzită , sau proprietăți, pentru componenta mea. Vom folosi aceste proprietăți pentru a completa metaetichetele noastre.

Importați componenta

După ce ați configurat componenta de bază, puteți să o importați în paginile dvs. Puteți importa componenta incluzând următoarele în partea de sus a paginii.

de unde pot cumpăra un stylus pentru telefonul meu
import Meta from '../partials/seo-meta.js'

Acum puteți plasa componenta meta în funcția de redare, la fel cum ați face cu componenta nativă NextJS head.

Creați proprietățile componentei

Acum că ați importat și ați plasat componenta Meta, veți dori să configurați proprietățile de care aveți nevoie pentru metadatele dvs. De obicei, ar trebui să includeți titlu, descriere și adresă URL pentru fiecare pagină, dar puteți include și imagini și alte date, după caz.

De asemenea, vă recomandăm să includeți proprietăți pentru fișiere CSS și JavaScript, astfel încât să le puteți încărca condiționat pe pagini, după cum este necesar. Cu toate aceste proprietăți setate, componenta dvs. ar arăta cam așa:

Dacă doar construiți un site static cu NextJS, ar trebui să puteți completa proprietățile cu conținut static. Cu toate acestea, dacă încărcați pagini din rute dinamice și completați șabloanele de pagini cu cod dinamic, veți dori să setați aceste proprietăți dinamic.

Siteul nostru, Substantiv propriu , folosește API-ul WordPress ca sursă de date, dar puteți utiliza instrucțiunile de mai jos folosind aproape orice API REST sau GraphQL.

Când solicitați pagina, veți dori să preluați și să returnați metadatele și datele relevante ale paginii în timpul getInitialProps () async funcţie. Acest lucru vă va permite apoi să utilizați datele dinamice din cadrul funcției de redare, astfel încât Google și alți roboți să poată accesa cu crawlere informațiile.

În funcție de sursa de date și de câțiva alți factori, este posibil să luați o abordare diferită pentru a obține proprietățile inițiale, dar iată o abordare de bază pentru a începe.

static async getInitialProps(ctx) { const res = await fetch('//api.some-url.com/case_studies/?slug=' + ctx.req.params.slug) const error_code = res.statusCode > 200 ? res.statusCode : false; const data = await res.json(); let url = 'https://' + ctx.req.headers.host + '/' + ctx.req.params.slug let meta_title = await data[0].meta_title let meta_desc = await data[0].meta_desc return { error_code, case_study: data, meta_title: meta_title, meta_desc: meta_desc, url: url } }

Acum veți putea accesa proprietățile pe care le-ați setat în cadrul funcției de redare. Atunci când sunt folosiți în codul dvs., ar arăta cam așa.

Utilizați proprietățile din componenta dvs.

Ultimul pas este să vă configurați componenta astfel încât să utilizeze proprietățile pe care le treceți. Deși unele proprietăți precum titlul și descrierea vor fi setate pe fiecare pagină, altele precum CSS și JS pot fi condiționate. Veți dori să luați în considerare acest lucru în componenta dvs.

În exemplul nostru, transmitem proprietățile noastre componentei folosind argumentul recuzită . Putem accesa apoi recuzita individuală folosind numele lor, de exemplu, props.title sau props.desc .

Când setați blocurile condiționale, puteți adopta o abordare de acest fel:

{ props.css && }

În acest fel, dacă nu există set CSS, nu veți seta o etichetă de link goală pe pagina dvs. Puteți utiliza aceeași abordare pentru fișierele JavaScript.

După ce ați terminat de completat componenta capului, ar trebui să arate cam așa:

import Head from 'next/head' const Meta = (props) => ( {props.title} { props.css && } { props.image ? ( ) : ( ) } { props.image && } { props.canonical && } { props.js && } ) export default Meta

Citeste mai mult: