A Nuxt.js SEO bevált gyakorlata

A Nuxt.js egyik legnagyobb értékesítési pontja az, hogy elősegítheti az alkalmazásának a Keresőoptimalizálást (SEO) és jobb rangsorolását a Google-on. Ebben a cikkben megvizsgáljuk a bevált gyakorlatokat annak ellenőrzése érdekében, hogy a Nuxt alkalmazás megfelelően van-e beállítva a keresőmotorok rangsorolására.

Jogi nyilatkozat: Ez a cikk nem SEO útmutató, vagy útmutató arról, hogyan kell a Google-t jól rangsorolni. Ez egy technikai cikk arról, hogyan lehet a legjobban beállítani a metacímkéket és az átirányításokat a Nuxt alkalmazásban, amely segíti a SEO-t.

Hogyan segít a Nuxt.js a SEO-ban

Mielőtt belemerülnénk, nézzük át gyorsan, mi a Nuxt, és hogyan segíthet Önnek összeállítani alkalmazását SEO célokra.

Az egyoldalas alkalmazások nem vannak beállítva a SEO-hoz

Általában a Vue.js használatával egyoldalas alkalmazást készít. Ez egy tisztán JavaScript által generált alkalmazás, ahol csak egy fájl van, egy üres index.html fájl. A tartalom az index.html fájlba töltődik, miután a JavaScript kezdetben betöltődött, és a JavaScript is gondoskodik az útvonalak váltásáról.

A SPA-k nagyszerűek szellemes felhasználói felületek létrehozásához, de amikor a SEO-ra vonatkoznak, az egyoldalas alkalmazások nem ideálisak, mivel nem tartalmaznak kezdeti tartalmat. Ez megnehezíti a Google és más bejárók (beleértve a közösségi média bejáróit, például a Facebook) feltérképezését az Ön webhelyén, és megfelelő megjelenítését a keresési eredmények között.

A Nuxt.js megkönnyíti az univerzális alkalmazás létrehozását

Az univerzális alkalmazás célja az alkalmazás előzetes feltöltése egy webszerverre, és a megjelenített HTML küldése válaszként a böngészőre az alkalmazás minden útján, hogy javítsa a SEO-t, gyorsabbá tegye a betöltést, és számos egyéb előnnyel járjon.

Egy univerzális alkalmazás esetén az oldalon olyan tartalom lesz, mint címkék és címkék a és

címkékben a előtt, mielőtt a JavaScript betöltődik. Ezek a címkék segítenek a bejáróknak meghatározni, mi az az oldalon.

Hogyan kezeli a Nuxt.js az összes oldalt

A Nuxt a vue-meta nevű könyvtárat használja az egyes oldalak elemének kezelésére. Egy oldal csak a Nuxt kifejezése egy útvonalnak, és mindegyik egy oldalmappában él.

A Nuxt három lehetőséget kínál a elem beállítására az alkalmazás oldalain. Nézzük át őket most.

1) Alapértelmezett metacímkék beállítása az összes oldalhoz

Nem ritka, ha az alkalmazás különböző oldalain ugyanazok a metacímkék osztoznak. A Nuxt lehetővé teszi az egyes oldalak alapértelmezésének beállítását azáltal, hogy a fej tulajdonságát a nuxt.config.jsfile fájlban állítja be.

module.exports = {
  fej: {
    titleTemplate: '% s - Nuxt.js',
    meta: [// A tömb minden objektuma a saját metacímkéje
      {karakterkészlet: 'utf-8'},
      {név: 'nézetablak', tartalom: 'szélesség = eszközszélesség, kezdeti skála = 1'},
      {rejtett: 'leírás', név: 'leírás', tartalom: 'meta leírás'}
    ]
  }
};

Kattintson ide az összes olyan tulajdonság megtekintéséhez, amelyeket a fej tulajdonságán belül meghatározhat.

Megjegyzés: A Nuxt.js fejlécpel használja az ingatlan nevét. A vue-meta a metaInfo-t használja. Ugyanaz a tulajdonság.

2) Megacímkék beállítása az oldalakhoz külön-külön

Az egyes Nuxt oldalakon meghatározhat egy fej módszerét. Kézzel testreszabhatja az egyes oldalak fejcímkéit, és a Nuxt felülírja a nuxt.config.jsfile alapértelmezés szerint beállított értékeit.

Íme egy példa a About.vue fájlról, amelynek saját metacímkéi vannak a head módszerben: