Chceli ste niekedy, aby sa vaša stránka Next.js zobrazovala ako bohatý objekt pri zdieľaní na sociálnych sieťach? Ak áno, musíte implementovať protokol Open Graph.

Balík next-seo uľahčuje pridávanie značiek Open Graph na vašu stránku Next.js. Pre jemnejšiu kontrolu nad konečným výsledkom môžete použiť aj manuálnejší prístup.

Nakoniec budete chcieť presne zvážiť, aké informácie zahrnúť do svojich značiek.

Čo je otvorený graf?

Protokol Open Graph je otvorený štandard, ktorý umožňuje vývojárom kontrolovať, ako sociálne médiá zobrazujú svoj obsah. Pôvodne bol vyvinutý spoločnosťou Facebook, ale odvtedy tento protokol prijalo mnoho iných platforiem. Patria sem Twitter, LinkedIn a Pinterest.

Open Graph vám umožňuje presne špecifikovať, ako by mali iné stránky zobrazovať váš obsah, čím sa zabezpečí, že bude vyzerať dobre a bude ľahko čitateľný. Umožňuje tiež väčšiu kontrolu nad vykresľovaním odkazov. To uľahčuje sledovanie prekliknutí a ďalších metrík interakcií.

Prečo používať protokol Open Graph?

instagram viewer

Open Graph by mal zlepšiť tri hlavné oblasti: zapojenie sociálnych médií, SEO a návštevnosť webových stránok.

Open Graph môže pomôcť zlepšiť zapojenie sociálnych médií tým, že používateľom uľahčí zdieľanie vášho obsahu. Zadaním toho, ako by stránky mali zobrazovať váš obsah, ho môžete urobiť vizuálne príťažlivejším a ľahšie čitateľným. To zase môže viesť k väčšiemu počtu zdieľaní a označení páči sa mi, ako aj k zvýšeniu miery prekliknutia.

2. Vylepšite SEO

Pomôcť môže aj Open Graph zlepšiť svoje SEO. Zadaním názvu, popisu a obrázka pre každú časť obsahu môžete ovládať, ako sa zobrazí vo výsledkoch vyhľadávania. Môže to pomôcť zvýšiť mieru prekliknutia na vašu webovú stránku, ako aj zlepšiť vaše celkové hodnotenie.

3. Zvýšte návštevnosť webových stránok

Nakoniec, Open Graph môže pomôcť zvýšiť návštevnosť webových stránok. Tým, že používateľom uľahčíte zdieľanie vášho obsahu, môžete zvýšiť počet ľudí, ktorí ho uvidia. To zase môže viesť k väčšej návštevnosti webu a zvýšeniu návštevnosti.

4. Zlepšite používateľskú skúsenosť

Ďalšou výhodou používania protokolu Open Graph je, že môže zlepšiť používateľskú skúsenosť na vašom webe. Zahrnutím metadát môžete pomôcť sprístupniť a opätovne použiť údaje, čím zabezpečíte, že používatelia uvidia tie najrelevantnejšie informácie. To môže viesť k lepšiemu celkovému dojmu na vašom webe, čo môže viesť k väčšiemu počtu vracajúcich sa návštevníkov.

Prečo používať Next.js?

Existujú dva hlavné dôvody, prečo používať Next.js: zlepšiť výkon a zjednodušiť vývoj.

1. Zlepšiť výkon

Next.js môže pomôcť zlepšiť výkon rozdelením kódu vašej aplikácie a predbežným načítaním zdrojov. To môže viesť k rýchlejšiemu času načítania a zníženiu zaťaženia servera.

2. Uľahčite vývoj

Next.js môže tiež uľahčiť vývoj tým, že poskytuje jednoduchý spôsob vytvárať aplikácie React vykreslené serverom. To môže urýchliť a zjednodušiť vývoj a nasadenie aplikácií React.

Ako implementovať protokol Open Graph v Next.js

Existujú dva spôsoby implementácie protokolu Open Graph v Next.js: pomocou balíka next-seo alebo vytvorením vlastného _document.js súbor.

Metóda 1: Použitie balíčka next-seo

Najjednoduchším spôsobom implementácie protokolu Open Graph v Next.js je použitie balíka next-seo. Tento balík vám automaticky vygeneruje potrebné značky.

Ak chcete nainštalovať balík next-seo, spustite nasledujúci príkaz:

