Erstellen Sie eine seo-freundliche Kopfkomponente für NextJs / Reagieren Sie

Während der Reaktion ist eine leistungsstarke JavaScript-Bibliothek, die nicht alle Teile enthält, die Sie benötigen, um ein einfaches Funktionieren zu erstellen Website-Layout. . NextJs ist ein Reaktions-Framework, mit dem Sie serentere Anwendungen und Websites mit Leichtigkeit erstellen können.

NextJs enthält auch eine Reihe von Werkzeugen und Funktionen, die sich direkt aus der Box wie WebPack, Babel, dynamisches Routing und Prefetching befinden. Am wichtigsten ist, dass NextJs sehr südfreundlich ist.

Mit diesem Framework können Sie die serverseitige Rendering verwenden, die Ihre Apps und Websites nicht nur erheblich schneller lädt, sondern auch Ihre Reaktions-Websites lässt, um Suchmaschinen zu kriechen.

NextJs erlaubt es auch, eine gut segmentierte Website-Architektur mit der Verwendung zu erstellen dynamisches Routing oder Benutzerdefinierte Server-Routing. . Beispielsweise können Sie Ihre Website problemlos in verschiedene Silos wie / Artikel /, / Produkte /, und / -dienste / für eine bessere Inhaltsstrukturierung einnehmen.

Das Beste von allem, Sie können alle Dinge nutzen, die ideal wie Komponenten, Komponenteneigenschaften und Komponentenzustände reagieren, um wirklich flexible auf-seitige Optimierungstechniken umzusetzen. In diesem Artikel werde ich ein detailliertes Erstellen einer gut optimierten Kopfkomponente für die Reaktion.

Die Bedeutung des Kopfelements für SEO

Nun, bevor ich in den Bau dieser Kopfkomponente einstieg, sprechen wir zuerst darüber, warum es wichtig ist und was wir optimieren werden.

Das Head-Element auf Ihrer Website wird einer der wichtigsten Abschnitte, wenn es um technische SEO geht. Für eins ist alle Website-Metadaten in den Kopf eingestellt. Diese Tags umfassen Titel, Meta-Beschreibung, Seitenwörter, alle relevanten Autoreninformationen und Ansichtsfenstereinstellungen.

Das Head-Element ist auch dafür verantwortlich, andere wichtige Tags wie in Ihrem kanonischen URL-Tag, beliebige relevante Facebook-OpenGraph-Tags (OG-Tags) oder Twitter-Karten sowie Ihre Meta-Roboter-Tags. Jede dieser Tags ist dafür verantwortlich, verschiedene Informationen an Google oder soziale Netzwerke zu vermitteln, damit sie Ihren Inhalt besser verstehen, indexieren und teilen können.

Mit unsachgemäß konfigurierten Metadaten auf Ihrer Website kann auf Ihrer Website katastrophal sein, um Ihre allgemeine Website-Optimierung zu erhalten, und kann definitiv dazu führen, dass Ihre Rangliste ein Nosefive aufnehmen können.

Zum Beispiel sind zwei der schlimmsten Strafen, die Ihre Website von einem auf dem Seitenseite optimierenden Standpunkt konfrontiert könnten, ein "Duplikat-Titel-Tag" -Slange und eine "doppelte Meta-Tag-Strafe". Diese beiden Tags sind dafür verantwortlich, Google der "Elevator Pitch" Ihrer Website an Google angeben. Sie diktieren auch den Text, den ein Benutzer sehen wird, wenn Ihre Website in Google-Suchergebnisse angezeigt wird.

Wenn jede Seite auf Ihrer Website den gleichen genauen Titel und die gleiche genaue Beschreibung hat, hat Google eine schwierige Zeit, zu verstehen, worum es Ihrer Website geht. Infolgedessen wird Google nicht zu viel Aufmerksamkeit auf Ihre Website lenkt, und es wird es definitiv nicht als Autoritätseigenschaft in Betracht ziehen.

Wenn Sie daran interessiert sind, mehr über technische auf-Seite SEO zu erfahren , Sehen Sie mehr auf meinen Ansatz bei Speckyboy .

