After seo problems of vue, echo is very strong, also got everyone’s approval, but I’m vue seo also only stay in the aspect of theory, and no actual optimization, what kind of, also don’t know the specific effect will be happened to the company’s official website launched three months after the demand is not so much, so I want to stop to optimize the website first.

The first is to choose which solution to optimize, as mentioned in the last article, there are many kinds of SEO solutions for VUE, the common ones are as follows

  1. Vue official server render
  2. vue-meta-info
  3. nuxt
  4. phantomjs

Wait, first of all I only researched two, vUE official solutions and NUXT.

Vue official solution is not complicated, don’t be alarmed by the word SSR), this is the service side pre-rendered, need the back-end to cooperate, I do is through the node analytical front page, but also because of this, need the back-end to cooperate, the front-end optimization, i.e., to persuade the back-end (this estimate is not far from the front face of all, After all, the interface let him pass more than one field will have to say a long time), so I decisively gave up this plan.

Later I looked at the NuxT website and found that the cost is very low. If you have a small website, you can usually complete the migration in two days (our company website took a week). This is actually acceptable for the optimization of a project, after all, if it is well done, it can create profits for the company.

The nuXT framework can be used in a new project. The nuXT framework can be used in a new project. The nuXT framework can be used in a new project.

1. How to handle dependencies

If you want to use a plugin, download the plugin, create a new file in the plugins directory, and import the plugin. Take the element-UI plugin as an example:

Start by creating a new element.js file in your plugins directory and import element-UI into the file

import Vue from 'vue'
import VTooltip from 'element-ui'
Vue.use(element-ui)
Copy the code

Next reference the modified module in nuxt.config.js:

export default {
  plugins: [
     '~/plugins/element.js'
  ]
}
Copy the code

Because plugins are arrays, we can add any dependencies we want.

How do data requests work on the page

Nuxt data request is a bit different from before, we need to put the request interface in the asyncData function, asyncData function is a bit like vue3 composite API, we need to integrate all the interface into asyncData, like this:

Async asyncData({$axios}) {const getList1 = await $axios.$get(' interface 1') const getList2 = await $axios.$get(' interface 2') return  { getList1, getList2 } }Copy the code

Of course, we can also add many configurations to our request, such as request headers, proxies, etc. See NUxt/AXIos for details

How can code be migrated from older projects

It is recommended to copy code module by module to avoid the occurrence of too many bugs at one time. It is recommended to include all files of a module, including API, CSS, components, tool classes, local dependencies, and so on. The sequence is suggested as follows:

  1. Copy the component code first, because the component is the core code, generally all other files are related to the component
  2. Copy the style file. After copying, import the style into thenuxt.config.jsThe style file is referenced in
  3. Copy other files so that we can make specific changes to our components, or we have errors in the background when we build, which we need to solve one by one

Other SEO details

This is our platitudes, we have been very familiar with before writing vUE, such as a webpage can only have one H1, add title to pictures and so on, here is not a introduction, A few days ago I read an article front-end SEO optimization is very detailed, can be modified according to the inside one by one

What else can we do besides change the code

According to baidu, if a site has been certified, so he was grabbing opportunities will be improved, so I have to check the price of the certification, add a website logo has more than three thousand dollars a year, it should be for an enterprise is not much money, and also more pages included, increase the yield more than 3000, so we want to do a good job, You can apply for it. portal

Take a look at the final result of our website

In fact, the effect is quite obvious, we can right view the source code, almost all the site structure is out.

This is the front page

This is for the list page

We open baidu collect a case

Included is not only the home page and a menu page, and even the district and housing details page also included

Google Index

Therefore, to sum up, the use of NUXT to improve the site’s inclusion is very effective, and the cost is not high, the difficulty is not big, we can do targeted optimization on this basis according to the actual situation of their own website.

Original is not easy, if this article is helpful to you, give it a thumbs up! (Kneel down manually)