Quasar SEO tips



  • 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.

    1. 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'
      }
      
    2. 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.

      1. Run npm install --save-dev sitemap-webpack-plugin
      2. 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'
              })
          }
        }
        
      3. That’s it. Now you’ll have https://mysite.com/sitemap.xml that you can submit to Google
    3. Make sure you have all the metatags on each page.

      1. Start by generating all the tags that you need in https://metatags.io/ for the home page.
      2. The Tags that are static for all pages of the site, you can place in index.template.html in the head section
      3. 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'
        ]
        
      4. 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



  • @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



  • Thank you, great tips 🙂



  • @danbars looks interesting,

    // add all pages here
    

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


Log in to reply