Nun, da Sie ein bisschen mehr über das Kopfelement verstehen und warum es unter der Haube so wichtig ist, werfen wir einen Blick darauf, wie Sie eine seo-freundliche Kopfkomponente für die Reaktion aufbauen können.

Erstellen Sie eine seo-freundliche Kopfkomponente

Die seo-freundliche Kopfkomponente, die ich in diesem Artikel detaillierte in diesem Artikel detaillierte für NextJs spezifisch ist. Wenn Sie jedoch ein anderes Reaktionsrahmen verwenden oder nur reagieren, können Sie verwenden Helm reagieren anstelle der NextJs-Kopfkomponente.

Das erste, was Sie tun möchten, ist Ihre grundlegende Kopfstruktur eingerichtet. Der untenstehende Code kann als Beispiel dienen, fühlen Sie sich jedoch frei, um Dinge hinzuzufügen oder zu entfernen, wie Sie es fit sehen. Auf dem nackten Minimum sollte Ihr Kopf jedoch ein Titel-Tag, ein Meta-Beschreibung-Tag, eine kanonische URL und alle relevanten sozialen Tags enthalten.

& lt; head & gt;
& lt; Titel & GT; & lt; / titre & gt;
& lt; Meta Name = "Beschreibung" content = "" / & gt;
& lt; Meta Property = "og: type" content = "website" / & gt;
& lt; Meta Name = "og: title" Eigenschaft = "og: title" content = "" / & gt;
& lt; Meta Name = "og: Beschreibung" Eigenschaft = "og: Beschreibung" content = "" / & gt;
& lt; Meta-Eigenschaft = "og: site_name" content = "" / & gt;
& lt; Meta Property = "og: url" content = "" / & gt;
& lt; Meta Name = "Twitter: Card" content = "Zusammenfassung" / & GT;
& lt; Meta Name = "Twitter: Titel" content = "" / & gt;
& lt; Meta Name = "Twitter: Beschreibung" content = {props.desc} / & gt;
& lt; Meta Name = "Twitter: Site" content = "" / & gt;
& lt; Meta Name = "Twitter: Creator" content = "" / & gt;
& lt; link rel = "icon" type = "bild / png" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "Apple-Touch-icon" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "stylesheet" href = "" / & gt;
& lt; Meta-Eigenschaft = "og: Bild" content = "" / & gt;
& lt; Meta Name = "Twitter: Bild" content = "" / & gt;
& lt; link rel = "kanonisch" href = "" / & gt;
& lt; Skript-Typ = "Text / JavaScript" SRC = "" & Gt; & lt; / script & gt;
& lt; / head & gt; 

Richten Sie die Komponente ein

Als Nächstes möchten Sie eine neue Teildatei für Ihre Komponente erstellen. Sie können die Teildatei anrufen seo-meta.js. o.ä. Diese Datei sollte in der Partials. Verzeichnis.

Ihre Startkomponente sieht so aus wie folgt aus:

 Importkopf von 'next / head' importieren
const Meta = (Requisiten) = & gt; (
& lt; head & gt;
& lt; Titel & GT; & lt; / titre & gt;
& lt; Meta Name = "Beschreibung" content = "" / & gt;
& lt; Meta Property = "og: type" content = "website" / & gt;
& lt; Meta Name = "og: title" Eigenschaft = "og: title" content = "" / & gt;
& lt; Meta Name = "og: Beschreibung" Eigenschaft = "og: Beschreibung" content = "" / & gt;
& lt; Meta-Eigenschaft = "og: site_name" content = "" / & gt;
& lt; Meta Property = "og: url" content = "" / & gt;
& lt; Meta Name = "Twitter: Card" content = "Zusammenfassung" / & GT;
& lt; Meta Name = "Twitter: Titel" content = "" / & gt;
& lt; Meta Name = "Twitter: Beschreibung" content = {props.desc} / & gt;
& lt; Meta Name = "Twitter: Site" content = "" / & gt;
& lt; Meta Name = "Twitter: Creator" content = "" / & gt;
& lt; link rel = "icon" type = "bild / png" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "Apple-Touch-icon" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "stylesheet" href = "" / & gt;
& lt; Meta-Eigenschaft = "og: Bild" content = "" / & gt;
& lt; Meta Name = "Twitter: Bild" content = "" / & gt;
& lt; link rel = "kanonisch" href = "" / & gt;
& lt; Skript-Typ = "Text / JavaScript" SRC = "" & Gt; & lt; / script & gt;
& lt; / head & gt;
)
Standard-Standard-Meta exportieren 

