Learn to optimize SEO for VUE, your website is always in front

Before we start, let's first understand what SEO is.

SEO (Search Engine Optimization): Chinese translation for search engine optimization. It is a way to use the rules of search engines to improve the natural ranking of websites within relevant search engines. The purpose is to let it occupy a leading position in the industry and obtain brand revenue. To a large extent, it is a business activity of the website operator, which moves forward the ranking of itself or its own company.

To put it bluntly, the better your SEO is done, when others search for a keyword, the higher your website will rank in the search results. This is my website, sometimes ranked first, sometimes second.

My website: www.dzyong.top

Public number: "Front End Xiaoyuan"

Where can an ordinary front-end website be optimized?

1. Reasonable title, description, keywords

<title>邓占勇的博客</title>
<meta name="description" content='邓占勇，一名前端工程师，这是我的个人博客，主要分享前端但不限于前端技术。公众号《前端校园》'>
<meta name="keywords" content="个人博客,邓占勇,前端,技术,WEB,blog,BLOG,搭建博客,前端技术,VUE博客,邓占勇的博客">
<meta name="anthor" content="邓占勇,[email protected]">
<meta name="robots" content="博客,前端,blog,个人博客,邓占勇,Yong,邓占勇的博客,《前端校园》,公众号,web,VUE">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

The weight of title, description, keywords gradually decreases.

title is the title of the webpage we see
description is a brief description of the page
The purpose of keywords is to tell search engines what keywords are mainly focused on this page

2. Semantic HTML code, in line with W3C specifications

Use more semantic HTML tags. What is a semantic tag? To put it bluntly, it is a check mark. Don't always be a div or span everywhere. HTML5 provides a lot of semantic tags, such as <header> </ header>, <footer> </ footer>, <nav> </ nav>, <aside> </ aside>, <section> </ section> Wait

3. Non-decorative pictures must add alt

The alt attribute of the <img> tag specifies alternate text, which is used to replace the image displayed in the browser when the image cannot be displayed or the user disables the image display. For non-decorative pictures, alt must be added. Non-decorative pictures refer to the pictures except those as element background pictures.

alt can enhance content relevance and increase keyword density

4 friendly links

YouChain is to put each other's website hyperlink on your website and someone else's website, and click on the link to transfer to the other party's website. Friendship link is the fundamental source of website traffic. For example, a kind of friendship link website that can automatically exchange links (each visit an IP will automatically be ranked first). This is an innovative self-service friendship link Internet model.

5. Outer link

External link refers to the link to import your own website in other websites. Importing links is a very important process for website optimization. The quality of the import link (that is, the weight of the page where the import link is located) indirectly affects the weight of our website in the search engine.

6. Submit your site to major search engines

After the search engine includes your website, it will greatly improve the ranking of the website. The following are the entrances of common search engines:

Baidu Submission Portal: https://ziyuan.baidu.com/linksubmit/url

Google submission portal: http://www.google.com/addurl/?hl=en&continue=/addurl

360 submission entrance: http://info.so.360.cn/site_submit.html

Sogou submission entrance: http://fankui.help.sogou.com/index.php/web/web/index?type=1

Bing submission portal: https://www.bing.com/toolbox/webmaster

7. Important content comes first

Search engine crawling is carried out from top to bottom, and putting the main key content in front can ensure that the crawled content is more in line with or represents the characteristics of the website.

8. Other

Use less iframe: the content in iframe will not be crawled
Improve website speed: This is also an important indicator of search engine ranking
Traffic: The more people who visit your website, the higher the ranking

How to optimize SEO for VUE?

Having said so many SEO optimization methods, why should I mention VUE's SEO optimization?

This is related to the essence of VUE. VUE is a SPA application, that is, an application with only one Web page, a Web application that loads a single HTML page and dynamically updates the page when the user interacts with the application.

Why is VUE not conducive to SEO? SEO is essentially a server that initiates a request to another server to parse the content of the request. But generally speaking, the search engine will not execute the requested js. That is to say, if a single-page application, html has not yet rendered part of the data on the server, the data is only rendered in the browser, and the html requested by the search engine does not render the data, so it is very unfavorable for the content to be searched Searched by the engine.

The following four methods are currently used:

SSR server rendering;
Static;
Pre-rendering prerender-spa-plugin;
Use Phantomjs to deal with crawlers.

1. SSR server rendering

