DEV Community: MuYunyun

SEO practice in SPA site

MuYunyun — Sun, 14 Mar 2021 05:28:44 +0000

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.

Create React Doc: A Markdown Doc Site Generator For React

MuYunyun — Sun, 05 Jul 2020 19:52:43 +0000

Create React Doc

Create React Doc is a markdown doc site generator for React. You can write markdown sites or blogs with no build configuration just like create-react-app.

Features

Write markdown docs with no build configuration.
Lazy load for markdown data.
Generate menu autoly based file directory.
Support deploy to GitHub Pages.

Sites built with create-react-doc

Quick Overview

npx create-react-doc my-doc
npm install && cd my-doc
npm start

Then open http://localhost:3000/ to see your doc.
When you're ready to deploy to production, create a minified bundle with npm run build.

Usage

create-react-doc is very easy to use. You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

You only install it as a package so that you can create your own website or blog. You may
choose one of the following methods:

npx

npx create-react-doc my-doc

npm

npm init create-react-doc my-doc

yarn

yarn create create-react-doc my-doc

Once the installation is done, you can open your project folder:

npm install && cd my-doc

Inside the newly created project, you can run some built-in commands:

`npm start` or `yarn start`

Runs the doc in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.

`npm run build` or `yarn build`

Builds the doc for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your doc site is ready to be deployed.

`npm run deploy` or `yarn deploy`

The doc'll deployed to GitHub Pages rely user, repo in config.yml

config.yml

There is some configuration provided for you to adjust doc sites.

# Site title
title: Time Flying

# Witch files to show as Menu
## you can also set detailed dir, such as BasicSkill/css
menu: React,BasicSkill,Algorithm
## set init open menu keys
menuOpenKeys: /BasicSkill

# Github
## if you want to show editing pages on github or deploy to GitHub Pages, you should config these arguments.
user: MuYunyun
repo: blog
branch: master            # the default value of branch is master
deploy_branch: gh-pages   # which branch to deploy.(default: gh-pages)
# publish:                # if you want upload to gitlab or other git platform, you can set full git url in it

# Available values: en| zh-cn
language: en

Advanced Usage

If you not want to show some private files, you can set it in .gitignore, and the file'll be ignored to show in the docs.

It'll provide more features in the future, looking forward to your comment there!

Thank your read very much.

The Annual Summary Of 2019

MuYunyun — Sat, 04 Jan 2020 15:05:42 +0000

Time is flying, it arrives at the end of year again. This is my first year working in PinDuoDuo inc and it seems I arrive in the company yesterday. This point is a good chance to talk with(recognize) myself again. I try to conclude from work, output, life and destination.

Learn from work

The first course I learn from my team is about starting with the end. It means everything we do today is prepared for the tomorrow. In the other word, we should realize witch period the thing we're doing is in, and our team write summary every week to make sure the established goals become closer and closer.

The second course I learn from the work is to try to use English more. There are so much rich resource in Medium, MDN, Frontend Masters and even in twitter. It's the first time I met with so many foreigners engineer in the JSConf but I can't talk with them fluently. It's obviously using English skillfully will open your eyes and improve efficiency looking for some information.

The last but most important is how to communicate. It's artistic to describe something easily to make others understand. When arriving at our team at first, one of my leader's advice is the best way to join in the team is to share —— sharing ideas, knowldege and feeling. My colleagues are so excellent I learn a lot from them in these technical sharing parties every week. At the meanwhile I also share some ideas in it.

Output of the article

There are ten new articles added to my blog, the direction is to talk about React, JavaScript, CSS and so on. If there are mistakes in it, welcome point out.

There will be more creative articles to add in the future. Let's grow up together.

Life

I enjoy the quiet time sitting in the Cafe the whole day in Saturday and it's also nice to chat with friends or family there.

And in other some weekend days, I take part in some FE conferences this year —— FDConf, VUE Conf, D2, SEE Conf and so on. From these activities I learn some some new knowledge. For example, the article How to make page run smoothly is written after listening the sharing of Liu Bowen in FDConf. And luckily, I get the chance to take photo with Evan You and get the
signature from him.

At the same time, it's happy to meet with old friends and make with new friends in these activities.

Checklist && Destination

Checking the plan of last year before making plans in new year.

Reading five technical books and a not technical book, ~~learn Functional Programming~~: It is a shame not achieve this target. Instead of reading the whole books, I read more single posts or chapters partly in the last year.
Finishing ~~a valuable project~~: There are some valuable projects in my daily work, they're still in progress.
~~Deep into React community~~, submit a pr: There is some deep analyze in React this year, however it still needs making extra effort for making a pr;
Deep ~~into the document of Node.Js~~: the work of this year is connected with UI and component more closely, so the document of Node.Js has no much chance reading in practice;
~~Improving the skill of communication, do a sharing in a party~~: The communication skill gets some improved, however it still needs be strengthened;
~~Invite friends fro coffee(at least 12)~~

Keeping going on in the new year. Here lists some direction.

Keeping reading and writing. Creating more personal thoughts;
Improving listening/writing skill in English continually;
- Way: watching ten+ english movies and try to write some english posts.
Improving the basic skills in data structure and composition principle continually;

INHERITED AND NON-INHERITED IN CSS

MuYunyun — Sat, 07 Dec 2019 09:18:30 +0000

When I look up css properties in MDN's specifications section, there are some properties in it and it seems unfamiliar to me. So I try to find out some of them today.

The follow list try to give one word to specify the meaning of them.

Initial value: Specify the CSS property's default value;
Applies to: Specify which elements to apply to;
Inherited: Specify the CSS property is inherited or non-inherited;
Media: Specify how a document is to be presented on different media;
Computed value: The CSS property that is transferred from parent to child;
Animation type
Canonical order: Some CSS properties(font、background...) have their own CSS property value order.

And this article is to discuss the topic about the knowledge of inherited and non-inherited.

Initial value between inherited and non-inherited

The initial value of a CSS property is its default value.

The Initial value has two different behavior between inherited properties and non-inherited properties.

For inherited properties, the initial value is used on the root element only.

<span style="color: red">
  hello, <em>CSS</em>
</span>

The result is the color of both span and em element are red. Because the color is an inherited property, the element will get the color property from the parent recursively until to document.

For non-inherited properties, the initial value is used on every element. When no value for a non-inherited property has been specified on an element, the element gets the initial value directly.

<span style="border: 1px solid black">
  hello, <em>CSS</em>
</span>

The result is the border is only effected on span element, not em. Because the border is a non-inherited property, and there is no border property specified on the em, so the em get the border's initial value none.

It mentioned much times about inherited value and non-inherited value above, and now we sort out css properties.

Inherited Type

I've collected some inherited types in css, they are listed as follow:

Font Type: font-style、font-variant、font-weight、font-stretch、font-size、font-family、color、line-height;
Space Type: letter-spacing、word-spacing、white-space;
Letter Type: text-align、text-indent、text-shadow、text-transform;
List Type: list-style、list-style-type、list-style-position;
Others: visibility、cursor;

Non-Inherited Type

In the opposite of inherited type, the non-inherited types are listed as follow:

Layout Type: float、position、left、right、top、bottom、z-index、display
Box Type: width、max-width、min-width、height、max-height、min-height、margin、padding、border;
Background Type: background-size、background-image、background-clip、background-color、background-origin、background-position、background-repeat;
Others: overflow、text-overflow、vertical-align;

Recap

These section introduces the inherited concept in CSS, and distinguish some inherited type and some non-inherited type from css properties. Hope it's helpful for you.