Sie werden feststellen, dass ich vorbei bin Requisiten oder Eigenschaften zu meiner Komponente. Wir verwenden diese Eigenschaften, um unsere Meta-Tags aufzufüllen.

Den Bauteil importieren

Sobald Sie Ihre Basiskomponente eingerichtet haben, können Sie sie dann in Ihre Seiten importieren. Sie können die Komponente importieren, indem Sie das Folgende oben auf Ihrer Seite einschließen.

 Importieren von Meta von '../partials/seo-meta.js'

Sie können jetzt die Meta-Komponente in Ihrer Render-Funktion aufgeben, genau wie Sie mit der Native NextJS-Kopfkomponente würden.

Erstellen Sie die Komponenteneigenschaften

Jetzt, da Sie Ihre Meta-Komponente importiert und platziert haben, möchten Sie die Eigenschaften einrichten, die Sie für Ihre Metadaten benötigen. Sie sollten normalerweise Titel, Beschreibung und URL für jede Seite enthalten, aber Sie können auch Bilder und andere Daten bei Bedarf enthalten.

Möglicherweise möchten Sie auch Eigenschaften für CSS- und JavaScript-Dateien einschließen, sodass Sie sie je nach Bedarf auf Seiten bedingt laden können. Mit all diesen Eigenschaften, die eingestellt ist, würde Ihre Komponente so etwas aussehen:

 & lt; Meta
title = "Dies ist ein Titel | Webseiten-Name"
DESC = "Dies ist die Beschreibung"
Canonical = "https://www.somerurl.com"
CSS = '/ Static / CSS / Styles.css'
js = '/ static / js / scripts.js'
/ & gt; 

Wenn Sie nur eine statische Website mit NextJs bauen, sollten Sie die Eigenschaften mit statischen Inhalten füllen können. Wenn Sie jedoch Seiten von dynamischen Routen laden und die Seitenvorlagen mit dynamischem Code füllen, möchten Sie diese Eigenschaften dynamisch einstellen.

Unsere Internetseite, Eigenname Verwenden Sie die WordPress-API als Datenquelle, können Sie jedoch die folgenden Anweisungen verwenden, indem Sie eine ziemlich viele Ruhel- oder GraphQL-API verwenden.

Bei der Anforderung der Seite möchten Sie die relevanten Metadaten- und Seitendaten während der getinitialprops () asynchron Funktion. Auf diese Weise können Sie die dynamischen Daten innerhalb der Render-Funktion verwenden, damit Google und andere Roboter die Informationen kriechen können.

Je nach Ihrer Datenquelle und einigen anderen Faktoren können Sie einen anderen Ansatz annehmen, um die ursprünglichen Eigenschaften zu erhalten, aber hier ist ein grundlegender Ansatz, um Sie zu beginnen.

statische asynchische getinitialprops (ctx) {
const RES = erwarten Sie Abruf ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.Slug)
const error_code = res.statuscode & gt; 200? res.statuscode: FALSE;
const data = warten res.json ();
Lassen Sie die URL = 'https: //' + ctx.req.heeheer.host + '/' + ctx.req.params.Slug
let meta_title = erwarten Daten 
 .meta_title
let meta_desc = erwarten Daten 
 .Meta_DESC
Rückkehr {
Fehlercode,
   case_study: data,
   meta_title: meta_title,
   meta_desc: meta_desc,
   URL: URL.
}
}

