Építsen egy SEO-barát fejkomponenst a Nextjs / Real

Míg a React egy erőteljes JavaScript könyvtár, nem tartalmazza az összes darabot, amire szükséged van egy egyszerű, működőképes honlap elrendezés . A Nextjs olyan reakter keret, amely lehetővé teszi a kiszolgáló által rendezett alkalmazások és weboldalak egyszerűségét.

A Nextjs számos eszközt és funkciót is tartalmaz a dobozból, mint például a webpack, a babel, a dinamikus útválasztás és az előretekintés. A legfontosabb, hogy azt találtam, hogy a Nextjs nagyon SEO-barát.

Ez a keret lehetővé teszi a kiszolgálóoldali renderelés használatát, amely nemcsak az alkalmazásokat és webhelyeket jelentősen gyorsabbá teszi, hanem sokkal könnyebbé teszi a reagálási webhelyeket a keresőmotorok számára.

A Nextjs segítségével könnyedén létrehozhat egy jól szegmentált webhely architektúrát dinamikus útválasztás vagy Egyéni kiszolgálói útválasztás . Például könnyedén szegmentálhatja webhelyét különböző silókká / cikkek / termékek / termékek / szolgáltatások / a jobb tartalom strukturálásához.

A legjobb az összes, akkor kihasználhatja az összes olyan dolgot, amely nagyszerű, mint a komponensek, az alkatrész tulajdonságai és az alkatrészállományok valóban rugalmas az oldal optimalizálási technikák megvalósításához. Ebben a cikkben részletesen meg kell adnom egy jól optimalizált fejkomponenset a reakcióhoz.

A SEO fejelemének fontossága

Most, mielőtt beépítem, hogyan építsem ezt a fejkomponenset, először beszéljünk arról, hogy miért fontos, és mi lesz optimalizálva.

A webhelyén lévő fejelem az egyik legfontosabb szakasz lesz, amikor a technikai SEO-k. Az egyik esetében az összes webhely metaadata a fejben van beállítva. Ezek a címkék magukban foglalják a címet, a meta leírást, az oldal kulcsszavakat, a megfelelő szerzői információkat és megtekintési beállításokat.

A fejelem felelős azért is felelős, hogy más fontos címkéket, például a kanonikus URL-címkét, bármilyen fontos Facebook Opengraph címkéket (og címkéket) vagy Twitter kártyákat, valamint a meta robotok címkéit. Mindegyik címkék felelősek a különböző információk továbbításáért a Google vagy a szociális hálózatokhoz, hogy jobban megértsék, indexeljenek és megoszthassák tartalmát.

A helytelenül konfigurált metaadatok a webhelyén katasztrofálisak lehetnek a teljes weboldal optimalizálásához, és határozottan okozhatják a rangsorolást, hogy egy nossív.

Például a legrosszabb büntetések közül kettő, amellyel az Ön weboldala szembesülhet az oldal optimalizálási szempontból, egy "duplikált címcímke" büntetés és egy duplikált meta tag 'büntetés. Ez a két címke felelős a webhely "lift pálya" a Google-hoz. Azt is diktálják, hogy a felhasználó megjelenik, amikor a webhely megjelenik a Google keresési eredményeiben.

Ha a webhelyén található minden oldal ugyanaz a pontos címet és ugyanazt a pontos leírást tartalmazza, a Google lesz egy kemény idő megértése, amit a webhelye arról szól. Ennek eredményeképpen a Google nem fog túl nagy figyelmet fordítani a webhelyére, és határozottan nem tekinti meg jogosultságát.

Ha érdekel, hogy többet tanulsz a technikai SEO-ról , Lásd még a Speckyboy megközelítését .

Most, hogy egy kicsit többet értesz a fejelemről, és miért olyan fontos a motorháztető alatt, nézzük meg, hogyan kell létrehozni egy SEO-barát fejkomponenset a reakcióhoz.

Építsen egy SEO-barát fejkomponenst

A SEO-barát vezető komponens, amelyet ebben a cikkben részletesen részleteznek a NextJ-hez. Ha azonban más, akkor más reagálási keretet használ, vagy csak reagálhat, használhatja Reagál a sisakot a Nextjs fejkomponens helyett.

Az első dolog, amit meg akarsz tenni, beállítja az alapfejet. Az alábbi kód például példaként szolgálhat, de szabadon tudsz hozzáadni vagy eltávolítani a dolgokat, amennyit csak lát. A csupasz minimálisra azonban a fejednek tartalmaznia kell egy címcímkét, meta leíráscímkét, kanonikus URL-t és bármilyen megfelelő szociális címkét.

