Zbuduj komponent głowicy przyjazny SEO dla NextJS / React

Podczas reakcji jest potężna biblioteka JavaScript, nie zawiera wszystkich elementów, które musisz zbudować proste, funkcjonujące Układ strony internetowej. . NEXTJS to rama reagują, która umożliwia zbudowanie aplikacji renderowanych serwerów i stron internetowych z łatwością.

NEXTJS zawiera również szereg narzędzi i funkcji z pola, takiego jak webpack, babel, dynamiczne routing i pobieranie. Co najważniejsze, stwierdziłem, że NextJs jest bardzo przyjazny dla SEO.

Ta ramka pozwala na wykorzystanie renderowania po stronie serwera, która nie tylko sprawia, że ​​Twoje aplikacje i strony internetowe ładują się znacznie szybciej, ale także sprawia, że ​​reaguje na strony internetowe znacznie łatwiejsze dla wyszukiwarek.

NEXTJS ułatwia również stworzenie dobrze segmentowanej architektury witryny za pomocą Dynamiczne routing. lub Custom Server routing. . Na przykład możesz łatwo segmentować swoją stronę w różnych silosach, takich jak / artykuły / / produkty / produkty / i /, aby uzyskać lepszą strukturę treści.

Najlepszy ze wszystkich można wykorzystać wszystkie rzeczy, które sprawiają, że reagują świetnie jak komponenty, właściwości składowe i stany składowe do wdrożenia naprawdę elastycznych technik optymalizacji na stronie. W tym artykule zamierzam szczegółowo budować dobrze zoptymalizowany element głowicy do reagowania.

Znaczenie elementu głowy dla SEO

Teraz przed wejściem do tego, jak zbudować ten element głowicy, porozmawiajmy o tym, dlaczego jest ważne i co będziemy optymalizować.

Element głowy na swojej stronie będzie jedną z najważniejszych sekcji, jeśli chodzi o SEO techniczne. Po pierwsze, wszystkie metadane strony jest ustawione w głowicy. Tagi te obejmują tytuł, opis meta, słowa kluczowe strony, wszelkie istotne informacje o autora i ustawienia rzutni.

Element głowy jest również odpowiedzialny za ustawianie innych ważnych tagów, takich jak twój kanoniczny znacznik URL, wszelkie istotne znaczniki opengraph na Facebooku (OG Tags) lub kartki na Twitterze i znaczniki Meta Robots. Każdy z tych znaczników jest odpowiedzialny za przekazywanie różnych informacji w Google lub Social Networks, aby mogli lepiej zrozumieć, indeksować i udostępniać swoje treści.

Posiadanie niewłaściwie skonfigurowanych metadanych na swojej stronie internetowej może być katastrofalna do ogólnej optymalizacji witryny i na pewno może spowodować, że twoje rankingi zajmie noseve.

Na przykład dwa najgorsze kary, na których Twoja witryna mogłaby zmierzyć się z punktu widzenia optymalizacji na stronie, to kara "duplikaty tagu tytułu" i kara "duplikat Meta Tag". Te dwa tagi są odpowiedzialne za przekazanie "windy na witrynie" do Google. Dyktują również tekst, który użytkownik zobaczy, gdy Twoja strona pojawi się w wynikach wyszukiwania Google.

Jeśli każda strona na Twojej witrynie ma ten sam tytuł, a ten sam zestaw Opis, Google będzie miał trudny czas zrozumienia, na czym polega Twoja witryna. W rezultacie Google nie zwróci zbyt wiele uwagi na Twoją witrynę i zdecydowanie nie rozważy go właściwości autorytetu.

Jeśli jesteś zainteresowany poznaniem więcej informacji o technicznym SEO , Zobacz więcej na moim podejściu w Speckyboy .

Teraz, gdy rozumiesz trochę więcej o elemencie głowy i dlaczego jest tak ważny pod kapturem, spójrzmy na to, jak zbudować komponent główny przyjazny SEO do reagowania.