Sie können jetzt auf die Eigenschaften, die Sie in Ihrer Render-Funktion festgelegt haben. Wenn Sie in Ihrem Code verwendet werden, würden sie so etwas aussehen.

 & lt; Meta
title = {this.props.meta_title}
desc = {this.props.meta_desc}
kanonisch = {this.props.url}
CSS = '/ Static / CSS / Styles.css'
js = '/ static / js / scripts.js'
/ & gt; 

Verwenden Sie die Eigenschaften in Ihrer Komponente

Der letzte Schritt besteht darin, Ihre Komponente einzustellen, sodass die Eigenschaften verwendet werden, die er verabschiedet wird. Während einige der Eigenschaften wie Titel und Beschreibung auf jeder Seite eingestellt werden, sind andere wie CSS und JS bedingt. Sie möchten dies in Ihrer Komponente berücksichtigen.

In unserem Beispiel bestehen wir unsere Eigenschaften mit dem Argument an die Komponente Requisiten . Wir können dann mit ihren Namen auf die einzelnen Requisiten zugreifen, beispielsweise Props.Title. oder props.dec. .

Wenn Sie die bedingten Blöcke einstellen, können Sie einen Ansatz so annehmen:

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

Wenn es kein CSS-Set gibt, setzen Sie kein leeres Link-Tag auf Ihrer Seite ein. Sie können denselben Ansatz für die JavaScript-Dateien verwenden.

Sobald Sie Ihre Kopfkomponente bevölkert haben, sollte es so etwas aussehen:

 Importieren Sie den Kopf von 'Next / Head'
const Meta = (Requisiten) = & gt; (
& lt; head & gt;
& lt; titel & gt; {props.title} & lt; / title & gt;
& lt; Meta Name = "Beschreibung" content = {props.desc} / & gt;
& lt; Meta Property = "og: type" content = "website" / & gt;
& lt; Meta Name = "og: Titel" Eigenschaft = "og: title" content = {props.title} / & gt;
& lt; Meta Name = "og: Beschreibung" Eigenschaft = "og: Beschreibung" content = {props.desc} / & gt;
& lt; Meta Property = "og: site_name" content = "richtiges Substantiv" / & gt;
& lt; Meta Property = "og: URL" content = {`$ {props.canonical}} / & gt;
& lt; Meta Name = "Twitter: Card" content = "Zusammenfassung" / & GT;
& lt; Meta Name = "Twitter: Titel" Inhalt = {props.title} / & gt;
& lt; Meta Name = "Twitter: Beschreibung" content = {props.desc} / & gt;
& lt; Meta Name = "Twitter: Site" content = "@ propernounco" / & gt;
& lt; Meta Name = "Twitter: Creator" content = "@ propernounco" / & gt;
& lt; link rel = "icon" type = "bild / png" href = "/ static / images / favicon.ico" / & gt;
& lt; link rel = "Apple-Touch-icon" href = "/ static / images / favicon.ico" / & gt;
{
props.css & amp; & amp;
& lt; link rel = "stylesheet" href = {`$ {props.css}`} / & gt;
}
{
Requisiten.Image? (
& lt; Meta-Eigenschaft = "og: image" content = {`$ {props.image}} / & gt;
): ((
& lt; Meta-Eigenschaft = "og: Bild" content = "https://www.propernoun.cohttps://cdn.thefastcode.com/static/images/proper-noun-social.png" / & gt;
)
}
{
props.image & amp; & amp;
& lt; Meta Name = "Twitter: Bild" content = {`$ {props.image}`} / & gt;
}
{
rectrs.canonical & amp; & amp;
& lt; link rel = "kanonisch" href = {`$ {props.canonical}} / & gt;
}
{
props.js & amp; & amp;
& lt; Skript-Typ = "Text / JavaScript" SRC = {`$ {props.js} {} & gt; & lt; / script & gt;
}
& lt; / head & gt;
)
Standard-Standard-Meta exportieren 

Weiterlesen:

• Wiederholbare Reaktionskomponenten entwickeln
• 14 der besten JavaScript-APIs
• 15 Wesentliche JavaScript-Tools, die Sie verwenden sollten