Vybudujte SEO-Friendly Head Component pro NextJs / Reagujte

Zatímco reaguje je mocná knihovna JavaScriptu, nezahrnuje všechny kusy, které potřebujete vytvořit jednoduchý, fungující rozložení webových stránek . NextJs je reakcí rámec, který vám umožní vytvořit aplikace a webové stránky s nastavením serveru.

NextJs také obsahuje řadu nástrojů a funkcí přímo z krabice, jako je webpack, babel, dynamický směrování a předefinování. A co je nejdůležitější, zjistil jsem, že příštížs je velmi seo-šetrný.

Tento rámec umožňuje využít vykreslování na straně serveru, což nejenže zátěže aplikace a webové stránky značně rychleji, ale také vaše webové stránky reagují mnohem snazší pro vyhledávače pro plazení.

NextJs také usnadňuje vytváření dobře segmentované architektury webu pomocí Dynamické směrování nebo Vlastní směrování serveru . Můžete například snadno segmentovat své webové stránky do různých sila, jako jsou / články /, / produkty /, a / služby / služby / pro lepší strukturování obsahu.

Nejlepší ze všech, můžete využít všech věcí, které umožňují reagovat skvělé jako komponenty, vlastnosti komponent a stavy komponenty, které implementují skutečně flexibilní techniky optimalizace na stránce. V tomto článku budu podrobně budovat dobře optimalizovanou složku hlavy pro reakci.

Význam hlavového prvku pro SEO

Teď předtím, než se dostanu do toho, jak budovat tuto složku hlavy, pojďme mluvit o tom, proč je to důležité a co budeme optimalizovat.

Prvek hlavy na vašich webových stránkách bude jedním z nejdůležitějších sekcí, pokud jde o technické SEO. Pro jednoho, všechny webové stránky metadata je nastavena v hlavě. Tyto tagy zahrnují název, meta popis, klíčová slova stránky, jakékoli relevantní informace o autorizaci a nastavení výřezu.

Prvek hlavy je také zodpovědný za nastavení jiných důležitých tagů, jako je vaše kanonická adresa URL, jakékoli relevantní facebook OpenGraph tagy (OG tagy) nebo karty Twitteru a tagy meta roboty. Každý z těchto tagů je zodpovědný za dopravu různých informací do služby Google nebo sociálních sítí, aby mohli lépe porozumět, indexovat a sdílet váš obsah.

Mít nesprávně nakonfigurované metadata na vašich webových stránkách může být katastrofická pro vaše celkové optimalizace webových stránek a určitě způsobit vaše žebříčky, aby se vezmou nosedive.

Například dva z nejhorších sankcí, které by vaše webové stránky mohly čelit standardu Optimalizace na stránkách, je "duplicitní tag tag" trest a "duplicitní meta tag" pokutu. Tyto dva tagy jsou zodpovědné za poskytování vašich webových stránek 'výtahové hřiště' do společnosti Google. Rovněž diktují text, který uživatel uvidí, když se vaše webové stránky zobrazí ve výsledcích vyhledávání Google.

Pokud má každá stránka na vašich webových stránkách stejný přesný titul a stejný přesný popis, Google bude mít těžký čas pochopení toho, o čem je vaše webové stránky. Výsledkem je, že Google nebude věnovat příliš mnoho pozornosti na vaše webové stránky a rozhodně to nebude považovat za vlastnost oprávnění.

Máte-li zájem o další informace o technické na stránce SEO , Více viz na můj přístup na Speckyboy .

Teď, když pochopíte trochu více o prvku hlavy a proč je to tak důležité pod kapotou, podívejme se, jak budovat seo-přátelskou složku hlavy pro reakci.

Vybudovat se seo-přátelskou složku hlavy

SEO-přátelská hlava složka, kterou v tomto článku podrobně popisuji, je specifická pro NextJs. Pokud však používáte jiný rámec reakce nebo právě používáte Reakce, můžete použít Reagovat helmu namísto složky NextJs Head.

První věc, kterou budete chtít udělat, je nastavit základní strukturu hlavy. Níže uvedený kód může sloužit jako příklad, ale neváhejte přidat nebo odstranit věci na to, jak vidíte fit. Na holé minimum by však vaše hlava měla obsahovat titulní značku, meta popis tag, kanonická adresa URL a jakékoli relevantní sociální značky.