npm InštaláciaĎalšie- seo --uložiť

Po nainštalovaní balíka ho môžete použiť pridaním nasledujúceho kódu do svojho index.js súbor:

importovať { NextSeo } od 'next-seo';
konšt DemoStránka = () => (
<>
<NextSeo
 titul="Tvoj titul"
 popis ="Toto je popis ukážky"
 kanonický ="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 názov: 'Otvorte názov grafu',
 popis: 'Otvorte popis grafu',
 snímky: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 šírka: 800,
 výška: 600,
 alt: 'Og Obrázok Alt',
 typ: 'obrázok/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 šírka: 900,
 výška: 800,
 alt: 'Og Obrázok Alt Druhý',
 typ: 'obrázok/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 názov siete: 'YourSiteName',
 }}
 twitter={{
 zvládnuť: '@rukoväť',
 miesto: '@stránka',
 typ karty: 'súhrnný_veľký_obrázok',
 }}
 />
<p>Demo stránka</str>
</>
);
exportpredvolená DemoPage;

Tento kód importuje komponent NextSeo z balíka next-seo a používa ho na zadanie názvu, popisu a obrázka pre stránku. Určuje tiež názov lokality a popisovač služby Twitter.

Spustite nasledujúci príkaz na spustenie vývojového servera:

npm spustiť dev

OTVORENÉ http://localhost: 3000 vo vašom prehliadači, aby ste videli demo stránku.

Metóda 2: Použitie súboru Custom _document.js

Ďalším spôsobom implementácie protokolu Open Graph v Next.js je vytvorenie vlastného _document.js súbor. Tento súbor vám umožní určiť značky Open Graph sami a vytvoriť znovu použiteľný kód pre všetky stránky.

Ak chcete nastaviť vlastný _document.js súbor, vytvorte nový súbor vo svojom stránky adresár s nasledujúcim obsahom:

importovať Document, { Html, Head, Main, NextScript } od 'Ďalšie/dokument';
triedaMyDocumentpredlžujeDokument{
statickéasync getInitialProps (ctx) {
konšt počiatočné rekvizity = čakať Document.getInitialProps (ctx);
vrátiť { ...InitialProps };
 }


render() {
vrátiť (
<Html>
<Hlava>
<meta vlastnosť ="og: url" obsah ="https://www.example.com" />
<meta vlastnosť ="og: názov" obsah ="Otvorte názov grafu" />
<meta vlastnosť ="og: popis" obsah ="Otvorte popis grafu" />
<meta vlastnosť ="og: obrázok" obsah ="https://www.example.com/og-image.jpg" />
<meta vlastnosť ="og: názov_stránky" obsah ="YourSiteName" />
<meta meno="twitter: karta" obsah ="súhrnný_veľký_obrázok" />
<meta meno="twitter: stránka" obsah ="@stránka" />
<meta meno="twitter: tvorca" obsah ="@rukoväť" />
</Head>
<telo>
<Hlavné />
<NextScript />
</body>
</Html>
 );
 }
}
exportpredvolená MyDocument;

Pridajte do svojho súboru index.js obsah uvedený nižšie:

konšt DemoStránka = () => (
<>
<p>Demo stránka</str>
</>
);
exportpredvolená DemoPage;

Tento kód importuje komponent Document z next/document a vytvorí vlastný MyDocument komponent. Špecifikuje názov, popis a obrázok našej stránky, ako aj názov lokality a popisovač služby Twitter.

Spustite nasledujúci príkaz na spustenie vývojového servera:

npm spustiť dev

OTVORENÉ http://localhost: 3000 vo vašom prehliadači, aby ste videli demo stránku.

Pridaním značiek Open Graph na váš web získate väčšiu kontrolu nad tým, ako sa zobrazuje v príspevkoch na sociálnych sieťach, a môže pomôcť zlepšiť mieru prekliknutia. Môžete tiež zlepšiť spôsob, akým sa vaše webové stránky zobrazujú v SERP, čo môže v konečnom dôsledku viesť k zlepšeniu hodnotenia webových stránok.

Existuje aj mnoho ďalších spôsobov, ako zlepšiť hodnotenie stránok. Mali by ste optimalizovať svoje webové stránky pre mobilné zariadenia a používať názvy a popisy bohaté na kľúčové slová. Používanie značiek Open Graph je však rýchly a jednoduchý spôsob, ako začať.