Can Vue single page do SEO?

Vue single page can do SEO. Methods: 1. SSR server rendering, allowing search engine crawlers to directly view the fully rendered page, allowing content to arrive faster; 2. Static, allowing the page to load faster; 3. Prerender-spa-plugin ;4. Use Phantomjs to process crawlers.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

As we all know, Vue SPA single-page application is not friendly to SEO. Of course, there are corresponding solutions. Here are several recently researched and used SEO solutions. SSR and staticization are based on Nuxt.js.

• 1. SSR server rendering;
• 2. Static;
• 3. Prerender-spa-plugin;
• 4. Use Phantomjs to process crawlers.

1.SSR server rendering

About server rendering: According to the Vue official website, there are requirements for the Vue version and certain requirements for the server, and it needs to support the nodejs environment.

The trade-offs of using SSR:

• Limited by development conditions, browser-specific code can only be used in certain lifecycle hook functions (lifecycle hook ); some external extension libraries (external libraries) may require special processing to run in server rendering applications;
• Environment and deployment requirements are higher, requiring a Node.js server running environment;
• In case of high traffic, please prepare the server load accordingly and adopt caching strategy wisely.

Advantages:

• Better SEO, since search engine crawlers can view fully rendered pages directly;
• Faster time-to-content, especially for slow network conditions or slow-running devices.

Shortcomings: (pits encountered during development)
1. One set of code and two sets of execution environments will cause various problems, such as no window on the server side, document object, the processing method is to add judgment. If it is a client, it will be executed:

if(process.browser){
 console.log(window);
}

refers to the npm package with dom operation, for example: wowjs, cannot use import method, use:

if (process.browser) {
     var { WOW } = require('wowjs');
     require('wowjs/css/libs/animate.css');
 }

2.Nuxt asyncData method, get the data before initializing the page, but only for page components call:

// 并发加载多个接口：
  async asyncData ({ app, query }) {
    let [resA, resB, resC] = await Promise.all([
      app.$axios.get('/api/a'),
      app.$axios.get('/api/b'),
      app.$axios.get('/api/c'),
     ])
     
     return {
       dataA: resA.data,
       dataB: resB.data,
       dataC: resC.data,
     }
  }

in asyncData Obtain parameters from:

1.获取动态路由参数，如：

/list/:id' ==>  '/list/123

接收：

async asyncData ({ app, query }) {
  console.log(app.context.params.id) //123
}
2.获取url?获取参数，如：

/list?id=123

接收：

async asyncData ({ app, query }) {
  console.log(query.id) //123
}

3. If you use the v-if syntax, you may also encounter this error when deployed online:

Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.We [as appendChild]

According to github nuxt issue No. 1552 prompts that v-if should be changed to v-show syntax.

4. There are too many pitfalls. Leave them behind and update them later.

2. Staticization

Staticization is another way of packaging Nuxt.js. It is an innovation of Nuxt.js and the page loads very quickly.
When Nuxt.js executes generate static packaging, dynamic routing will be ignored.

-| pages/
---| index.vue
---| users/
-----| _id.vue

If you need dynamic routing to generate a static page first, you need to specify the value of the dynamic routing parameter and configure it in the routes array.

// nuxt.config.js
module.exports = {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

Run the package and you can see the packaged page.
But if the value of the routing dynamic parameter is dynamic rather than fixed, what should be done?

• Use a function that returns a Promise object type;
• Use a function whose callback is callback(err, params).

// nuxt.config.js
import axios from 'axios'

export default {
  generate: {
    routes: function () {
      return axios.get('https://my-api/users')
      .then((res) => {
        return res.data.map((user) => {
          return {
            route: '/users/' + user.id,
            payload: user
          }
        })
      })
    }
  }
}

Now we can access the payload from /users/_id.vue as follows:

async asyncData ({ params, error, payload }) {
  if (payload) return { user: payload }
  else return { user: await backend.fetchUser(params.id) }
}

If your There are many parameters for dynamic routing, such as product details, which may be tens of thousands. An interface is needed to return all IDs, and then the IDs are traversed during packaging and packaged locally. If a product is modified or removed from the shelves, it must be repackaged. Packaging is also very slow and unrealistic when the quantity is large.
Advantages:

• Pure static files, access speed is super fast;
• Compared with SSR, it does not involve server load issues;
• Static web pages are not suitable for hacker attacks and are more secure.

Insufficiency:

• Not applicable if there are many dynamic routing parameters.

3. Prerender prerender-spa-plugin

If you only use it to improve the SEO of a few marketing pages (such as /, /about, /contact, etc.), then you may Requires pre-rendering. Instead of using a web server to dynamically compile HTML in real time, pre-rendering simply generates static HTML files for specific routes at build time. The advantage is that setting up prerendering is simpler and allows you to treat your frontend as a completely static site.

$ cnpm install prerender-spa-plugin --save

vue cli 3 vue.config.jsConfiguration:

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({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

Add in main.js:

new Vue({
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

Note: Must be set in router mode: "history" .

You can see the file after packaging it, and package it into the folder /index.html, for example: about => about/index.html , which contains html content.

Advantages:

• The changes are small, just introduce a plug-in and it’s done;

Disadvantages:

• 无法使用动态路由；
• 只适用少量页面的项目，页面多达几百个的情况下，打包会很很很慢；

4.使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

具体代码戳这里：vue-seo-phantomjs。
要安装全局phantomjs，局部express，测试：

$ phantomjs spider.js 'https://www.baidu.com'

如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。
启动之后或者用postman在请求头增加User-Agent值为Baiduspider，效果一样的。

部署上线
线上要安装node、pm2、phantomjs，nginx相关配置：

upstream spider_server {
  server localhost:3000;
}

server {
    listen       80;
    server_name  example.com;
    
    location / {
      proxy_set_header  Host            $host:$proxy_port;
      proxy_set_header  X-Real-IP       $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

      if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
        proxy_pass  http://spider_server;
      }
    }
}

优势：

• 完全不用改动项目代码，按原本的SPA开发即可，对比开发SSR成本小不要太多；
• 对已用SPA开发完成的项目，这是不二之选。

不足：

• 部署需要node服务器支持；
• 爬虫访问比网页访问要慢一些，因为定时要定时资源加载完成才返回给爬虫；
• 如果被恶意模拟百度爬虫大量循环爬取，会造成服务器负载方面问题，解决方法是判断访问的IP，是否是百度官方爬虫的IP。

总结

如果构建大型网站，如商城类，别犹豫，直接上SSR服务器渲染，当然也有相应的坑等你，社区较成熟，英文好点，一切问题都迎刃而解。
如果只是个人博客、公司官网这类，其余三种都可以。
如果对已用SPA开发完成的项目进行SEO优化，而且支持node服务器，请使用Phantomjs。

【相关推荐：vuejs视频教程、web前端开发】

The above is the detailed content of Can Vue single page do SEO?. For more information, please follow other related articles on the PHP Chinese website!