& lt; hlava & gt;
& lt; titul & gt; & lt; / titul & gt;
& lt; meta název = "popis" obsah = "" / & gt;
& lt, meta vlastnost = "og: typ" content = "webové stránky" / & gt;
& lt, meta název = "og: titul" vlastnost = "og: titul" content = "" / & gt;
& lt; meta název = "og: popis" vlastnost = "og: popis" obsah = "" / & gt;
& lt, meta vlastnost = "og: site_name" content = "" / & gt;
& lt; meta vlastnost = "og: url" obsah = "" / & gt;
& lt; meta název = "Twitter: karta" Content = "Shrnutí" / gt;
& lt, meta název = "Twitter: název" Content = "" / & gt;
& lt; meta název = "Twitter: popis" Obsah = {Props.desc} /> GT;
& lt; meta název = "Twitter: místo" obsah = "" / & gt;
& lt; meta název = "Twitter: Creator" Content = "" / & gt;
& lt, link rel = "icon" type = "image / png" href = "/ statické / obrazy / favicon.ico" / & gt;
Link Rel = "Apple-touch-icon" href = "/ statické / obrazy / favicon.ico" / & gt;
& lt; link rel = "Stylesheet" href = "" / & gt;
Meta Meta Property = "OG: obrázek" Content = "" / & gt;
& lt, meta název = "Twitter: obrázek" Obsah = "" / & gt;
& lt; link rel = "kanonický" href = "" / & gt;
& lt; typ script = "text / javascript" src = "" & gt; & lt; / script & gt;
& lt; / hlava & gt; 

Nastavte komponentu

Dále budete chtít vytvořit nový dílčí soubor pro komponentu. Můžete zavolat částečný soubor SEO-META.JS. nebo podobné. Tento soubor by měl být uchováván v částečné adresář.

Vaše startovní komponenta bude vypadat něco takového:

 Dovozní hlava z 'Další / hlava'
CONST META = (rekvizity) = & gt; (
& lt; hlava & gt;
& lt; titul & gt; & lt; / titul & gt;
& lt; meta název = "popis" obsah = "" / & gt;
& lt, meta vlastnost = "og: typ" content = "webové stránky" / & gt;
& lt, meta název = "og: titul" vlastnost = "og: titul" content = "" / & gt;
& lt; meta název = "og: popis" vlastnost = "og: popis" obsah = "" / & gt;
& lt, meta vlastnost = "og: site_name" content = "" / & gt;
& lt; meta vlastnost = "og: url" obsah = "" / & gt;
& lt; meta název = "Twitter: karta" Content = "Shrnutí" / gt;
& lt, meta název = "Twitter: název" Content = "" / & gt;
& lt; meta název = "Twitter: popis" Obsah = {Props.desc} /> GT;
& lt; meta název = "Twitter: místo" obsah = "" / & gt;
& lt; meta název = "Twitter: Creator" Content = "" / & gt;
& lt, link rel = "icon" type = "image / png" href = "/ statické / obrazy / favicon.ico" / & gt;
Link Rel = "Apple-touch-icon" href = "/ statické / obrazy / favicon.ico" / & gt;
& lt; link rel = "Stylesheet" href = "" / & gt;
Meta Meta Property = "OG: obrázek" Content = "" / & gt;
& lt, meta název = "Twitter: obrázek" Obsah = "" / & gt;
& lt; link rel = "kanonický" href = "" / & gt;
& lt; typ script = "text / javascript" src = "" & gt; & lt; / script & gt;
& lt; / hlava & gt;
)
Export výchozí meta 

Všimnete si, že procházím props. nebo vlastnosti, k mé složce. Tyto vlastnosti budeme používat k naplnění našich meta tagů.

Importovat komponentu

Jakmile nastavíte základní komponentu, můžete jej importovat do svých stránek. Komponent můžete importovat pomocí následujícího návrhu na horní straně stránky.

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

Nyní můžete umístit meta komponentu v rámci funkce render, stejně jako byste s nativní složkou NextJs.

Vytvořte vlastnosti komponenty

Nyní, když jste importovali a umístili svou meta komponentu, budete chtít nastavit vlastnosti, které potřebujete pro vaše metadata. Měli byste obvykle obsahovat název, popis a adresu URL pro každou stránku, ale podle potřeby můžete také zahrnout obrázky a další data.

Můžete také také zahrnout vlastnosti pro soubory CSS a JavaScript, takže je můžete podmíněno načíst na stránky podle potřeby. Se všemi těmito vlastnostmi by vaše složka vypadala něco takového:

 Meta
název = "Toto je název | Jméno webu "
DESC = "Toto je popis"
kanonický = "https://www.someurl.com"
CSS = '/ static / css / styles.css'
JS = '/ Static / JS / Skripts.js'
/ & gt; 

Pokud právě budujete statickou webovou stránku s aplikací NextJs, měli byste být schopni naplnit vlastnosti se statickým obsahem. Pokud však načítáte stránky z dynamických tras a naplníte šablony stránek s dynamickým kódem, budete chtít tyto vlastnosti dynamicky nastavit.

