Jeste li ikada željeli da se vaša stranica Next.js prikaže kao obogaćeni objekt kada se dijeli na društvenim medijima? Ako je tako, onda trebate implementirati Open Graph protokol.
Paket next-seo olakšava dodavanje oznaka Open Graph na vašu stranicu Next.js. Također možete koristiti više ručni pristup za finiju kontrolu nad gotovim rezultatom.
Konačno, trebali biste razmisliti koje točno informacije uključiti u svoje oznake.
Što je Open Graph?
Protokol Open Graph otvoreni je standard koji programerima omogućuje kontrolu načina na koji društveni mediji prikazuju njihov sadržaj. Izvorno ga je razvio Facebook, ali su mnoge druge platforme od tada usvojile protokol. To uključuje Twitter, LinkedIn i Pinterest.
Open Graph vam omogućuje da točno odredite kako bi druge stranice trebale prikazati vaš sadržaj, osiguravajući da izgleda dobro i da je lako čitljiv. Također omogućuje veću kontrolu nad načinom na koji se veze prikazuju. To olakšava praćenje klikova i drugih mjernih podataka angažmana.
Zašto koristiti Open Graph Protocol?
Postoje tri glavna područja koja bi Open Graph trebao poboljšati: angažman na društvenim mrežama, SEO i promet na web stranici.
Open Graph može poboljšati angažman na društvenim mrežama olakšavajući korisnicima dijeljenje vašeg sadržaja. Određivanjem načina na koji bi stranice trebale prikazivati vaš sadržaj, možete ga učiniti vizualno privlačnijim i lakšim za čitanje. To zauzvrat može dovesti do više dijeljenja i lajkova, kao i do povećanja stope klikanja.
2. Poboljšajte SEO
Open Graph također može pomoći poboljšati svoj SEO. Određivanjem naslova, opisa i slike za svaki dio sadržaja možete kontrolirati kako se pojavljuje u rezultatima pretraživanja. To može pomoći povećati klikovni postotak vaše web stranice, kao i poboljšati vaš ukupni rang.
3. Povećajte promet na web stranici
Konačno, Open Graph može pomoći u povećanju prometa na web stranici. Olakšavajući korisnicima dijeljenje vašeg sadržaja, možete povećati broj ljudi koji ga vide. To zauzvrat može dovesti do većeg broja posjetitelja web stranice i povećanog prometa.
4. Poboljšajte korisničko iskustvo
Još jedna prednost korištenja Open Graph protokola je ta što može poboljšati korisničko iskustvo na vašoj web stranici. Uključivanjem metapodataka možete pomoći u pristupačnosti i ponovnoj upotrebi podataka, osiguravajući da korisnici vide najrelevantnije informacije. To može dovesti do boljeg općeg iskustva na vašoj web-lokaciji, što može dovesti do većeg broja ponovljenih posjetitelja.
Zašto koristiti Next.js?
Postoje dva glavna razloga za korištenje Next.js: poboljšati performanse i olakšati razvoj.
1. Poboljšajte izvedbu
Next.js može poboljšati izvedbu dijeljenjem koda vaše aplikacije i prethodnim dohvaćanjem resursa. To može dovesti do bržeg vremena učitavanja i smanjenog opterećenja poslužitelja.
2. Olakšajte razvoj
Next.js također može olakšati razvoj pružajući jednostavan način za kreirati poslužiteljski renderirane React aplikacije. To može ubrzati i olakšati razvoj i implementaciju React aplikacija.
Kako implementirati Open Graph Protocol u Next.js
Postoje dva načina za implementaciju protokola Open Graph u Next.js: korištenje next-seo paketa ili stvaranje prilagođenog _document.js datoteka.
Metoda 1: Korištenje next-seo paketa
Najlakši način za implementaciju Open Graph Protocol-a u Next.js je korištenje next-seo paketa. Ovaj paket će automatski generirati potrebne oznake za vas.
Da biste instalirali next-seo paket, pokrenite sljedeću naredbu:
npm instaliratiSljedeći-seo --uštedjetiNakon instaliranja paketa, možete ga koristiti dodavanjem sljedećeg koda u svoj index.js datoteka:
uvoz { NextSeo } iz 'sljedeća-seo';konst Demostranica = () => (
<>
<NextSeo
naslov="Tvoja titula"
opis="Ovo je demo opis"
kanonski="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
titula: 'Otvori naslov grafikona',
opis: 'Otvorite opis grafikona',
slike: [
{
url: 'https://www.example.com/og-image01.jpg',
širina: 800,
visina: 600,
alt: 'Og Alt slike',
tip: 'slika/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
širina: 900,
visina: 800,
alt: 'Og Slika Alt Drugi',
tip: 'slika/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
ime stranice: 'Ime Vaše web stranice',
}}
twitter={{
ručka: '@ručka',
stranica: '@site',
vrsta kartice: 'sažetak_velika_slika',
}}
/>
<str>Demo stranica</str>
</>
);
izvozzadano Demostranica;
Ovaj kod uvozi NextSeo komponentu iz next-seo paketa i koristi je za određivanje naslova, opisa i slike za stranicu. Također navodi naziv stranice i Twitter ručku.
Pokrenite sljedeću naredbu za pokretanje razvojnog poslužitelja:
npm run devOtvorena http://localhost: 3000 u svom pregledniku da vidite demo stranicu.
Metoda 2: Korištenje prilagođene datoteke _document.js
Drugi način implementacije protokola Open Graph u Next.js je stvaranje prilagođenog _document.js datoteka. Ova datoteka će vam omogućiti da sami odredite oznake Open Graph i stvoriti višekratni kod za sve stranice.
Za postavljanje običaja _document.js datoteku, stvorite novu datoteku u svom stranice imenik sa sljedećim sadržajem:
uvoz Dokument, { Html, Head, Main, NextScript } iz 'Sljedeći/dokument';razredaMoj dokumentproteže seDokument{
statičkiasinkroni getInitialProps (ctx) {
konst početniProps = čekati Document.getInitialProps (ctx);
povratak { ...initialProps };
}render() {
povratak (
<Html>
<glava>
<meta svojstvo="og: url" sadržaj="https://www.example.com" />
<meta svojstvo="og: naslov" sadržaj="Otvori naslov grafikona" />
<meta svojstvo="og: opis" sadržaj="Otvorite opis grafikona" />
<meta svojstvo="og: slika" sadržaj="https://www.example.com/og-image.jpg" />
<meta svojstvo="og: naziv_stranice" sadržaj="Ime Vaše web stranice" />
<meta naziv="twitter: kartica" sadržaj="sažetak_velika_slika" />
<meta naziv="twitter: stranica" sadržaj="@site" />
<meta naziv="twitter: kreator" sadržaj="@ručka" />
</Head>
<tijelo>
<Glavni />
<NextScript />
</body>
</Html>
);
}
}
izvozzadano MojDokument;
Dodajte donji sadržaj u svoju datoteku index.js:
konst Demostranica = () => (
<>
<str>Demo stranica</str>
</>
);
izvozzadano Demostranica;
Ovaj kod uvozi komponentu dokumenta iz sljedećeg/dokumenta i stvara prilagođeni Moj dokument komponenta. Određuje naslov, opis i sliku za našu stranicu, kao i naziv stranice i Twitter ručku.
Pokrenite sljedeću naredbu za pokretanje razvojnog poslužitelja:
npm run devOtvorena http://localhost: 3000 u svom pregledniku da vidite demo stranicu.
Dodavanje oznaka Open Graph na vaše web mjesto može vam dati veću kontrolu nad načinom na koji se ono prikazuje u objavama na društvenim mrežama i može pomoći u poboljšanju stope klikanja. Također možete poboljšati način na koji se vaša web stranica pojavljuje u SERP-ovima, što u konačnici može dovesti do poboljšanog rangiranja web stranice.
Postoje i mnogi drugi načini za poboljšanje rangiranja stranice. Trebali biste optimizirati svoje web mjesto za mobilne uređaje i koristiti naslove i opise bogate ključnim riječima. No upotreba oznaka Open Graph brz je i jednostavan način za početak.
