preface

At present, Vue single page application is popular in the front end. Its development idea enables us to truly separate and decouple the front and back ends. The single-page application uses the browser to dynamically parse JS and present the final page, with better user experience and improved website performance. However, web crawlers do not dynamically parse Js, so access to all unprocessed single page application urls will only get the code in the project entry (index.html) file, not the specific content, which is extremely unfriendly to Seo optimization. In order to optimize project Seo, there are two main programs: Server Side Rendering and Prerending.

This article describes how to use prerender service for Vue single page Seo in pre-rendering solutions

Two ways of pre-rendering

  1. Prerender – spa – the plugin:

    This plug-in is a Webpack plug-in, which routes the project into a corresponding HTML static file when the project is built (NPM run build). Therefore, only the following project types apply.

    • The route is static and non-massive
    • Page content does not require Ajax to fetch and display the content

  2. Prerender: This service will directly replace the back end of the website responding to crawler requests during page rendering, and will directly return static pages to crawlers after rendering in advance. Because this service is used during page rendering, it is no longer restricted by routes in Mode 1.

The use of the prerender

1, install,

npm install prerender
Copy the code

2. Start the server.js service

const prerender = require('prerender');
const server = prerender();
server.start();
Copy the code

3, test,

http://localhost:3000/render?url=https://www.example.com/
Copy the code

At this point, you have started a PRERender service and returned the content of https://www.example.com/, and the content of https://www.example.com/ that you see on the page is pre-rendered to a static page by the PRERender service. By default, the service runs on port 3000. For details, see the PRERender document.

Prerender middleware usage

Our ideal rendering mode would be to render dynamically using JS instead of prerender for normal user access; When a crawler accesses a page, the prerender service prerenders the page as a static page for the crawler to climb.

So how to achieve the above requirements?Copy the code

Fortunately, prerender provides middleware for such requirements: Prerender-node (Express), prerender_rails(Rails),.htaccess(Apache), nginx.conf, etc. See the Middleware module documentation in the PRERender documentation. I used prerender-Node (Express)node middleware. The configuration changes are as follows:

1, install,

Install under Express

npm install prerender-node --save
Copy the code

2. Modify the app.js configuration

Var prerender = require('prerender-node') app.use(prerender // crawler access to prerender service for pre-render. Set ("prerenderServiceUrl", Set ("host", "wwww.xxxx.com")); set("host", "wwww.xxxx.com");Copy the code

3. Restart the Express service

Matters needing attention:

  • Step 2 modify the configuration code to be placed before Express route distribution; Before the following code 
    app.use("/", indexRouter);
app.use("/users", usersRouter);
Copy the code
  • When modifying app.js configuration, the project address is www.xxxx.com without http://

test

After installing the PRERender service and prerender middleware, prerender pre-rendering is done. Here’s how to test it.

Test principle: Emulated Devices of Google browser was added to simulate crawler access, the specific implementation is as follows:

1. Open the Chrome Developer tools.

2. Click (enter editing mode of mobile phone) button, as shown in the picture

3. Click select Simulation device drop-down selection, select the last Edit… , will enter the following figure.

5 Set User Agent string to Mozilla/5.0 (compatible; Baiduspider / 2.0; Other + http://www.baidu.com/search/spider.html) as shown in figure,

6. Click Save.

7. Click to select simulation device and select the newly added simulated Baidu crawler from the drop-down list

After the 7 steps above, your browser can simulate crawler access. At this point, open the browser console network filter doc type, refresh the page, and see that the page returns a compiled static file.

Select other non-crawler Emulated devices or do not open Emulated device debugging mode, refresh the page, and you can see that the page return is dynamically resolved by JS.

conclusion

The general idea of prerender configuration is that the prerender middleware checks if the page is accessed by a crawler. If the page is accessed by a crawler, it is forwarded to the PRERender service for prerender compilation. If the page is not prerender, the DYNAMIC RENDER page is returned.

Other Vue single page SEO optimization can refer to: Vue single page project SEO complete guide