Quasar SEO tips

danbars

Here are some tips on how to improve SEO when using quasar to build a web site. The following were steps that I used to improve seo of https://charttt.com and are the result of some trial and error.

Use history router mode. The default hash mode is bad for SEO as it is considered internal links on the same page. To config that, in quasar.conf.js file set the following
```
build: {
   vueRouterMode: 'history'
}
```

Make sure you have sitemap.xml, and submit it to Google via search console. To generate sitemap at build time, I used sitemap-webpack-plugin.

Run npm install --save-dev sitemap-webpack-plugin

In quasar.conf.js add the following:

// this is at the top of the file
const SitemapPlugin = require('sitemap-webpack-plugin').default
const paths = [
  { path: '/' },
  { path: '/pricing' }
  // add all pages here
]
// down on the "build" section
build: {
  extendWebpack (cfg) {
    cfg.plugins.push(
      new SitemapPlugin('https://charttt.com', paths, {
        filename: 'sitemap.xml',
        // the following are the defaults for all paths. You can set them separately per path in the paths array
        lastmod: true,
        changefreq: 'weekly',
        priority: '0.8'
      })
  }
}

That’s it. Now you’ll have https://mysite.com/sitemap.xml that you can submit to Google

Make sure you have all the metatags on each page.

Start by generating all the tags that you need in https://metatags.io/ for the home page.
The Tags that are static for all pages of the site, you can place in index.template.html in the head section
For all other tags, I used quasar meta plugin that allows setting meta tags from within a component. To enable it edit quasar.conf.js file, and add the plugin:
```
plugins: [
  'Meta'
]
```

Some tags have the same value. For example title, og:title and twitter:title are likely to have the same value. Same goes for description, og:description, twitter:description. And rel='canonical', og:url, twitter:url. I didn’t want to repeat that logic inside any component that has to override these value, so this is what I did:

I’ve created src/utils/meta.js file that encapsulates the above logic. This is the file:

export default function meta () {
  const metaObj = { meta: {} }
  if (!this.metaTags) {
    return metaObj
  }
  if (this.metaTags.title) {
    console.log('adding title')
    metaObj.title = this.metaTags.title
    metaObj.meta.ogTitle = { name: 'og:title', content: this.metaTags.title }
    metaObj.meta.twitterTitle = { name: 'twitter:title', content: this.metaTags.title }
  }
  if (this.metaTags.description) {
    console.log('adding desc')
    metaObj.meta.description = { name: 'description', content: this.metaTags.description }
    metaObj.meta.ogDescription = { name: 'og:description', content: this.metaTags.description }
    metaObj.meta.twitterDescription = { name: 'twitter:description', content: this.metaTags.description }
  }
  if (this.metaTags.url) {
    console.log('adding url')
    metaObj.meta.ogUrl = { name: 'og:url', content: this.metaTags.url }
    metaObj.meta.twitterUrl = { name: 'twitter:url', content: this.metaTags.url }
    metaObj.meta.canonical = { rel: 'canonical', href: this.metaTags.url }
  }
  if (this.metaTags.image) {
    console.log('adding image')
    metaObj.meta.ogImage = { name: 'og:image', content: this.metaTags.image }
    metaObj.meta.twitterImage = { name: 'twitter:image', content: this.metaTags.image }
  }
  return metaObj
}

In each component that wants to override the tags (you should add it at the main layout.vue too with the “root” values):

<script>
  import meta from '../utils/meta.js'
  export default {
    data () {
      return {
        metaTags: {
          description: 'description...',
          title: 'My page | My site',
          url: 'canonical url',
          image: 'absolute url to share image'
        }
      }
    },
    meta //this is the method that the plugin is using
  }
</script>

If you have more tips, please do share them.
I hope this helps someone
Cheers

qyloxe

@danbars Thanks for detailed writeup - upvoted! As of “why” in the topic of SEO tips, I remember this post - hope it helps - here:

https://forum.quasar-framework.org/topic/923/how-to-manage-seo-when-prerendering-with-quasar/10

Seanitzel

Thank you, great tips

PeterQF

@danbars looks interesting,

// add all pages here

just not able to add like 1000 products manually here. Any tip on dynamically create these links?

Nusry

@danbars with your information I wrote an article on the blog with additional information. This includes adding meta tags, sitemap, and robots.txt file. You can view the article from the below link

https://nsrtechx.com/how-to-seo-vue-js-site/

altered

heya fellas,

i am making one website using QUASAR and currently doing SEO for the site,
i am referring the following forum,

https://forum.quasar-framework.org/topic/6265/quasar-seo-tips

i have made meta.js file in utils and now i am getting the metadata in my page.

but something is new in it, if anybody knows please inform me, and also tell me if it will affect my SEO or not ?

following is something which i am getting, in my page source

so what is that data-qmeta=“description” inside the meta tag.

thanks for response.

No More Posting New Topics!

Quasar SEO tips