How does Vue development do SEO optimization for search engines?

VUE SEO several solutions

Vue SPA single-page apps are notoriously SEO unfriendly, but there are solutions.

1. SSR server rendering

Vue.js is a framework for building client applications. By default, you can export the Vue component to the browser for DOM generation and DOM manipulation. However, you can also render the same component’s HTML strings off-server, send them directly to the browser, and finally “activate” those static tags into a fully interactive application on the client side.

A server-side rendered vue.js application can also be considered “isomorphic” or “generic” because most of the application code can be run on both the server and the client.

The tradeoffs:

  • Limited by development conditions, browser-specific code can only be used in some lifecycle hook functions. Some external extension libraries may require special processing to run in a server rendering application.
  • The environment and deployment requirements are higher, requiring node.js Server running environment;
  • In the case of high traffic, you need to prepare for the server load and use caching strategies wisely.

Advantage:

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

Inadequate:

  • A set of code two sets of execution environment, will cause a variety of problems, such as the server does not have window, document object, processing is to increase the judgment, if it is the client to execute;
  • More requirements related to build setup and deployment need to be in the Node Server running environment
  • More server side load

2, Nuxt static

The nuxt.js framework is quite complex to build a server-side rendering application from scratch. Luckily, we have an excellent community project called Nuxt.js that makes it really easy. Nuxt is a higher-level framework based on the Vue ecosystem that provides an extremely convenient development experience for developing server-side rendered Vue applications. Even cooler, you can use it as a static station generator.

Static is another way to package Nuxt.js, which is an innovation of Nuxt.js. Pages load quickly.

Note: Dynamic routing is ignored when nuxt.js performs generate static packaging.

Advantage:

  • Pure static file, super fast access
  • Compared with SSR, it does not involve the server load.
  • Static web pages should not be attacked by hackers, higher security.

Inadequate:

  • If multiple routing parameters are not applicable.

3. Prerender-spa-plugin

If you are only using SEO to improve a few marketing pages (e.g. /,/ about,/contact, etc. =), then you may need pre-render. Instead of using a Web server to compile HTML dynamically in real time, you use pre-render to simply generate static HTML files for specific routes at build time. The advantage is that it’s easier to set up pre-render, and you can treat your front end as a completely static site.

Advantage:

  • If the change is too small, you can introduce plug-in configuration

Inadequate:

  • Dynamic routing cannot be used
  • Projects that use only a few pages, with hundreds of pages, can be very slow to package

4. Use Phantomjs to process crawlers

Phantomjs is a headless browser based on the WebKit kernel, meaning it has no UI, meaning it’s just a browser, except for clicking, page-turning, and other human-related actions that require programming.

Although “PhantomJS announced the end of development”, SEO processing for Vue has been satisfied.

This solution is actually a bypass mechanism. The principle is to determine whether UA access source is crawler access through Nginx configuration. If so, the crawler request of search engine is forwarded to a Node server, and then the complete HTML is parsed through PhantomJS and returned to the crawler.

Advantage:

  • No need to change the project code, according to the original SPA development, compared with the development of SSR cost is not too much;
  • For projects already developed with SPA, this is the only choice.

Inadequate:

  • Deployment requires node server support.
  • The crawler visit is slower than the web page visit because the crawler is returned to the crawler after the resource load is completed.
  • If baidu malicious simulation crawler a large number of cyclic crawling, it will cause problems in server load, the solution is to determine whether the IP is the IP of Baidu official crawler;

5, summary

If you build a large website, such as mall class, do not hesitate to directly on the SSR server rendering, of course, there are corresponding pits for you, the community is more mature, English is better, all problems are solved.

If it’s just a personal blog or a company website, you can do all three.

Use Phantomjs if you are doing SEO optimization for projects that have been developed with SPA and support node servers.

For VUE SSR project, I have taken over the development of several, which is also in the state of maintenance. From 0 to 1 project construction, development and use vuE-SSR also do encounter some pits and problems, but these can be solved, the way is always more difficult than haha.

read

  • About VueSSR
  • Prerender-spa-plugin — A static tool for mini Vue projects
  • Vue website SEO optimization continuous trampling pit (PhantomJS)
  • Nuxt. js optimized the homepage of Vue project for SEO
  • Nuxt adaptive SSR scheme: SEO and first screen minimization optimization