Seitentitel, Meta-Tags und Meta-Beschreibungen sind wichtig für SEO. Sie sind das erste, was ein Benutzer in den SERPS sieht, und bestimmen, ob er sich zu Ihrer Website durchklickt. Es ist daher wichtig, dass Sie die Titel, Meta-Tags und die Beschreibung Ihrer Website optimieren.
In Next.js fügen Sie sie über die benutzerdefinierte Head-Komponente hinzu. Sie können sie entweder auf allen Seiten der Anwendung hinzufügen oder sie für jede Seite anpassen.
Hinzufügen eines globalen Head-Tags zu allen Next.js-Seiten
Next.js stellt _app.js bereit, um Seiten zu initialisieren. Sie können damit Meta-Tags erstellen, die auf allen Seiten geteilt werden.
importieren '../styles/globals.css'
importieren Kopf aus 'weiter/Kopf'FunktionMeine App({ Komponente, pageProps }) {
zurückkehren <>
<Kopf>
<metaname="Autor" Inhalt="John Doe"/>
</Head>
<Komponente {...pageProps} />
</>
}
ExportStandard Meine App
Wenn Sie möchten, dass eine Seite einen benutzerdefinierten Titel und eine benutzerdefinierte Beschreibung hat, fügen Sie ihr die Head-Komponente hinzu, und Next.js verwendet sie anstelle der Standardkomponente in der App-Komponente.
Hinzufügen von Meta-Tags und Beschreibung zu einer bestimmten Next.js-Seite
Statische Meta-Tags und Beschreibungen eignen sich für Seiten, deren Inhalt gleich bleibt, beispielsweise eine Homepage.
Öffnen Sie die Datei /pages/index.js und ändern Sie das Head-Tag mit dem entsprechenden Titel und der Beschreibung.
importieren Kopf aus "nächster/Kopf";konst Startseite= () => {
zurückkehren (
<>
<Kopf>
<Titel>Bloggen</title>
<metaname="Ansichtsfenster" Inhalt="initial-scale=1.0, width=device-width" />
<metaname='Beschreibung' Inhalt='Programmierartikel'/>
</Head>
<hauptsächlich>
<h1>Wilkommen auf meinem Blog!</h1>
</main>
</>
);
};
ExportStandard Heim;
Sie greifen auf die Head-Komponente zu, indem Sie sie aus next/head importieren. Es funktioniert, indem Elemente an das Head-Tag von angehängt werden eine HTML-Seite. Je nachdem, wo Sie diese Komponente platzieren, sind die Meta-Tags und die Beschreibung in der gesamten Anwendung oder auf einzelnen Seiten verfügbar.
Durch das Hinzufügen des Titels, der Breite des Darstellungsbereichs und der Beschreibung in der Datei _app.js wird sichergestellt, dass alle Seiten dieselben Metadaten haben.
Diese Seite hat statische Inhalte, aber manchmal möchten Sie vielleicht Seiten erstellen, die dynamische Inhalte verwenden.
Hinzufügen von dynamischem Meta-Titel und Beschreibungen zu einer Next.js-Seite
Je nach Anwendungsfall können Sie getStaticProps(), getStaticPaths() oder getServerSideProps() verwenden, um Daten in Next.js abzurufen. Diese Daten bestimmen den Inhalt der Seite. Verwenden Sie es, um die Metadaten für die Seite zu erstellen.
Beispielsweise wäre es mühsam, die Metadaten für die Next.js-Anwendung zu erstellen, die Blogbeiträge rendert.
Die empfohlene Methode besteht darin, eine dynamische Seite zu erstellen, die eine Kennung erhält, die Sie verwenden können Holen Sie sich den Blog-Inhalt. Diesen Inhalt können Sie dann in der Head-Komponente verwenden.
importieren { getAllPosts, getSinglePost } aus "../../utils/mdx";
importieren Kopf aus "nächster/Kopf";konst Beitrag = ({ Titel, Beschreibung, Inhalt }) => {
zurückkehren (
<>
<Kopf>
<Titel>{Titel}</title>
<metaname="Beschreibung" Inhalt = {Beschreibung} />
</Head>
<hauptsächlich>{/* Seiteninhalt */}</main>
</>
);
};Exportkonst getStaticProps = asynchron ({ Parameter }) => {
// einen einzelnen Beitrag erhalten
konst Beitrag = erwarten getSinglePost (params.id, "Beiträge");zurückkehren {
Requisiten: {... post },
};
};Exportkonst getStaticPaths = asynchron () => {
// Alle Beiträge abrufen
konstante Pfade = getAllPosts ("Beiträge").map(({id}) => ({ Parameter: { ID } }));zurückkehren {
Wege,
zurückgreifen: FALSCH,
};
};
ExportStandard Post;
Die getStaticProps-Funktion übergibt die Post-Daten als Requisiten an die Post-Komponente. Die Post-Komponente destrukturiert den Titel, die Beschreibung und den Inhalt aus den Requisiten. Die Head-Komponente verwendet dann den Titel und die Beschreibung in den Meta-Tags.
Next.js ist ein optimiertes Framework
Sie haben gerade gelernt, wie Sie die Head-Komponente verwenden, um Metatitel und Beschreibungen zu einem Next.js-Projekt hinzuzufügen. Nutzen Sie dieses Wissen, um SEO-freundliche Header zu erstellen, die SERPs zu erklimmen und mehr Besucher auf Ihre Website zu locken.
Neben der Head-Komponente bietet Next.js weitere Komponenten wie Link und Image. Diese Komponenten sind sofort einsatzbereit und erleichtern die Erstellung schneller SEO-freundlicher Websites.