Zbuduj komponent główny przyjazny SEO

Komponent głowicy przyjazny SEO, który szczegółowo w tym artykule jest specyficzny dla NextJs. Jeśli jednak używasz różnych ram reagujących lub po prostu używasz reagowania, możesz użyć Reagować hełm zamiast składnika głowy NextJS.

Pierwszą rzeczą, którą chcesz zrobić, jest ustawić podstawową strukturę głowy. Poniższy kod może służyć jako przykład, ale możesz dodać lub usunąć rzeczy, ponieważ widzisz dopasowanie. Na gole minimum, twoja głowa powinna zawierać tag tytułowy, metad opis, adres URL kanonicznego i wszelkie istotne znaczniki społeczne.

& lt; Head & GT;
& lt; tytuł / tytuł / Title & GT;
& LT; Meta Name = "Opis" Content = "" / & GT;
& LT; Meta Property = "OG: Type" Content = "Witryna" / & GT;
& LT; Meta Imię = "OG: Title" Nieruchomość = "OG: Title" Content = "" / & GT;
& LT; Meta Name = "OG: Opis" Nieruchomość = "OG: Opis" Content = "" / & GT;
& LT; Meta Property = "OG: Site_name" Content = "" / & GT;
& LT; Meta Property = "OG: URL" Content = "" / & GT;
& LT; Meta Imię = "Twitter: Card" Content = "Podsumowanie" / & GT;
& LT; Meta Imię = "Twitter: Title" Content = "" / & GT;
& LT; Meta Imię = "Twitter: Opis" Content = {Propes.desc} / & GT;
& LT; Meta Imię = "Twitter: witryna" Content = "" / & gt;
& LT; Meta Imię = "Twitter: Creator" Content = "" / & GT;
& LT; Link Rel = "Icon" Type = "Image / PNG" Href = "/ Static / Images / Favicon.ico" / & GT;
łącznik Rel = "Apple-Touch-Icon" Href = "/ Static / Images / Favicon.ico" / & GT;
& LT; Link Rel = "Arkusz stylów" href = "" / & gt;
& LT; Meta Property = "OG: Image" Content = "" / & GT;
& LT; Meta Imię = "Twitter: Image" Content = "" / & GT;
łącznik rel = "kanoniczna" href = "" / & gt;
& LT; Skrypt Type = "Tekst / JavaScript" SRC = "" & GT; & LT; / Script & GT;
& LT; / Head & GT; 

Ustaw komponent

Następnie chcesz utworzyć nowy plik częściowy dla komponentu. Możesz zadzwonić do częściowego pliku SEO-META.JS. lub podobne. Ten plik powinien być przechowywany w częściowe informator.

Twój komponent początkowy wygląda w ten sposób:

 Importuj głowicę z "Dalej / Head"
const meta = (rekwizyty) = & gt; (
& lt; Head & GT;
& lt; tytuł / tytuł / Title & GT;
& LT; Meta Name = "Opis" Content = "" / & GT;
& LT; Meta Property = "OG: Type" Content = "Witryna" / & GT;
& LT; Meta Imię = "OG: Title" Nieruchomość = "OG: Title" Content = "" / & GT;
& LT; Meta Name = "OG: Opis" Nieruchomość = "OG: Opis" Content = "" / & GT;
& LT; Meta Property = "OG: Site_name" Content = "" / & GT;
& LT; Meta Property = "OG: URL" Content = "" / & GT;
& LT; Meta Imię = "Twitter: Card" Content = "Podsumowanie" / & GT;
& LT; Meta Imię = "Twitter: Title" Content = "" / & GT;
& LT; Meta Imię = "Twitter: Opis" Content = {Propes.desc} / & GT;
& LT; Meta Imię = "Twitter: witryna" Content = "" / & gt;
& LT; Meta Imię = "Twitter: Creator" Content = "" / & GT;
& LT; Link Rel = "Icon" Type = "Image / PNG" Href = "/ Static / Images / Favicon.ico" / & GT;
łącznik Rel = "Apple-Touch-Icon" Href = "/ Static / Images / Favicon.ico" / & GT;
& LT; Link Rel = "Arkusz stylów" href = "" / & gt;
& LT; Meta Property = "OG: Image" Content = "" / & GT;
& LT; Meta Imię = "Twitter: Image" Content = "" / & GT;
łącznik rel = "kanoniczna" href = "" / & gt;
& LT; Skrypt Type = "Tekst / JavaScript" SRC = "" & GT; & LT; / Script & GT;
& LT; / Head & GT;
)
Eksportuj domyślny META 

