Heb je ooit gewild dat je Next.js-site als een rijk object werd weergegeven wanneer deze op sociale media werd gedeeld? Dan moet u het Open Graph-protocol implementeren.

Het next-seo-pakket maakt het gemakkelijk om Open Graph-tags toe te voegen aan uw Next.js-site. U kunt ook een meer handmatige aanpak gebruiken voor meer controle over het eindresultaat.

Ten slotte wilt u overwegen welke informatie u precies in uw tags wilt opnemen.

Wat is open grafiek?

Het Open Graph-protocol is een open standaard waarmee ontwikkelaars kunnen bepalen hoe sociale media hun inhoud weergeven. Het is oorspronkelijk ontwikkeld door Facebook, maar veel andere platforms hebben het protocol sindsdien overgenomen. Deze omvatten Twitter, LinkedIn en Pinterest.

Met Open Graph kunt u precies aangeven hoe andere sites uw inhoud moeten weergeven, zodat deze er goed uitziet en gemakkelijk te lezen is. Het zorgt ook voor meer controle over hoe links worden weergegeven. Dit maakt het eenvoudiger om click-throughs en andere betrokkenheidsstatistieken bij te houden.

instagram viewer

Waarom het Open Graph-protocol gebruiken?

Er zijn drie hoofdgebieden die Open Graph moet verbeteren: betrokkenheid van sociale media, SEO en websiteverkeer.

Open Graph kan de betrokkenheid van sociale media helpen verbeteren door het voor gebruikers gemakkelijker te maken om uw inhoud te delen. Door te specificeren hoe sites uw inhoud moeten weergeven, kunt u deze visueel aantrekkelijker en gemakkelijker leesbaar maken. Dit kan op zijn beurt leiden tot meer shares en likes, evenals hogere klikfrequenties.

2. Verbeter SEO

Open Graph kan ook helpen verbeter je SEO. Door de titel, beschrijving en afbeelding voor elk stuk inhoud op te geven, kunt u bepalen hoe het wordt weergegeven in zoekresultaten. Dit kan helpen de klikfrequentie naar uw website te verhogen en uw algehele positie te verbeteren.

3. Verhoog het websiteverkeer

Ten slotte kan Open Graph helpen het websiteverkeer te vergroten. Door het voor gebruikers gemakkelijker te maken om uw inhoud te delen, kunt u het aantal mensen dat uw inhoud ziet, vergroten. Dit kan op zijn beurt leiden tot meer websitebezoekers en meer verkeer.

4. Verbeter de gebruikerservaring

Een ander voordeel van het gebruik van het Open Graph-protocol is dat het de gebruikerservaring op uw website kan verbeteren. Door metadata op te nemen, kunt u de toegankelijkheid bevorderen en de gegevens hergebruiken, zodat gebruikers de meest relevante informatie te zien krijgen. Dit kan leiden tot een betere algehele ervaring op uw site, wat kan leiden tot meer terugkerende bezoekers.

Waarom Next.js gebruiken?

Er zijn twee hoofdredenen om Next.js te gebruiken: om de prestaties te verbeteren en om ontwikkeling te vergemakkelijken.

1. Prestatie verbeteren

Next.js kan de prestaties helpen verbeteren door uw app code te splitsen en bronnen vooraf op te halen. Dit kan leiden tot een snellere laadtijd en verminderde serverbelasting.

2. Maak ontwikkeling gemakkelijker

Next.js kan ontwikkeling ook gemakkelijker maken door een eenvoudige manier te bieden om server-gerenderde React-apps maken. Dit kan het sneller en gemakkelijker maken om React-apps te ontwikkelen en te implementeren.

Het Open Graph-protocol implementeren in Next.js

Er zijn twee manieren om Open Graph Protocol in Next.js te implementeren: het next-seo-pakket gebruiken of een custom maken _document.js het dossier.

Methode 1: Het next-seo-pakket gebruiken

De eenvoudigste manier om Open Graph Protocol in Next.js te implementeren, is door het next-seo-pakket te gebruiken. Dit pakket genereert automatisch de benodigde tags voor u.

Voer de volgende opdracht uit om het next-seo-pakket te installeren:

npm installerenDe volgende-seo --opslaan

Nadat u het pakket hebt geïnstalleerd, kunt u het gebruiken door de volgende code toe te voegen aan uw: index.js het dossier:

