Ți-ai dorit vreodată ca site-ul tău Next.js să apară ca un obiect bogat atunci când este distribuit pe rețelele sociale? Dacă da, atunci trebuie să implementați protocolul Open Graph.

Pachetul next-seo facilitează adăugarea etichetelor Open Graph pe site-ul dvs. Next.js. De asemenea, puteți utiliza o abordare mai manuală pentru un control mai fin asupra rezultatului final.

În cele din urmă, veți dori să vă gândiți exact ce informații să includeți în etichetele dvs.

Ce este Open Graph?

Protocolul Open Graph este un standard deschis care permite dezvoltatorilor să controleze modul în care rețelele sociale își afișează conținutul. A fost dezvoltat inițial de Facebook, dar multe alte platforme au adoptat protocolul de atunci. Acestea includ Twitter, LinkedIn și Pinterest.

Open Graph vă permite să specificați exact modul în care alte site-uri ar trebui să vă afișeze conținutul, asigurându-vă că acesta arată bine și este ușor de citit. De asemenea, permite un control mai mare asupra modului de redare a link-urilor. Acest lucru facilitează urmărirea clicurilor și a altor valori de implicare.

instagram viewer

De ce să folosiți protocolul Open Graph?

Există trei domenii principale pe care Open Graph ar trebui să le îmbunătățească: implicarea în rețelele sociale, SEO și traficul pe site.

Open Graph poate ajuta la îmbunătățirea implicării în rețelele sociale, facilitând accesul utilizatorilor la conținutul dvs. Specificând modul în care site-urile ar trebui să vă afișeze conținutul, îl puteți face mai atrăgător din punct de vedere vizual și mai ușor de citit. Acest lucru, la rândul său, poate duce la mai multe distribuiri și aprecieri, precum și la creșterea ratelor de clic.

2. Îmbunătățiți SEO

Open Graph poate ajuta, de asemenea îmbunătățiți-vă SEO. Specificând titlul, descrierea și imaginea pentru fiecare componentă de conținut, puteți controla modul în care apare în rezultatele căutării. Acest lucru poate ajuta la creșterea ratei de clic pe site-ul dvs., precum și la îmbunătățirea clasamentului general.

3. Creșteți traficul pe site

În cele din urmă, Open Graph poate ajuta la creșterea traficului pe site. Făcând mai ușor de către utilizatori să partajeze conținutul dvs., puteți crește numărul de persoane care îl văd. Acest lucru, la rândul său, poate duce la mai mulți vizitatori pe site și la creșterea traficului.

4. Îmbunătățiți experiența utilizatorului

Un alt avantaj al utilizării protocolului Open Graph este că poate îmbunătăți experiența utilizatorului pe site-ul dvs. Prin includerea metadatelor, puteți facilita accesibilitatea și reutiliza datele, asigurându-vă că utilizatorii văd cele mai relevante informații. Acest lucru poate duce la o experiență generală mai bună pe site-ul dvs., ceea ce poate duce la mai mulți vizitatori reveniți.

De ce să folosiți Next.js?

Există două motive principale pentru a utiliza Next.js: pentru a îmbunătăți performanța și pentru a ușura dezvoltarea.

1. Îmbunătățiți performanța

Next.js poate ajuta la îmbunătățirea performanței prin împărțirea codului aplicației și preluarea prealabilă a resurselor. Acest lucru poate duce la un timp de încărcare mai rapid și la o încărcare redusă a serverului.

2. Faceți dezvoltarea mai ușoară

Next.js poate, de asemenea, ușura dezvoltarea, oferind o modalitate simplă de a creați aplicații React redate pe server. Acest lucru poate face mai rapidă și mai ușoară dezvoltarea și implementarea aplicațiilor React.

Cum să implementați protocolul Open Graph în Next.js

Există două moduri de a implementa Open Graph Protocol în Next.js: folosind pachetul next-seo sau crearea unui _document.js fişier.

Metoda 1: Utilizarea pachetului next-seo

Cel mai simplu mod de a implementa Open Graph Protocol în Next.js este să utilizați pachetul next-seo. Acest pachet va genera automat etichetele necesare pentru dvs.

