Best Practices voor Nuxt.js SEO

Een van de grootste verkoopargumenten van Nuxt.js is dat het uw toepassing kan helpen met Search Engine Optimization (SEO) en beter kan scoren op Google. In dit artikel bespreken we de best practices om ervoor te zorgen dat uw Nuxt-applicatie correct is ingesteld om op zoekmachines te worden gerangschikt.

Disclaimer: dit artikel is geen SEO-gids of een gids over hoe u goed kunt scoren op Google. Het is een technisch artikel over hoe u metatags en omleidingen het beste kunt instellen in uw Nuxt-applicatie, wat helpt bij SEO.

Hoe Nuxt.js u helpt met SEO

Voordat we erin duiken, laten we snel ingaan op wat Nuxt is en hoe het u kan helpen uw applicatie samen te stellen voor SEO-doeleinden.

Toepassingen met één pagina zijn niet ingesteld voor SEO

Gewoonlijk maakt u met Vue.js een applicatie met één pagina. Dat is een puur JavaScript-gegenereerde applicatie waar er slechts één bestand is, een lege index.html. De inhoud wordt ingevuld in index.html nadat JavaScript in eerste instantie is geladen en JavaScript zorgt ook voor het wisselen van route.

SPA's zijn geweldig voor het maken van pittige UI's, maar als het gaat om SEO, zijn toepassingen met één pagina niet ideaal omdat ze geen initiële inhoud hebben. Dat maakt het moeilijk voor Google en andere crawlers (inclusief sociale media-crawlers zoals Facebook) om uw website te crawlen en correct weer te geven in de zoekresultaten.

Nuxt.js maakt het eenvoudig om een ​​universele applicatie te maken

Een universele applicatie gaat over het vooraf laden van uw applicatie op een webserver en het verzenden van gerenderde HTML als reactie op de browser voor elke route in uw app om SEO te verbeteren, het laden sneller te laten verlopen, samen met vele andere voordelen.