importeren { VolgendeSeo } van 'volgende-seo';
const Demopagina = () => (
<>
<VolgendeSeo
 titel="Jouw titel"
 omschrijving="Dit is een demobeschrijving"
 canoniek="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 titel: 'Titel van grafiek openen',
 Omschrijving: 'Open grafiekbeschrijving',
 afbeeldingen: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 breedte: 800,
 hoogte: 600,
 alt: 'Og Afbeelding Alt',
 type: 'afbeelding/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 breedte: 900,
 hoogte: 800,
 alt: 'Og afbeelding Alt tweede',
 type: 'afbeelding/jpeg',
 },
 { url: 'https://www.voorbeeld.com/og-image03.jpg' },
 { url: 'https://www.voorbeeld.com/og-image04.jpg' },
 ],
 site naam: 'UwSitenaam',
 }}
 twitter={{
 handvat: '@handvat',
 website: '@site',
 kaarttype: 'samenvatting_grote_afbeelding',
 }}
 />
<p>Demopagina</p>
</>
);
exporterenstandaard Demopagina;

Deze code importeert de NextSeo-component uit het next-seo-pakket en gebruikt deze om de titel, beschrijving en afbeelding voor de pagina op te geven. Het specificeert ook de sitenaam en Twitter-handle.

Voer de volgende opdracht uit om de ontwikkelingsserver te starten:

npm run dev

Open http://localhost: 3000 in uw browser om de demopagina te zien.

Methode 2: Het aangepaste _document.js-bestand gebruiken

Een andere manier om Open Graph Protocol in Next.js te implementeren, is door een custom te maken _document.js het dossier. Met dit bestand kunt u zelf de Open Graph-tags specificeren en maak herbruikbare code voor alle pagina's.

Een aangepast instellen _document.js bestand, maak dan een nieuw bestand aan in uw Pagina's map met de volgende inhoud:

importeren Document, { Html, Head, Main, NextScript } van 'De volgende/document';
klasMijn documentbreidt zich uitDocument{
statischasynchrone getInitialProps (ctx) {
const initialProps = wachten Document.getInitialProps (ctx);
opbrengst { ...initialProps };
 }


veroorzaken() {
opbrengst (
<HTML>
<Hoofd>
<meta-eigenschap="og: url" inhoud="https://www.example.com" />
<meta-eigenschap="og: titel" inhoud="Titel van grafiek openen" />
<meta-eigenschap="og: beschrijving" inhoud="Open grafiekbeschrijving" />
<meta-eigenschap="og: afbeelding" inhoud="https://www.example.com/og-image.jpg" />
<meta-eigenschap="og: site_name" inhoud="UwSitenaam" />
<metanaam="twitter: kaart" inhoud="samenvatting_grote_afbeelding" />
<metanaam="twitter: site" inhoud="@site" />
<metanaam="twitter: maker" inhoud="@handvat" />
</Head>
<lichaam>
<Hoofd />
<VolgendeScript />
</body>
</Html>
 );
 }
}
exporterenstandaard Mijn document;

Voeg de onderstaande inhoud toe aan uw index.js-bestand:

const Demopagina = () => (
<>
<p>Demopagina</p>
</>
);
exporterenstandaard Demopagina;

Deze code importeert de Document component van next/document en maakt een custom Mijn document onderdeel. Het specificeert de titel, beschrijving en afbeelding voor onze pagina, evenals de sitenaam en Twitter-handle.

Voer de volgende opdracht uit om de ontwikkelingsserver te starten:

npm run dev

Open http://localhost: 3000 in uw browser om de demopagina te zien.

Het toevoegen van Open Graph-tags aan uw website kan u meer controle geven over hoe deze wordt weergegeven in posts op sociale media en kan de klikfrequenties helpen verbeteren. U kunt ook de manier waarop uw website wordt weergegeven in SERP's verbeteren, wat uiteindelijk kan leiden tot een betere website-ranking.

Er zijn ook veel andere manieren om de positie van de site te verbeteren. U moet uw website optimaliseren voor mobiele apparaten en trefwoordrijke titels en beschrijvingen gebruiken. Maar het gebruik van Open Graph-tags is een snelle en gemakkelijke manier om aan de slag te gaan.