Har du noen gang ønsket at Next.js-nettstedet ditt skal vises som et rikt objekt når det deles på sosiale medier? I så fall må du implementere Open Graph-protokollen.

Next-seo-pakken gjør det enkelt å legge til Open Graph-tagger på Next.js-nettstedet ditt. Du kan også bruke en mer manuell tilnærming for bedre kontroll over det ferdige resultatet.

Til slutt bør du vurdere nøyaktig hvilken informasjon du skal inkludere i taggene dine.

Hva er Open Graph?

Open Graph-protokollen er en åpen standard som lar utviklere kontrollere hvordan sosiale medier viser innholdet deres. Den ble opprinnelig utviklet av Facebook, men mange andre plattformer har siden tatt i bruk protokollen. Disse inkluderer Twitter, LinkedIn og Pinterest.

Open Graph lar deg spesifisere nøyaktig hvordan andre nettsteder skal vise innholdet ditt, og sikrer at det ser bra ut og er lett å lese. Det gir også større kontroll over hvordan lenker gjengis. Dette gjør det enklere å spore klikk-throughs og andre engasjementsberegninger.

Hvorfor bruke Open Graph Protocol?

instagram viewer

Det er tre hovedområder som Open Graph bør forbedre: engasjement i sosiale medier, SEO og nettstedtrafikk.

Open Graph kan bidra til å forbedre engasjementet i sosiale medier ved å gjøre det enklere for brukere å dele innholdet ditt. Ved å spesifisere hvordan nettsteder skal vise innholdet ditt, kan du gjøre det mer visuelt tiltalende og enkelt å lese. Dette kan igjen føre til flere delinger og likes, samt økte klikkfrekvenser.

2. Forbedre SEO

Open Graph kan også hjelpe forbedre SEO. Ved å spesifisere tittelen, beskrivelsen og bildet for hver del av innholdet, kan du kontrollere hvordan det vises i søkeresultatene. Dette kan bidra til å øke klikkfrekvensen til nettstedet ditt, samt forbedre den generelle rangeringen.

3. Øk trafikken til nettstedet

Til slutt kan Open Graph bidra til å øke trafikken til nettstedet. Ved å gjøre det enklere for brukere å dele innholdet ditt, kan du øke antallet personer som ser det. Dette kan igjen føre til flere besøkende på nettstedet og økt trafikk.

4. Forbedre brukeropplevelsen

En annen fordel med å bruke Open Graph-protokollen er at den kan forbedre brukeropplevelsen på nettstedet ditt. Ved å inkludere metadata kan du hjelpe med tilgjengelighet og gjenbruke dataene, og sikre at brukerne ser den mest relevante informasjonen. Dette kan føre til en bedre totalopplevelse på nettstedet ditt, noe som kan føre til flere tilbakevendende besøkende.

Hvorfor bruke Next.js?

Det er to hovedgrunner til å bruke Next.js: for å forbedre ytelsen og for å gjøre utviklingen enklere.

1. Forbedre ytelsen

Next.js kan bidra til å forbedre ytelsen ved å dele opp appen din og forhåndshente ressurser. Dette kan føre til en raskere lastetid og redusert serverbelastning.

2. Gjør utviklingen enklere

Next.js kan også gjøre utviklingen enklere ved å tilby en enkel måte å lage server-renderte React-apper. Dette kan gjøre det raskere og enklere å utvikle og distribuere React-apper.

Hvordan implementere Open Graph Protocol i Next.js

Det er to måter å implementere Open Graph Protocol i Next.js: ved å bruke next-seo-pakken eller lage en tilpasset _document.js fil.

Metode 1: Bruke neste-seo-pakken

Den enkleste måten å implementere Open Graph Protocol i Next.js er å bruke next-seo-pakken. Denne pakken vil automatisk generere de nødvendige kodene for deg.

For å installere neste-seo-pakken, kjør følgende kommando:

npm installereneste-seo --lagre

