Haupt / Wie Man

Erstellen Sie eine SEO-freundliche Kopfkomponente für NextJS / React

(Bildnachweis: Negativer Raum auf Pexels)

Während React eine leistungsstarke JavaScript-Bibliothek ist, enthält sie nicht alle Teile, die Sie zum Erstellen einer einfachen, funktionierenden Bibliothek benötigen Website-Layout . NextJS ist ein React-Framework, mit dem Sie problemlos vom Server gerenderte Anwendungen und Websites erstellen können.

NextJS enthält außerdem eine Reihe von sofort einsatzbereiten Tools und Funktionen wie Webpack, Babel, dynamisches Routing und Prefetching. Vor allem habe ich festgestellt, dass NextJS sehr SEO-freundlich ist.

Mit diesem Framework können Sie serverseitiges Rendering verwenden, wodurch Ihre Apps und Websites nicht nur erheblich schneller geladen werden, sondern auch das Crawlen Ihrer React-Websites für Suchmaschinen erheblich erleichtert wird.

NextJS macht es auch einfach, mithilfe von eine gut segmentierte Site-Architektur zu erstellen dynamisches Routing oder benutzerdefiniertes Server-Routing . Beispielsweise können Sie Ihre Website zur besseren Strukturierung von Inhalten einfach in verschiedene Silos wie / articles /, / products / und / services / segmentieren.

Das Beste ist, dass Sie alle Dinge, die React großartig machen, wie Komponenten, Komponenteneigenschaften und Komponentenzustände, verwenden können, um wirklich flexible On-Page-Optimierungstechniken zu implementieren. In diesem Artikel werde ich detailliert auf die Erstellung einer gut optimierten Kopfkomponente für React eingehen.

Die Bedeutung des Kopfelements für SEO

Bevor ich mich mit dem Aufbau dieser Kopfkomponente befasse, möchten wir zunächst erläutern, warum dies wichtig ist und was wir optimieren werden.

Das Hauptelement auf Ihrer Website wird einer der wichtigsten Abschnitte sein, wenn es um technisches SEO geht. Zum einen werden alle Metadaten der Website im Kopf festgelegt. Diese Tags umfassen Titel, Meta-Beschreibung, Seitenschlüsselwörter, relevante Autoreninformationen und Ansichtsfenstereinstellungen.

Das head-Element ist auch dafür verantwortlich, andere wichtige Tags wie Ihr kanonisches URL-Tag, alle relevanten Facebook OpenGraph-Tags (OG-Tags) oder Twitter-Karten sowie Ihre Meta-Robots-Tags festzulegen. Jedes dieser Tags ist dafür verantwortlich, unterschiedliche Informationen an Google oder soziale Netzwerke zu übermitteln, damit diese Ihre Inhalte besser verstehen, indizieren und teilen können.

Falsch konfigurierte Metadaten auf Ihrer Website können sich katastrophal auf Ihre gesamte Website-Optimierung auswirken und definitiv dazu führen, dass Ihre Rankings einen Sturzflug erleiden

Falsch konfigurierte Metadaten auf Ihrer Website können sich katastrophal auf Ihre gesamte Website-Optimierung auswirken und definitiv dazu führen, dass Ihre Rankings einen Sturzflug erleiden.

Beispielsweise sind zwei der schlimmsten Strafen, die Ihre Website unter dem Gesichtspunkt der On-Page-Optimierung erleiden könnte, eine Strafe für doppelte Titel-Tags und eine Strafe für doppelte Meta-Tags. Diese beiden Tags sind dafür verantwortlich, dass Google den 'Aufzugsabstand' Ihrer Website erhält. Sie bestimmen auch den Text, den ein Nutzer sieht, wenn Ihre Website in den Google-Suchergebnissen angezeigt wird.

Wenn jede Seite Ihrer Website denselben genauen Titel und dieselbe genaue Beschreibung hat, fällt es Google schwer, zu verstehen, worum es auf Ihrer Website geht. Infolgedessen wird Google Ihrer Website nicht allzu viel Aufmerksamkeit schenken und sie definitiv nicht als Autoritätseigenschaft betrachten.

Wenn Sie mehr über technische On-Page-SEO erfahren möchten , Weitere Informationen zu meinem Ansatz bei SpeckyBoy .

Nachdem Sie ein wenig mehr über das Kopfelement und dessen Bedeutung unter der Haube verstanden haben, werfen wir einen Blick darauf, wie Sie eine SEO-freundliche Kopfkomponente für React erstellen.

Erstellen Sie eine SEO-freundliche Kopfkomponente

Die SEO-freundliche Kopfkomponente, die ich in diesem Artikel ausführlich erläutere, ist spezifisch für NextJS. Wenn Sie jedoch ein anderes React-Framework verwenden oder nur React verwenden, können Sie es verwenden Reaktionshelm anstelle der NextJS-Kopfkomponente.

