Rakenna SEO-ystävällinen pääkomponentti NextsJs / reagoi

Vaikka reagoi on tehokas JavaScript-kirjasto, se ei sisällä kaikkia kappaleita, joita sinun tarvitsee rakentaa yksinkertainen, toimiva Verkkosivuston asettelu . Nextjs on reagoiva kehys, jonka avulla voit rakentaa palvelimen renderoidut sovellukset ja verkkosivustot helposti.

NextJs sisältää myös useita työkaluja ja ominaisuuksia aivan laatikosta, kuten webpack, babel, dynaaminen reititys ja etukäteen. Tärkeintä tärkeintä, olen huomannut, että Nexts on erittäin SEO-ystävällinen.

Tämän kehyksen avulla voit hyödyntää palvelinpuolen renderöintiä, joka ei ainoastaan ​​tee sovelluksiasi ja verkkosivustosi kuormitusta huomattavasti nopeammin, mutta myös reagoivat verkkosivustot paljon helpommin hakukoneiden indeksoimiseksi.

NextJs myös helpottaa hyvin segmentoidun sivuston arkkitehtuurin luomista käyttämällä Dynaaminen reititys tai Mukautettu palvelimen reititys . Voit esimerkiksi jakaa verkkosivustosi helposti eri siiloihin / esineisiin /, / tuotteisiin / ja / palveluihin / paremman sisällön rakenteen parantamiseksi.

Parasta, voit hyödyntää kaikkia asioita, jotka reagoivat suuria kuin komponentit, komponenttien ominaisuudet ja komponenttivaltiot toteuttamaan todella joustavia sivunoptimointitekniikoita. Tässä artikkelissa aion yksityiskohtaisesti rakentaa hyvin optimoitua pääkomponenttia reagoida.

SEO: n pään elementin merkitys

Nyt ennen kuin pääsen rakentamaan tätä pääkomponenttia, puhutaan ensin siitä, miksi se on tärkeää ja mitä optimoimme.

Sivustosi pääelementti tulee olemaan yksi tärkeimmistä osista, kun kyseessä on tekninen SEO. Yksi, kaikki sivuston metatiedot asetetaan päähän. Näihin tunnisteisiin kuuluvat otsikko, metakuvaus, sivun avainsanat, kaikki asiaankuuluvat tekijän tiedot ja Viewport-asetukset.

Pääelementti on myös vastuussa muiden tärkeiden tunnisteiden, kuten Canonical URL -tunnisteen, asettamisesta, kaikki asiaankuuluvat Facebook OpenGraph Tunnisteet (OG-tunnisteet) tai Twitter-kortit ja Meta Robots -tunnisteet. Jokainen näistä tunnisteista on vastuussa erilaisten tietojen välityksestä Googlelle tai sosiaalisille verkostoille, jotta he voivat paremmin ymmärtää, indeksoida ja jakaa sisältöäsi.

Väärin konfiguroitu metatietosi verkkosivustollasi voi olla katastrofaalinen koko verkkosivuston optimointi ja se voi varmasti aiheuttaa sijoituksesi, jotta voit ottaa nenävoimaa.

Esimerkiksi kaksi pahinta rangaistusta, jotka sivustosi voisi kohdata sivulta Optimointi, ovat "kaksoiskappale otsikkomerkki" rangaistus ja "kaksoiskappale metag" rangaistus. Nämä kaksi tunnistetta ovat vastuussa sivustosi "hissien" antamisesta Googlelle. He myös sanelee tekstin, jonka käyttäjä näkee, milloin verkkosivusto näkyy Google-hakutuloksissa.

Jos sivustosi jokaisella sivulla on sama tarkka nimi ja sama tarkka kuvaus, Googlella on kova aika ymmärtää, mitä sivustosi on. Tämän seurauksena Google ei halua maksaa liikaa huomiota verkkosivustoosi ja se ei varmasti pidä sitä viranomaisen omaisuutta.

Jos olet kiinnostunut oppimaan lisää teknisestä sivusta SEO , Katso lisää lähestymistapissani SpeckyBoossa .

Nyt kun ymmärrät hieman enemmän pääelementistä ja miksi se on niin tärkeä hupun alla, katsotaanko miten rakentaa SEO-ystävällinen pääkomponentti reagoivaksi.

Rakenna SEO-ystävällinen pääkomponentti

SEO-ystävällinen pääkomponentti, jonka yksityiskohtaisesti tässä artikkelissa on ominaista NextJS: lle. Kuitenkin, jos käytät erilaista reagoivaa kehystä tai käytät vain reagoivaa, voit käyttää Reagoida kypärä NextJS-pääkomponentin sijasta.

Ensimmäinen asia, jonka haluat tehdä, on perustaa peruspäärakenne. Alla oleva koodi voi toimia esimerkkinä, mutta voit vapaasti lisätä tai poistaa asioita siihen, kun näet sopivan. Paljain minimi vaikka pään tulisi sisältää otsikon tunniste, metakuvausmerkki, kanoninen URL-osoite ja kaikki asiaankuuluvat sosiaaliset tunnisteet.

& lt; pää & gt;
& lt; otsikko & gt; & lt; / otsikko & gt;
& lt; meta nimi = "Kuvaus" sisältö = "" / & gt;
& lt; Meta-ominaisuus = "OG: tyyppi" Sisältö = "Verkkosivusto" / & gt;
& lt; meta name = "og: otsikko" ominaisuus = "og: otsikko" sisältö = "" / & gt;
& lt; meta name = "og: Kuvaus" ominaisuus = "OG: Kuvaus" Sisältö = "" / & gt;
& lt; Meta-ominaisuus = "OG: SITE_NAME" Sisältö = "" / & gt;
& lt; Meta-ominaisuus = "OG: URL" sisältö = "" / & gt;
& lt; Meta nimi = "Twitter: kortti" Sisältö = "Yhteenveto" / & gt;
& lt; meta nimi = "Twitter: otsikko" Sisältö = "" / & gt;
& lt; Meta Nimi = "Twitter: Kuvaus" Sisältö = {PROPSSC} / & gt;
& lt; meta nimi = "Twitter: sivusto" Sisältö = "" / & gt;
& lt; Meta nimi = "Twitter: Luoja" sisältö = "" / & gt;
& lt; link rel = "icon" tyyppi = "kuva / png" href = "/ staattinen / kuvat / favicon.ico" / & gt;
& lt; Link Rel = "Apple Touch-icon" href = "/ staattinen / kuvat / favicon.ico" / & gt;
& lt; Link Rel = "Stylesheet" href = "" / & gt;
& lt; Meta-ominaisuus = "OG: Kuva" Sisältö = "" / & gt;
& lt; meta nimi = "Twitter: kuva" sisältö = "" / & gt;
& lt; link rel = "kanoninen" href = "" / & gt;
& lt; script tyyppinen = "Text / JavaScript" SRC = "" & gt; & lt; / script & gt;
& lt; / head & gt; 

Aseta komponentti

Seuraavaksi voit luoda uuden osittaisen tiedoston komponenttisi. Voit soittaa osittaiseen tiedostoon SEO-Meta.js tai samankaltainen. Tämä tiedosto on säilytettävä osittainen Hakemisto.

Aloituskomponentisi näyttää jotain tällaista:

 tuonti pää "Seuraava / pää"
cons meta = (rekvisiitta) = & gt; (
& lt; pää & gt;
& lt; otsikko & gt; & lt; / otsikko & gt;
& lt; meta nimi = "Kuvaus" sisältö = "" / & gt;
& lt; Meta-ominaisuus = "OG: tyyppi" Sisältö = "Verkkosivusto" / & gt;
& lt; meta name = "og: otsikko" ominaisuus = "og: otsikko" sisältö = "" / & gt;
& lt; meta name = "og: Kuvaus" ominaisuus = "OG: Kuvaus" Sisältö = "" / & gt;
& lt; Meta-ominaisuus = "OG: SITE_NAME" Sisältö = "" / & gt;
& lt; Meta-ominaisuus = "OG: URL" sisältö = "" / & gt;
& lt; Meta nimi = "Twitter: kortti" Sisältö = "Yhteenveto" / & gt;
& lt; meta nimi = "Twitter: otsikko" Sisältö = "" / & gt;
& lt; Meta Nimi = "Twitter: Kuvaus" Sisältö = {PROPSSC} / & gt;
& lt; meta nimi = "Twitter: sivusto" Sisältö = "" / & gt;
& lt; Meta nimi = "Twitter: Luoja" sisältö = "" / & gt;
& lt; link rel = "icon" tyyppi = "kuva / png" href = "/ staattinen / kuvat / favicon.ico" / & gt;
& lt; Link Rel = "Apple Touch-icon" href = "/ staattinen / kuvat / favicon.ico" / & gt;
& lt; Link Rel = "Stylesheet" href = "" / & gt;
& lt; Meta-ominaisuus = "OG: Kuva" Sisältö = "" / & gt;
& lt; meta nimi = "Twitter: kuva" sisältö = "" / & gt;
& lt; link rel = "kanoninen" href = "" / & gt;
& lt; script tyyppinen = "Text / JavaScript" SRC = "" & gt; & lt; / script & gt;
& lt; / head & gt;
)
Viennin oletusarvo 

