Shulou(Shulou.com)06/01 Report--

This article mainly introduces the VUE single page application SEO method is what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this VUE single page application SEO method is what the article will have a harvest, let's take a look.

Vue-meta-info

(set vue single-page meta info information, if you need single-page SEO, you can form a better match with prerender-spa-plugin.) single-page application shines brightly at the front. The three frameworks, Angular, Vue and React, are well known to all. With the popularity of single-page applications, people not only feel the perfect user experience and strong development efficiency, but also seem to inevitably have to deal with the requirements of SEO. This article mainly introduces the optimization of vue 2.0 single-page Meta SEO: in fact, server rendering does not have to be used to solve SEO problems. Server rendering is not so friendly for beginners who have just come into contact with vue, although there are official SSR Chinese documents. However, it is a challenge for a developed vue project to pick up SSR from both the workload and technical point of view. But how can these be difficult to get great front-end programmers!

If you investigate that server-side rendering (SSR) is only used to improve the SEO of a few marketing pages (such as /, / about, / contact, etc.), then you may need pre-rendering. Instead of using a web server to dynamically compile HTML in real time, it uses pre-rendering to simply generate static HTML files for specific routes at build time (build time). The advantage is that it's easier to set up pre-rendering, and you can use your front end as a completely static site. If you use webpack, you can easily add pre-rendering using prerender-spa-plugin. It has been widely tested by Vue applications. Pre-rendering provides another possibility for SEO. To put it simply, pre-rendering means that when the project built by vue-cli does npm run build, it will dynamically render the corresponding html file according to the routing level.

/ / webpack.conf.jsvar path = require ('path') var PrerenderSpaPlugin = require (' prerender-spa-plugin') module.exports = {/ /. Plugins: [new PrerenderSpaPlugin (/ / compiled html needs to store the path path.join (_ _ dirname,'.. / dist'), / / list which routes need to be pre-rendered ['/','/ about','/ contact'])}

It will eventually generate a directory structure similar to this.

And the contents will be rendered into static html files.

Compared to the previous possibility, there is only

Tangeche-pc

The role of pre-rendering can be found intuitively. With pre-rendering, we can solve many aspects of SEO problems, but sometimes we also need changes in Meta information, such as title such as Meta keyWords or link. Here Amway vue-meta-info a vue plug-in that can dynamically set meta information if you need a single page SEO, you can form a better match with prerender-spa-plugin. Vue-meta-info is a plug-in based on vue 2.0 that allows you to better manage the meta information in your app. You can set metaInfo directly in the component and you can automatically mount it to your page. If you need to update your title, meta and other information automatically as the data changes, then this plug-in is perfect. Of course, sometimes we may encounter troublesome SEO problems, so it is more appropriate to use this plug-in with prerender-spa-plugin

1. Installation

Yarn:

Yarn add vue-meta-info

Npm:

Npm install vue-meta-info-- save2. Global introduction of vue-meta-info import Vue from 'vue' import MetaInfo from' vue-meta-info' Vue.use (MetaInfo) 3. Use metaInfo statically within the component. Export default {metaInfo: {title:'My Example App', / / set a title meta: [{/ / set meta name: 'keyWords', content:' My Example App'}] link: [{/ / set link rel: 'asstes' Href: 'https://assets-cdn.github.com/'}]} 4. If your title or meta is loaded asynchronously, you may need to use... Export default {name: 'async', metaInfo () {return {title: this.pageName}}, data () {return {pageName:' loading'}} Mounted () {setTimeout (() = > {this.pageName = 'async'}, 2000)}}

PreRender + metaInfo can solve the SEO problem at a certain level, which has the advantages of the lowest code intrusiveness and the lowest development cost. But there are drawbacks:

Can not handle user-specific routing very well: for example, if a route is / my-profile, pre-rendering may not work very well, because the content page changes according to user information, so the content of the page is not unique. You may use a routing path like this / users/:username/profile, but this is not appropriate.

Documents that are constantly changing

You need to pre-dye thousands of routing files: this may cause you to compile time. .. Well, maybe you'll compile for a long time.

This is the end of the article on "what is the method of applying SEO to a single page of VUE?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the method of applying SEO to a single page of VUE". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.