Zauważysz, że mijam rekwizyty lub właściwości do mojego komponentu. Będziemy wykorzystać te właściwości, aby wypełnić nasze metatę.

Importuj komponent.

Po skonfigurowaniu podstawowego komponentu możesz zaimportować go na stronach. Możesz zaimportować komponent, w tym w górnej części strony.

 Importuj meta z'./partials/seo-meta.js'

Możesz teraz umieścić komponent meta w funkcji renderowania, tak jak w przypadku modyfikowanego składnika głowy NextJS.

Utwórz właściwości składowe

Teraz, gdy importowałeś i umieściłeś komponent meta, będziesz chciał skonfigurować właściwości potrzebne dla swoich metadanych. Należy zazwyczaj zawierać tytuł, opis i adres URL dla każdej strony, ale można również zawierać obrazy i inne dane w razie potrzeby.

Możesz także dołączyć właściwości dla plików CSS i JavaScript, dzięki czemu można warunkowo załadować je na stronach w razie potrzeby. Ze wszystkimi zestawami właściwości komponent wyglądałby coś takiego:

 Meta
Tytuł = "To tytuł | Nazwa strony"
desc = "To jest opis"
Canonical = "https://www.someurl.com"
CSS = '/ statyczne / CSS / Styles.CSS
js = '/ statyczny / js / scripts.js'
/ & gt; 

Jeśli właśnie budujesz statyczną stronę internetową z następnym miejscem, powinieneś wypełnić właściwości zawartością statyczną. Jeśli jednak ładujesz strony z Dynamic Trases i wypełnienie szablonów stron z kodem dynamicznym, chcesz dostosować te właściwości dynamicznie.

Nasza strona internetowa, Odpowiedni rzeczownik , używa interfejsu API WordPress jako źródła danych, ale można użyć poniższych instrukcji, używając prawie dowolnego odpoczynku lub API Graphql.

Prowadząc żądanie strony, chcesz chwycić i zwrócić odpowiednie metadane i dane strony podczas getinitialprops () async funkcjonować. Spowoduje to wykorzystanie danych dynamicznych w funkcji renderowania, dzięki czemu Google i inne roboty mogą czołgać się z informacjami.

W zależności od źródła danych i kilku innych czynników, możesz podjąć inne podejście, aby uzyskać pierwsze właściwości, ale tutaj jest podstawowe podejście do rozpoczęcia.

Statyczne Async GetinititItialProps (CTX) {
Const Res = afait fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
Const Error_Code = Res.statuscode & GT; 200? res.statuscode: false;
CINST DATA = ACAIT RES.JSON ();
Niech URL = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
Niech meta_title = oczekujemy danych 
 .Meta_title
Niech meta_desc = czekaj na dane 
 .Meta_desc
powrót {
Kod błędu,
   CASE_Study: Dane,
   Meta_title: Meta_title,
   Meta_desc: Meta_desc,
   URL: URL.
}
}

Teraz będziesz mógł uzyskać dostęp do właściwości ustawionych w funkcji renderowania. Kiedy używany w kodzie wyglądałby coś takiego.

 Meta
