Sisällönkuvauskentät tarjoavat hyödyllistä lisätietoa verkkosivuistasi. Varmista, että osaat sisällyttää ne, kun käytät Nuxtia.

Nuxt.js on tehokas kehys palvelinpuolella renderöityjen Vue.js-sovellusten rakentamiseen. Sen lisäksi, että Nuxt.js tarjoaa vankan perustan monimutkaisten sovellusten rakentamiselle, se helpottaa myös sisällönkuvauskenttien lisäämistä sivuillesi.

Ota selvää, kuinka voit lisätä sisällönkuvauskenttiä Nuxt-sovellukseesi parantaaksesi sivustosi hakukoneoptimointia ja näkyvyyttä sosiaalisessa mediassa.

Sisällönkuvauskentät ovat koodinpätkiä, jotka tarjoavat tietoa verkkosivusta. Nämä tunnisteet ovat HTML-lähteessä, aivan kuten sivusi sisältö, mutta ne eivät näy itse sivulla.

Sisällönkuvauskentät voivat tarjota tietoja, kuten sivun otsikon, kuvauksen ja avainsanat. Niitä käytetään myös tarjoamaan tietoa sosiaalisen median jakamiseen ja hakukoneoptimointiin.

Luo uusi Nuxt.js-sovellus ennen sisällönkuvauskenttien lisäämistä. Sitä varten varmista, että sinulla on Node.js asennettuna laitteellesi. Avaa sitten terminaali ja suorita seuraava komento:

instagram viewer
npx create-nuxt-app my-app

Tämä luo uuden Nuxt.js-sovelluksen hakemistoon nimeltä minun sovellus. Noudata kehotteita määrittääksesi sovelluksesi tarpeen mukaan.

Yksi tapa lisätä sisällönkuvauskenttiä Nuxt.js-sovellukseesi on lisätä ne maailmanlaajuisesti. Voit tehdä tämän lisäämällä otsikkotunnisteen ja kaksi sisällönkuvauskenttää: yksi merkistöä ja yksi katseluporttia varten. Avaa omasi nuxt.config.js tiedosto ja lisää head-ominaisuus tiedostoon module.exports esine:

moduuli.exports = {
pää: {
otsikko: "Oma sovellus",
meta: [
{ merkkisetti: "utf-8" },
{ nimi: "näkymä", sisältö: 'width=device-width, original-scale=1' }
]
}
}

Sisällönkuvauskenttien lisääminen yksittäisille sivuille

Joskus saatat haluta lisätä sisällönkuvauskenttiä vain tietyille sovelluksesi sivuille. Voit tehdä tämän lisäämällä pää-ominaisuuden sivun komponenttimääritykseen: