Nuxt.js makes it simple to create a universal application.A universal application is about preloading your application on a web server and sending rendered HTML as the response to the browser for every route in your app in order to improve SEO, make loading happen faster, along many other benefits.

How Nuxt.js helps you with SEO

Nuxt uses a library called vue-meta to handle the <code>&lt;head&gt;</code> element in each of your pages. A page is just Nuxt’s term for a route, and each one lives inside of a pages folder.Nuxt gives you three ways to set up the <code>&lt;head&gt;</code> element within your application’s pages:<ul><li>Setting up default meta tags for all pages.</li><li>Setting up meta tags for your pages individually.</li><li>Setting up meta tags for your dynamic pages.</li></ul>

How Nuxt.js handles the head for all your pages

<img alt="DSR —Derick Sozo Ruiz" src="https://miro.medium.com/max/500/1*Wrd48B6VaNbK7QEdm8ZPww" width="48" height="48">One of the biggest selling points of Nuxt.js is that it can help your application with Search Engine Optimization (SEO) and to rank better on Google. In this article, we’ll go over the best practices to make sure that your Nuxt application is set up properly to rank on search engines.<figure><img alt="" src="https://miro.medium.com/max/500/1*d1Bx58Zdz_8TWjC4dgrAD" width="680" height="421"></figure>Disclaimer: This article is not an SEO guide or a guide on how to rank well on Google. It’s a technical article on how to best set up meta tags and redirects in your Nuxt application, which helps with SEO.<h1 data-selectable-paragraph="">How Nuxt.js helps you with SEO</h1>Before we dive in, let’s quickly go over what Nuxt is and how it can help you put together your application for SEO purposes.<h2 data-selectable-paragraph="">Single Page Applications aren’t set up for SEO</h2>Usually with Vue.js, you’re creating a single page application. That’s a purely JavaScript-generated application where there’s only one file, a blank <code dir="ltr">index.html</code>. The content is populated into <code dir="ltr">index.html</code> after the JavaScript has initially loaded, and JavaScript also takes care of switching routes.SPAs are great for creating snappy UIs, but when it comes to SEO, single page applications are not ideal because they have no initial content. That makes it difficult for Google and other crawlers (including social media crawlers like Facebook) to crawl your website and to display it properly in the search results.<h2 data-selectable-paragraph="">Nuxt.js makes it simple to create a universal application</h2>A universal application is about preloading your application on a web server and sending rendered HTML as the response to the browser for every route in your app in order to improve SEO, make loading happen faster, along with <a rel="noopener follow" href="https://medium.com/vue-mastery/10-reasons-to-use-nuxt-js-for-your-next-web-application-522397c9366b?source=user_profile---------3----------------" dir="ltr">many other benefits</a>.With a universal application, there will be content on the page like <code dir="ltr">&lt;title&gt;</code> tags and <code dir="ltr">&lt;meta&gt;</code> tags in the <code dir="ltr">&lt;head&gt;</code> and <code dir="ltr">&lt;h1&gt;</code> tags in the <code dir="ltr">&lt;body&gt;</code>before any JavaScript has loaded. Those tags help crawlers determine what’s on the page.<h1 data-selectable-paragraph="">How Nuxt.js handles the head for all your pages</h1>Nuxt uses a library called vue-meta to handle the <code dir="ltr">&lt;head&gt;</code> element in each of your pages. A page is just Nuxt’s term for a route, and each one lives inside of a pages folder.Nuxt gives you three ways to set up the <code dir="ltr">&lt;head&gt;</code> element within your application’s pages. Let’s review them now.<h1 data-selectable-paragraph="">1) Setting up default meta tags for all pages</h1>It’s not uncommon for different pages throughout your application to share some of the same meta tags. Nuxt lets you set up the defaults for each of your pages by setting up the <code dir="ltr">head</code> property in the <code dir="ltr">nuxt.config.js</code>file.<PRE>module.exports = { head: { titleTemplate: '%s - Nuxt.js', meta: [ // Each object in this array is its own meta tag { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial scale=1' }, { hid: 'description', name: 'description', content: 'Meta description' } ] } };</PRE><a href="https://github.com/declandewet/vue-meta" rel="noopener" dir="ltr">Click here</a> to see all of the properties that you can define inside of the head property.Note: Nuxt.js uses <code dir="ltr">head</code> for the name of the property. vue-meta uses <code dir="ltr">metaInfo</code>. It’s the same property.<h1 data-selectable-paragraph="">2) Setting up meta tags for your pages individually</h1>Inside of each of your Nuxt pages, you can define a <code dir="ltr">head</code> method. You can manually customize the head tags for an individual page and Nuxt will overwrite whatever you set as the default in the <code dir="ltr">nuxt.config.js</code>file.Here’s an example <code dir="ltr">About.vue</code> file with its own meta tags in the <code dir="ltr">head</code> method:<PRE>&lt;template&gt; &lt;h1&gt;About Page&lt;/h1&gt; &lt;/template&gt;&lt;script&gt; export default { head () { return { title: 'About Us - Nuxt.js', meta: [ { hid: 'description', name: 'description', content: 'About our company Nuxt.js ' } ] } } } &lt;/script&gt;</PRE><h1 data-selectable-paragraph="">3) Setting up meta tags for your dynamic pages</h1>You can further customize your meta tags with dynamic pages — pages where there’s one route that can be rendered differently. A user profile page might be one example.Dynamic routes are defined by prefixing your .vue component or directory in the pages folder with an underscore.<PRE>pages/ --| users/ -----| _username.vue</PRE>This will generate your Vue.js route code like the following:<PRE>router: { routes: [{ name: 'users-id', path: '/users/:username?', component: 'pages/users/_username.vue' }] }</PRE>And inside of the <code dir="ltr">head</code> method, you’d have access to your component data with <code dir="ltr">this</code>. You can use the data you have access to inside of the <code dir="ltr">this</code> property to customize how your meta tags are rendered with the data of your component.Here’s an example of how the meta tags for that user profile page could be rendered:<PRE>&lt;script&gt; head () { let user = this.user; return { title: `${user.fullName} @(${user.userName}) - Nuxt.js`, meta: [{ hid: `iOSUrl`, property: 'al:ios:url', content: `myapp://user?screen_name=${user.userName}` }, { hid: `description`, name: 'description', content: `${user.fullName}'s public profile at Nuxt.js` }] } } &lt;/script&gt;</PRE><h1 data-selectable-paragraph="">What is hid and how does it help SEO?</h1>You might have noticed the <code dir="ltr">hid</code> property in the meta tag examples from above. That’s a property that’s being used to help mitigate default <code dir="ltr">vue-meta</code> behavior.By default, when using <code dir="ltr">vue-meta</code>, it will create duplicate tags instead of replacing the original tag. But Google can penalize you for having duplicate tags when it crawls your website, so it’s best to always have a unique <code dir="ltr">hid</code> property on each of your meta tags to uniquely identify them. Having the <code dir="ltr">hid</code> property will signal to <code dir="ltr">vue-meta</code> to replace the tag instead of duplicating it.<a href="https://nuxtjs.org/faq/duplicated-meta-tags/" rel="noopener" dir="ltr">Click here</a> to learn more about duplicated meta tags and how <code dir="ltr">hid</code> can help you avoid them.<h1 data-selectable-paragraph="">Handling redirects with Nuxt.js</h1>According to <a href="https://blog.hubspot.com/blog/tabid/6307/bid/7430/what-is-a-301-redirect-and-why-should-you-care.aspx" rel="noopener" dir="ltr">HubSpot</a>, a 301 redirect is a permanent redirect from one URL to another. 301 redirects send site visitors and search engines to a different URL than the one they originally typed into their browser or selected from a search-engine results page.301 redirects are common to use when the structure of your website changes and you still want to maintain the ranking power of the original link.Nuxt helps you with this case by setting you up with a <code dir="ltr">serverMiddleware</code> property inside of your <code dir="ltr">nuxt.config.js</code> file. The <code dir="ltr">serverMiddleware</code> property helps you to set up middleware that will run when the page is rendered on the server-side.Here’s an example of using this property to set up a function that handles 301 redirects for your application.<PRE>module.exports = { serverMiddleware: [ '~/servermiddleware/seo.js' ] };</PRE>You can define the routes that need to be redirected inside of the file called <code dir="ltr">/301.json</code> and import it into <code dir="ltr">seo.js</code> middleware.<PRE>[ { "from": "/old", "to": "/new" }, { "from": "/veryold", "to": "/verynew" }, { "from": "/too-old", "to": "/new" } ]</PRE>Then you can have the file run through the routes that you defined in <code dir="ltr">301.json</code> and have it return a 301 response for each one, along with the appropriate HTTP Headers.<PRE>const redirects = require('../301.json');module.exports = function (req, res, next) { const redirect = redirects.find(r =&gt; r.from === req.url); if (redirect) { console.log(`redirect: ${redirect.from} =&gt; ${redirect.to}`); res.writeHead(301, { Location: redirect.to }); res.end(); } else { next(); }}</PRE><a href="https://nuxtjs.org/api/configuration-servermiddleware" rel="noopener" dir="ltr">Click here</a> to learn more about Nuxt.js middleware and how it can help you with more than just redirects.<h1 data-selectable-paragraph="">SEO effects when rendering your app in spa mode</h1>There are <a href="https://nuxtjs.org/api/configuration-mode/" rel="noopener" dir="ltr">more than one build mode</a> in Nuxt apps. You can choose to render your application as <code dir="ltr">universal</code>, or <code dir="ltr">spa</code>.What are the effects of managing all of the tags in the <code dir="ltr">&lt;head&gt;</code> if you choose to render your application in <code dir="ltr">spa</code> mode?Since server-side rendering is not taking place, you won’t get any of the benefits of having content initially on your page. <code dir="ltr">vue-meta</code> still does its job of handling the <code dir="ltr">&lt;head&gt;</code>, but if you’re rendering your application as a single page application, there’s no content on the page initially because all the tags would be created after the JavaScript has loaded. The only effects are purely front-end. For example, updating the title tag when the user has changed views.<h1 data-selectable-paragraph="">Conclusion</h1>Nuxt gives you a lot of control over how you render the <code dir="ltr">&lt;head&gt;</code> element in your universal application, which helps with SEO. You have many options for setting global defaults inside of the <code dir="ltr">nuxt.config.js</code> file and you also have access to a <code dir="ltr">head</code> method in each individual page where you can further customize things. Lastly, you can set up a <code dir="ltr">serverMiddleware</code> that can take care of things like 301 redirects to maintain a link’s ranking power.<a href="http://vuemastery.com/" rel="noopener" dir="ltr">VueMastery.com</a> will be creating content on Nuxt applications in the following months, <a href="http://vuemastery.com/" rel="noopener" dir="ltr">create a free account</a> today and get notified when it’s released.

One of the biggest selling points of Nuxt.js is that it can help your application with Search Engine Optimization (SEO) and to rank better on Google. In this article, we’ll go over the best practices…

marketingandsales

Marketing & Sales

One of the biggest selling points of Nuxt.js is that it can help your application with Search Engine Optimization (SEO) and to rank better on Google. In this article, we’ll go over the best practices to make sure that your Nuxt application is set up properly to rank on search engines.

Disclaimer : This article is not an SEO guide or a guide on how to rank well on Google. It’s a technical article on how to best set up meta tags and redirects in your Nuxt application, which helps with SEO.

Before we dive in, let’s quickly go over what Nuxt is and how it can help you put together your application for SEO purposes.

Single Page Applications aren’t set up for SEO

Usually with Vue.js, you’re creating a single page application . That’s a purely JavaScript-generated application where there’s only one file, a blank <code>index.html </code>. The content is populated into <code>index.html </code>after the JavaScript has initially loaded, and JavaScript also takes care of switching routes.

SPAs are great for creating snappy UIs, but when it comes to SEO, single page applications are not ideal because they have no initial content. That makes it difficult for Google and other crawlers (including social media crawlers like Facebook) to crawl your website and to display it properly in the search results.

Nuxt.js makes it simple to create a universal application

A universal application is about preloading your application on a web server and sending rendered HTML as the response to the browser for every route in your app in order to improve SEO, make loading happen faster, along with <a href="https://medium.com/vue-mastery/10-reasons-to-use-nuxt-js-for-your-next-web-application-522397c9366b?source=user_profile---------3----------------">many other benefits </a>.

With a universal application, there will be content on the page like <code><title> </code>tags and <code><meta> </code>tags in the <code><head> </code>and <code><h1> </code>tags in the <code><body> </code>before any JavaScript has loaded. Those tags help crawlers determine what’s on the page.

Nuxt uses a library called vue-meta to handle the <code><head> </code>element in each of your pages. A page is just Nuxt’s term for a route, and each one lives inside of a pages folder.

Nuxt gives you three ways to set up the <code><head> </code>element within your application’s pages. Let’s review them now.

1) Setting up default meta tags for all pages

It’s not uncommon for different pages throughout your application to share some of the same meta tags. Nuxt lets you set up the defaults for each of your pages by setting up the <code>head </code>property in the <code>nuxt.config.js </code>file.

<a href="https://github.com/declandewet/vue-meta">Click here </a>to see all of the properties that you can define inside of the head property.

Note: Nuxt.js uses <code>head </code>for the name of the property. vue-meta uses <code>metaInfo </code>. It’s the same property.

2) Setting up meta tags for your pages individually

Inside of each of your Nuxt pages, you can define a <code>head </code>method . You can manually customize the head tags for an individual page and Nuxt will overwrite whatever you set as the default in the <code>nuxt.config.js </code>file.

Here’s an example <code>About.vue </code>file with its own meta tags in the <code>head </code>method:

3) Setting up meta tags for your dynamic pages

You can further customize your meta tags with dynamic pages — pages where there’s one route that can be rendered differently. A user profile page might be one example.

Dynamic routes are defined by prefixing your .vue component or directory in the pages folder with an underscore.

This will generate your Vue.js route code like the following:

And inside of the <code>head </code>method, you’d have access to your component data with <code>this </code>. You can use the data you have access to inside of the <code>this </code>property to customize how your meta tags are rendered with the data of your component.

Here’s an example of how the meta tags for that user profile page could be rendered:

You might have noticed the <code>hid </code>property in the meta tag examples from above. That’s a property that’s being used to help mitigate default <code>vue-meta </code>behavior.

By default, when using <code>vue-meta </code> , it will create duplicate tags instead of replacing the original tag. But Google can penalize you for having duplicate tags when it crawls your website, so it’s best to always have a unique <code>hid </code> property on each of your meta tags to uniquely identify them. Having the <code>hid </code> property will signal to <code>vue-meta </code> to replace the tag instead of duplicating it.

<a href="https://nuxtjs.org/faq/duplicated-meta-tags/">Click here </a>to learn more about duplicated meta tags and how <code>hid </code>can help you avoid them.

According to <a href="https://blog.hubspot.com/blog/tabid/6307/bid/7430/what-is-a-301-redirect-and-why-should-you-care.aspx">HubSpot </a>, a 301 redirect is a permanent redirect from one URL to another. 301 redirects send site visitors and search engines to a different URL than the one they originally typed into their browser or selected from a search-engine results page.