Pentru a instala pachetul next-seo, rulați următoarea comandă:

npm instalareUrmătorul-seo --Salvați

După instalarea pachetului, îl puteți utiliza adăugând următorul cod la dvs index.js fişier:

import { NextSeo } din „next-seo”;
const DemoPage = () => (
<>
<NextSeo
 titlu="Titlul tau"
 descriere="Aceasta este o descriere demonstrativă"
 canonic="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 titlu: 'Deschideți titlul graficului',
 Descriere: 'Deschideți Descrierea graficului',
 imagini: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 latime: 800,
 inaltime: 600,
 alt: 'Og Image Alt',
 tip: 'imagine/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 latime: 900,
 inaltime: 800,
 alt: 'Og Image Alt Second',
 tip: 'imagine/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 Numele site-ului: 'YourSiteName',
 }}
 twitter={{
 mâner: '@mâner',
 site: '@site-ul',
 tipul cardului: 'imagine_rezumat_mare',
 }}
 />
<p>Pagina Demo</p>
</>
);
exportMod implicit DemoPage;

Acest cod importă componenta NextSeo din pachetul next-seo și o folosește pentru a specifica titlul, descrierea și imaginea paginii. De asemenea, specifică numele site-ului și identificatorul Twitter.

Rulați următoarea comandă pentru a porni serverul de dezvoltare:

npm run dev

Deschis http://localhost: 3000 în browser pentru a vedea pagina demo.

Metoda 2: Utilizarea fișierului personalizat _document.js

O altă modalitate de a implementa protocolul Open Graph în Next.js este crearea unui personalizat _document.js fişier. Acest fișier vă va permite să specificați singur etichetele Open Graph și creați cod reutilizabil pentru toate paginile.

Pentru a configura o personalizare _document.js fișier, creați un fișier nou în fișierul dvs pagini director cu următorul conținut:

import Document, { Html, Head, Main, NextScript } din 'Următorul/document';
clasăMyDocumentse extindeDocument{
staticasincron getInitialProps (ctx) {
const initialProps = așteaptă Document.getInitialProps (ctx);
întoarcere { ...initialProps };
 }


randa() {
întoarcere (
<HTML>
<Cap>
<meta proprietate="og: url" continut="https://www.example.com" />
<meta proprietate="og: titlu" continut="Deschideți titlul graficului" />
<meta proprietate="og: descriere" continut="Deschideți Descrierea graficului" />
<meta proprietate="og: imagine" continut="https://www.example.com/og-image.jpg" />
<meta proprietate="og: site_name" continut="YourSiteName" />
<meta nume="twitter: card" continut="imagine_rezumat_mare" />
<meta nume="twitter: site" continut="@site-ul" />
<meta nume="twitter: creator" continut="@mâner" />
</Head>
<corp>
<Principal />
<NextScript />
</body>
</Html>
 );
 }
}
exportMod implicit MyDocument;

Adăugați conținutul de mai jos în fișierul dvs. index.js:

const DemoPage = () => (
<>
<p>Pagina Demo</p>
</>
);
exportMod implicit DemoPage;

Acest cod importă componenta Document din următorul/document și creează un personalizat MyDocument componentă. Specifică titlul, descrierea și imaginea paginii noastre, precum și numele site-ului și identificatorul Twitter.

Rulați următoarea comandă pentru a porni serverul de dezvoltare:

npm run dev

Deschis http://localhost: 3000 în browser pentru a vedea pagina demo.

Adăugarea etichetelor Open Graph pe site-ul dvs. vă poate oferi mai mult control asupra modului în care apare în postările pe rețelele sociale și poate ajuta la îmbunătățirea ratelor de clic. De asemenea, puteți îmbunătăți modul în care site-ul dvs. apare în SERP-uri, ceea ce poate duce în cele din urmă la o clasare îmbunătățită a site-ului.

Există, de asemenea, multe alte modalități de a îmbunătăți clasarea site-ului. Ar trebui să vă optimizați site-ul web pentru dispozitive mobile și să utilizați titluri și descrieri bogate în cuvinte cheie. Dar utilizarea etichetelor Open Graph este o modalitate rapidă și ușoară de a începe.