• About Us
  • Contact Us
  • Privacy Policy
NSR-TECH
No Result
View All Result
  • Login
No Result
View All Result
NSR-TECH
No Result
View All Result
Home Web Development Quasar

how to SEO vue.js site

nsr by nsr
January 10, 2021
in Quasar, Vue, Web Development
0
how to seo vue.js site

how to seo vue.js site

0
SHARES
129
VIEWS
Share on FacebookShare on Twitter

Search engine optimization of Vue.js (Quasar framework) site

Hello guys! In this article I am going to show you how to SEO vue.js (Quasar) site. So this article will guide you to make your Vue.js (Quasar) website for search engine optimization (SEO). I have created this article for Quasar framework users, But if you use pure Vue.js website you might also able to try these things. According to my opinion you might need webpack installed with your project if you developing pure Vue.js project.

When we talking about deeply, the main question for developers is how to SEO vue.js site?. SEO is a main thing which we need to do before of after publishing our site to global web. If your site SEO is not very good, Your site may not be available in search engines such as Google. So in order to make your site visible for search engines, You have to make sure your site is fully optimized for search engines. For single page applications such as Vue.js its little bit harder to SEO rather then other multipage websites and CMS such as WordPress. But by following this article I will assure your site will optimize better for search engines.

READ ALSO

Enable CORS on Lumen API

Quasar multiple file upload with laravel API

Basically, In order to make a site for search engine optimization we need following basic things included in our website as well. Those are,

  • Meta tags
  • Sitemap
  • Robots.txt

Meta Tags

Meta tags and descriptions are mostly important to your site in order to show your URL on the search engines results. Title is used as page URL title on the result and meta description will be used as the page URL description in the results. If you familiar with HTML you might seen or placed this kind of meta tags in every page of your site. But in Vue.js its single page app which include components and templates. So you might unable to add these meta tags on each page on your site. In that case we have to go for an solution which can include meta tags for all your pages. So for the question how to seo vue.js site The following will guide you to add meta tags for your project.

Step – Add utils meta plugin

Add a new folder on src folder call utils

Create meta.js file into src/utils

Copy below code to meta.js

export default function meta () {
  const metaObj = { meta: {} }
  if (!this.metaTags) {
    return metaObj
  }
  if (this.metaTags.title) {
    console.log('title added')
    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('desc added')
    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('url added')
    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('image added')
    metaObj.meta.ogImage = { name: 'og:image', content: this.metaTags.image }
    metaObj.meta.twitterImage = { name: 'twitter:image', content: this.metaTags.image }
  }
  return metaObj
}

Open quasar conf file

Require path at top of the file

const path = require("path");

Then under build under extend webpack (cfg)

extendWebpack(cfg, { isServer, isClient }) {
        // cfg.module.rules.push({
        //   enforce: "pre",
        //   test: /\.(js|vue)$/,
        //   exclude: /(node_modules|quasar)/
        // });

        cfg.resolve.alias = {
          ...cfg.resolve.alias, // This adds the existing alias
          // Add your own alias like this
          utils: path.resolve(__dirname, "./src/utils"),
        };
 }

Add Meta plugin to plugins section of the quasar conf

plugins: ['Meta'],

Now go to one of your web app pages

in the script section first import the util

import meta from '../../utils/meta.js'

In export default section

export default {
  name: 'PageIndex',

  data() {
        return {
            metaTags: {
                description: 'NsrTech Dashboard...',
                title: 'Dashboard | NsrTech',
                url: 'nsrtechx.com/dashboard',
                image: '#'
            }
        }
  },
  meta,
}

Place above code for all your pages and change relevant changes as your app

Sitemap

A sitemap is very important to a web site in order to make the site SEO friendly. Basically sitemap is used by the search engines to crawl the website. When a search engine start to crawl your site, it first goes to your sitemap to see the pages and contents URLs because most of the search engines uses bots to crawl your website and they have no idea where to go for your pages and contents. So they search the URLs which in the site map and crawls the contents inside the URLs. In that case your sitemap need to be more accurate and reliable in order to make your URLs visible on search engines. If there is a URL on broken URL which gives a 404 page, the search engine rejects the page from crawl.

So lets see how to create a sitemap file to your quasar project. Follow below steps.

Step – Add sitemap plugin

Add sitemap package

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

yarn users
yarn add sitemap-webpack-plugin

Go to quasar conf

At top of the quasar conf file

const SitemapPlugin = require('sitemap-webpack-plugin').default

const paths = [
  { path: '/dashboard' },
  { path: '/about' },
  { path: '/credits' },
  { path: '/contact' },
  { path: '/download' }
  
] 

place all paths for your pages from router file into path array

