Background

Observe that document site built based on create-react-doc, I found the webpage code is bare(see the picture below). This is obviously a common problem of single-page application (SPA) sites. It is not conducive to be searched by search engines (SEO).

Isn't it possible that SPA sites can't perform SEO, so what about frameworks such as Gatsby, nuxt It can be used as the first choice for many bloggers to build blogs. What are the technical principles of such frameworks to empower SEO? Driven by curiosity, I start my journey of empowering SEO in creat-react-doc.

Search Engine Optimization

Before practice, let's analyze why single-page applications cannot be searched by search engines. The core is that the crawler spider will not execute the JavaScript logic in the webpage during the crawling process, so the jump logic hidden in the JavaScript will not be executed either.

Check the packaged code of the current SPA site. Except for a root directory index.html, everything else is injected with JavaScript logic, so the browser will naturally not perform SEO on it.

In addition, detailed search engine optimization is a more complicated subject. If you are new to SEO optimization, it is recommended to read Search Engine Optimization (SEO) Beginner's Guide article, given by Google Search Center. There are a comprehensive list of 17 best practices, and 33 practices that should be avoided.

Practical case of SEO in SPA site

In the context of the light document site, we do not consider the SSR scheme for the time being.

After investigating the SEO schemes of document sites on the market, the author summarizes the following four categories:

• Static template rendering scheme
• 404 redirection scheme
• SSG plan
• Pre-rendering scheme

Static template rendering scheme

hexo is the most typical in the static template rendering scheme. Such frameworks need to specify a specific template language (such as pug) to develop themes, so as to achieve the purpose of direct output of web content.

404 Redirection Scheme

The principle of the 404 redirect solution is mainly to use the 404 mechanism of GitHub Pages for redirection. Typical cases are spa-github-pages, sghpa.

But unfortunately, in 2019 Google adjusted crawler algorithm, so this kind of redirection scheme is not conducive to SEO at the moment. The author of spa-github-pages also stated that if SEO is required, use the SSG plan or the paid plan Netlify.

SSG plan

The full name of the SSG scheme is called static site generator. In the community, nuxt, Gatsby and other framework-enabling SEO technologies can be classified without exception such SSG schemes.

Taking the nuxt framework as an example, based on the conventional routing, it converts vue files into static web pages by executing the nuxt generate command.

example:

-| pages/
---| about.vue/
---| index.vue/

After being static, it becomes:

-| dist/
---| about/
-----| index.html
---| index.html

After the routing is static, the document directory structure at this time can be hosted by any static site service provider.

Pre-rendering scheme

After the above analysis of the SSG scheme, at this time the key to optimization of the SPA site is already on paper —— static routing. Compared with frameworks such as nuxt and Gatsby, which have the limitation of conventional routing, create-react-doc has flexible and free organization in the directory structure. Its website building concept is File is Site, and it is also very convenient to migrate existing markdown documents.

Take blog project structure as an example, the document structure is as follows:

-| BasicSkill/
---| basic/
-----| DOM.md
-----| HTML5.md

It should become:

-| BasicSkill/
---| basic/
-----| DOM
-------| index.html
-----| HTML5
-------| index.html

After investigation, the idea and the prerender-spa-plugin pre-rendering solution hit it off. The principle of the pre-rendering scheme can be seen in the following figure:

So far, the technology selection is determined to use the pre-rendering scheme to achieve SSG.

Pre-rendering program practice

A brief overview of the steps of create-react-doc's practice in the pre-rendering solution is as follows (for complete changes, see mr):

• Transform hash routing to history routing. Because the history routing structure naturally matches the document static directory structure.

export default function RouterRoot() {
  return (
-<HashRouter>
+ <BrowserRouter>
      <RoutersContainer />
-</HashRouter>
+ </BrowserRouter>
  )
}

• Added pre-rendering environment on the basis of development environment and generation environment, and matched the routing environment at the same time. It mainly solves the correspondence between resource files and sub-paths under the main domain name. The process is tortuous, and interested friends can see issue.

const ifProd = env ==='prod'
+ const ifPrerender = window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.prerender
+ const ifAddPrefix = ifProd && !ifPrerender

<Route
  key={item.path}
  exact
-path={item.path}
+ path={ifAddPrefix? `/${repo}${item.path}`: item.path}
  render={() => {... }}
/>

• Compatible with the use of prerender-spa-plugin in webpack 5.

The official version currently does not support webpack 5, see issue for details, and I have a need to execute callbacks after pre-rendering. Therefore, a copy of version is currently forked, which solves the above problems.

After the practice of the above steps, static routing is finally implemented in the SPA site.

SEO optimization with additional buff, the site opens in seconds?

SEO optimization so far, let's look at the changes in FP, FCP, LCP and other indicator data before and after site optimization.

Taking the blog site as an example, the index data before and after optimization is as follows:

Before optimization: Before accessing the pre-rendering scheme, the time node for the first drawing (FP, FCP) is about 8s, and the LCP is about 17s.

After optimization: After accessing the pre-rendering scheme, the first drawing time node starts within 1s, and the LCP is within 1.5s.

Comparing the optimization between before and after: the first screen drawing speed has been increased by 8 times, and the maximum content drawing speed has been increased by 11 times. I wanted to optimize SEO, but I got another way to optimize site performance.

Generate Sitemap Sitemap

After finishing the pre-rendering and realizing the static routing of the site, it is one step closer to the goal of SEO. Putting aside SEO optimization details for the time being, go straight to the core hinterland of SEO site map.

The format of Sitemap and the meaning of each field are briefly explained as follows:

<?xml version="1.0" encoding="utf-8"?>
<urlset>
  <!-- Required tag, this is the definition entry of a specific link, each piece of data must be included with <url> and </url>, this is required -->
  <url>
    <!-- Required, URL link address, length must not exceed 256 bytes -->
    <loc>http://www.yoursite.com/yoursite.html</loc>
    <!-- You don't need to submit the tag, which is used to specify the last update time of the link -->
    <lastmod>2021-03-06</lastmod>
    <!-- You don't need to submit the tag, use this tag to tell the update frequency of this link -->
    <changefreq>daily</changefreq>
    <!-- You don’t need to submit the tag, which is used to specify the priority ratio of this link to other links. This value is set between 0.0-1.0 -->
    <priority>0.8</priority>
  </url>
</urlset>

In the above sitemap, the lastmod, changefreq, and priority fields are not so important for SEO, see how-to-create-a-sitemap

According to the above structure, I developed the sitemap generation package crd-generator-sitemap, the logic is to splice the pre-rendered routing path into the above format.

The user only needs to add the following parameters in the site root directory config.yml to automatically generate sitemap during the automatic release process.

seo:
  google: true

Submit the generated sitemap to Google Search Console for a try,

Finally, verify the before and after optimization of Google search site.

Before optimization: Only one piece of data is found.

After optimization: Search the location data declared in the site map.

So far, the complete process of using SSG to optimize SPA sites to achieve SEO has been fully realized. Follow-up is left to refer to the Search Engine Optimization (SEO) Beginner's Guide to optimize some SEO details and support more searches The engine is up.

Summary

This article starts with the realization of SEO on the SPA site, and successively introduces the basic principles of SEO, four practical cases of SEO in the SPA site, combined with create-react-doc SPA framework for complete SEO practice.

If this article is helpful to you, welcome star, feedback.

Related Links

• create-react-doc
• why-is-my-website-not-showing-up-on-google/
• A Technical Guide to SEO With Gatsby.js