Har du någonsin velat att din Next.js-webbplats ska dyka upp som ett rikt objekt när den delas på sociala medier? Om så är fallet måste du implementera Open Graph-protokollet.
Next-seo-paketet gör det enkelt att lägga till Open Graph-taggar på din Next.js-webbplats. Du kan också använda ett mer manuellt tillvägagångssätt för bättre kontroll över det färdiga resultatet.
Slutligen vill du överväga exakt vilken information som ska inkluderas i dina taggar.
Vad är Open Graph?
Open Graph-protokollet är en öppen standard som låter utvecklare kontrollera hur sociala medier visar deras innehåll. Det utvecklades ursprungligen av Facebook men många andra plattformar har sedan antagit protokollet. Dessa inkluderar Twitter, LinkedIn och Pinterest.
Open Graph låter dig specificera exakt hur andra webbplatser ska visa ditt innehåll, vilket säkerställer att det ser bra ut och är lätt att läsa. Det ger också större kontroll över hur länkar renderas. Detta gör det lättare att spåra klickningar och andra engagemangsstatistik.
Varför använda Open Graph Protocol?
Det finns tre huvudområden som Open Graph bör förbättra: engagemang i sociala medier, SEO och webbplatstrafik.
Open Graph kan hjälpa till att förbättra engagemanget i sociala medier genom att göra det lättare för användare att dela ditt innehåll. Genom att ange hur webbplatser ska visa ditt innehåll kan du göra det mer visuellt tilltalande och lätt att läsa. Detta kan i sin tur leda till fler delningar och gilla-markeringar, samt ökade klickfrekvenser.
2. Förbättra SEO
Open Graph kan också hjälpa förbättra din SEO. Genom att ange titel, beskrivning och bild för varje del av innehållet kan du styra hur det visas i sökresultaten. Detta kan bidra till att öka klickfrekvensen till din webbplats, samt förbättra din övergripande ranking.
3. Öka webbplatstrafiken
Slutligen kan Open Graph hjälpa till att öka webbplatstrafiken. Genom att göra det enklare för användare att dela ditt innehåll kan du öka antalet personer som ser det. Detta kan i sin tur leda till fler webbplatsbesökare och ökad trafik.
4. Förbättra användarupplevelsen
En annan fördel med att använda Open Graph-protokollet är att det kan förbättra användarupplevelsen på din webbplats. Genom att inkludera metadata kan du underlätta tillgängligheten och återanvända data, vilket säkerställer att användarna ser den mest relevanta informationen. Detta kan leda till en bättre övergripande upplevelse på din webbplats, vilket kan leda till fler återkommande besökare.
Varför använda Next.js?
Det finns två huvudsakliga skäl att använda Next.js: för att förbättra prestanda och för att göra utvecklingen enklare.
1. Förbättra prestanda
Next.js kan hjälpa till att förbättra prestandan genom att koddela din app och förhämta resurser. Detta kan leda till en snabbare laddningstid och minskad serverbelastning.
2. Gör utvecklingen enklare
Next.js kan också göra utvecklingen lättare genom att tillhandahålla ett enkelt sätt att skapa server-renderade React-appar. Detta kan göra det snabbare och enklare att utveckla och distribuera React-appar.
Hur man implementerar Open Graph Protocol i Next.js
Det finns två sätt att implementera Open Graph Protocol i Next.js: att använda nästa-seo-paketet eller skapa ett anpassat _document.js fil.
Metod 1: Använd nästa-seo-paketet
Det enklaste sättet att implementera Open Graph Protocol i Next.js är att använda nästa-seo-paketet. Detta paket kommer automatiskt att generera de nödvändiga taggarna åt dig.
För att installera nästa-seo-paketet, kör följande kommando:
npm InstalleraNästa-seo --sparaEfter att du har installerat paketet kan du använda det genom att lägga till följande kod till din index.js fil:
importera { NextSeo } från 'nästa-seo';konst DemoPage = () => (
<>
<NextSeo
titel="Din titel"
beskrivning="Detta är en demobeskrivning"
kanonisk="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
titel: 'Öppna Graftitel',
beskrivning: 'Öppna Graph Description',
bilder: [
{
url: 'https://www.example.com/og-image01.jpg',
bredd: 800,
höjd: 600,
alt: 'Och Image Alt',
typ: 'bild/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
bredd: 900,
höjd: 800,
alt: 'Och Image Alt Second',
typ: 'bild/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
sidnamn: 'YourSiteName',
}}
twitter={{
hantera: '@hantera',
webbplats: '@webbplats',
kort typ: 'summary_large_image',
}}
/>
<sid>Demosida</s>
</>
);
exporterastandard DemoPage;
Den här koden importerar NextSeo-komponenten från next-seo-paketet och använder den för att ange titel, beskrivning och bild för sidan. Den anger också webbplatsens namn och Twitter-handtag.
Kör följande kommando för att starta utvecklingsservern:
npm kör devÖppna http://localhost: 3000 i din webbläsare för att se demosidan.
Metod 2: Använd den anpassade _document.js-filen
Ett annat sätt att implementera Open Graph Protocol i Next.js är att skapa en anpassad _document.js fil. Den här filen låter dig specificera Open Graph-taggarna själv och skapa återanvändbar kod för alla sidor.
För att ställa in en anpassad _document.js skapa en ny fil i din sidor katalog med följande innehåll:
importera Dokument, { Html, Head, Main, NextScript } från 'Nästa/dokumentera';klassMitt dokumentsträcker sigDokumentera{
statiskasynkron getInitialProps (ctx) {
konst initialProps = vänta Document.getInitialProps (ctx);
lämna tillbaka { ...initialProps };
}framställa() {
lämna tillbaka (
<Html>
<Huvud>
<meta egenskap="og: url" innehåll="https://www.example.com" />
<meta egenskap="og: titel" innehåll="Öppna Graftitel" />
<meta egenskap="og: beskrivning" innehåll="Öppna Graph Description" />
<meta egenskap="og: bild" innehåll="https://www.example.com/og-image.jpg" />
<meta egenskap="og: webbplatsnamn" innehåll="YourSiteName" />
<metanamn="twitter: kort" innehåll="summary_large_image" />
<metanamn="twitter: webbplats" innehåll="@webbplats" />
<metanamn="twitter: skapare" innehåll="@hantera" />
</Head>
<kropp>
<Main />
<NextScript />
</body>
</Html>
);
}
}
exporterastandard Mitt dokument;
Lägg till innehållet nedan i din index.js-fil:
konst DemoPage = () => (
<>
<sid>Demosida</s>
</>
);
exporterastandard DemoPage;
Denna kod importerar dokumentkomponenten från nästa/dokument och skapar en anpassad Mitt dokument komponent. Den anger titeln, beskrivningen och bilden för vår sida, samt webbplatsens namn och Twitter-handtag.
Kör följande kommando för att starta utvecklingsservern:
npm kör devÖppna http://localhost: 3000 i din webbläsare för att se demosidan.
Att lägga till Open Graph-taggar på din webbplats kan ge dig mer kontroll över hur det visas i inlägg på sociala medier och kan hjälpa till att förbättra klickfrekvensen. Du kan också förbättra hur din webbplats visas i SERP, vilket i slutändan kan leda till förbättrad webbplatsrankning.
Det finns också många andra sätt att förbättra webbplatsrankningen. Du bör optimera din webbplats för mobila enheter och använda sökordsrika titlar och beskrivningar. Men att använda Open Graph-taggar är ett snabbt och enkelt sätt att komma igång.