tytuł = {ta.props.meta_title}
desc = {to.props.meta_desc}
kanoniczny = {to.props.url}
CSS = '/ statyczne / CSS / Styles.CSS
js = '/ statyczny / js / scripts.js'
/ & gt; 

Użyj właściwości w swoim komponencie

Ostatnim krokiem jest skonfigurowanie komponentu, dzięki czemu używa właściwości, które są przekazywane. Chociaż niektóre z właściwości, takich jak tytuł i opis zostaną ustawione na każdej stronie, inne jak CSS i JS mogą być warunkowe. Będziesz chciał wziąć to pod uwagę w komponencie.

W naszym przykładzie przechodzimy nasze właściwości do komponentu za pomocą argumentu rekwizyty . Możemy wtedy uzyskać dostęp do indywidualnych rekwizytów przy użyciu ich nazw, na przykład propor.title. lub Propes.desc. .

Podczas ustawiania bloków warunkowych można podjąć takie podejście:

 {
Props.css & amp; & amp;
& LT; Link Rel = "Arkusz stylów" href = {`$ {Props.css}`} / GT;
} 

W ten sposób nie ma zestawu CSS, nie ustawisz pustego znacznika łącza na swojej stronie. Możesz użyć tego samego podejścia do plików JavaScript.

Po zakończeniu wypełnienia składnika głowy powinno wyglądać na coś takiego:

 Importuj głowicę z "Dalej / Head"
const meta = (rekwizyty) = & gt; (
& lt; Head & GT;
& lt; tytuł i GT; {Props.title} & LT; / Title & GT;
& LT; Meta Name = "Opis" Content = {Propes.desc} / & GT;
& LT; Meta Property = "OG: Type" Content = "Witryna" / & GT;
& LT; Meta Name = "OG: Title" Nieruchomość = "OG: Title" Content = {propor.title} / & gt;
& LT; Meta Name = "OG: Opis" Nieruchomość = "OG: Opis" Content = {Propes.desc} / & GT;
& LT; Meta Property = "OG: Site_name" Content = "właściwa rzeczownik" / & gt;
& LT; Meta Property = "OG: URL" Content = {`$ {props.canonical}`} / & gt;
& LT; Meta Imię = "Twitter: Card" Content = "Podsumowanie" / & GT;
& LT; Meta Imię = "Twitter: Title" Content = {Props.title} / & GT;
& LT; Meta Imię = "Twitter: Opis" Content = {Propes.desc} / & GT;
& LT; Meta Imię = "Twitter: witryna" Content = "@ propernounco" / & gt;
& LT; Meta Imię = "Twitter: Creator" Content = "@ Propernounco" / & GT;
& LT; Link Rel = "Icon" Type = "Image / PNG" Href = "/ Static / Images / Favicon.ico" / & GT;
łącznik Rel = "Apple-Touch-Icon" Href = "/ Static / Images / Favicon.ico" / & GT;
{
Props.css & amp; & amp;
& LT; Link Rel = "Arkusz stylów" href = {`$ {Props.css}`} / GT;
}
{
Prop.Image? (
& LT; Meta Property = "OG: Image" Content = {`$ {Prop.Image}`} / & GT;
): (
& LT; Meta Property = "OG: Image" Content = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & GT;
)
}
{
Prop.Image & amp; & amp;
& LT; Meta Imię = "Twitter: Image" Content = {`$ {Prop.Image}`} / GT;
}
{
Props.canonical & amp; & amp;
łącznik rel = "kanoniczna" href = {`$ {props.canonical}`} / & gt;
}
{
Props.js & amp; & amp;
& LT; Skrypt Type = "Tekst / JavaScript" SRC = {`$ {Props.js}`} & GT; & LT; / Script & GT;
}
& LT; / Head & GT;
)
Eksportuj domyślny META 

Czytaj więcej:

• Rozwijaj wiele elementów reagujących
• 14 najlepszych apisów JavaScript
• 15 Niezbędne narzędzia JavaScript, które powinieneś użyć