How vue.js does SEO-Vue.js-php.cn

Vue.js’s method of achieving seo: 1. Use SSR server rendering; 2. When [Nuxt.js] executes generate static packaging, dynamic routing is required to generate static pages first; 3. Pre-rendering [ prerender-spa-plugin]; 4. Use Phantomjs to process crawlers.

How vue.js does SEO

【Recommended related articles: vue.js】

How to do seo with vue.js:

1. SSR server rendering

About the server Rendering: According to the Vue official website, there are requirements for the Vue version and certain requirements for the server. 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 libraries (external libraries) may require special processing to run in server rendering applications;
The environment and deployment requirements are higher and require 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 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);
}

Copy after login

Reference npm package, with dom operation, for example: wowjs, you cannot use the import method, use:

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

Copy after login

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

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

Copy after login

Get parameters in asyncData:

1. Get dynamic routing parameters, such as ：

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

Receive:

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

Copy after login

2. Get url? Get parameters , such as:

/list?id=123

Receive:

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

Copy after login

3. If you use v-if syntax, deploy it online You may also encounter this error:

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 issue 1552 on github nuxt, v-if should be changed to v-show syntax.

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

2. Static

When Nuxt.js executes generate static packaging, dynamic routing will be ignored.

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

Copy after login

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: [
  &#39;/users/1&#39;,
  &#39;/users/2&#39;,
  &#39;/users/3&#39;
 ]
 }
}

Copy after login

Run the package and you can see the packaged page.

But what should be done if the value of the routing dynamic parameter is dynamic rather than fixed?

Use a function that returns a Promise object type;

Use a function whose callback is callback(err, params).

// nuxt.config.js
import axios from &#39;axios&#39;
 
export default {
 generate: {
 routes: function () {
  return axios.get(&#39;https://my-api/users&#39;)
  .then((res) => {
  return res.data.map((user) => {
   return {
   route: &#39;/users/&#39; + user.id,
   payload: user
   }
  })
  })
 }
 }
}

Copy after login

Now we can access the payload from /users/_id.vue, as shown below:

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

Copy after login

If your dynamic routing has many parameters, such as product details, it may be as high as several thousand. Ten thousand. 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 Question;
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 need to pre-render. 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

Copy after login

vue cli 3 vue.config.js configuration:

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

Copy after login

Add in main.js:

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

Copy after login

Note: mode: "history" must be set in the router.

You can see the file after packaging, and package 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:

Dynamic routing cannot be used;
is only applicable to projects with a small number of pages. When there are hundreds of pages, packaging will be very slow;

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

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。

虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。

这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

具体代码戳这里： vue-seo-phantomjs。

要安装全局 phantomjs ，局部 express ，测试：

$ phantomjs spider.js &#39;https://www.baidu.com&#39;

Copy after login

如果见到在命令行里出现了一推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;
  }
 }
}

Copy after login

优势：