Oletko koskaan halunnut Next.js-sivustosi näkyvän monipuolisena kohteena, kun se jaetaan sosiaalisessa mediassa? Jos näin on, sinun on otettava käyttöön Open Graph -protokolla.

next-seo-paketin avulla on helppo lisätä Open Graph -tageja Next.js-sivustollesi. Voit myös käyttää manuaalisempaa lähestymistapaa lopputuloksen tarkempaan hallintaan.

Lopuksi sinun kannattaa harkita tarkasti, mitä tietoja haluat sisällyttää tunnisteisiin.

Mikä on Open Graph?

Open Graph -protokolla on avoin standardi, jonka avulla kehittäjät voivat hallita, kuinka sosiaalinen media näyttää heidän sisältöään. Sen on alun perin kehittänyt Facebook, mutta monet muut alustat ovat sittemmin omaksuneet protokollan. Näitä ovat Twitter, LinkedIn ja Pinterest.

Open Graph -sovelluksella voit määrittää tarkalleen, kuinka muiden sivustojen tulee näyttää sisältösi, mikä varmistaa, että se näyttää hyvältä ja on helppolukuinen. Se mahdollistaa myös linkkien näyttämisen paremman hallinnan. Tämä helpottaa napsautussuhteiden ja muiden sitoutumismittareiden seurantaa.

instagram viewer

Miksi käyttää Open Graph -protokollaa?

On kolme pääaluetta, joita Open Graphin tulisi parantaa: sosiaalisen median sitoutuminen, hakukoneoptimointi ja verkkosivuston liikenne.

Open Graph voi auttaa parantamaan sosiaalisen median sitoutumista helpottamalla sisältösi jakamista. Määrittämällä, kuinka sivustojen tulee näyttää sisältösi, voit tehdä siitä visuaalisesti houkuttelevamman ja helppolukuisemman. Tämä puolestaan ​​voi johtaa enemmän jakamiseen ja tykkäyksiin sekä lisääntyneeseen klikkausprosenttiin.

2. Tehosta SEO

Open Graph voi myös auttaa parantaa hakukoneoptimointiasi. Määrittämällä otsikon, kuvauksen ja kuvan kullekin sisällölle voit hallita, miten se näkyy hakutuloksissa. Tämä voi auttaa lisäämään verkkosivustosi napsautussuhdetta sekä parantamaan yleistä sijoitustasi.

3. Lisää verkkosivuston liikennettä

Lopuksi Open Graph voi auttaa lisäämään verkkosivuston liikennettä. Helpotamalla käyttäjien jakamista sisältösi, voit lisätä sen näkevien ihmisten määrää. Tämä puolestaan ​​​​voi lisätä verkkosivuston kävijöitä ja lisätä liikennettä.

4. Paranna käyttökokemusta

Toinen Open Graph -protokollan käytön etu on, että se voi parantaa verkkosivustosi käyttökokemusta. Sisällyttämällä metadataa voit helpottaa tietojen saatavuutta ja käyttää niitä uudelleen varmistaen, että käyttäjät näkevät tärkeimmät tiedot. Tämä voi parantaa sivustosi yleistä käyttökokemusta, mikä voi johtaa useampaan palaaviin vierailijoihin.

Miksi käyttää Next.js: ää?

Next.js: n käyttämiseen on kaksi tärkeintä syytä: parantaa suorituskykyä ja helpottaa kehitystä.

1. Paranna suorituskykyä

Next.js voi auttaa parantamaan suorituskykyä jakamalla sovelluksesi koodiin ja esihakemalla resursseja. Tämä voi nopeuttaa latausaikaa ja vähentää palvelimen kuormitusta.

2. Helpota kehitystä

Next.js voi myös helpottaa kehitystä tarjoamalla yksinkertaisen tavan luoda palvelimen luomia React-sovelluksia. Tämä voi tehdä React-sovellusten kehittämisestä ja käyttöönotosta nopeampaa ja helpompaa.

Open Graph -protokollan käyttöönotto Next.js: ssä

On kaksi tapaa ottaa Open Graph Protocol käyttöön Next.js: ssä: käyttämällä next-seo-pakettia tai luomalla mukautettu _document.js tiedosto.

Tapa 1: Seuraava-seo-paketin käyttäminen

Helpoin tapa ottaa Open Graph Protocol käyttöön Next.js: ssä on käyttää next-seo-pakettia. Tämä paketti luo automaattisesti tarvittavat tunnisteet sinulle.

Asenna next-seo-paketti suorittamalla seuraava komento:

npm AsentaaSeuraava-seo --Tallentaa

Kun olet asentanut paketin, voit käyttää sitä lisäämällä seuraavan koodin index.js tiedosto:

tuonti { NextSeo } alkaen 'seuraava-seo';
konst Esittelysivu = () => (
<>
<NextSeo
 otsikko="Otsikkosi"
 kuvaus ="Tämä on esittelykuvaus"
 kanoninen ="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 otsikko: 'Avaa kaavion otsikko',
 kuvaus: 'Avaa kaavion kuvaus',
 kuvat: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 leveys: 800,
 Korkeus: 600,
 alt: 'Og Image Alt',
 tyyppi: 'kuva/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 leveys: 900,
 Korkeus: 800,
 alt: 'Og Image Alt Second',
 tyyppi: 'kuva/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 sivuston nimi: 'YourSiteName',
 }}
 twitter={{
 kahva: '@kahva',
 sivusto: '@sivusto',
 korttityyppi: 'yhteenveto_suuri_kuva',
 }}
 />
<s>Esittelysivu</s>
</>
);
viedäoletuksena DemoPage;

Tämä koodi tuo NextSeo-komponentin next-seo-paketista ja määrittää sen avulla sivun otsikon, kuvauksen ja kuvan. Se määrittää myös sivuston nimen ja Twitter-kahvan.

Käynnistä kehityspalvelin suorittamalla seuraava komento:

npm run dev

Avata http://localhost: 3000 selaimessasi nähdäksesi esittelysivun.

Tapa 2: Mukautetun _document.js-tiedoston käyttäminen

Toinen tapa ottaa Open Graph Protocol käyttöön Next.js: ssä on luoda mukautettu _document.js tiedosto. Tämän tiedoston avulla voit määrittää Open Graph -tunnisteet itse ja luoda uudelleen käytettävä koodi kaikille sivuille.

Voit määrittää mukautetun _document.js tiedosto, luo uusi tiedosto omaan sivuja hakemisto, jossa on seuraava sisältö:

tuonti Asiakirja, { Html, Head, Main, NextScript } alkaen 'Seuraava/asiakirja';
luokkaaMyDocumentulottuuAsiakirja{
staattinenasynk getInitialProps (ctx) {
konst originalProps = odottaa Document.getInitialProps (ctx);
palata { ...initialProps };
 }


render() {
palata (
<HTML>
<Pää>
<metaominaisuus="og: url" sisältö="https://www.example.com" />
<metaominaisuus="og: otsikko" sisältö="Avaa kaavion otsikko" />
<metaominaisuus="og: kuvaus" sisältö="Avaa kaavion kuvaus" />
<metaominaisuus="og: kuva" sisältö="https://www.example.com/og-image.jpg" />
<metaominaisuus="og: sivuston_nimi" sisältö="YourSiteName" />
<metanimi="twitter: kortti" sisältö="yhteenveto_suuri_kuva" />
<metanimi="twitter: sivusto" sisältö="@sivusto" />
<metanimi="twitter: luoja" sisältö="@kahva" />
</Head>
<kehon>
<Pää/>
<NextScript />
</body>
</Html>
 );
 }
}
viedäoletuksena MyDocument;

Lisää alla oleva sisältö index.js-tiedostoosi:

konst Esittelysivu = () => (
<>
<s>Esittelysivu</s>
</>
);
viedäoletuksena DemoPage;

Tämä koodi tuo asiakirjakomponentin seuraavasta/asiakirjasta ja luo mukautetun MyDocument komponentti. Se määrittää sivumme otsikon, kuvauksen ja kuvan sekä sivuston nimen ja Twitter-kahvan.

Käynnistä kehityspalvelin suorittamalla seuraava komento:

npm run dev

Avata http://localhost: 3000 selaimessasi nähdäksesi esittelysivun.

Open Graph -tunnisteiden lisääminen verkkosivustollesi voi antaa sinulle paremman hallinnan siihen, miten se näkyy sosiaalisen median viesteissä, ja parantaa napsautussuhteita. Voit myös parantaa tapaa, jolla verkkosivustosi näkyy SERP: issä, mikä voi viime kädessä johtaa parempaan verkkosivuston sijoitukseen.

On myös monia muita tapoja parantaa sivuston sijoitusta. Sinun tulisi optimoida verkkosivustosi mobiililaitteille ja käyttää avainsanojen sisältäviä otsikoita ja kuvauksia. Mutta Open Graph -tunnisteiden käyttö on nopea ja helppo tapa aloittaa.