Wollten Sie schon immer, dass Ihre Next.js-Site als Rich Object angezeigt wird, wenn sie in sozialen Medien geteilt wird? Wenn dies der Fall ist, müssen Sie das Open Graph-Protokoll implementieren.
Das Paket next-seo erleichtert das Hinzufügen von Open Graph-Tags zu Ihrer Next.js-Site. Sie können auch einen manuelleren Ansatz verwenden, um das Endergebnis genauer zu steuern.
Schließlich sollten Sie genau überlegen, welche Informationen in Ihre Tags aufgenommen werden sollen.
Was ist OpenGraph?
Das Open Graph-Protokoll ist ein offener Standard, mit dem Entwickler steuern können, wie soziale Medien ihre Inhalte anzeigen. Es wurde ursprünglich von Facebook entwickelt, aber viele andere Plattformen haben das Protokoll inzwischen übernommen. Dazu gehören Twitter, LinkedIn und Pinterest.
Mit Open Graph können Sie genau angeben, wie andere Websites Ihre Inhalte anzeigen sollen, um sicherzustellen, dass sie gut aussehen und leicht zu lesen sind. Es ermöglicht auch eine bessere Kontrolle darüber, wie Links gerendert werden. Dies erleichtert das Nachverfolgen von Klickraten und anderen Engagement-Metriken.
Warum das Open Graph-Protokoll verwenden?
Es gibt drei Hauptbereiche, die Open Graph verbessern sollte: Social Media Engagement, SEO und Website-Traffic.
Open Graph kann dazu beitragen, das Engagement in sozialen Medien zu verbessern, indem es Benutzern erleichtert wird, Ihre Inhalte zu teilen. Indem Sie angeben, wie Websites Ihre Inhalte anzeigen sollen, können Sie sie optisch ansprechender und leichter lesbar machen. Dies wiederum kann zu mehr Shares und Likes sowie höheren Klickraten führen.
2. SEO verbessern
Open Graph kann auch helfen Verbessern Sie Ihre SEO. Indem Sie den Titel, die Beschreibung und das Bild für jeden Inhalt angeben, können Sie steuern, wie er in den Suchergebnissen angezeigt wird. Dies kann dazu beitragen, die Klickrate auf Ihre Website zu erhöhen und Ihr Gesamtranking zu verbessern.
3. Erhöhen Sie den Website-Traffic
Schließlich kann Open Graph dazu beitragen, den Website-Traffic zu erhöhen. Indem Sie es Benutzern erleichtern, Ihre Inhalte zu teilen, können Sie die Anzahl der Personen erhöhen, die sie sehen. Dies wiederum kann zu mehr Website-Besuchern und erhöhtem Traffic führen.
4. Verbessern Sie die Benutzererfahrung
Ein weiterer Vorteil der Verwendung des Open Graph-Protokolls besteht darin, dass es die Benutzererfahrung auf Ihrer Website verbessern kann. Durch die Einbeziehung von Metadaten können Sie die Zugänglichkeit verbessern und die Daten wiederverwenden, um sicherzustellen, dass Benutzer die relevantesten Informationen sehen. Dies kann zu einem besseren Gesamterlebnis auf Ihrer Website führen, was zu mehr wiederkehrenden Besuchern führen kann.
Warum Next.js verwenden?
Es gibt zwei Hauptgründe für die Verwendung von Next.js: die Leistung zu verbessern und die Entwicklung zu vereinfachen.
1. Leistung verbessern
Next.js kann helfen, die Leistung zu verbessern, indem es Ihre App aufteilt und Ressourcen vorab abruft. Dies kann zu einer schnelleren Ladezeit und einer geringeren Serverlast führen.
2. Entwicklung einfacher machen
Next.js kann auch die Entwicklung vereinfachen, indem es eine einfache Möglichkeit bietet Server-gerenderte React-Apps erstellen. Dadurch können React-Apps schneller und einfacher entwickelt und bereitgestellt werden.
So implementieren Sie das Open Graph-Protokoll in Next.js
Es gibt zwei Möglichkeiten, das Open Graph-Protokoll in Next.js zu implementieren: Verwenden Sie das next-seo-Paket oder erstellen Sie ein benutzerdefiniertes _document.js Datei.
Methode 1: Verwenden des next-seo-Pakets
Der einfachste Weg, das Open Graph Protocol in Next.js zu implementieren, ist die Verwendung des Pakets next-seo. Dieses Paket generiert automatisch die erforderlichen Tags für Sie.
Führen Sie den folgenden Befehl aus, um das next-seo-Paket zu installieren:
npm Installierennächste-seo --sparenNach der Installation des Pakets können Sie es verwenden, indem Sie den folgenden Code zu Ihrer hinzufügen index.js Datei:
importieren { NextSeo } aus 'nächste SEO';konst DemoSeite = () => (
<>
<WeiterSeo
Titel="Dein Titel"
Beschreibung="Dies ist eine Demo-Beschreibung"
kanonisch="https://www.example.com"
openGraph={{
URL: 'https://www.example.com',
Titel: 'Diagrammtitel öffnen',
Bezeichnung: 'Diagrammbeschreibung öffnen',
Bilder: [
{
URL: 'https://www.example.com/og-image01.jpg',
Breite: 800,
Höhe: 600,
alternativ: 'Og Bild Alt',
Typ: 'Bild/JPEG',
},
{
URL: 'https://www.example.com/og-image02.jpg',
Breite: 900,
Höhe: 800,
alternativ: 'Og Bild Alt Zweite',
Typ: 'Bild/JPEG',
},
{ URL: 'https://www.example.com/og-image03.jpg' },
{ URL: 'https://www.example.com/og-image04.jpg' },
],
Seitenname: 'YourSiteName',
}}
zwitschern={{
handhaben: '@handhaben',
Seite? ˅: '@Seite? ˅',
Speicherkarten-Typ: 'summary_large_image',
}}
/>
<p>Demo-Seite</p>
</>
);
ExportUrsprünglich DemoSeite;
Dieser Code importiert die NextSeo-Komponente aus dem next-seo-Paket und verwendet sie, um den Titel, die Beschreibung und das Bild für die Seite anzugeben. Es gibt auch den Site-Namen und das Twitter-Handle an.
Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:
npm laufen devOffen http://localhost: 3000 in Ihrem Browser, um die Demoseite anzuzeigen.
Methode 2: Verwenden der benutzerdefinierten _document.js-Datei
Eine andere Möglichkeit, das Open Graph-Protokoll in Next.js zu implementieren, besteht darin, eine benutzerdefinierte Datei zu erstellen _document.js Datei. Mit dieser Datei können Sie die Open Graph-Tags selbst festlegen und wiederverwendbaren Code erstellen für alle Seiten.
Zum Einrichten einer benutzerdefinierten _document.js Datei, erstellen Sie eine neue Datei in Ihrer Seiten Verzeichnis mit folgendem Inhalt:
importieren Dokument, {Html, Head, Main, NextScript} aus 'nächste/dokumentieren';KlasseMein DokumenterweitertDokumentieren{
statischasynchron getInitialProps (ctx) {
konst initialProps = erwarten Document.getInitialProps (ctx);
Rückkehr { ...initialProps };
}rendern() {
Rückkehr (
<HTML>
<Kopf>
<Meta-Eigenschaft="og: url" Inhalt="https://www.example.com" />
<Meta-Eigenschaft="og: Titel" Inhalt="Diagrammtitel öffnen" />
<Meta-Eigenschaft="og: Beschreibung" Inhalt="Diagrammbeschreibung öffnen" />
<Meta-Eigenschaft="og: Bild" Inhalt="https://www.example.com/og-image.jpg" />
<Meta-Eigenschaft="og: site_name" Inhalt="YourSiteName" />
<metaname="Twitter: Karte" Inhalt="summary_large_image" />
<metaname="Twitter: Seite" Inhalt="@Seite? ˅" />
<metaname="Twitter: Schöpfer" Inhalt="@handhaben" />
</Head>
<Karosserie>
<Hauptsächlich />
<NächstesSkript />
</body>
</Html>
);
}
}
ExportUrsprünglich Mein Dokument;
Fügen Sie Ihrer index.js-Datei den folgenden Inhalt hinzu:
konst DemoSeite = () => (
<>
<p>Demo-Seite</p>
</>
);
ExportUrsprünglich DemoSeite;
Dieser Code importiert die Document-Komponente aus next/document und erstellt eine benutzerdefinierte Mein Dokument Komponente. Es gibt den Titel, die Beschreibung und das Bild für unsere Seite sowie den Seitennamen und das Twitter-Handle an.
Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:
npm laufen devOffen http://localhost: 3000 in Ihrem Browser, um die Demoseite anzuzeigen.
Das Hinzufügen von Open Graph-Tags zu Ihrer Website kann Ihnen mehr Kontrolle darüber geben, wie sie in Social-Media-Beiträgen angezeigt wird, und kann dazu beitragen, die Klickraten zu verbessern. Sie können auch die Darstellung Ihrer Website in SERPs verbessern, was letztendlich zu einem verbesserten Website-Ranking führen kann.
Es gibt auch viele andere Möglichkeiten, das Website-Ranking zu verbessern. Sie sollten Ihre Website für mobile Geräte optimieren und schlüsselwortreiche Titel und Beschreibungen verwenden. Die Verwendung von Open Graph-Tags ist jedoch ein schneller und einfacher Einstieg.