Szerette volna már, hogy Next.js webhelye gazdag objektumként jelenjen meg, amikor megosztja a közösségi médiában? Ha igen, akkor végre kell hajtania az Open Graph protokollt.
A next-seo csomag megkönnyíti az Open Graph címkék hozzáadását a Next.js webhelyhez. A kész eredmény finomabb szabályozásához manuálisabb megközelítést is használhat.
Végül érdemes megfontolni, hogy pontosan milyen információkat tartalmazzon a címkék.
Mi az az Open Graph?
Az Open Graph protokoll egy nyílt szabvány, amely lehetővé teszi a fejlesztők számára, hogy szabályozzák, hogyan jelenítse meg tartalmaikat a közösségi média. Eredetileg a Facebook fejlesztette ki, de azóta sok más platform is átvette a protokollt. Ide tartozik a Twitter, a LinkedIn és a Pinterest.
Az Open Graph segítségével pontosan meghatározhatja, hogy más webhelyek hogyan jelenítsék meg az Ön tartalmát, biztosítva, hogy jól nézzen ki és könnyen olvasható legyen. Lehetővé teszi továbbá a linkek megjelenítésének pontosabb szabályozását. Ez megkönnyíti az átkattintások és egyéb elköteleződési mutatók nyomon követését.
Miért érdemes az Open Graph Protocolt használni?
Az Open Graph-nak három fő területet kell javítania: a közösségi média elköteleződését, a SEO-t és a webhely forgalmát.
Az Open Graph elősegítheti a közösségi média elkötelezettségét azáltal, hogy megkönnyíti a felhasználók számára a tartalom megosztását. Ha megadja, hogy a webhelyek hogyan jelenítsék meg a tartalmat, tetszetősebbé és könnyen olvashatóbbá teheti azt. Ez viszont több megosztáshoz és kedveléshez, valamint megnövekedett átkattintási arányhoz vezethet.
2. A SEO javítása
Az Open Graph is segíthet javítja a SEO-t. Az egyes tartalomrészek címének, leírásának és képének megadásával szabályozhatja, hogyan jelenjenek meg a keresési eredmények között. Ez segíthet növelni webhelye átkattintási arányát, valamint javítani az általános helyezést.
3. Növelje a webhely forgalmát
Végül az Open Graph segíthet növelni a webhely forgalmát. Azáltal, hogy megkönnyíti a felhasználók számára a tartalom megosztását, növelheti azoknak a számát, akik látják. Ez viszont több webhelylátogatóhoz és megnövekedett forgalomhoz vezethet.
4. A felhasználói élmény javítása
Az Open Graph protokoll használatának másik előnye, hogy javíthatja a felhasználói élményt webhelyén. A metaadatok hozzáadásával elősegítheti az adatok hozzáférhetőségét és újrafelhasználását, biztosítva, hogy a felhasználók a legrelevánsabb információkat látják. Ez jobb általános élményhez vezethet webhelyén, ami több visszatérő látogatóhoz vezethet.
Miért használja a Next.js-t?
A Next.js használatának két fő oka van: a teljesítmény javítása és a fejlesztés megkönnyítése.
1. Teljesítmény javítása
A Next.js segíthet a teljesítmény javításában az alkalmazás kódfelosztásával és az erőforrások előzetes lekérésével. Ez gyorsabb betöltési időt és csökkentett szerverterhelést eredményezhet.
2. A fejlesztés megkönnyítése
A Next.js a fejlesztést is megkönnyítheti azáltal, hogy egy egyszerű módot biztosít szerver által megjelenített React alkalmazásokat hozhat létre. Ez gyorsabbá és egyszerűbbé teheti a React-alkalmazások fejlesztését és üzembe helyezését.
Az Open Graph Protocol megvalósítása a Next.js-ben
Az Open Graph Protocol megvalósításának két módja van a Next.js-ben: a next-seo csomag használatával vagy egyéni _document.js fájlt.
1. módszer: A next-seo csomag használata
Az Open Graph Protocol megvalósításának legegyszerűbb módja a Next.js programban a next-seo csomag használata. Ez a csomag automatikusan generálja Önnek a szükséges címkéket.
A next-seo csomag telepítéséhez futtassa a következő parancsot:
npm telepítéskövetkező-seo --megmentA csomag telepítése után a következő kód hozzáadásával használhatja index.js fájl:
import { NextSeo } tól től 'next-seo';const DemoPage = () => (
<>
<NextSeo
cím="Az Ön címe"
leírás="Ez egy bemutató leírás"
kanonikus="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
cím: 'Nyissa meg a grafikon címét',
leírás: 'Nyissa meg a Grafikon leírását',
képek: [
{
url: 'https://www.example.com/og-image01.jpg',
szélesség: 800,
magasság: 600,
alt: 'Og Kép Alt',
típus: 'kép/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
szélesség: 900,
magasság: 800,
alt: 'Og Image Alt Second',
típus: 'kép/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
site_name: 'YourSiteName',
}}
twitter={{
fogantyú: '@fogantyú',
webhely: '@webhely',
kártyatípus: 'összefoglaló_nagy_kép',
}}
/>
<p>Demo oldal</p>
</>
);
exportalapértelmezett DemoPage;
Ez a kód importálja a NextSeo összetevőt a next-seo csomagból, és ennek segítségével adja meg az oldal címét, leírását és képét. Megadja a webhely nevét és a Twitter kezelőelemét is.
Futtassa a következő parancsot a fejlesztői kiszolgáló elindításához:
npm futás devNyisd ki http://localhost: 3000 a böngészőben a bemutató oldal megtekintéséhez.
2. módszer: Az egyéni _document.js fájl használata
Az Open Graph Protocol megvalósításának másik módja a Next.js programban az egyéni létrehozás _document.js fájlt. Ez a fájl lehetővé teszi az Open Graph címkék saját maga megadását és hozzon létre újrafelhasználható kódot minden oldalra.
Egy egyéni beállításhoz _document.js fájlt, hozzon létre egy új fájlt oldalakat könyvtár a következő tartalommal:
import Dokumentum, { Html, Head, Main, NextScript } tól től 'következő/dokumentum';osztályMyDocumentkiterjedDokumentum{
statikusasync getInitialProps (ctx) {
const kezdetiProps = várják Document.getInitialProps (ctx);
Visszatérés { ...initialProps };
}Vakol() {
Visszatérés (
<HTML>
<Fej>
<meta tulajdonság="og: url" tartalom="https://www.example.com" />
<meta tulajdonság="og: cím" tartalom="Nyissa meg a grafikon címét" />
<meta tulajdonság="og: leírás" tartalom="Nyissa meg a Grafikon leírását" />
<meta tulajdonság="og: kép" tartalom="https://www.example.com/og-image.jpg" />
<meta tulajdonság="og: site_name" tartalom="YourSiteName" />
<meta név="twitter: kártya" tartalom="összefoglaló_nagy_kép" />
<meta név="twitter: oldal" tartalom="@webhely" />
<meta név="twitter: alkotó" tartalom="@fogantyú" />
</Head>
<test>
<Fő />
<NextScript />
</body>
</Html>
);
}
}
exportalapértelmezett MyDocument;
Adja hozzá az alábbi tartalmat index.js fájljához:
const DemoPage = () => (
<>
<p>Demo oldal</p>
</>
);
exportalapértelmezett DemoPage;
Ez a kód importálja a Dokumentum összetevőt a következő/dokumentumból, és egyénit hoz létre MyDocument összetevő. Meghatározza oldalunk címét, leírását és képét, valamint a webhely nevét és a Twitter kezelőfelületét.
Futtassa a következő parancsot a fejlesztői kiszolgáló elindításához:
npm futás devNyisd ki http://localhost: 3000 a böngészőben a bemutató oldal megtekintéséhez.
Ha Open Graph címkéket ad hozzá webhelyéhez, jobban szabályozhatja, hogyan jelenjen meg a közösségi média bejegyzéseiben, és javíthatja az átkattintási arányt. Azt is javíthatja, ahogyan webhelye megjelenik a SERP-ben, ami végső soron a webhely jobb rangsorolásához vezethet.
Számos más módszer is létezik a webhely rangsorolásának javítására. Optimalizálja webhelyét mobileszközökre, és használjon kulcsszavakban gazdag címeket és leírásokat. Az Open Graph címkék használata azonban gyors és egyszerű módja az indulásnak.
