A brief discussion on four solutions for Vue single page SEO

As we all know, Vue SPA single-page application is not friendly to SEO. Of course, there are corresponding solutions. By searching for information, there are probably the following 4 methods. (I have only used the first and third options)

1.Nuxt server-side rendering application deployment (SSR server rendering)

About server rendering: According to the Vue official website, there are requirements for the Vue version and the server, which needs to support the nodejs environment.
The trade-offs of using SSR:
Due to development constraints, browser-specific code can only be used in certain lifecycle hooks; some external libraries may require special processing to run in server-rendered applications;
The environment and deployment requirements are higher, and a Node.js server operating environment is required;
In case of high traffic, please prepare for appropriate server load and adopt caching strategies wisely.

Advantages:

Better SEO, since search engine crawlers can directly view the fully rendered page;
Faster time-to-content, especially over slow networks or on slow devices.

Disadvantages: (pitfalls encountered during development)

1. Two execution environments for one set of code will cause various problems. For example, if there is no window or document object on the server side, the solution is to add a judgment and execute it only if it is the client side:

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

To reference npm packages with DOM operations, such as wowjs, you cannot use the import method. Instead, use:

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

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

// Load multiple interfaces concurrently:
 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,
  }
 }

3. If you use the v-if syntax, you may also encounter this error when deploying it 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 issue 1552 on github nuxt, you need to change v-if to v-show syntax.

2.Nuxt static application deployment

When Nuxt.js generates static packages, dynamic routes are ignored.

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

To generate static pages using dynamic routing, you need to specify the values ​​of the dynamic routing parameters and configure them 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 what should we do if the value of the routing dynamic parameter is dynamic rather than fixed?
Use a function that returns a Promise object type;
Use a callback 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 dynamic routing has many parameters, such as product details, it may be as high as thousands or tens of thousands. An interface is needed to return all IDs, and then traverse the IDs when packaging and package them locally. If a product is modified or removed from the shelves, it needs to be packaged again. If the quantity is large, packaging is also very slow, which is very unrealistic.

Advantages:

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

insufficient:

• It is not applicable if there are many dynamic routing parameters.
  

3. Prerendering prerender-spa-plugin

If you’re only using it to improve the SEO of a few marketing pages (e.g. /, /about, /contact, etc.), then you probably need prerendering. Instead of using a web server to dynamically compile HTML on the fly, prerendering simply generates static HTML files for specific routes at build time. The advantage is that it is easier to set up prerendering, and allows you to serve your frontend as a completely static site.

$ cnpm install prerender-spa-plugin --save

vue cli 3 vue.config.js configuration:

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({
     // The path of the generated file can also be consistent with the path packaged by webpakc.
     // The following sentence is very important! ! !
     // This directory can only have one level. If the directory level is greater than one level, there will be no error prompt during generation, and it will just get stuck during pre-rendering.
     staticDir: path.join(__dirname,'dist'),
     // Corresponding to your own routing file, for example, if a has parameters, you need to write it as /a/param1.
     routes: ['/', '/product', '/about'],
     // This is very important. If this section is not configured, precompilation will not be performedrenderer: new Renderer({
      inject: {
       foo: 'bar'
      },
      headless: false,
      // In main.js, document.dispatchEvent(new Event('render-event')), the event names of the two should correspond.
      renderAfterDocumentEvent: 'render-event'
     })
    }),
   ],
  };
 }
}

In main.js, add:

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

Note: mode: "history" must be set in the router.
You can see the files 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 you're done;

insufficient:

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

4. Phantomjs handles crawlers

Phantomjs is a headless browser based on the webkit kernel, that is, it has no UI interface, that is, it is just a browser, but the human-related operations such as clicking and page turning need to be implemented by programming.

Although "PhantomJS announced the termination of development", it has already met the SEO requirements for Vue.

This solution is actually a bypass mechanism. The principle is to determine whether the source UA of the access is a crawler access through Nginx configuration. If it is, the crawler request of the search engine is forwarded to a node server, and then PhantomJS is used to parse the complete HTML and return it to the crawler.
To install phantomjs globally, express locally, and test:

$ phantomjs spider.js 'www.baidu.com'

If you see a bunch of HTML appearing in the command line, congratulations, you have conquered PhantomJS.

After starting, or using Postman to add the User-Agent value to Baiduspider in the request header, the effect is the same.

Deployment and launch

To install node, pm2, phantomjs and nginx related configurations online:

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;
  }
 }
}

Advantages:

There is no need to change the project code at all, just develop it according to the original SPA. Compared with the development of SSR, the cost is not too much;
This is the best choice for projects that have been developed using SPA.

insufficient:

Deployment requires node server support;
Crawler access is slower than web page access because resources are loaded only after they are returned to the crawler.
If the server is maliciously simulated to crawl in large quantities in a loop, it will cause problems with the server load. The solution is to determine whether the accessed IP is the IP of Baidu's official crawler.

Summarize

If you are building a large website, such as a shopping mall, don't hesitate, go directly to SSR server rendering. Of course, there are corresponding pitfalls waiting for you. If the community is more mature and your English is better, all problems can be solved.

If it is just a personal blog or a company website, the other three are fine.

This concludes this article on the four solutions for Vue single-page SEO. For more relevant Vue single-page SEO content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!