Met een universele toepassing zal er inhoud op de pagina zijn zoals -tags en <meta> -tags in de <head> en <h1> -tags in de <body> voordat JavaScript is geladen. Die tags helpen crawlers om te bepalen wat er op de pagina staat.</p><h3>Hoe Nuxt.js omgaat met al uw pagina's</h3><p>Nuxt gebruikt een bibliotheek genaamd vue-meta om het element <head> op elk van uw pagina's te verwerken. Een pagina is slechts de term van Nuxt voor een route en elke pagina bevindt zich in een map met pagina's.</p><p>Nuxt biedt u drie manieren om het element <head> op de pagina's van uw toepassing in te stellen. Laten we ze nu bekijken.</p><h3>1) Standaard metatags instellen voor alle pagina's</h3><p>Het is niet ongebruikelijk dat verschillende pagina's in uw applicatie enkele van dezelfde metatags delen. Met Nuxt kunt u de standaardwaarden voor elk van uw pagina's instellen door de eigenschap head in te stellen in nuxt.config.jsfile.</p><pre>module.exports = {   hoofd: {     titleTemplate: '% s - Nuxt.js',     meta: [// Elk object in deze array heeft zijn eigen metatag       {charset: 'utf-8'},       {name: 'viewport', inhoud: 'width = device-width, initial scale = 1'},       {hid: 'description', name: 'description', inhoud: 'Meta description'}     ]   } };</pre><p>Klik hier om alle eigenschappen te zien die u kunt definiëren in de eigenschap head.</p><p>Opmerking: Nuxt.js gebruikt head voor de naam van de eigenschap. vue-meta gebruikt metaInfo. Het is dezelfde eigenschap.</p><h3>2) Individuele metatags instellen voor uw pagina's</h3><p>Binnen elk van uw Nuxt-pagina's kunt u een head-methode definiëren. U kunt de hoofdtags voor een individuele pagina handmatig aanpassen en Nuxt overschrijft alles wat u als standaard hebt ingesteld in het nuxt.config.jsfile.</p><p>Hier is een voorbeeld van een About.vue-bestand met eigen metatags in de head-methode:</p><pre><Template>   <h1> Over pagina </h1> </ Template></pre><pre><Script> standaard exporteren {   head () {     terug {       titel: 'Over ons - Nuxt.js',       meta: [         {hid: 'description', name: 'description', inhoud: 'Over ons bedrijf Nuxt.js'}       ]     }   } } </ Script></pre><h3>3) Metatags instellen voor uw dynamische pagina's</h3><p>Je kunt je metatags verder aanpassen met dynamische pagina's - pagina's met een route die anders kan worden weergegeven. Een gebruikersprofielpagina kan een voorbeeld zijn.</p><p>Dynamische routes worden gedefinieerd door uw .vue-component of -map in de map met pagina's vooraf te laten gaan door een onderstrepingsteken.</p><pre>pages / - | gebruikers / ----- | _username.vue</pre><p>Hiermee wordt je Vue.js-routecode als volgt gegenereerd:</p><pre>router: {   routes: [{     naam: 'gebruikers-ID',     pad: '/ gebruikers /: gebruikersnaam?',     component: 'pagina's / gebruikers / _gebruikersnaam.vue'   }] }</pre><p>En binnen de head-methode, zou u hiermee toegang hebben tot uw componentgegevens. U kunt de gegevens waartoe u toegang hebt binnen deze eigenschap gebruiken om aan te passen hoe uw metatags worden weergegeven met de gegevens van uw component.</p><p>Hier is een voorbeeld van hoe de metatags voor die gebruikersprofielpagina kunnen worden weergegeven:</p><pre><Script>   head () {     let user = this.user;          terug {       title: `$ {user.fullName} @ ($ {user.userName}) - Nuxt.js`,       meta: [{         verborg: `iOSUrl`,         eigenschap: 'al: ios: url',         content: `myapp: // user? screen_name = $ {user.userName}`       },       {         verborg: `description`,         naam: 'omschrijving',         inhoud: het openbare profiel van `$ $ user.fullName} op Nuxt.js`       }]     }   } </ Script></pre><h3>Wat is verborgen en hoe helpt het SEO?</h3><p>Je hebt misschien de eigenschap hid opgemerkt in de voorbeelden van de metatag hierboven. Dat is een eigenschap die wordt gebruikt om standaard vue-meta-gedrag te verminderen.</p><p>Wanneer vue-meta wordt gebruikt, maakt het standaard dubbele tags in plaats van de originele tag te vervangen. Maar Google kan u straffen voor het hebben van dubbele tags wanneer deze uw website crawlt, dus het is het beste om altijd een unieke verborgen eigenschap op elk van uw metatags te hebben om ze uniek te identificeren. Als je de eigenschap hid hebt, geeft dit aan vue-meta om de tag te vervangen in plaats van deze te dupliceren.</p><p>Klik hier voor meer informatie over gedupliceerde metatags en hoe HID u kan helpen om ze te vermijden.</p><h3>Omleidingen verwerken met Nuxt.js</h3><p>Volgens HubSpot is een 301-omleiding een permanente omleiding van de ene URL naar de andere. 301-omleidingen sturen sitebezoekers en zoekmachines naar een andere URL dan degene die ze oorspronkelijk in hun browser hebben getypt of geselecteerd op een resultatenpagina van een zoekmachine.</p><p>301-omleidingen zijn gebruikelijk wanneer de structuur van uw website verandert en u nog steeds de rangorde van de oorspronkelijke link wilt behouden.</p><p>Nuxt helpt u bij dit geval door u een serverMiddleware-eigenschap in uw nuxt.config.js-bestand te geven. De eigenschap serverMiddleware helpt u bij het instellen van middleware die wordt uitgevoerd wanneer de pagina op de server wordt weergegeven.</p><p>Hier is een voorbeeld van het gebruik van deze eigenschap om een ​​functie in te stellen die 301-omleidingen voor uw toepassing verwerkt.</p><pre>module.exports = {   serverMiddleware: [     '~ / Servermiddleware / seo.js'   ] };</pre><p>U kunt de routes definiëren die moeten worden omgeleid binnen het bestand met de naam /301.json en deze importeren in middleware van seo.js.</p><pre>[   {"from": "/ old", "to": "/ new"},   {"from": "/ veryold", "to": "/ verynew"},   {"from": "/ too-old", "to": "/ new"} ]</pre><p>Vervolgens kunt u het bestand door de routes laten lopen die u in 301.json hebt gedefinieerd en ervoor zorgen dat het een 301-antwoord retourneert voor elke route, samen met de juiste HTTP-headers.</p><pre>const omleidingen = vereisen ('../ 301.json');</pre><pre>module.exports = function (req, res, next) {      const redirect = redirects.find (r => r.from === req.url);</pre><pre>  if (omleiden) {     console.log (`redirect: $ {redirect.from} => $ {redirect.to}`);     res.writeHead (301, {Locatie: redirect.to});     opnieuw verzenden();   } anders {     next ();   }</pre><pre>}</pre><p>Klik hier voor meer informatie over Nuxt.js middleware en hoe het u kan helpen met meer dan alleen omleidingen.</p><h3>SEO-effecten bij het renderen van uw app in spa-modus</h3><p>Er zijn meer dan één build-modus in Nuxt-apps. U kunt ervoor kiezen om uw toepassing weer te geven als universeel of als spa.</p><p>Wat zijn de effecten van het beheer van alle tags in de <kop> als u ervoor kiest om uw toepassing in spa-modus weer te geven?</p><p>Aangezien server-side rendering niet plaatsvindt, profiteert u niet van de voordelen van inhoud die aanvankelijk op uw pagina staat. vue-meta doet nog steeds zijn taak om de <kop> af te handelen, maar als u uw applicatie weergeeft als een enkele pagina-applicatie, staat er aanvankelijk geen inhoud op de pagina omdat alle tags zouden worden gemaakt nadat JavaScript is geladen. De enige effecten zijn puur front-end. Bijvoorbeeld het bijwerken van de titeltag wanneer de gebruiker van weergave is veranderd.</p><h3>Gevolgtrekking</h3><p>Nuxt geeft u veel controle over hoe u het <head> -element in uw universele toepassing weergeeft, wat helpt bij SEO. Je hebt veel opties voor het instellen van algemene standaardwaarden in het bestand nuxt.config.js en je hebt ook toegang tot een head-methode op elke individuele pagina waar je dingen verder kunt aanpassen. Ten slotte kunt u een serverMiddleware instellen die zaken als 301-omleidingen aankan om de rangorde van een link te behouden.</p><p>VueMastery.com zal de komende maanden inhoud maken op Nuxt-applicaties, maak vandaag een gratis account aan en ontvang een melding wanneer het wordt vrijgegeven.</p><h3>Blijf lezen</h3><ul><li>10 redenen om Nuxt.js te gebruiken</li><li>VuePress versus Nuxt.js</li><li>Hoe Vue.js overgangen te maken</li></ul></div><div class="neighbor-articles"><h4 class="ui header">Zie ook</h4><a href="/deal/the-105-best-tools-to-start-your-business-in-2019-b30fe5/" title="De 105 beste tools om uw bedrijf te starten in 2019">De 105 beste tools om uw bedrijf te starten in 2019</a><a href="/deal/2019-reactjs-best-practices-design-patterns-1bcc42/" title="2019 ReactJS Best Practices & Design Patterns">2019 ReactJS Best Practices & Design Patterns</a><a href="/deal/you-don-t-need-a-best-friend-5e4982/" title="Je hebt geen beste vriend nodig">Je hebt geen beste vriend nodig</a><a href="/deal/there-is-no-such-thing-as-the-best-sex-of-your-life-1abcac/" title="Er bestaat niet zoiets als de beste seks van je leven">Er bestaat niet zoiets als de beste seks van je leven</a><a href="/deal/saying-goodbye-to-my-best-friend-dog-184070/" title="Afscheid nemen van mijn beste vriend, hond">Afscheid nemen van mijn beste vriend, hond</a></div></main><div class="push"></div></div><footer style="height:50px">finleyandoliver.com<!-- --> © <!-- -->2019<!-- --> <a href="https://no.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>