Huomaat, että olen ohi rekvisiitta tai ominaisuudet, osaani. Käytämme näitä ominaisuuksia, jotta voimme täyttää Meta-tunnisteet.

Tuo komponentti

Kun olet määrittänyt peruskomponentin, voit tuoda sen sivuillesi. Voit tuoda komponentin sisällyttämällä seuraava sivusi yläosassa.

 Tuo META from '.../parterials/Seo-meta.js'

Voit nyt sijoittaa meta-komponentin render-toiminnolle, aivan kuten sinä natiivi NextsJs-pääkomponentilla.

Luo komponenttien ominaisuudet

Nyt kun olet tuota ja asettanut Meta-komponentin, jonka haluat määrittää tiedot, joita tarvitset metatietosi. Sinun tulisi tyypillisesti sisältää otsikon, kuvauksen ja URL-osoitteen jokaiselle sivulle, mutta voit myös sisältää kuvia ja muita tietoja tarpeen mukaan.

Voit myös sisällyttää CSS- ja JavaScript-tiedostojen ominaisuuksia, jotta voit käyttää niitä ehdollisesti sivuille tarpeen mukaan. Kaikilla näillä ominaisuuksilla asetettu, komponenttisi näyttää tältä:

 & lt; meta
Otsikko = "Tämä on otsikko | Verkkosivuston nimi "
DESC = "Tämä on kuvaus"
Canonical = "https://www.someurl.com"
CSS = '/ Staattinen / CSS / Styles.css'
JS = '/ Static / JS / Scripts.js'
/ & gt; 

Jos olet vain rakentamassa staattista verkkosivustoa NextJS: llä, sinun pitäisi pystyä täyttämään kiinteistöt staattisella sisällöllä. Kuitenkin, jos lataat sivuja dynaamisista reiteistä ja populoi sivumalleja dynaamisella koodilla, sinun on asetettava nämä ominaisuudet dynaamisesti.

Meidän nettisivumme, Erisnimi , käyttää WordPress API: n tietolähteenä, mutta voit käyttää alla olevia ohjeita melko paljon lepo- tai graphql-sovellusliittymää.

Käyttäessäsi sivua haluat tarttua ja palauttaa asiaankuuluvat metatiedot ja sivutiedot GetiniialProps () Async Toiminto. Tämän jälkeen voit käyttää dynaamisia tietoja render-toiminnossa, jotta Google ja muut robotit voivat indeksoida tietoja.

Tietolähteestä ja muutamasta muusta tekijästä riippuen voit ottaa toisen lähestymistavan alkuperäisten ominaisuuksien saamiseksi, mutta tässä on perusava lähestymistapa, jolla pääset alkuun.

staattiset async getiniialprops (ctx) {
const res = odottaa fetch ('// api.some-url.com/case_study/?slug=' + ctx.req.params.slug)
const error_code = res.statiacode & gt; 200? Res.StatosCode: False;
const data = await res.json ();
Anna URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.paramsSlug
Anna Meta_Title = Odottaa tiedot 
 .Meta_Title
anna meta_desc = odottaa tietoja 
 .Meta_desc
palaa {
virhekoodi,
   case_study: tiedot,
   Meta_Title: Meta_Title,
   Meta_desc: Meta_desc,
   URL: URL
}
}

Voit nyt käyttää Render-toiminnon asettamia ominaisuuksia. Kun käytetään koodissasi, ne näyttäisivät jotain tällaista.

 & lt; meta
