Har du nogensinde ønsket, at dit Next.js-websted skulle vises som et rigt objekt, når det deles på sociale medier? Hvis det er tilfældet, skal du implementere Open Graph-protokollen.
Next-seo-pakken gør det nemt at tilføje Open Graph-tags til dit Next.js-websted. Du kan også bruge en mere manuel tilgang for at få bedre kontrol over det færdige resultat.
Til sidst vil du overveje præcis, hvilke oplysninger du skal inkludere i dine tags.
Hvad er Open Graph?
Open Graph-protokollen er en åben standard, der giver udviklere mulighed for at kontrollere, hvordan sociale medier viser deres indhold. Det blev oprindeligt udviklet af Facebook, men mange andre platforme har siden vedtaget protokollen. Disse inkluderer Twitter, LinkedIn og Pinterest.
Open Graph lader dig specificere præcis, hvordan andre websteder skal vise dit indhold, hvilket sikrer, at det ser godt ud og er let at læse. Det giver også mulighed for større kontrol over, hvordan links gengives. Dette gør det nemmere at spore klik-throughs og andre engagementsmetrics.
Hvorfor bruge Open Graph Protocol?
Der er tre hovedområder, som Open Graph bør forbedre: engagement på sociale medier, SEO og webstedstrafik.
Open Graph kan hjælpe med at forbedre engagementet på sociale medier ved at gøre det nemmere for brugerne at dele dit indhold. Ved at specificere, hvordan websteder skal vise dit indhold, kan du gøre det mere visuelt tiltalende og let at læse. Dette kan igen føre til flere delinger og likes, samt øgede klikrater.
2. Forbedre SEO
Open Graph kan også hjælpe forbedre din SEO. Ved at angive titlen, beskrivelsen og billedet for hvert stykke indhold kan du kontrollere, hvordan det vises i søgeresultaterne. Dette kan hjælpe med at øge klikraten til dit websted, samt forbedre din overordnede placering.
3. Øg webstedstrafik
Endelig kan Open Graph hjælpe med at øge webstedstrafikken. Ved at gøre det nemmere for brugerne at dele dit indhold, kan du øge antallet af personer, der ser det. Dette kan igen føre til flere besøgende på hjemmesiden og øget trafik.
4. Forbedre brugeroplevelsen
En anden fordel ved at bruge Open Graph-protokollen er, at den kan forbedre brugeroplevelsen på dit websted. Ved at inkludere metadata kan du hjælpe med tilgængelighed og genbruge dataene og sikre, at brugerne ser de mest relevante oplysninger. Dette kan føre til en bedre samlet oplevelse på dit websted, hvilket kan føre til flere tilbagevendende besøgende.
Hvorfor bruge Next.js?
Der er to hovedårsager til at bruge Next.js: for at forbedre ydeevnen og for at gøre udvikling lettere.
1. Forbedre ydeevne
Next.js kan hjælpe med at forbedre ydeevnen ved at kodeopdele din app og forhåndshente ressourcer. Dette kan føre til en hurtigere indlæsningstid og reduceret serverbelastning.
2. Gør udviklingen nemmere
Next.js kan også gøre udvikling lettere ved at give en enkel måde at oprette server-renderede React-apps. Dette kan gøre det hurtigere og nemmere at udvikle og implementere React-apps.
Sådan implementeres Open Graph Protocol i Next.js
Der er to måder at implementere Open Graph Protocol i Next.js: ved at bruge next-seo-pakken eller oprette en brugerdefineret _document.js fil.
Metode 1: Brug af next-seo-pakken
Den nemmeste måde at implementere Open Graph Protocol i Next.js på er at bruge next-seo-pakken. Denne pakke vil automatisk generere de nødvendige tags til dig.
For at installere next-seo-pakken skal du køre følgende kommando:
npm installereNæste-seo --GemmeEfter installation af pakken kan du bruge den ved at tilføje følgende kode til din index.js fil:
importere { NextSeo } fra 'næste-seo';konst DemoPage = () => (
<>
<NextSeo
titel="Din titel"
beskrivelse="Dette er en demobeskrivelse"
kanonisk ="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
titel: 'Åbn Graftitel',
beskrivelse: 'Åbn Graph Description',
billeder: [
{
url: 'https://www.example.com/og-image01.jpg',
bredde: 800,
højde: 600,
alt: 'Og Image Alt',
type: 'billede/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
bredde: 900,
højde: 800,
alt: 'Og Image Alt Second',
type: 'billede/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
side navn: 'DitSitenavn',
}}
twitter={{
håndtere: '@håndtere',
websted: '@side',
kort type: 'summary_large_image',
}}
/>
<s>Demo side</s>
</>
);
eksportStandard DemoPage;
Denne kode importerer NextSeo-komponenten fra next-seo-pakken og bruger den til at angive titlen, beskrivelsen og billedet for siden. Det specificerer også webstedets navn og Twitter-håndtag.
Kør følgende kommando for at starte udviklingsserveren:
npm køre devÅben http://localhost: 3000 i din browser for at se demosiden.
Metode 2: Brug af den brugerdefinerede _document.js-fil
En anden måde at implementere Open Graph Protocol i Next.js er at oprette en brugerdefineret _document.js fil. Denne fil giver dig mulighed for selv at angive Open Graph-tags og oprette genbrugelig kode for alle sider.
For at opsætte en brugerdefineret _document.js fil, skal du oprette en ny fil i din sider mappe med følgende indhold:
importere Dokument, { Html, Head, Main, NextScript } fra 'Næste/dokument';klasseMit Dokumentstrækker sigDokument{
statiskasynkron getInitialProps (ctx) {
konst initialProps = vente Document.getInitialProps (ctx);
Vend tilbage { ...initialProps };
}render() {
Vend tilbage (
<Html>
<Hoved>
<meta-egenskab="og: url" indhold="https://www.example.com" />
<meta-egenskab="og: titel" indhold="Åbn Graftitel" />
<meta-egenskab="og: beskrivelse" indhold="Åbn Graph Description" />
<meta-egenskab="og: billede" indhold="https://www.example.com/og-image.jpg" />
<meta-egenskab="og: site_name" indhold="DitSitenavn" />
<metanavn="twitter: kort" indhold="summary_large_image" />
<metanavn="twitter: websted" indhold="@side" />
<metanavn="twitter: skaber" indhold="@håndtere" />
</Head>
<legeme>
<Main />
<NextScript />
</body>
</Html>
);
}
}
eksportStandard Mit Dokument;
Tilføj nedenstående indhold til din index.js-fil:
konst DemoPage = () => (
<>
<s>Demo side</s>
</>
);
eksportStandard DemoPage;
Denne kode importerer dokumentkomponenten fra næste/dokument og opretter en brugerdefineret Mit Dokument komponent. Den specificerer titlen, beskrivelsen og billedet for vores side, samt webstedets navn og Twitter-håndtag.
Kør følgende kommando for at starte udviklingsserveren:
npm køre devÅben http://localhost: 3000 i din browser for at se demosiden.
Tilføjelse af Open Graph-tags til dit websted kan give dig mere kontrol over, hvordan det vises i opslag på sociale medier og kan hjælpe med at forbedre klikraterne. Du kan også forbedre den måde, dit websted vises på i SERP'er, hvilket i sidste ende kan føre til forbedret webstedsplacering.
Der er også mange andre måder at forbedre webstedets placering på. Du bør optimere din hjemmeside til mobile enheder og bruge søgeordsrige titler og beskrivelser. Men at bruge Open Graph-tags er en hurtig og nem måde at komme i gang på.
