Vue SEO Tutorial Guide for Beginners

Today, We want to share with you .In this post we will show you vue seo without universal, hear for vuejs one page website seo we will give you demo and example for implement.In this post, we will learn about seo solutions for single page apps in vuejs with an example.

Vue SEO Tutorial Guide for Beginners – step by step

Vue.js SEO Tips

first of all SEO is stuffing simple main sections their HTML elements full of descrive meta tags.

Step 1 : First off all simple, install the vue-meta via Yarn or NPM.

Now, simple CMD to import as well as use it it in simple your import Data bind Vue entrypoint:

import Vue from 'vue';
//some libs...
import Meta from 'vue-meta';

Vue.use(Meta);
//data libs...

Meta tags

Now in vuejs components, We can put a metaInfo some elements property that data contains the following bits We will want to simple data bind with vue SEO inject into vuejs :

  //HTML template.....



export default {
  ...
  metaInfo: {
    // vuejs seo Children can override the title.
    title: 'vue js SEO Tutorials',//My Page Title
    // Data Result: My Page Title ← My Site
    // If a child page some changes the title to "vuejs Tutorials with Examples",//My Other Page Title
    // vuejs seo will become: My Other Page Title ← My Site
    titleTemplate: '%s ← infinityknow.com', //%s ← My Site
    // Define meta tags here.
    meta: [
      {http-equiv: 'Content-Type', content: 'text/html; charset=utf-8'},
      {name: 'viewport'. content: 'width=device-width, initial-scale=1'},
      {name: 'description', content: 'Vue.js apps and sites for search engines.'} //I have things here on my site
    ]
  }
}

Social tags

metaInfo: {
  ...
  meta: [
    ...

    {property: 'og:title', content: 'VueJS ← infinityknow.com'}, //My Page Title ← My Site
    {property: 'og:site_name', content: 'VueJS'},
 
    {property: 'og:type', content: 'website'},

    {property: 'og:url', content: 'https://www.infinityknow.com/technology/vuejs/'},
    {property: 'og:image', content: 'https://www.infinityknow.com/vue-seo.jpg'},
    {property: 'og:description', content: 'vuejs seo tutorial with Examples.'}

    // Twitter card
    {name: 'twitter:card', content: 'summary'},
    {name: 'twitter:site', content: 'https://www.infinityknow.com/technology/vuejs/'},
    {name: 'twitter:title', content: 'VueJS ← infinityknow.com'}, //My Page Title ← My Site
    {name: 'twitter:description', content: 'vuejs seo tutorial with Examples.'},
    // Your twitter handle, if you have one.
    {name: 'twitter:creator', content: '@infinityknow'}
    {name: 'twitter:image:src', content: 'https://www.infinityknow.com/vue-seo.jpg'},

    // Google / Schema.org markup:
    {itemprop: 'name', content: 'VueJS ← infinityknow.com'}, //My Page Title ← My Site
    {itemprop: 'description': 'vuejs seo tutorial with Examples.'},
    {itemprop: 'image', content: 'https://www.infinityknow.com/vue-seo.jpg'}
  ]
}

Canonical link

metaInfo: {
  ...
  links: [
    {rel: 'canonical', href: 'https://www.infinityknow.com/technology/vuejs/'}
  ]
}

Sitemaps

An example (simple) sitemap: sitemap.xml

  
    https://www.infinityknow.com
  
  
    https://www.infinityknow.com/technology/vuejs/
  
  
    https://www.infinityknow.com/vue-seo
  
  
    https://www.infinityknow.com/vue-seo

Lastly, We can insert simple the sitemap added in robots.txt by putting a line such as:

READ : Removing hashUrl with rewriting example in angular js

Sitemap: https://www.infinityknow.com/sitemap.xml

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about vuejs seo tutorial.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Post Views: 2,445