Etter å ha installert pakken, kan du bruke den ved å legge til følgende kode til din index.js fil:

import { NextSeo } fra 'neste-seo';
konst DemoPage = () => (
<>
<NextSeo
 tittel="Din tittel"
 beskrivelse="Dette er en demobeskrivelse"
 kanonisk="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 tittel: 'Åpne graftittel',
 beskrivelse: 'Åpne grafbeskrivelse',
 Bilder: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 bredde: 800,
 høyde: 600,
 alt: 'Og Image Alt',
 type: 'bilde/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 bredde: 900,
 høyde: 800,
 alt: 'Og Image Alt Second',
 type: 'bilde/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 side navn: 'YourSiteName',
 }}
 twitter={{
 håndtak: '@håndtak',
 nettstedet: '@nettstedet',
 Kort type: 'summary_large_image',
 }}
 />
<s>Demoside</s>
</>
);
eksportmisligholde DemoPage;

Denne koden importerer NextSeo-komponenten fra next-seo-pakken og bruker den til å spesifisere tittelen, beskrivelsen og bildet for siden. Den spesifiserer også nettstedets navn og Twitter-håndtak.

Kjør følgende kommando for å starte utviklingsserveren:

npm kjøre dev

Åpen http://localhost: 3000 i nettleseren din for å se demosiden.

Metode 2: Bruke den tilpassede _document.js-filen

En annen måte å implementere Open Graph Protocol i Next.js er å lage en egendefinert _document.js fil. Denne filen lar deg spesifisere Open Graph-taggene selv og lage gjenbrukbar kode for alle sider.

For å sette opp en egendefinert _document.js fil, opprette en ny fil i din sider katalog med følgende innhold:

import Dokument, { Html, Head, Main, NextScript } fra 'neste/dokument';
klasseMitt DokumentstrekkerDokument{
statiskasynkron getInitialProps (ctx) {
konst initialProps = avvente Document.getInitialProps (ctx);
komme tilbake { ...initialProps };
 }


render() {
komme tilbake (
<Html>
<Hode>
<meta egenskap="og: url" innhold="https://www.example.com" />
<meta egenskap="og: tittel" innhold="Åpne graftittel" />
<meta egenskap="og: beskrivelse" innhold="Åpne grafbeskrivelse" />
<meta egenskap="og: bilde" innhold="https://www.example.com/og-image.jpg" />
<meta egenskap="og: site_name" innhold="YourSiteName" />
<metanavn="twitter: kort" innhold="summary_large_image" />
<metanavn="twitter: nettsted" innhold="@nettstedet" />
<metanavn="twitter: skaper" innhold="@håndtak" />
</Head>
<kropp>
<Hoved />
<NextScript />
</body>
</Html>
 );
 }
}
eksportmisligholde Mitt Dokument;

Legg til innholdet nedenfor i index.js-filen din:

konst DemoPage = () => (
<>
<s>Demoside</s>
</>
);
eksportmisligholde DemoPage;

Denne koden importerer Dokument-komponenten fra neste/dokument og oppretter en egendefinert Mitt Dokument komponent. Den spesifiserer tittelen, beskrivelsen og bildet for siden vår, samt nettstedsnavnet og Twitter-håndtaket.

Kjør følgende kommando for å starte utviklingsserveren:

npm kjøre dev

Åpen http://localhost: 3000 i nettleseren din for å se demosiden.

Å legge til Open Graph-tagger på nettstedet ditt kan gi deg mer kontroll over hvordan det vises i innlegg på sosiale medier og kan bidra til å forbedre klikkfrekvensen. Du kan også forbedre måten nettstedet ditt vises på i SERP-er, noe som til slutt kan føre til forbedret nettstedsrangering.

Det er også mange andre måter å forbedre nettstedsrangeringen på. Du bør optimalisere nettstedet ditt for mobile enheter og bruke søkeordrike titler og beskrivelser. Men å bruke Open Graph-koder er en rask og enkel måte å komme i gang på.