Als erstes möchten Sie Ihre grundlegende Kopfstruktur einrichten. Der folgende Code kann als Beispiel dienen, Sie können ihn jedoch nach Belieben hinzufügen oder entfernen. Ihr Kopf sollte jedoch mindestens ein Titel-Tag, ein Meta-Beschreibungs-Tag, eine kanonische URL und alle relevanten sozialen Tags enthalten.

Richten Sie die Komponente ein

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

Ihre Startkomponente sieht ungefähr so aus:

import Head from 'next/head' const Meta = (props) => ( ) export default Meta

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

Importieren Sie die Komponente

Sobald Sie Ihre Basiskomponente eingerichtet haben, können Sie sie in Ihre Seiten importieren. Sie können die Komponente importieren, indem Sie oben auf Ihrer Seite Folgendes einfügen.

import Meta from '../partials/seo-meta.js'

Sie können die Metakomponente jetzt wie bei der nativen NextJS-Kopfkomponente in Ihre Renderfunktion einfügen.

Erstellen Sie die Komponenteneigenschaften

Nachdem Sie Ihre Metakomponente 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 angeben, aber Sie können bei Bedarf auch Bilder und andere Daten einfügen.

Möglicherweise möchten Sie auch Eigenschaften für CSS- und JavaScript-Dateien einfügen, damit Sie diese bei Bedarf bedingt auf Seiten laden können. Wenn alle diese Eigenschaften festgelegt sind, sieht Ihre Komponente ungefähr so aus:

Wenn Sie nur eine statische Website mit NextJS erstellen, sollten Sie in der Lage sein, die Eigenschaften mit statischem Inhalt zu füllen. Wenn Sie jedoch Seiten von dynamischen Routen laden und die Seitenvorlagen mit dynamischem Code füllen, möchten Sie diese Eigenschaften dynamisch festlegen.

Unsere Internetseite, Eigenname , verwendet die WordPress-API als Datenquelle, aber Sie können die folgenden Anweisungen mit so ziemlich jeder REST- oder GraphQL-API verwenden.

Wenn Sie die Seite anfordern, möchten Sie die relevanten Metadaten und Seitendaten abrufen und zurückgeben getInitialProps () asynchron Funktion. Auf diese Weise können Sie die dynamischen Daten in der Renderfunktion verwenden, damit Google und andere Roboter die Informationen crawlen können.

Abhängig von Ihrer Datenquelle und einigen anderen Faktoren können Sie einen anderen Ansatz wählen, um die anfänglichen Eigenschaften zu erhalten. Hier ist jedoch ein grundlegender Ansatz, um Ihnen den Einstieg zu erleichtern.

static async getInitialProps(ctx) {     const res = await fetch('//api.some-url.com/case_studies/?slug=' + ctx.req.params.slug) const error_code = res.statusCode > 200 ? res.statusCode : false; const data = await res.json();  let url = 'https://' + ctx.req.headers.host + '/' + ctx.req.params.slug let meta_title = await data[0].meta_title  let meta_desc = await data[0].meta_desc return { error_code,    case_study: data,    meta_title: meta_title,    meta_desc: meta_desc,    url: url   } }

Sie können jetzt auf die Eigenschaften zugreifen, die Sie in Ihrer Renderfunktion festgelegt haben. Wenn sie in Ihrem Code verwendet werden, sehen sie ungefähr so aus.

Verwenden Sie die Eigenschaften in Ihrer Komponente

Der letzte Schritt besteht darin, Ihre Komponente so einzurichten, dass sie die Eigenschaften verwendet, die übergeben werden. Während einige Eigenschaften wie Titel und Beschreibung auf jeder Seite festgelegt werden, können andere wie CSS und JS von Bedingungen abhängig sein. Sie möchten dies in Ihrer Komponente berücksichtigen.

In unserem Beispiel übergeben wir unsere Eigenschaften mithilfe des Arguments an die Komponente Requisiten . Wir können dann auf die einzelnen Requisiten zugreifen, indem wir ihre Namen verwenden, zum Beispiel props.title oder props.desc .

Wenn Sie die bedingten Blöcke festlegen, können Sie wie folgt vorgehen:

{ props.css && }

Auf diese Weise setzen Sie kein leeres Link-Tag auf Ihrer Seite, wenn kein CSS festgelegt ist. Sie können denselben Ansatz für die JavaScript-Dateien verwenden.

Sobald Sie Ihre Kopfkomponente gefüllt haben, sollte sie ungefähr so aussehen:

import Head from 'next/head' const Meta = (props) => (        {props.title}                 { props.css &&  } { props.image ? (    ) : (    )    }  { props.image &&        } { props.canonical &&  } { props.js &&     }  ) export default Meta

Weiterlesen: