Beste fremgangsmåter for Nuxt.js SEO

Et av de største salgsstedene til Nuxt.js er at det kan hjelpe søknaden din med Search Engine Optimization (SEO) og å rangere bedre på Google. I denne artikkelen skal vi gå gjennom den beste fremgangsmåten for å sikre at Nuxt-applikasjonen din er riktig konfigurert for å rangere på søkemotorer.

Ansvarsfraskrivelse: Denne artikkelen er ikke en SEO-guide eller en guide for hvordan du kan rangere godt på Google. Det er en teknisk artikkel om hvordan du best konfigurerer metatagger og viderekoblinger i Nuxt-applikasjonen din, som hjelper med SEO.

Hvordan Nuxt.js hjelper deg med SEO

La oss raskt undersøke hva Nuxt er, og hvordan det kan hjelpe deg å sette sammen applikasjonen din for SEO-formål før vi dykker inn.

Enkeltsidig applikasjoner er ikke konfigurert for SEO

Vanligvis med Vue.js oppretter du en applikasjon på én side. Det er et rent JavaScript-generert program der det bare er én fil, en tom indeks.html. Innholdet fylles inn i index.html etter at JavaScript først har lastet inn, og JavaScript sørger også for å bytte ruter.

SPA-er er utmerket for å lage smarte brukergrensesnitt, men når det gjelder SEO er applikasjoner på én side ikke ideelle fordi de ikke har noe innhold. Det gjør det vanskelig for Google og andre gjennomsøkere (inkludert crawlers i sosiale medier som Facebook) å gjennomsøke nettstedet ditt og vise det ordentlig i søkeresultatene.

Nuxt.js gjør det enkelt å lage en universell applikasjon

En universell applikasjon handler om å forhåndslaste applikasjonen din på en webserver og sende gjengitt HTML som svar på nettleseren for hver rute i appen din for å forbedre SEO, få lasting til å skje raskere, sammen med mange andre fordeler.

