Vai esat kādreiz vēlējies, lai jūsu vietne Next.js tiktu parādīta kā bagātīgs objekts, kad to kopīgojat sociālajos medijos? Ja tā, tad jums ir jāievieš Open Graph protokols.
Next-SEO pakotne ļauj ērti pievienot Open Graph tagus vietnei Next.js. Varat arī izmantot manuālāku pieeju, lai precīzāk kontrolētu gala rezultātu.
Visbeidzot, vēlēsities precīzi apsvērt, kādu informāciju iekļaut tagos.
Kas ir atvērtais grafiks?
Open Graph protokols ir atvērts standarts, kas ļauj izstrādātājiem kontrolēt, kā sociālie mediji parāda viņu saturu. Sākotnēji to izstrādāja Facebook, taču kopš tā laika daudzas citas platformas ir pieņēmušas protokolu. Tie ietver Twitter, LinkedIn un Pinterest.
Open Graph ļauj precīzi norādīt, kā citās vietnēs ir jāparāda jūsu saturs, nodrošinot, ka tas izskatās labi un ir viegli lasāms. Tas arī ļauj labāk kontrolēt to, kā saites tiek renderētas. Tādējādi ir vieglāk izsekot klikšķu skaitam un citiem iesaistes rādītājiem.
Kāpēc izmantot Open Graph protokolu?
Ir trīs galvenās jomas, kuras Open Graph vajadzētu uzlabot: iesaiste sociālajos medijos, SEO un vietnes trafiks.
Open Graph var palīdzēt uzlabot sociālo mediju iesaisti, atvieglojot lietotājiem jūsu satura kopīgošanu. Norādot, kā vietnēs ir jāparāda jūsu saturs, varat padarīt to vizuāli pievilcīgāku un viegli lasāmu. Tas savukārt var radīt vairāk kopīgošanas un atzīmju Patīk, kā arī palielināt vidējo klikšķu skaitu.
2. Uzlabojiet SEO
Var palīdzēt arī Open Graph uzlabot savu SEO. Katrai satura daļai norādot nosaukumu, aprakstu un attēlu, varat kontrolēt, kā tas tiek rādīts meklēšanas rezultātos. Tas var palīdzēt palielināt vidējo klikšķu skaitu uz jūsu vietni, kā arī uzlabot jūsu vispārējo rangu.
3. Palieliniet vietnes trafiku
Visbeidzot, Open Graph var palīdzēt palielināt vietnes trafiku. Atvieglojot lietotājiem jūsu satura kopīgošanu, varat palielināt to cilvēku skaitu, kuri to redz. Tas savukārt var radīt vairāk vietnes apmeklētāju un palielināt trafiku.
4. Uzlabojiet lietotāja pieredzi
Vēl viena Open Graph protokola izmantošanas priekšrocība ir tā, ka tas var uzlabot lietotāja pieredzi jūsu vietnē. Iekļaujot metadatus, varat atvieglot datu pieejamību un izmantot tos atkārtoti, nodrošinot, ka lietotāji redz visatbilstošāko informāciju. Tas var nodrošināt labāku vispārējo pieredzi jūsu vietnē, kas var radīt vairāk atkārtotu apmeklētāju.
Kāpēc izmantot Next.js?
Next.js izmantošanai ir divi galvenie iemesli: lai uzlabotu veiktspēju un atvieglotu izstrādi.
1. Uzlabot veiktspēju
Next.js var palīdzēt uzlabot veiktspēju, sadalot jūsu lietotni kodu un iepriekš ielādējot resursus. Tas var izraisīt ātrāku ielādes laiku un samazināt servera slodzi.
2. Padariet attīstību vienkāršāku
Next.js var arī atvieglot izstrādi, nodrošinot vienkāršu veidu, kā izveidot servera renderētas React lietotnes. Tas var paātrināt un atvieglot React lietotņu izstrādi un izvietošanu.
Kā ieviest Open Graph protokolu vietnē Next.js
Ir divi veidi, kā ieviest Open Graph Protocol programmā Next.js: izmantojot next-seo pakotni vai izveidot pielāgotu. _document.js failu.
1. metode: nākamās SEO pakotnes izmantošana
Vienkāršākais veids, kā ieviest Open Graph Protocol programmā Next.js, ir izmantot next-seo pakotni. Šī pakotne automātiski ģenerēs jums nepieciešamos tagus.
Lai instalētu nākamo seo pakotni, palaidiet šādu komandu:
npm uzstādītNākamais- SEO -- saglabātPēc pakotnes instalēšanas varat to izmantot, pievienojot tālāk norādīto kodu index.js fails:
imports { NextSeo } no 'next-seo';konst DemoLapa = () => (
<>
<NextSeo
virsraksts="Jūsu tituls"
apraksts="Šis ir demonstrācijas apraksts"
kanoniskais ="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
virsraksts: 'Atveriet diagrammas nosaukumu',
apraksts: 'Atveriet diagrammas aprakstu',
attēli: [
{
url: 'https://www.example.com/og-image01.jpg',
platums: 800,
augstums: 600,
alt: 'Og Image Alt',
veids: 'attēls/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
platums: 900,
augstums: 800,
alt: 'Og Image Alt Second',
veids: 'attēls/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
vietnes_nosaukums: 'YourSiteName',
}}
twitter={{
rokturis: '@rokturis',
vietne: '@vietne',
kartes tips: 'summary_large_image',
}}
/>
<lpp>Demo lapa</lpp>
</>
);
eksportētnoklusējuma DemoPage;
Šis kods importē NextSeo komponentu no nākamā SEO pakotnes un izmanto to, lai norādītu lapas nosaukumu, aprakstu un attēlu. Tas arī norāda vietnes nosaukumu un Twitter rokturi.
Palaidiet šo komandu, lai palaistu izstrādes serveri:
npm palaist devAtvērt http://localhost: 3000 savā pārlūkprogrammā, lai skatītu demonstrācijas lapu.
2. metode: pielāgotā faila _document.js izmantošana
Vēl viens veids, kā ieviest Open Graph Protocol programmā Next.js, ir izveidot pielāgotu _document.js failu. Šis fails ļaus jums pašiem norādīt Open Graph tagus un izveidot atkārtoti lietojamu kodu visām lapām.
Lai iestatītu pielāgotu _document.js failu, izveidojiet jaunu failu savā lapas direktoriju ar šādu saturu:
imports Dokuments, { Html, Head, Main, NextScript } no 'Nākamais/dokumentu';klasēMansDokumentspagarinaDokuments{
statisksasinhronā getInitialProps (ctx) {
konst SākotnējaisProps = gaidīt Document.getInitialProps (ctx);
atgriezties { ...initialProps };
}render() {
atgriezties (
<HTML>
<Galva>
<meta īpašums="og: url" saturs="https://www.example.com" />
<meta īpašums="og: virsraksts" saturs="Atveriet diagrammas nosaukumu" />
<meta īpašums="og: apraksts" saturs="Atveriet diagrammas aprakstu" />
<meta īpašums="og: attēls" saturs="https://www.example.com/og-image.jpg" />
<meta īpašums="og: vietnes_nosaukums" saturs="YourSiteName" />
<meta nosaukums ="twitter: karte" saturs="summary_large_image" />
<meta nosaukums ="twitter: vietne" saturs="@vietne" />
<meta nosaukums ="twitter: veidotājs" saturs="@rokturis" />
</Head>
<ķermenis>
<Galvenā />
<NextScript />
</body>
</Html>
);
}
}
eksportētnoklusējuma MyDocument;
Pievienojiet savam index.js failam tālāk norādīto saturu.
konst DemoLapa = () => (
<>
<lpp>Demo lapa</lpp>
</>
);
eksportētnoklusējuma DemoPage;
Šis kods importē komponentu Dokuments no nākamā/dokumenta un izveido pielāgotu MansDokuments komponents. Tajā ir norādīts mūsu lapas nosaukums, apraksts un attēls, kā arī vietnes nosaukums un Twitter rokturis.
Palaidiet šo komandu, lai palaistu izstrādes serveri:
npm palaist devAtvērt http://localhost: 3000 savā pārlūkprogrammā, lai skatītu demonstrācijas lapu.
Atvērtās diagrammas tagu pievienošana savai vietnei var sniegt jums lielāku kontroli pār to, kā tas parādās sociālo mediju ziņās, un var palīdzēt uzlabot vidējo klikšķu skaitu. Varat arī uzlabot veidu, kā jūsu vietne tiek rādīta SERP, kas galu galā var uzlabot vietnes rangu.
Ir arī daudzi citi veidi, kā uzlabot vietnes rangu. Jums vajadzētu optimizēt savu vietni mobilajām ierīcēm un izmantot atslēgvārdiem bagātus nosaukumus un aprakstus. Taču Open Graph tagu izmantošana ir ātrs un vienkāršs veids, kā sākt.
