Single page application SEO scheme

Intro:   Recently, I want to optimize the SEO of the site on the basis of the existing SPA website, so several options are listed.Rendertron is a headless Chrome rendering solution designed to render and seria

Recently, I want to optimize the SEO of the site on the basis of the existing SPA website, so several options are listed.

Rendertron is a headless Chrome rendering solution designed to render and serialize web pages instantly, running as a standalone HTTP server, using Headless Chrome to render requested pages, automatically detecting and serializing responses back to the original request when the SPA site completes loading.

Environmental and tool requirements: Node, npm

Open the cmd command prompt and type

Npm install rendertron download time is long, need to wait patiently.

The default port for rendertron rendertron service listening is 3000

Browser enter http://localhost:3000/render/ [site address]

Http://localhost:3000/render/https://www.hongwanyg.com can browse the content returned by rendertron after rendering the SPA site. More detailed Demo point here: https://www.jianshu.com/p/38e6d3bf596d

1. Front end

The front-end routing mode requires a routing-enabled history mode.

You need to change the jump address of most of the new pages in the portal.

2. Server

The server adds a candidate resource that covers all cases: if the URL does not match any static resources, it should return the same index.html.

Advantages: the impact range is the smallest and the time cost is the lowest.

Shortcomings:

Render the application framework using a server such as Nuxt.js or vue-server-renderer.

There are a lot of changes to the front-end code, and most components need to be changed.

Advantages: the effect is the best, basically all pages can meet SEO.

Disadvantages: the cost of front-end changes is large, and the cost of time is high.

Advantages: it does not affect the original code of the front end, it is an extended method.

Shortcomings:

The page is for SEO only;

It takes time and cost to develop new pages, or to add proxy servers;

Related Passages:

Leave a Reply

Your email address will not be published. Required fields are marked *