Under build inside extendwebpage(cfg) function, (same location you configured meta)

Add following code after the meta code you placed before

cfg.plugins.push(
          new SitemapPlugin({
            base: 'https://nsrtechx.com',
            paths,
            options: {
              filename: 'sitemap.xml',
              lastmod: true,
              changefreq: 'weekly',
            }
          })
        )   

Make sure that above code is inside extendWebpack function

Now when your build your website or web app, It will automatically create a sitemap file for you. You can check it by typing your-domain/sitemap.xml

Robots.txt

Robots.txt file is required in the website in order to give permission to access and crawl your site. Some people want to crawl their site to only some agent (search engines). So they can specify the agents which they need to be crawled by. Or users can allow all agents to be crawled by their search engines as well. So before crawling your site another main thing search engines check is your robots.txt file. And if the user is allowed that agent only they crawl the site with their search engines. else they leave the crawl. So if you want your site to be crawl in all search engines, You have to allow all agents. Now lets see how to create a robots.txt file for our site.

Step – Add webpack copy plugin

Add webpack copy package

npm users
npm install --save copy-webpack-plugin@5.1.1

yarn users
yarn add copy-webpack-plugin@5.1.1

Create robots.txt file in src/assets and add data

Example robots.txt file

# robots.txt 
User-agent: *
Allow: All
Sitemap: https://nsrtechx.com/sitemap.xml

Go to quasar.conf and at the top of file

const CopyWebpackPlugin = require('copy-webpack-plugin')

under build under extendwebpage(cfg). (same location you configured sitemap)

Add following code after the sitemap code you placed before

 cfg.plugins.push(
    	new CopyWebpackPlugin([{ context: `${__dirname}/src/assets`, from: `*.*` }]) 
      ) 

Make sure that above code is inside extendWebpack function

Build the app.

quasar build -m pwa

We are using CopyWebpackPlugin to move the robots.txt file (all files on src/assets) to root folder when building the app .So by doing that you can view your robots.txt file from www.yourdomain.com/robots.txt

So now you can link your website to SEO platforms of different kinds of search engines. For an example,

https://search.google.com/search-console/

http://analytics.google.com/

Thats it! I think you got an idea about SEO of Vue.js (Quasar) apps and you might successfully optimized your site for search engines.

Check the latest posts

Related Posts

Enable CORS on Lumen API
Laravel

Enable CORS on Lumen API

February 6, 2021
Quasar multiple file upload with laravel API
Laravel

Quasar multiple file upload with laravel API

January 21, 2021
Laravel Specified Key Was Too Long Fix
Laravel

Laravel Specified Key Was Too Long Fix

January 19, 2021
MySQL you do not have the super privilege issue fix
Tricks

MySQL you do not have the super privilege issue fix

January 19, 2021
Vue pagination with Laravel
Vue

Vue pagination with Laravel

October 10, 2020
quasar google maps
Mobile Development

Quasar Google maps with places

October 7, 2020
Next Post
MySQL you do not have the super privilege issue fix

MySQL you do not have the super privilege issue fix

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

POPULAR POSTS

quasar-file-upload-img

Quasar file upload process with laravel API

January 21, 2021
lumen framework tutorial

Lumen framework tutorial for beginners

October 24, 2020

Run cordova without android studio

September 12, 2020
quasar google maps

Quasar Google maps with places

October 7, 2020
MySQL you do not have the super privilege issue fix

MySQL you do not have the super privilege issue fix

January 19, 2021

EDITOR'S PICK

Enable CORS on Lumen API

Enable CORS on Lumen API

February 6, 2021
Vue pagination with Laravel

Vue pagination with Laravel

October 10, 2020
How to use Gmail as default mail in Lumen

How to use Gmail as default mail in Lumen

October 24, 2020
Recover desktop in Linux

Recover desktop in Linux

October 18, 2020

About

Nsrtech is a blog which brings you high quality and valuable articles to your life. All articles will be on different categories which all peoples can solve their issues in a single blog site.

Follow us

Categories

  • Laravel
  • Mobile Development
  • Networking Lessons
  • Others
  • Quasar
  • Quasar
  • Software Guides
  • Theories
  • Tricks
  • Vue
  • Web Development
  • Web Development Lessons

Recent Posts

  • Upgrade PHP from 7.2 to 7.3 on Ubuntu OS
  • Enable CORS on Lumen API
  • Quasar multiple file upload with laravel API
  • Git branch not showing in Visual Studio Code fix
  • Home
  • About Us
  • Contact Us
  • Privacy Policy

© 2020 NSR-TECH Blog .

No Result
View All Result
  • Homepages
    • Home Page 1
    • Home Page 2

© 2020 NSR-TECH Blog .

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In