Otsikko = {this.Props.Meta_Title}
desc = {this.props.meta_desc}
Canonical = {this.proops.url}
CSS = '/ Staattinen / CSS / Styles.css'
JS = '/ Static / JS / Scripts.js'
/ & gt; 

Käytä komponenttisi ominaisuuksia

Viimeinen vaihe on määrittää komponenttisi niin, että se käyttää ominaisuuksia, joita se kuluu. Jotkut ominaisuuksista, kuten nimestä ja kuvauksesta, asetetaan jokaiselle sivulle, muut, kuten CSS ja JS voivat olla ehdollisia. Haluat ottaa tämän huomioon komponenttisi.

Esimerkissämme siirrämme ominaisuuksiamme komponenttiin argumentin avulla rekvisiitta . Voimme sitten käyttää yksittäisiä rekvisiittaen käyttämällä nimiä, Props.Title tai PROPSEST .

Kun asetat ehdolliset lohkot, voit ottaa tämän kaltaisen lähestymistavan:

 {
Props.CSS & AMP; & amp;
& lt; linkki rel = "stylesheet" href = {`$ {props.css}`} / & gt;
} 

Tällä tavoin, jos CSS-asetusta ei ole, et aseta tyhjää linkkitunnistetta sivulle. Voit käyttää tätä samaa lähestymistapaa JavaScript-tiedostoille.

Kun olet lopettanut pääkomponentin, sen pitäisi näyttää jotain tällaista:

 Tuo pään päässä "Seuraava / pää"
cons meta = (rekvisiitta) = & gt; (
& lt; pää & gt;
& lt; otsikko & gt; {Props.Title} & lt; / otsikko & gt;
& lt; meta name = "Kuvaus" Sisältö = {Props.Desc} / & gt;
& lt; Meta-ominaisuus = "OG: tyyppi" Sisältö = "Verkkosivusto" / & gt;
& lt; meta name = "og: otsikko" ominaisuus = "og: otsikko" sisältö = {props.title} / & gt;
& lt; meta name = "og: Kuvaus" ominaisuus = "OG: Kuvaus" Sisältö = {PROPSESC} / & gt;
& lt; Meta-ominaisuus = "OG: SITE_NAME" Sisältö = "Oikea substantiivi" / & gt;
& lt; Meta-ominaisuus = "OG: URL" sisältö = {`$ {PROPSCANONICAL}`} / & gt;
& lt; Meta nimi = "Twitter: kortti" Sisältö = "Yhteenveto" / & gt;
& lt; meta nimi = "Twitter: otsikko" Sisältö = {PROPSSLE} / & GT;
& lt; Meta Nimi = "Twitter: Kuvaus" Sisältö = {PROPSSC} / & gt;
& lt; Meta nimi = "Twitter: Site" Sisältö = "@ propernoounco" / & gt;
& lt; Meta nimi = "Twitter: Luoja" sisältö = "@ propernoounco" / & gt;
& lt; link rel = "icon" tyyppi = "kuva / png" href = "/ staattinen / kuvat / favicon.ico" / & gt;
& lt; Link Rel = "Apple Touch-icon" href = "/ staattinen / kuvat / favicon.ico" / & gt;
{
Props.CSS & AMP; & amp;
& lt; linkki rel = "stylesheet" href = {`$ {props.css}`} / & gt;
}
{
Props.Image? (
& lt; Meta-ominaisuus = "OG: Image" Sisältö = {`$ {PROPSHAGE}`} / & gt;
): (
& lt; Meta-ominaisuus = "OG: Kuva" Sisältö = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
Props.MAGAGE & AMP; & amp;
& lt; Meta Nimi = "Twitter: Kuva" Sisältö = {`$ {PROPS.AMAGE}`} / & gt;
}
{
Propscanonical & amp; & amp;
& lt; link rel = "kanoninen" href = {`$ {props.canonical}`} / & gt;
}
{
Props.js & amp; & amp;
& lt; script tyyppinen = "Teksti / JavaScript" SRC = {`$ {enr.js}`} & gt; & lt; / script & gt;
}
& lt; / head & gt;
)
Viennin oletusarvo 

Lue lisää:

• Kehittää uudelleen reseptejä reagoivia komponentteja
• 14 parhaista JavaScript Apis
• 15 Essential JavaScript -työkalut sinun pitäisi käyttää