301 redirects are common to use when the structure of your website changes and you still want to maintain the ranking power of the original link.

Nuxt helps you with this case by setting you up with a <code>serverMiddleware </code>property inside of your <code>nuxt.config.js </code>file. The <code>serverMiddleware </code>property helps you to set up middleware that will run when the page is rendered on the server-side.

Here’s an example of using this property to set up a function that handles 301 redirects for your application.

You can define the routes that need to be redirected inside of the file called <code>/301.json </code>and import it into <code>seo.js </code>middleware.

Then you can have the file run through the routes that you defined in <code>301.json </code>and have it return a 301 response for each one, along with the appropriate HTTP Headers.

<a href="https://nuxtjs.org/api/configuration-servermiddleware">Click here </a>to learn more about Nuxt.js middleware and how it can help you with more than just redirects.

SEO effects when rendering your app in spa mode

There are <a href="https://nuxtjs.org/api/configuration-mode/">more than one build mode </a>in Nuxt apps. You can choose to render your application as <code>universal </code>, or <code>spa </code>.

What are the effects of managing all of the tags in the <code><head> </code>if you choose to render your application in <code>spa </code>mode?

Since server-side rendering is not taking place, you won’t get any of the benefits of having content initially on your page. <code>vue-meta </code>still does its job of handling the <code><head> </code>, but if you’re rendering your application as a single page application, there’s no content on the page initially because all the tags would be created after the JavaScript has loaded. The only effects are purely front-end. For example, updating the title tag when the user has changed views.

Nuxt gives you a lot of control over how you render the <code><head> </code>element in your universal application, which helps with SEO. You have many options for setting global defaults inside of the <code>nuxt.config.js </code>file and you also have access to a <code>head </code>method in each individual page where you can further customize things. Lastly, you can set up a <code>serverMiddleware </code>that can take care of things like 301 redirects to maintain a link’s ranking power.

<a href="http://vuemastery.com/">VueMastery.com </a>will be creating content on Nuxt applications in the following months, <a href="http://vuemastery.com/">create a free account </a>today and get notified when it’s released.

Best Practices for Nuxt.js SEO

How Nuxt.js helps you with SEO

How Nuxt.js handles the head for all your pages

CURATED BY

Related collections

More like this