& lt; head & gt;
& lt; Cím & gt; & lt; / cím & gt;
& lt; meta név = "Leírás" tartalom = "" / & gt;
& lt; meta ingatlan = "og: type" Tartalom = "weboldal" / & gt;
& lt; meta name = "og: Cím" tulajdonság = "og: Cím" tartalom = "" / & gt;
& lt; meta name = "og: Leírás" ingatlan = "og: leírás" tartalom = "/ & gt;
& lt; meta ingatlan = "og: site_name" tartalom = "" / & gt;
& lt; meta ingatlan = "og: URL" tartalom = "" / & gt;
& lt; meta név = "Twitter: kártya" tartalom = "Összefoglalás" / & gt;
& lt; meta név = "Twitter: Cím" Cím "=" "/ & gt;
& lt; meta név = "Twitter: Leírás" tartalom = {props.desc} / & gt;
& lt; meta név = "Twitter: webhely" tartalom = "" / & gt;
& lt; meta név = "Twitter: Teremtő" tartalom = "" / & gt;
& link rel = "icon" type = "kép / png" href = "/ statikus / kép / favicon.ico" / & gt;
& link rel = "Apple-touch-icon" href = "/ statikus / kép / favicon.ico" / & gt;
& link rel = "stylesheet" href = "" / & gt;
& lt; meta ingatlan = "og: kép" tartalom = "/ & gt;
& lt; meta név = "Twitter: kép" tartalom = "" / & gt;
& link rel = "canonical" href = "/ & gt;
& lt; script típus = "szöveg / JavaScript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt; 

Állítsa be az összetevőt

Ezután új részleges fájlt szeretne létrehozni az Ön összetevőjének. Hívhatja a részleges fájlt seo-meta.js vagy hasonló. Ezt a fájlt a részleges Könyvtár.

A kiindulási összetevője valami ilyesmit fog kinézni:

 Importálja a fejét a "következő / fej"
CONST META = (kellékek) = & gt; (
& lt; head & gt;
& lt; Cím & gt; & lt; / cím & gt;
& lt; meta név = "Leírás" tartalom = "" / & gt;
& lt; meta ingatlan = "og: type" Tartalom = "weboldal" / & gt;
& lt; meta name = "og: Cím" tulajdonság = "og: Cím" tartalom = "" / & gt;
& lt; meta name = "og: Leírás" ingatlan = "og: leírás" tartalom = "/ & gt;
& lt; meta ingatlan = "og: site_name" tartalom = "" / & gt;
& lt; meta ingatlan = "og: URL" tartalom = "" / & gt;
& lt; meta név = "Twitter: kártya" tartalom = "Összefoglalás" / & gt;
& lt; meta név = "Twitter: Cím" Cím "=" "/ & gt;
& lt; meta név = "Twitter: Leírás" tartalom = {props.desc} / & gt;
& lt; meta név = "Twitter: webhely" tartalom = "" / & gt;
& lt; meta név = "Twitter: Teremtő" tartalom = "" / & gt;
& link rel = "icon" type = "kép / png" href = "/ statikus / kép / favicon.ico" / & gt;
& link rel = "Apple-touch-icon" href = "/ statikus / kép / favicon.ico" / & gt;
& link rel = "stylesheet" href = "" / & gt;
& lt; meta ingatlan = "og: kép" tartalom = "/ & gt;
& lt; meta név = "Twitter: kép" tartalom = "" / & gt;
& link rel = "canonical" href = "/ & gt;
& lt; script típus = "szöveg / JavaScript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
)
Alapértelmezett meta exportálása 

Észre fogod venni, hogy haladok kellékek , vagy tulajdonságok, az én összetevőjéhez. Ezeket a tulajdonságokat használjuk a meta címkéinek feltöltésére.

Importálja az összetevőt

Miután beállította az alapvető összetevőt, akkor importálhatja az oldalait. Az összetevőt importálhatja az oldal tetején lévő alábbiakban.

 Meta importálása a "../partials/seo-meta.js'

Most a meta komponenst helyezheti be a renderfunkcióban, mintha a natív NextJs fejkomponensen lenne.

Hozza létre az összetevők tulajdonságait

Most, hogy importáltál és elhelyezte a Meta komponenst, akkor be kell állítania a metaadatokhoz szükséges tulajdonságokat. Jellemzően tartalmaznia kell a címet, a leírást és az URL-t minden oldalra, de szükség szerint képeket és egyéb adatokat is tartalmazhat.

A CSS és a JavaScript fájlok tulajdonságait is magában foglalja, így szükség szerint feltételesen betöltheti az oldalakat. Az összes tulajdonságkészletnél az összetevője valami ilyesmit néz ki:

 & lt; meta
Cím = "Ez egy cím | Honlap neve "
desc = "Ez a leírás"
Canonical = "https://www.someurl.com"
CSS = '/ Statikus / CSS / Styles.css'
js = '/ static / js / scripts.js'
/ & gt; 

Ha csak egy statikus webhelyet építesz a Nextjs-vel, akkor képesnek kell lennie a tulajdonságok statikus tartalmakkal történő feltöltésére. Ha azonban a dinamikus útvonalakból származó oldalakat betölti, és dinamikus kóddal rendelkező oldali sablonokat tölt be, akkor dinamikusan be kell állítania ezeket a tulajdonságokat.

