Ste kdaj želeli, da se vaše spletno mesto Next.js prikaže kot obogateni predmet, ko ga delite v družabnih medijih? Če je tako, potem morate implementirati protokol Open Graph.
Paket next-seo olajša dodajanje oznak Open Graph na vaše spletno mesto Next.js. Uporabite lahko tudi bolj ročni pristop za natančnejši nadzor nad končnim rezultatom.
Nazadnje boste želeli razmisliti, katere informacije boste vključili v svoje oznake.
Kaj je Open Graph?
Protokol Open Graph je odprt standard, ki razvijalcem omogoča nadzor nad tem, kako družbeni mediji prikazujejo njihovo vsebino. Prvotno ga je razvil Facebook, vendar so številne druge platforme od takrat sprejele protokol. Sem spadajo Twitter, LinkedIn in Pinterest.
Open Graph vam omogoča, da natančno določite, kako naj druga spletna mesta prikazujejo vašo vsebino, kar zagotavlja, da je videti dobro in enostavno berljivo. Omogoča tudi večji nadzor nad načinom upodabljanja povezav. To olajša sledenje prikazom klikov in drugim meritvam angažiranosti.
Zakaj uporabljati protokol Open Graph?
Obstajajo tri glavna področja, ki bi jih moral Open Graph izboljšati: sodelovanje v družbenih medijih, SEO in promet na spletnem mestu.
Open Graph lahko pomaga izboljšati sodelovanje v družbenih medijih, tako da uporabnikom olajša skupno rabo vaše vsebine. Če določite, kako naj spletna mesta prikazujejo vašo vsebino, jo lahko naredite bolj vizualno privlačno in lahko berljivo. To pa lahko privede do več delitev in všečkov ter povečanega razmerja med prikazi in kliki.
2. Izboljšajte SEO
Pomaga lahko tudi Open Graph izboljšajte svoj SEO. Če določite naslov, opis in sliko za vsak del vsebine, lahko nadzirate, kako se prikazuje v rezultatih iskanja. To lahko pomaga povečati razmerje med prikazi in kliki na vašem spletnem mestu ter izboljšati vašo splošno uvrstitev.
3. Povečajte promet na spletnem mestu
Končno lahko Open Graph pomaga povečati promet na spletnem mestu. Če uporabnikom olajšate skupno rabo vaše vsebine, lahko povečate število ljudi, ki jo vidijo. To pa lahko povzroči več obiskovalcev spletnega mesta in povečan promet.
4. Izboljšajte uporabniško izkušnjo
Druga prednost uporabe protokola Open Graph je, da lahko izboljša uporabniško izkušnjo na vašem spletnem mestu. Z vključitvijo metapodatkov lahko izboljšate dostopnost in ponovno uporabite podatke, s čimer zagotovite, da uporabniki vidijo najbolj ustrezne informacije. To lahko privede do boljše splošne izkušnje na vašem spletnem mestu, kar lahko privede do več vračanja obiskovalcev.
Zakaj uporabljati Next.js?
Obstajata dva glavna razloga za uporabo Next.js: izboljšati zmogljivost in olajšati razvoj.
1. Izboljšajte zmogljivost
Next.js lahko pomaga izboljšati zmogljivost z razdelitvijo kode vaše aplikacije in vnaprejšnjim pridobivanjem virov. To lahko vodi do hitrejšega časa nalaganja in zmanjšane obremenitve strežnika.
2. Naj bo razvoj lažji
Next.js lahko tudi olajša razvoj, saj zagotavlja preprost način za ustvarite strežniško upodobljene aplikacije React. To lahko pospeši in olajša razvoj in uvajanje aplikacij React.
Kako implementirati protokol Open Graph v Next.js
Protokol Open Graph v Next.js lahko implementirate na dva načina: z uporabo paketa next-seo ali ustvarjanjem prilagojenega _document.js mapa.
1. način: uporaba paketa next-seo
Najlažji način za implementacijo protokola Open Graph v Next.js je uporaba paketa next-seo. Ta paket bo samodejno ustvaril potrebne oznake namesto vas.
Če želite namestiti paket next-seo, zaženite naslednji ukaz:
npm namestiteNaslednji-seo --shraniPo namestitvi paketa ga lahko uporabljate tako, da svojemu dodate naslednjo kodo index.js mapa:
uvoz { NextSeo } od 'naslednji-seo';konst DemoStran = () => (
<>
<NextSeo
naslov="Vaš naslov"
opis="To je demo opis"
kanoničen="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
naslov: 'Odpri naslov grafikona',
opis: 'Odpri opis grafikona',
slike: [
{
url: 'https://www.example.com/og-image01.jpg',
širina: 800,
višina: 600,
alt: 'Og Slika Alt',
vrsta: 'slika/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
širina: 900,
višina: 800,
alt: 'Og Image Alt Second',
vrsta: 'slika/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
ime_mesta: 'Vaše imeSpletnega mesta',
}}
twitter={{
ročaj: '@ročaj',
spletno mesto: '@stran',
cardType: 'povzetek_velika_slika',
}}
/>
<str>Demo stran</str>
</>
);
izvozprivzeto DemoPage;
Ta koda uvozi komponento NextSeo iz paketa next-seo in jo uporabi za podajanje naslova, opisa in slike za stran. Določa tudi ime spletnega mesta in Twitter ročaj.
Za zagon razvojnega strežnika zaženite naslednji ukaz:
npm run devOdprto http://localhost: 3000 v brskalniku, da si ogledate predstavitveno stran.
2. način: uporaba datoteke _document.js po meri
Drug način za implementacijo Open Graph Protocol v Next.js je ustvarjanje po meri _document.js mapa. Ta datoteka vam bo omogočila, da sami določite oznake Open Graph in ustvarite kodo za večkratno uporabo za vse strani.
Za postavitev po meri _document.js datoteko, ustvarite novo datoteko v svojem strani imenik z naslednjo vsebino:
uvoz Dokument, { Html, Head, Main, NextScript } od 'Naslednji/dokument';razredMoj dokumentse raztezaDokument{
statičnaasinh getInitialProps (ctx) {
konst initialProps = čakati Document.getInitialProps (ctx);
vrnitev { ...initialProps };
}render() {
vrnitev (
<Html>
<glava>
<meta lastnost="og: url" vsebina="https://www.example.com" />
<meta lastnost="og: naslov" vsebina="Odpri naslov grafikona" />
<meta lastnost="og: opis" vsebina="Odpri opis grafikona" />
<meta lastnost="og: slika" vsebina="https://www.example.com/og-image.jpg" />
<meta lastnost="og: ime_mesta" vsebina="Vaše imeSpletnega mesta" />
<meta ime="twitter: kartica" vsebina="povzetek_velika_slika" />
<meta ime="twitter: spletno mesto" vsebina="@stran" />
<meta ime="twitter: ustvarjalec" vsebina="@ročaj" />
</Head>
<telo>
<Glavni />
<NextScript />
</body>
</Html>
);
}
}
izvozprivzeto Moj dokument;
V datoteko index.js dodajte spodnjo vsebino:
konst DemoStran = () => (
<>
<str>Demo stran</str>
</>
);
izvozprivzeto DemoPage;
Ta koda uvozi komponento Document iz next/document in ustvari po meri Moj dokument komponento. Določa naslov, opis in sliko za našo stran, kot tudi ime spletnega mesta in Twitter ročaj.
Za zagon razvojnega strežnika zaženite naslednji ukaz:
npm run devOdprto http://localhost: 3000 v brskalniku, da si ogledate predstavitveno stran.
Dodajanje oznak Open Graph na vaše spletno mesto vam lahko zagotovi večji nadzor nad tem, kako je prikazano v objavah v družbenih medijih, in lahko pomaga izboljšati razmerje med prikazi in kliki. Izboljšate lahko tudi način, kako je vaše spletno mesto prikazano v SERP-ih, kar lahko na koncu vodi do izboljšane uvrstitve spletnega mesta.
Obstaja tudi veliko drugih načinov za izboljšanje uvrstitve spletnega mesta. Optimizirajte svoje spletno mesto za mobilne naprave in uporabite naslove in opise, bogate s ključnimi besedami. Toda uporaba oznak Open Graph je hiter in enostaven način za začetek.
