preface

Everyone probably knows that single page SEO is not friendly, but have you ever thought about why single page SEO is not friendly? In today’s single-page world, what are some strategies to avoid this disadvantage? Curious about that? Join me on a journey of discovery

How search engines work

There will be a very huge database in the background of the search engine website, which stores a large number of keywords, and each keyword corresponds to a lot of urls, these urls are called “search engine spider” or “web crawler” program downloaded from the vast Internet bit by bit and collected. With the emergence of various websites, these hardworking “spider crawling on the Internet every day, from one link to another link to download the contents, carries on the analysis, find the key words, if the” spider “don’t think keywords in the database and is useful for the user into the background database. On the contrary, if the “spider” thinks it is junk information or repeated information, it will abandon it and continue to crawl, looking for the latest and useful information to save for users to search. When the user searches, the url related to the keyword can be retrieved and displayed to the visitor. A keyword pair with multiple sites, so there is a sorting problem, the corresponding when the keyword most consistent with the site will be in the front. In the “spider” crawl web content, extract keywords in this process, there is a problem: “spider” can understand. If the site content is flash, JS, etc., then it will not understand, will be confused, even if the keyword is appropriate. Accordingly, if the website content can be identified by the search engine, then the search engine will improve the weight of the site, increase the friendliness of the site.

SEO is introduced

SEO is Search Engine optimization Optimization) English abbreviation, means in the understanding of the search engine natural ranking mechanism on the basis of internal and external adjustment and Optimization of the website, improve the site in the search engine keywords natural ranking, get more traffic, so as to achieve website sales and brand building expected goals.

SEO’s main job is through understanding of how search engines crawl the Internet page, how to index and how to determine its for a particular keyword search results ranking technology, such as the optimization of related web pages for, make its improve search engine rankings, thereby improving traffic, eventually improve website sales ability or technical ability. Increase site exposure, improve the weight of the whole station, so that users can search your site more easily, and then bring objective traffic. The advantages of drainage through this strategy are: 1. Low cost; 2. persistence; 3. There is no risk of “invalid clicks”.

Here simply write a little SEO optimization direction:

  1. Website design optimization
  • Site main title keyword optimization, must choose a good keyword, generally “a core word + three or five long tail words” combined into the title.
  • Site layout optimization. Generally speaking, enterprise product website, mainly F type layout, various content of the site to “flat structure” layout.
  • Code optimization, is the plate, column code, it is best to use the corresponding simple spell or full spell.
  1. Website content optimization
  • Analyze the column keywords, which long tail words, dig out, make a table form. Then, analyze the content of long-tailed words one by one to form the second-level long-tailed words.
  • According to the mining of long tail words, analysis of user needs, mining and related content, sorting out the article, published on the website, to ensure high quality articles.

Why is single-page SEO unfriendly

Because of the cases of the single page page of a lot of content is according to the matching to the routing dynamically generated and displayed, and a lot of page content is through ajax asynchronous access, web crawler will not wait for an asynchronous request again after the completion of the scraping of the page content, for web scraping work to accurately simulate the behavior of the related to obtain composite data is difficult, they are More adept at static resource capture and analysis.

How to solve the single page SEO unfriendly problem

Knowing where the problem lies, “search engine spider” or “web crawler” programs are better at capturing and updating static resources, we need to take corresponding strategies to generate as many static resources as possible, so that the web crawler can obtain more data, so as to improve the search ranking of the website. At present, there are two strategies in the market: pre-rendering and SSR(server-side rendering).

A brief introduction to some optimization strategies of SEO:

pre-rendered

Pre-rendering is based on prerender-SPa-plugin, which simulates browser requests with a headless browser during project construction and inserts the resulting data into the given template to generate HTML that already contains the data, so that there are more static resources and web crawlers can grab more site information and improve the search rankings of the site. Recently, I was using React to make the official website. Considering the SEO problem of single page and the fact that the official website is mostly static resources, pre-rendering technology was adopted, I would like to share with you here.

The pre-rendering here uses the prerender-SPa-plugin module in conjunction with webpack to generate static pages corresponding to the route. My project was built using the create-react-app scaffolding to customize the webpack configuration in config-overrides.

