SEO practices in SPA sites

primers

Starting from the implementation of SEO in SPA sites, this paper introduces the basic principles of SEO, four practical cases of SEO in SPA sites, and combines create-React-DOC SPA framework to carry out a complete SEO practice.

background

When you look at the create-react-doc documentation site, you can see that the web code is bare (see image below). This is obviously a common problem with single page application (SPA) sites — it’s not good for documents to be searched by search engines (SEO).

Is it impossible for SPA sites to conduct SEO? Then why can frameworks such as Gatsby and NUxT be the first choice for many bloggers to build their blogs? What is the technical principle of such frameworks enabling SEO? Driven by curiosity, I tried an enabling SEO tour of Creat-React-Doc.

Search engine optimization

Before practice, analyze theoretically why a single page application cannot be found by search engines. The core is that the crawler spider will not execute the JS logic in the web page during the crawling process, so the jump logic hidden in JS will not be executed.

Looking at the current SPA site’s packaged code, except for a root directory called index.html, it’s all JS logic injected, so browsers naturally don’t SEO it.

In addition, search engine detailed optimization is a more complex knowledge. If you are new to SEO optimization, it is recommended to read the beginner’s Guide to Search engine optimization (SEO). Google Search Center gives a comprehensive list of 17 best practices and 33 practices to avoid, which is also part of my recent practice.

In the context of light document sites, we don’t consider SSR solutions.

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

Static template rendering scheme
404 Redirection scheme
SSG scheme
Prerendering scheme

Static template rendering scheme

Static template rendering schemes, such as Hexo, require a specific template language (such as PUG) to be used to develop themes, so that the content of a web page can be straight out.

404 Redirection scheme

The principle of 404 redirection scheme is to use the 404 mechanism of GitHub Pages to redirect. Typical cases include SPA-Github pages and SGHPA.

Unfortunately, Google tweaked its crawler algorithm in 2019, so this kind of redirection isn’t conducive to SEO at the moment. The spa-Github-Pages authors also suggest using SSG or paid Netlify if you need SEO.

SSG scheme

The SSG solution is called static Site Generator. Nuxt, Gatsby and other SEO enabling frameworks in the community can all be classified as such SSG solutions.

Taking NUxT framework as an example, based on reductive routing, it converts VUE files into static web pages by executing nuxt generate command.

Example:

-| pages/
---| about.vue/
---| index.vue/
Copy the code

Statically, it becomes:

-| dist/
---| about/
-----| index.html
---| index.html
Copy the code

After the route has been static, the document directory structure can now be hosted by any static site service provider.

Prerendering scheme

After the analysis of SSG scheme above, the key to optimization of SPA site has been on the paper at this time — static routing. Compared with nuxt, Gatsby and other frameworks, create-React-Doc is flexible and freely organized in directory structure. It is built on the idea that files are sites, and it is easy to migrate existing Markdown documents.

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

-| BasicSkill/
---| basic/
-----| DOM.md
-----| HTML5.md
Copy the code

When static, it should become:

-| BasicSkill/
---| basic/
-----| DOM
-------| index.html
-----| HTML5
-------| index.html
Copy the code

After research, the idea clicked with the prerender-SPa-Plugin pre-rendering solution. The principle of the pre-rendering scheme can be seen in the figure below:

So far the technology selection has been set to implement SSG using a pre-rendering scheme.

Prerendering scheme practice

The steps of create-react-doc in prerendering are summarized as follows (see Mr For full changes):

Example Change the Hash route to the history route. Because the History routing structure is a natural match for the document static directory structure.

export default function RouterRoot() {
  return (
- 
      
+ 
      
      <RoutersContainer />
- 
+ )}Copy the code

Added on the basis of development environment and build environmentPre-rendered environmentAt the same time, the environment of the route is matched. The main problem is solvedResource filewithSubpath under the main domain nameThe corresponding relationship between. It’s a tortuous process, so if you’re interested, you can see itissue.

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={() => { ... }} / >Copy the code

Compatible with prerender-SPa-plugin for Use in WebPack 5.

The official version does not currently support WebPack 5, please refer to issue for details. Meanwhile, the author has a requirement for callback after pre-rendering. Therefore, a version is currently forked out to solve the above problems.

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

SEO optimization additional buff, site seconds open?

At this point, look at the changes of FP, FCP, LCP and other indicator data before and after site optimization.

Taking blog site as an example, the index data before and after optimization are as follows (data index statistics come from accessing GH-Pages without using ladders):

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

After optimization: after adding the pre-rendering scheme, the first rendering time node will start within 1s, and LCP will start within 1.5s.

Comparison before and after optimization: the first screen rendering speed increased by 8 times, and the maximum content rendering speed increased by 11 times. This want to optimize SEO, the results of site performance optimization and get a way.

Generate a Sitemap

After the completion of pre-rendering to achieve static site routing, SEO is one step closer to the goal. Put aside SEO optimization details, go straight to the SEO core hinterland site map.

The Sitemap format and field meanings are described as follows:


      
<urlset>
  <! </url> </url> </url> </url>
  <url>
    <! -- Mandatory, URL link address, length cannot exceed 256 bytes -->
    <loc>http://www.yoursite.com/yoursite.html</loc>
    <! This tag can be used to specify when the link was last updated.
    <lastmod>2021-03-06</lastmod>
    <! This tag can be used to tell the link how often it is likely to be updated.
    <changefreq>daily</changefreq>
    <! This tag can be unsubmitted to specify the priority ratio of this link to other links, ranging from 0.0 to 1.0 -->
    <priority>0.8</priority>
  </url>
</urlset>
Copy the code

The lastmod, Changefreq, and Priority fields in sitemap are not that important for SEO. See how-to-create-a-sitemap

According to the above structure, the author developed create-react-doc sitemap generation package crd-generator-sitemap, whose logic is to concatenate pre-rendered routing paths into the above format.

To automatically generate sitemap during automated distribution, users simply add the following parameters to the site root directory config.yml.

seo:
  google: true
Copy the code

Try submitting the generated site map to the Google Search Console,

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

Before optimization: Only one data is searched.

Optimized: Search for location data declared in the site map.

So far, the complete process of using SSG to optimize SPA site to achieve SEO has been completely realized. The next step is to refer to the search engine optimization (SEO) novice guide to do some SEO details optimization and support more search engines.

A link to the

create-react-doc
why-is-my-website-not-showing-up-on-google/
A Technical Guide to SEO With Gatsby.js
Optimization direction: Single-page application of multi-route prerendering guide
Is there no alternative to SSR?
Front-end SEO optimization based on SSR/SSG

The original source

If this article has been helpful to you, you are welcome to star, feedback.

SEO practices in SPA sites

primers

background

Search engine optimization