Med en universell applikasjon vil det være innhold på siden som -koder og <meta> -koder i <head> og <h1> -kodene i <body> før noe JavaScript har lastet inn. Disse kodene hjelper gjennomsøkere med å finne ut hva som er på siden.</p><h3>Hvordan Nuxt.js håndterer hodet for alle sidene dine</h3><p>Nuxt bruker et bibliotek som heter vue-meta for å håndtere <head> -elementet på hver av sidene dine. En side er bare Nuxt sitt begrep for en rute, og hver og en bor inne i en sidemappe.</p><p>Nuxt gir deg tre måter å konfigurere <head> -elementet på applikasjonens sider. La oss se på dem nå.</p><h3>1) Sette opp standard metakoder for alle sider</h3><p>Det er ikke uvanlig at forskjellige sider i hele applikasjonen din deler noen av de samme metakodene. Med Nuxt kan du konfigurere standardverdiene for hver av sidene dine ved å sette opp hovedegenskapen i nuxt.config.jsfile.</p><pre>module.exports = {   hode: {     titleTemplate: '% s - Nuxt.js',     meta: [// Hvert objekt i denne matrisen er sin egen metakode       {charset: 'utf-8'},       {navn: 'visningsport', innhold: 'bredde = enhetsbredde, initial skala = 1'},       {skjult: 'beskrivelse', navn: 'beskrivelse', innhold: 'Metabeskrivelse'}     ]   } };</pre><p>Klikk her for å se alle egenskapene du kan definere inne i hodeegenskapen.</p><p>Merk: Nuxt.js bruker hode for navnet på eiendommen. vue-meta bruker metaInfo. Det er den samme egenskapen.</p><h3>2) Sette opp metatagger for sidene dine individuelt</h3><p>Inne på hver av Nuxt-sidene dine kan du definere en hodemetode. Du kan tilpasse head taggene manuelt for en individuell side, og Nuxt vil overskrive hva du angir som standard i nuxt.config.jsfile.</p><p>Her er et eksempel About.vue-fil med egne metakoder i hodemetoden:</p><pre><Mal>   <h1> Om side </h1> </ Mal></pre><pre><Script> eksport standard {   hode () {     komme tilbake {       tittel: 'Om oss - Nuxt.js',       meta: [         {skjult: 'beskrivelse', navn: 'beskrivelse', innhold: 'Om selskapet Nuxt.js'}       ]     }   } } </ Script></pre><h3>3) Sette opp metakoder for dynamiske sider</h3><p>Du kan tilpasse metakodene ytterligere med dynamiske sider - sider der det er en rute som kan gjengis annerledes. En brukerprofilside kan være ett eksempel.</p><p>Dynamiske ruter defineres ved å prefikse .vue-komponenten eller katalogen i sidemappen med en understrekning.</p><pre>sider / - | brukere / ----- | _username.vue</pre><p>Dette genererer Vue.js-rutekoden slik:</p><pre>ruter: {   ruter: [{     navn: 'brukere-id',     sti: '/ brukere /: brukernavn?',     komponent: 'sider / brukere / _username.vue'   }] }</pre><p>Og på innsiden av hodemetoden, ville du ha tilgang til komponentdataene dine med denne. Du kan bruke dataene du har tilgang til på innsiden av denne egenskapen, til å tilpasse hvordan metakodene blir gjengitt med dataene til komponenten din.</p><p>Her er et eksempel på hvordan metakodene for den brukerprofilsiden kan gjengis:</p><pre><Script>   hode () {     la bruker = this.user;          komme tilbake {       tittel: `$ {user.fullName} @ ($ {user.userName}) - Nuxt.js`,       meta: [{         gjemte seg: `iOSUrl`,         eiendom: 'al: ios: url',         innhold: `myapp: // bruker? skjermnavn = $ {bruker.brukernavn}`       }       {         gjemte seg: `beskrivelse`,         navn: 'beskrivelse',         innhold: `$ {user.fullName} sin offentlige profil på Nuxt.js`       }]     }   } </ Script></pre><h3>Hva er skjult og hvordan hjelper det SEO?</h3><p>Du har kanskje lagt merke til den skjulte egenskapen i metatageksemplene ovenfra. Det er en egenskap som brukes til å redusere standard vue-metatferd.</p><p>Ved bruk av vue-meta vil det som standard opprette duplikatkoder i stedet for å erstatte den originale koden. Men Google kan straffe deg for å ha dupliserte koder når den gjennomsøker nettstedet ditt, så det er best å alltid ha en unik skjult egenskap på hver av metakodene dine for å identifisere dem på en unik måte. Å ha den skjulte egenskapen vil signalisere til vue-meta for å erstatte taggen i stedet for å duplisere den.</p><p>Klikk her for å lære mer om dupliserte metakoder og hvordan skjult kan hjelpe deg med å unngå dem.</p><h3>Håndtering av viderekoblinger med Nuxt.js</h3><p>I følge HubSpot er en 301-viderekobling en permanent viderekobling fra en URL til en annen. 301 viderekoblinger sender besøkende og søkemotorer til en annen URL enn den de opprinnelig skrev inn i nettleseren eller valgte fra en resultatside for søkemotoren.</p><p>301 viderekoblinger er vanlig å bruke når strukturen på nettstedet ditt endres og du fortsatt ønsker å opprettholde rangeringskraften til den opprinnelige lenken.</p><p>Nuxt hjelper deg med denne saken ved å konfigurere deg med en serverMiddleware-egenskap inne i nuxt.config.js-filen. ServerMiddleware-egenskapen hjelper deg med å sette opp mellomvare som skal kjøres når siden er gjengitt på serversiden.</p><p>Her er et eksempel på å bruke denne egenskapen til å sette opp en funksjon som håndterer 301 viderekoblinger for applikasjonen din.</p><pre>module.exports = {   serverMiddleware: [     '~ / servermiddleware / seo.js'   ] };</pre><p>Du kan definere rutene som må omdirigeres inne i filen som heter /301.json og importere den til seo.js mellomvare.</p><pre>[   {"fra": "/ gammel", "til": "/ ny"},   {"fra": "/ veldig gull", "til": "/ verynew"},   {"fra": "/ for gammel", "til": "/ ny"} ]</pre><p>Deretter kan du la filen kjøres gjennom rutene som du definerte i 301.json, og la den returnere et 301-svar for hver enkelt, sammen med de aktuelle HTTP-headere.</p><pre>const omdirigeringer = krever ('../ 301.json');</pre><pre>module.exports = funksjon (spørsmål, res, neste) {      const omdirigere = omdirigeringer.find (r => r.fra === req.url);</pre><pre>  if (omdirigere) {     console.log (`omdirigering: $ {redirect.from} => $ {redirect.to}`);     res.writeHead (301, {Location: redirect.to});     res.end ();   } annet {     neste ();   }</pre><pre>}</pre><p>Klikk her for å lære mer om Nuxt.js mellomvare og hvordan det kan hjelpe deg med mer enn bare viderekoblinger.</p><h3>SEO-effekter når du gjengir appen din i spa-modus</h3><p>Det er mer enn én byggemodus i Nuxt-apper. Du kan velge å gjengi applikasjonen din som universell eller spa.</p><p>Hva er effekten av å administrere alle taggene i <head> hvis du velger å gjengi applikasjonen din i spa-modus?</p><p>Siden gjengivelse på serversiden ikke finner sted, vil du ikke få noen av fordelene med å ha innhold til å begynne med på siden din. vue-meta gjør fremdeles jobben sin med å håndtere <head>, men hvis du gjengir applikasjonen din som en enkeltsidesapplikasjon, er det ikke noe innhold på siden til å begynne med fordi alle kodene vil bli opprettet etter at JavaScript er lastet inn. De eneste effektene er rent frontend. For eksempel å oppdatere tittelkoden når brukeren har endret visninger.</p><h3>Konklusjon</h3><p>Nuxt gir deg mye kontroll over hvordan du gjengir <head> -elementet i den universelle applikasjonen, som hjelper med SEO. Du har mange alternativer for å angi globale standardinnstillinger i filen nuxt.config.js, og du har også tilgang til en hodemetode på hver enkelt side der du kan tilpasse ting ytterligere. Til slutt kan du sette opp en serverMiddleware som kan ta seg av ting som 301 viderekoblinger for å opprettholde en lenkes rangeringskraft.</p><p>VueMastery.com skal lage innhold på Nuxt-applikasjoner de neste månedene, opprette en gratis konto i dag og bli varslet når den blir utgitt.</p><h3>Fortsett å lese</h3><ul><li>10 grunner til å bruke Nuxt.js</li><li>VuePress vs. Nuxt.js</li><li>Hvordan lage Vue.js-overganger</li></ul></div><div class="neighbor-articles"><h4 class="ui header">Se også</h4><a href="/deal/why-writer-s-block-is-one-of-your-best-creative-tools-8f3011/" title="Hvorfor forfatterblokk er et av de beste kreative verktøyene dine">Hvorfor forfatterblokk er et av de beste kreative verktøyene dine</a><a href="/deal/what-do-the-best-interviewers-have-in-common-62f66d/" title="Hva har de beste intervjuerne til felles?">Hva har de beste intervjuerne til felles?</a><a href="/deal/my-best-38-freelancing-tips-from-the-writers-on-medium-64f145/" title="Mine 38 beste frilansetips fra forfattere på medium">Mine 38 beste frilansetips fra forfattere på medium</a><a href="/deal/9-lies-you-tell-yourself-that-are-preventing-you-from-being-the-best-you-can-be-05f3a9/" title="9 Løgner du forteller deg selv som hindrer deg i å være den beste du kan være">9 Løgner du forteller deg selv som hindrer deg i å være den beste du kan være</a><a href="/deal/why-aging-is-the-best-birthday-present-9ebe56/" title="Hvorfor aldring er den beste bursdagsgaven">Hvorfor aldring er den beste bursdagsgaven</a></div></main><div class="push"></div></div><footer style="height:50px">finleyandoliver.com<!-- --> © <!-- -->2019<!-- --> <a href="https://uz.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd" title="https://finleyandoliver.com">finleyandoliver.com</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>