// In create-react-app 2.x or lower, // in config-overrides, we configure prerendered const PrerenderSPAPlugin = require('prerender-spa-plugin'); const path = require('path'); module.exports = function override(config, env) { if (env === 'production') { config.plugins = config.plugins.concat([ new PrerenderSPAPlugin({ routes: ['/', '/home', 'about'], staticDir: path.join(__dirname, 'build'), }), ]); } return config; }; Const {override, fixBabelImports, addLessLoader, addWebpackAlias, addWebpackPlugin } = require('customize-cra'); const PrerenderSPAPlugin = require('prerender-spa-plugin'); const path = require('path'); Const addConfigPlugin = config => {addWebpackPlugin => {addConfigPlugin => {addWebpackPlugin => {addConfigPlugin => {addWebpackPlugin => { If (process.env.node_env === 'production') {config.plugins = config.plugins.concat([new) PrerenderSPAPlugin({ routes: ['/', '/home', 'about'], staticDir: path.join(__dirname, 'build'), }) ]); Module. exports = override(addConfigPlugin, addConfigPlugin); // Override (addConfigPlugin, addConfigPlugin) = module.exports = override(addConfigPlugin, addConfigPlugin) Antd fixBabelImports('import', {libraryName: 'antd', libraryDirectory: 'es', style: 'CSS'})Copy the code

Create-react-app documentation also provides a solution for pre-rendering.

SSR(Server-side rendering)

Server-side rendering is the process of requesting data from a back-end server, generating the full first-screen HTML and sending it back to the browser. The server rendering returned to the client is the final HTML that has obtained asynchronous data and executed JavaScript script. The web crawler can capture complete page information. Another great function of SSR is to speed up the rendering of the first screen, because there is no need to wait for all JavaScript to complete download and execute before displaying the markup rendered by the server , so the user will see the fully rendered page faster.

Advantages of SSR over pre-rendering

  1. Faster construction speed. SSR inserts data dynamically and does not preload data during construction. Instead, it requests the server after entering URL, gets the returned data, inserts template, and then returns it to the client.
  2. Nested routines are loaded by the personalized page below, and the personalized page cannot be pre-rendered, which can be solved by SSR.
  3. Better SEO.
  4. Faster first screen loading speed (request business data, and render data into HTML fragments are carried out on the server side, the browser is responsible for loading resources, request CDN resources, CSS rendering, shortened arrival time).

Nuxt.js, a server rendering application framework based on vue.js, is recommended.

My code example here uses the most basic and concise techniques to implement a simple Vue SSR example. The full implementation is here

// a base version of SSR implementation const server = require('express')() const Vue = require(' Vue ') const fs = require('fs') const vueServerRender= require('vue-server-renderer'); / / create a render function const Renderer = vueServerRender. CreateRenderer ({/ / define a template page template:fs.readFileSync('./src/index.template.html', 'utf-8') }) server.get('*', (req, Res) => {// Create a vue component const app = new vue ({data: {name: 'this is vue SSR basic demo', url: req.url }, template:'<div> {{name}}, current url is: {{url}}</div>' }) const context = { title: Renderer. RenderToString (app, context, (err, HTML) => {if(err) {console.log(err) res.status(500).end('server error')} // Return the rendered page res.end(HTML)})}) const port = process.env.PORT || 8008; // Run server.listen(port, () => {console.log(' server started at localhost:${port} '); })Copy the code

Developing an SSR project with vue-server-renderer was a bit of a challenge, and I managed to run it successfully after a few twists and turns. The pit I would step on was the mismatch between the Virtual Dom generated by VUE and the content rendered by the server.

If this problem occurs, you need to check whether status synchronization is performed in./entry-client.js

If you want to implement an SSR project that is not in a rush to Nuxt framework, my advice is to check the official documentation Nuxt first, and then try to implement a small project yourself. If you have any problems, you can refer to my implementation vuE-SSR-Demo. There is also a demo that is more powerful and more complete. However, many modules are of a lower version, some of the API may be changed in the new version, some modules rely on the following version of node@9, and it may take some work to run correctly. If you have any questions or suggestions during the learning process, please leave a message in the comment section or add wechat lj_DE_wei_xin to communicate with me. May we all become better of ourselves

Further reading

  • What is server-side rendering, client-side rendering, SPA, and pre-rendering, after reading this one is enough
  • Solid base series: JavaScript variables and data types
  • Intensive reading source code series: Vue DOM asynchronous update and vue.nexttick () principle analysis
  • Solid foundation series: JavaScript class inheritance
  • PostMessage is so useful
  • Use SockJS to achieve webSocket communication in VUE