Bedste fremgangsmåder til Nuxt.js SEO

Et af de største sælgende punkter hos Nuxt.js er, at det kan hjælpe din applikation med Search Engine Optimization (SEO) og til at rangere bedre på Google. I denne artikel skal vi gennemgå de bedste fremgangsmåder for at sikre dig, at din Nuxt-applikation er konfigureret korrekt til rangering på søgemaskiner.

Ansvarsfraskrivelse: Denne artikel er ikke en SEO-guide eller en guide til, hvordan du rangerer godt på Google. Det er en teknisk artikel om, hvordan du bedst konfigurerer metatags og omdirigeringer i din Nuxt-applikation, som hjælper med SEO.

Hvordan Nuxt.js hjælper dig med SEO

Før vi dykker ind, lad os hurtigt gå over, hvad Nuxt er, og hvordan det kan hjælpe dig med at sammensætte din ansøgning til SEO-formål.

Applikationer til en enkelt side er ikke konfigureret til SEO

Normalt med Vue.js opretter du en applikation på én side. Det er et rent JavaScript-genereret program, hvor der kun er én fil, et tomt indeks.html. Indholdet udfyldes i index.html, når JavaScript oprindeligt er indlæst, og JavaScript sørger også for at skifte ruter.

SPA'er er gode til at oprette snacks UI'er, men når det kommer til SEO er applikationer på en side ikke ideelle, fordi de ikke har noget oprindeligt indhold. Det gør det vanskeligt for Google og andre webcrawlere (inklusive crawlere på sociale medier som Facebook) at gennemsøge dit websted og vise det korrekt i søgeresultaterne.

Nuxt.js gør det nemt at oprette en universel applikation

En universel applikation handler om at indlæse din ansøgning på en webserver og sende gengivet HTML som svar på browseren for hver rute i din app for at forbedre SEO, så indlæsningen sker hurtigere sammen med mange andre fordele.

Med en universel applikation vil der være indhold på siden som tags og <meta> tags i <head> og <h1> tags i <body>, inden JavaScript er indlæst. Disse tags hjælper crawlere med at bestemme, hvad der er på siden.</p><h3>Hvordan Nuxt.js håndterer hovedet på alle dine sider</h3><p>Nuxt bruger et bibliotek kaldet vue-meta til at håndtere <head> -elementet på hver af dine sider. En side er bare Nuxt's udtryk for en rute, og hver enkelt lever inden i en sidemappe.</p><p>Nuxt giver dig tre måder at konfigurere <head> -elementet på din applikations sider. Lad os gennemgå dem nu.</p><h3>1) Opsætning af standard metatags for alle sider</h3><p>Det er ikke ualmindeligt, at forskellige sider i hele din applikation deler nogle af de samme metakoder. Nuxt giver dig mulighed for at konfigurere standardindstillingerne for hver af dine sider ved at konfigurere hovedegenskaben i nuxt.config.jsfile.</p><pre>module.exports = {   hoved: {     titleTemplate: '% s - Nuxt.js',     meta: [// Hvert objekt i denne matrix er sit eget metatag       {charset: 'utf-8'},       {navn: 'visning', indhold: 'bredde = enhedsbredde, indledende skala = 1'},       {skjult: 'beskrivelse', navn: 'beskrivelse', indhold: 'Meta beskrivelse'}     ]   } };</pre><p>Klik her for at se alle de egenskaber, du kan definere inde i hovedegenskaben.</p><p>Bemærk: Nuxt.js bruger hoved til ejendommens navn. vue-meta bruger metaInfo. Det er den samme egenskab.</p><h3>2) Opsætning af metatags til dine sider individuelt</h3><p>Inde i hver af dine Nuxt-sider kan du definere en hovedmetode. Du kan manuelt tilpasse head tags for en individuel side, og Nuxt overskriver det, du har angivet som standard i nuxt.config.jsfile.</p><p>Her er et eksempel About.vue-fil med sine egne metatags i hovedmetoden:</p><pre><Skabelon>   <h1> Om side </h1> </ Skabelon></pre><pre></ins><div class="neighbor-articles"><h4 class="ui header">Se også</h4><a href="/deal/deep-learning-best-practices-1-weight-initialization-41da0b/" title="Deep Learning bedste praksis (1) - Initialisering af vægt">Deep Learning bedste praksis (1) - Initialisering af vægt</a><a href="/deal/why-meeting-gary-vee-was-the-best-thing-to-happen-to-me-df28eb/" title="Hvorfor at møde Gary Vee var det bedste, der skete for mig">Hvorfor at møde Gary Vee var det bedste, der skete for mig</a><a href="/deal/7-of-the-best-knowledge-podcasts-578a3b/" title="7 af de bedste viden-podcasts">7 af de bedste viden-podcasts</a><a href="/deal/best-10-programming-languages-to-learn-in-2018-a40d34/" title="Bedste 10 programmeringssprog at lære i 2018">Bedste 10 programmeringssprog at lære i 2018</a><a href="/deal/50-best-resources-when-learning-to-code-e2db7f/" title="50 bedste ressourcer, når du lærer at kode">50 bedste ressourcer, når du lærer at kode</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="vn flag"></i></a><a href="https://uk.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ua flag"></i></a><a href="https://tr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="tr flag"></i></a><a href="https://th.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="th flag"></i></a><a href="https://sv.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ch flag"></i></a><a href="https://sr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="rs flag"></i></a><a href="https://sl.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="si flag"></i></a><a href="https://sk.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="sk flag"></i></a><a href="https://ru.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ru flag"></i></a><a href="https://ro.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ro flag"></i></a><a href="https://pt.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="pt flag"></i></a><a href="https://pl.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="pl flag"></i></a><a href="https://de.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="de flag"></i></a><a href="https://ar.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="sa flag"></i></a><a href="https://bg.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="bg flag"></i></a><a href="https://cs.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="cz flag"></i></a><a href="https://el.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="gr flag"></i></a><a href="https://es.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="es flag"></i></a><a href="https://et.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="ee flag"></i></a><a href="https://fi.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="fi flag"></i></a><a href="https://fr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="fr flag"></i></a><a href="https://hi.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="in flag"></i></a><a href="https://hr.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="hr flag"></i></a><a href="https://hu.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="hu flag"></i></a><a href="https://id.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="id flag"></i></a><a href="https://it.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="it flag"></i></a><a href="https://ja.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="jp flag"></i></a><a href="https://ko.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="kr flag"></i></a><a href="https://lt.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="lt flag"></i></a><a href="https://lv.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="lv flag"></i></a><a href="https://ms.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="my flag"></i></a><a href="https://finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="nl flag"></i></a><a href="https://no.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="no flag"></i></a><a href="https://uz.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd/"><i class="uz flag"></i></a></div>finleyandoliver.com<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>