Kas olete kunagi soovinud, et teie Next.js sait ilmuks sotsiaalmeedias jagamisel rikkaliku objektina? Kui jah, siis peate rakendama Open Graphi protokolli.

Next-seo pakett muudab Open Graphi siltide lisamise saidile Next.js lihtsaks. Lõpptulemuse täpsemaks kontrollimiseks võite kasutada ka käsitsi lähenemist.

Lõpuks peaksite kaaluma, millist teavet oma siltidele lisada.

Mis on avatud graafik?

Open Graphi protokoll on avatud standard, mis võimaldab arendajatel kontrollida, kuidas sotsiaalmeedia nende sisu kuvab. Algselt töötas selle välja Facebook, kuid paljud teised platvormid on sellest ajast alates protokolli vastu võtnud. Nende hulka kuuluvad Twitter, LinkedIn ja Pinterest.

Open Graph võimaldab teil täpselt määrata, kuidas teised saidid teie sisu kuvama peaksid, tagades selle hea väljanägemise ja hõlpsa lugemise. See võimaldab ka suuremat kontrolli linkide kuvamise üle. See muudab klikkide ja muude kaasamismõõdikute jälgimise lihtsamaks.

Miks kasutada Open Graph protokolli?

Open Graph peaks parandama kolme peamist valdkonda: sotsiaalmeedia kaasatus, SEO ja veebisaidi liiklus.

Open Graph võib aidata parandada sotsiaalmeedia seotust, muutes kasutajatel teie sisu jagamise lihtsamaks. Määrates, kuidas saidid peaksid teie sisu kuvama, saate muuta selle visuaalselt atraktiivsemaks ja hõlpsasti loetavaks. See võib omakorda kaasa tuua rohkem jagamisi ja meeldimisi, aga ka suuremat klikkimise määra.

2. Täiustage SEO

Open Graph võib samuti aidata parandada oma SEO-d. Määrates iga sisuosa pealkirja, kirjelduse ja pildi, saate juhtida, kuidas see otsingutulemustes kuvatakse. See võib aidata suurendada teie veebisaidi klikkimise määra ja parandada teie üldist asetust.

3. Suurendage veebisaidi liiklust

Lõpuks võib Open Graph aidata veebisaidi liiklust suurendada. Muutes kasutajatele teie sisu jagamise lihtsamaks, saate suurendada inimeste arvu, kes seda näevad. See võib omakorda kaasa tuua veebisaidi külastajate arvu ja liikluse suurenemise.

4. Parandage kasutajakogemust

Teine Open Graphi protokolli kasutamise eelis on see, et see võib teie veebisaidil kasutajakogemust parandada. Metaandmete kaasamisega saate hõlbustada juurdepääsetavust ja andmete taaskasutamist, tagades, et kasutajad näevad kõige asjakohasemat teavet. See võib kaasa tuua parema üldise kogemuse teie saidil, mis võib tuua kaasa rohkem tagasikülastajaid.

Miks kasutada Next.js-i?

Next.js'i kasutamiseks on kaks peamist põhjust: jõudluse parandamine ja arendamise hõlbustamine.

1. Sooritust parandama

Next.js võib aidata jõudlust parandada, jagades teie rakenduse koodi tükeldades ja ressursse eelhankides. See võib kaasa tuua kiirema laadimisaja ja vähendada serveri koormust.

2. Tee arendus lihtsamaks

Next.js võib arendamist lihtsamaks muuta, pakkudes selleks lihtsat viisi luua serveris renderdatud Reacti rakendusi. See võib muuta Reacti rakenduste arendamise ja juurutamise kiiremaks ja lihtsamaks.

Open Graph Protocol'i rakendamine failis Next.js

Open Graph Protocol'i rakendamiseks Next.js-is on kaks võimalust: kasutades next-seo paketti või luua kohandatud _document.js faili.

1. meetod: järgmise-seo paketi kasutamine

Lihtsaim viis Open Graph Protocol'i rakendamiseks Next.js-is on kasutada paketti next-seo. See pakett genereerib teie jaoks automaatselt vajalikud sildid.

Next-seo paketi installimiseks käivitage järgmine käsk:

npm installidajärgmiseks-seo -- salvestada