Server rendering is to try to render the page to the page before the server sends it to the browser.

Vue.js is a framework for building client applications. By default, you can output Vue components in the browser to generate DOM and manipulate DOM. However, you can also render the same component as a server-side HTML string, send them directly to the browser, and finally "activate" these static tags into a fully interactive application on the client.

Server-rendered Vue.js applications can also be considered "isomorphic" or "universal" because most of the application's code can run on the server and client.

For detailed operation, please refer to the official website: https://ssr.vuejs.org/zh/

2. Static

The Nuxt.js framework used here is the official introduction. Building a server-rendering application from scratch is quite complicated. Fortunately, we have an excellent community project Nuxt.js that makes it very simple. Nuxt is a higher-level framework based on the Vue ecosystem, providing an extremely convenient development experience for developing Vue applications rendered on the server side. Even cooler, you can even use it as a static station generator. Recommend to try.

For detailed operation, please refer to the official website: https://zh.nuxtjs.org/

3. Pre-rendering prerender-spa-plugin

If you are only using it to improve the SEO of a few pages, then you may need to pre-render. Instead of using a web server to dynamically compile HTML in real time, a pre-rendering method is used to simply generate a static HTML file for a specific route at build time. The advantage is that setting up pre-rendering is simpler and can use your front-end as a completely static site.

Here we explain in detail how to use prerender-spa-plugin in VUE-CLI3 project.

installation

cnpm install prerender-spa-plugin --save

The easiest way to adjust the webpack configuration in the VUE-CLI3 project is to provide an object in the configureWebpack option in vue.config.js.

Official documentation: https://cli.vuejs.org/zh/guide/webpack.html

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

If you need to conditionally configure behavior based on the environment, or want to modify the configuration directly, then replace it with a function (the function will be lazy to execute after the environment variable is set). The first parameter of this method will receive the parsed configuration. Within the function, you can directly modify the configuration, or return an object that will be merged:

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

Start with basic knowledge

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                   //网页包的路径将应用程序输出到prerender
                    staticDir: path.join(__dirname,'dist'),
                    //Routes to render 对应自己router
                    routes: ['/', '/home','/blog','/aboutMe','/message'],
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        //渲染时显示浏览器窗口。对调试有用。
                        headless: false,
                        // // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

Add the following to main.js

new Vue({
  router,
  store,
  render: h => h(App),
  //这里与vue.config.js中的事件名相对应
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

Finally, it must be noted that the router must be in history mode.

Ok, here you have finished the configuration, you only need to package it in the same way as the traditional packaging method. During the packaging process, you will see that the browser automatically opens many pages and then closes automatically.

npm run build

Open the packaged dist folder, you will see that the traditional structure is different, the traditional only has the following content

But now you will see a few more folders than before. The more folders are the routes you configured. Each folder is an index.html file. The single-page application that originally had only one index.html has now become a multi-page application, which also increases the probability of your web page being crawled.

Open the packaged index.html locally, you can't see the content, you need to upload it to the server.

Here we can continue to optimize. Although it has become multiple pages, the title, description, and keywords of each page are the same, which is often not realistic. After all, each page has its own theme content.

Then we can set their meta-info separately for each page, here you can use the vue-meta-info plugin.

installation:

npm install vue-meta-info --save

Quoted in main.js

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

In the page you need to use

export default {
  metaInfo:{
    title: 'message',
    meta: [
      {
        name: 'description',
        content: '这是Message页面',
      },
      {
        name: 'keywords',
        content: 'message'
      }
    ]
  },
  data(){
    return {
    }
  },
}

You can see that the key information of the head of the page has been changed

Of course, you can also write it as a function to dynamically modify

export default {
  metaInfo() {
    return {
      title: this.title,
      meta: [
        {
          name: "关键词",
          content: "关键字"
        }
      ]
    };
  },
  data() {
    return {
      title: "我是动态更新的标题"
    };
  },
};

4. Use Phantomjs to deal with crawlers

Phantomjs is a headless browser based on the webkit kernel, that is, there is no UI interface, that is, it is a browser, but the related operations such as clicking and turning pages need programming and implementation.

I haven't contacted this yet. I will talk about it later when I understand it.

The source code is here: https://github.com/lengziyu/vue-seo-phantomjs

My website: www.dzyong.top

Public number: "Front End Xiaoyuan"

Bun dad

Published 81 original articles · Like 104 · Visit 80,000+

Private letter concerns