A honlapunk, Tulajdonnév , a WordPress API-t adatforrásként használja, de az alábbi utasításokat nagy sok pihenés vagy grafikon segítségével használhatja.

Az oldal kérése esetén meg kell ragadnia és visszaadja a megfelelő metaadatokat és oldaladatokat a getinitialprops () async funkció. Ezután használhatja a dinamikus adatokat a renderelési funkción belül, hogy a Google és más robotok feltérképezhessék az információkat.

Az adatforrástól és néhány más tényezőtől függően más megközelítést igényelhet a kezdeti tulajdonságok megszerzéséhez, de itt egy alapvető megközelítés az elindításhoz.

Statikus Async GetinitialProps (CTX) {
const res = várnak Önre fetch ( '// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
CONSROR ERROR_CODE = RES.STATUSCODE & GT; 200? Res.Statuscode: FALSE;
CONST DATA = AWAIT RES.JON ();
Legyen url = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
Legyen meta_title = várja az adatokat 
 .meta_title
Legyen meta_desc = várjon adatokat 
 .meta_desc
Visszatérés {
hibakód,
   CASE_STUDY: adatok,
   meta_title: meta_title,
   meta_desc: meta_desc,
   URL: URL
}
}

Most már képes lesz elérni az Ön által beállított tulajdonságokat. Ha az Ön kódjában használják, valami ilyesmit néznek ki.

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

Használja az összetevő tulajdonságait

Az utolsó lépés az összetevő létrehozása, hogy az általa elfogadott tulajdonságokat használja. Míg a Cím és Leírás egyes tulajdonságai minden oldalra kerülnek, mások, mint a CSS és a JS feltételei. Ezt figyelembe kell vennie az összetevőjében.

Példánkban az argumentum segítségével átadjuk tulajdonságainkat az összetevőnek kellékek . Ezután elérhetjük az egyes kellékeket a nevük használatával, prof.title vagy props.desc .

A feltételes blokkok beállításakor egy ilyen megközelítést igényelhet:

 {
Props.Css & amp; & amp;
& link rel = "stylesheet" href = {`$ {props.css}`} / & gt;
} 

Így, ha nincs CSS beállítása, akkor nem állít be egy üres link címkét az oldalán. Használhatja ugyanazt a megközelítést a JavaScript fájlokhoz.

Miután befejezte a feje komponensét, meg kell néznie valami ilyesmit:

 Importálja a fejét a "következő / fej"
CONST META = (kellékek) = & gt; (
& lt; head & gt;
& lt; title & gt; {props.title} & lt; / title & gt;
& lt; meta name = "Leírás" tartalom = {props.desc} / & gt;
& lt; meta ingatlan = "og: type" Tartalom = "weboldal" / & gt;
& lt; meta név = "og: Cím" tulajdonság = "og: Cím" tartalom = {props.title} / & gt;
& lt; meta name = "og: leírás" ingatlan = "og: leírás" tartalom = {props.desc} / & gt;
& lt; meta ingatlan = "og: site_name" tartalom = "megfelelő főnév" / & gt;
& lt; meta ingatlan = "og: URL" tartalom = {`$ {prof.canonical}«} / & gt;
& lt; meta név = "Twitter: kártya" tartalom = "Összefoglalás" / & gt;
& lt; meta név = "Twitter: Cím" tartalom = {props.title} / & gt;
& lt; meta név = "Twitter: Leírás" tartalom = {props.desc} / & gt;
& lt; meta név = "Twitter: webhely" tartalom = "@ propernounco" / & gt;
& lt; meta név = "Twitter: Creator" tartalom = "@ propernounco" / & gt;
& link rel = "icon" type = "kép / png" href = "/ statikus / kép / favicon.ico" / & gt;
& link rel = "Apple-touch-icon" href = "/ statikus / kép / favicon.ico" / & gt;
{
Props.Css & amp; & amp;
& link rel = "stylesheet" href = {`$ {props.css}`} / & gt;
}
{
Props.Image? (
& lt; meta ingatlan = "og: kép" tartalom = {`$ {profs.image}`} / & gt;
): (
& lt; meta ingatlan = "og: image" tartalom = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
props.image & amp; & amp;
& lt; meta név = "Twitter: kép" tartalom = {`$ {profs.image}`} / & gt;
}
{
Props.canonical & amp; & amp;
& link rel = "canonical" href = {`$ {prof.canonical}`} / & gt;
}
{
Props.js & amp; & amp;
& lt; script típus = "szöveg / JavaScript" src = {`$ {profs.js}`} & gt; & lt; / script & gt;
}
& lt; / head & gt;
)
Alapértelmezett meta exportálása 

Olvass tovább:

• Folytatható reagálható komponensek kifejlesztése
• A legjobb JavaScript API-k közül 14
• 15 Alapvető JavaScript eszköz, amelyet használni kell