Pärast paketi installimist saate seda kasutada, lisades omale järgmise koodi index.js fail:

importida { NextSeo } alates 'next-seo';
konst Demoleht = () => (
<>
<NextSeo
 pealkiri="Teie tiitel"
 kirjeldus="See on demo kirjeldus"
 kanooniline ="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 pealkiri: 'Avage graafiku pealkiri',
 kirjeldus: 'Avage graafiku kirjeldus',
 pildid: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 laius: 800,
 kõrgus: 600,
 alt: 'Og Pilt Alt',
 tüüp: 'pilt/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 laius: 900,
 kõrgus: 800,
 alt: 'Og Pilt Alt Teine',
 tüüp: 'pilt/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 saidi_nimi: 'Teie saidinimi',
 }}
 twitter={{
 käepide: '@käepide',
 sait: '@sait',
 kaardi tüüp: 'kokkuvõte_suur_pilt',
 }}
 />
<lk>Demoleht</lk>
</>
);
eksportidavaikimisi demoleht;

See kood impordib NextSeo komponendi next-seo paketist ja kasutab seda lehe pealkirja, kirjelduse ja pildi määramiseks. See määrab ka saidi nime ja Twitteri käepideme.

Arendusserveri käivitamiseks käivitage järgmine käsk:

npm käivita dev

Avatud http://localhost: 3000, et näha demolehte.

2. meetod: kohandatud faili _document.js kasutamine

Teine võimalus Open Graph Protocol'i rakendamiseks rakenduses Next.js on kohandatud protokolli loomine _document.js faili. See fail võimaldab teil määrata Open Graphi sildid ise ja luua korduvkasutatav kood kõigi lehtede jaoks.

Kohandatud seadistamiseks _document.js faili, looge oma failis uus fail lehekülgi järgmise sisuga kataloog:

importida Dokument, { Html, Head, Main, NextScript } alates 'järgmine/dokument';
klassMinuDokumentulatubDokument{
staatilineasünkr getInitialProps (ctx) {
konst esialgsed rekvisiidid = ootama Document.getInitialProps (ctx);
tagasi { ...initialProps };
 }


render() {
tagasi (
<HTML>
<Pea>
<meta omadus="og: url" sisu="https://www.example.com" />
<meta omadus="og: pealkiri" sisu="Avage graafiku pealkiri" />
<meta omadus="og: kirjeldus" sisu="Avage graafiku kirjeldus" />
<meta omadus="og: pilt" sisu="https://www.example.com/og-image.jpg" />
<meta omadus="og: saidi_nimi" sisu="Teie saidinimi" />
<meta nimi="twitter: kaart" sisu="kokkuvõte_suur_pilt" />
<meta nimi="twitter: sait" sisu="@sait" />
<meta nimi="twitter: looja" sisu="@käepide" />
</Head>
<keha>
<Peamine />
<NextScript />
</body>
</Html>
 );
 }
}
eksportidavaikimisi MyDocument;

Lisage oma index.js faili järgmine sisu:

konst Demoleht = () => (
<>
<lk>Demoleht</lk>
</>
);
eksportidavaikimisi demoleht;

See kood impordib dokumendi komponendi järgmisest/dokumendist ja loob kohandatud MinuDokument komponent. See määrab meie lehe pealkirja, kirjelduse ja pildi, samuti saidi nime ja Twitteri käepideme.

Arendusserveri käivitamiseks käivitage järgmine käsk:

npm käivita dev

Avatud http://localhost: 3000, et näha demolehte.

Open Graphi siltide lisamine veebisaidile annab teile parema kontrolli selle üle, kuidas see sotsiaalmeedia postitustes kuvatakse, ja võib aidata parandada klikkimise määra. Samuti saate parandada seda, kuidas teie veebisait SERP-is kuvatakse, mis võib lõppkokkuvõttes kaasa tuua veebisaidi parema asetuse.

Saidi asetuse parandamiseks on ka palju muid viise. Peaksite optimeerima oma veebisaidi mobiilseadmete jaoks ning kasutama märksõnarikkaid pealkirju ja kirjeldusi. Kuid Open Graphi siltide kasutamine on kiire ja lihtne viis alustamiseks.