Naše webové stránky, Vlastní jméno , Používá aplikaci WordPress API jako zdroj dat, ale můžete použít níže uvedené pokyny pomocí skoro jakékoliv odpočinku nebo grafQL API.

Při požadavku na stránku budete chtít chytit a vrátit příslušná data metadata a stránka během getInitialprops () async funkce. To vám pak umožní použít dynamická data v rámci funkce render, takže Google a další roboti mohou procházet informace.

V závislosti na zdroji dat a několika dalších faktorech, můžete si vzít jiný přístup k získání počátečních vlastností, ale zde je základní přístup, který chcete začít.

statické async getIntialprops (ctx) {
CONST RES = čeká na fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
CONST ERROR_CODE = res.Statcode & gt; 200? res.Statcode: false;
CONST data = čeká res.json ();
Nechat URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
Nechte meta_title = čekají na data 
 .meta_title
Nechte meta_desc = čekají na data 
 .meta_desc
vrátit se {
chybový kód,
   Case_Study: data,
   Meta_title: Meta_Title,
   Meta_DESC: Meta_DESC,
   URL: URL
}
}

Nyní budete mít přístup k vlastnostem, které jste nastavili v rámci vaší funkce render. Při použití ve vašem kódu by vypadali něco takového.

 Meta
název = {this.props.meta_title}
Desc = {This.props.meta_desc}
kanonický = {this.props.url}
CSS = '/ static / css / styles.css'
JS = '/ Static / JS / Skripts.js'
/ & gt; 

Použijte vlastnosti ve složce

Posledním krokem je nastavení komponenty tak, aby použije vlastnosti, které je prošel. Zatímco některé z vlastností jako název a popis budou nastaveny na každé stránce, jiní, jako je CSS a JS mohou být podmíněny. Chcete-li to vzít v úvahu ve vaší komponentě.

V našem příkladu absolvujeme naše vlastnosti komponentu pomocí argumentu props. . Můžeme pak přistupovat k jednotlivým rekvizitám, například jejich jména Props.title. nebo Proplands.desc. .

Při nastavování podmíněných bloků můžete přimět takto:

 {
Props.css & Amp;
& lt; link rel = "Stylesheet" href = {`$ {Props.CSS}`} / & gt;
} 

Tímto způsobem, pokud neexistuje nastavení CSS, nebudete nastavit značku Prázdný odkaz na stránku. Můžete použít stejný přístup pro soubory JavaScriptu.

Jakmile dokončíte naplnění složky hlavy, mělo by to vypadat něco takového:

 Import hlavy z 'Další / hlava'
CONST META = (rekvizity) = & gt; (
& lt; hlava & gt;
& lt; titul & gt; {props.title} & lt; / titul & gt;
 GT;
& lt, meta vlastnost = "og: typ" content = "webové stránky" / & gt;
Meta Jméno = "OG: Název" Property = "OG: Název" Content = {Props.title} / & gt;
Meta Jméno = "OG: Popis" Property = "OG: Popis" Obsah = {Props.desc} /> GT;
& lt; meta vlastnost = "og: site_name" content = "správné podstatné jméno" / & gt;
& lt, meta vlastnost = "og: url" obsah = {`$ {prope.canonical}`} / a gt;
& lt; meta název = "Twitter: karta" Content = "Shrnutí" / gt;
& lt; meta název = "Twitter: název" Content = {Props.title} / & gt;
& lt; meta název = "Twitter: popis" Obsah = {Props.desc} /> GT;
& lt; meta název = "Twitter: Site" Content = "@ Propernounco" / & gt;
& lt, meta název = "Twitter: Creator" Content = "@ Propernounco" / & gt;
& lt, link rel = "icon" type = "image / png" href = "/ statické / obrazy / favicon.ico" / & gt;
Link Rel = "Apple-touch-icon" href = "/ statické / obrazy / favicon.ico" / & gt;
{
Props.css & Amp;
& lt; link rel = "Stylesheet" href = {`$ {Props.CSS}`} / & gt;
}
{
Props.image? (
& lt; meta vlastnost = "og: image" content = {`$ {Props.Image}`} / & gt;
): (
& lt, meta vlastnost = "og: obrázek" obsah = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
Props.image & Amp;
& lt; meta název = "Twitter: Obrázek" Obsah = {`$ {Props.Image}`} / & gt;
}
{
Props.canonical & amp;
& lt, link rel = "kanonický" href = {`$ {Props.canonical}`} / & gt;
}
{
Props.js & amp;
& lt, skript typu = "text / javascript" src = {`$ {Props.js}`} & gt; & lt; / script & gt;
}
& lt; / hlava & gt;
)
Export výchozí meta 

Přečtěte si více:

• Vyvíjet resumovatelné reakční komponenty
• 14 nejlepších JavaScript API
• 15 Základní nástroje JavaScript, které byste měli používat