🧪 front-end lab will serve as a taxonomy of some front-end solutions, 🍚 front-end dining hall will focus on horizontal comparison and evaluation, 📔 front-end small notes will be a summary of some front-end basics.

This article uses the author to create the V-green gold digging theme, welcome everyone to use, put forward valuable opinions.

With the popularity of the three front-end frameworks, SPA (single-page Application) Page or project has gradually revealed its incomparable advantages, occupying an increasing proportion in the Web end, favored by developers and designers.

However, spa-type sites have a fatal point, SEO (Search Engine Optimization). This is because spa-type pages are not suitable for crawlers to visit directly, and a site that does not appear in the first few pages of a keyword search will be nearly invisible on the World Wide Web.

How to improve the SEO of spa-type website? See below at 🍉

Mainstream search engine crawler UA

Baidu Baidu

Baidu search resource platform ziyuan.baidu.com/?castk=LTE%…

Link submitted address ziyuan.baidu.com/linksubmit/…

Baidu crawler UA

Mozilla / 5.0 (Linux; u; Android 4.2.2; zh-cn;) AppleWebKit/534.46 (KHTML,like Gecko) Version/5.1 Mobile Safari/10600.6.3 (compatible; Baiduspider / 2.0; + www.baidu.com/search/spid.)

Mozilla / 5.0 (compatible; Baiduspider / 2.0; + www.baidu.com/search/spid…

Google Google

Google Search Console search.google.com/search-cons…

Google Crawler UA

Mozilla / 5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot / 2.1; +www.google.com/bot.html)

General strategies for web SEO optimization

Several factors that influence SEO rankings

Web search engines usually focus more on the following aspects of a website:

Readability 📰

The information architecture needs to be clear, the site needs to be as accessible as possible, the URL design is friendly, the title content is clear, the page relevance information aggregation and fusion.

Identify a theme (core keywords) for the site, the whole site around this keyword expansion and relevance to do, as much as possible in the web page we define the keywords.
Security 🔒

Whether a website uses HTTPS, the more secure protocol, is also part of the weight that search engines will consider.
Mobile optimization 📱

Since 2019, Google has adopted a mobile-first search index, so mobile optimization is also a particular concern.
Performance and user engagement 🚀

Crawlers are impatient and give low search weight to pages that take too long to load, so optimizing the performance of page rendering is not only a responsibility for the user, but also a benefit for SEO.

For those pages that have introduced Baidu statistics or Google statistics plug-ins, the statistics script will record the user’s engagement in the background (such as the length of the page stay), which will be included in the SEO weight calculation.
Authority and trust 🥂

Website outside the chain is in other websites to import their own website links, high quality PR outside the chain can quickly improve the weight of their own website.

Friendchain is its own website contains links to other websites, and the effect is similar to the external chain.

If you don’t have specific ideas for how to improve your site, use Lighthouse to evaluate your page and follow the recommendations it gives you.

Site theme
Outer chain and friend chain weights

How to make good use of Meta Tag

Meta tags are used to provide search engines with information about a web page that is not visible to visitors.

The site Title should be less than 70 words in length, and the recommended format is “< Title >-< Other content >-< site name >”.
Description provides the search engine with a short Description of the web page, which should be less than 140 characters in length
Meta-keywords Keywords Keywords of the web page
Meta-robots Robots manage whether a search engine can enter a web page

As shown in the following code, search engines are not allowed to access the web page and are not allowed to access the link.

<meta name="" robots" " content=Noindex ""," nofollow"/ >
Copy the code

Here we take an example 🌰

<header>
  <title>Taobao - tao! I like</title>
  <meta
    name="description"
    content="Taobao.com - Asia's largest online trading platform, providing all kinds of clothing, beauty, home, digital, phone/point recharge... Hundreds of millions of quality products, while providing guaranteed transaction (payment after receipt of goods) and other safe transaction protection services, and by the merchant to provide return commitment, damage repair and other consumer protection services, let you feel at ease to enjoy online shopping fun!"
  />
  <meta
    name="keyword"
    content="Taobao, pay treasure, online shopping, C2C, online trading, trading market, online trading, trading market, online shopping, online selling, shopping website, group purchase, online trade, safe shopping, e-commerce, rest assured to buy, supply and sale information, online shop, price, auction, open a shop on the net, the network shopping, discounts, free open a shop, online shopping, channels, stores"
  />.</header>
Copy the code

SPA website SEO optimization guide

In client-rendered SPA pages, since the content is compiled from Javascript and added to the Render Tree, you will most likely get empty container code like this if you look at the page source:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="manifest" href="/emoji-search/manifest.json" />
    <link rel="shortcut icon" href="/emoji-search/favicon.ico" />
    <title>Emoji Search</title>
    <link href="/emoji-search/static/css/main.2e862781.css" rel="stylesheet" />
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <a
      class="github-fork-ribbon"
      href="https://github.com/ahfarmer/emoji-search"
      title="Fork me on GitHub"
      >Fork me on GitHub</a
    >
    <script
      type="text/javascript"
      src="/emoji-search/static/js/main.d4350923.js"
    ></script>
  </body>
</html>
Copy the code

(I) Three solutions:

Server-side rendering, also known as SSR(Server Side Render), is more complex to implement.
Page caching services, prerender. IO, involving fee-based third-party services, or mid-tier enabling rendering.
Pre-rendering, also known as static page replacement, can be done by phantom. Js, Puppeteer or browser Copy outerHTML, with nginx.

This article will detail some of the implementation methods of the pre-rendering technique:

(2) How to judge crawler access or browser access

When crawler visits, special user Agent will be used. Take UA of Baidu Spider as an example, it will use “Mozilla/5.0 (Compatible; Baiduspider / 2.0; +www.baidu.com/search/s… … The word “Baiduspider” in UA means Baiduspider visited

(three) how to return static pages when baidu crawler visits

/assets/static/ to configure the nginx configuration file nginx.conf:

    location / {
        root   C:\projects\bzbclub-dist;
        index  index.html index.htm;

        if ( $http_user_agent~ *"Baiduspider"){ rewrite ^/index.html$ /assets/static/index.html last; }}Copy the code

If you want to do something with curl, use nginx -s reload to reload the url.

curl -A "Mozilla / 5.0 (compatible; Baiduspider / 2.0; + http://www.baidu.com/search/spider.html)" http://localhost:17082 > z:\temp\bzbclub.html
Copy the code

Open z:\temp\bzbclub.html to verify that the contents of the static page have been returned.

(4) how to generate static pages and optimize

Phantom.js

var fs = require("fs");
var page = require("webpage").create();
phantom.outputEncoding = "utf-8"; // Specify the encoding mode
page.open("http://localhost:17082".function (status) {
  if (status === "success") {
    fs.write("z:\\temp\\index.html", page.content, "w");
  } else {
    console.log("Page load failed");
  }
  phantom.exit(0); // Exit the system
});
Copy the code

Save this script asphantom-static-page.js, execute the script from the command line:

phantomjs phantom-static-page.js
Copy the code

Puppeteer

const fs = require("fs");
const puppeteer = require("puppeteer");
(async() = > {const browser = await puppeteer.launch({
    headless: false.// executablePath: "C:/Program Files (x86)/Google/Chrome"
  });
  const page = await browser.newPage();
  page.setViewport({
    width: 1920.height: 1800});await page.goto("http://localhost:3333");
  await page.screenshot({ path: "example.png" });
  const content = await page.content();
  fs.writeFileSync("./index.html", content);
  // await page.close();
  // await browser.close();}) ();Copy the code

Save this script aspupp-static-page.js, execute the script from the command line:

node pupp-static-page.js
Copy the code

Getting static page content from the browser (recommended) is less geeky than the first two, but it’s easy to use.
- First you need to create a new onestatic.html
- Then open the page in your browser that needs to generate static pages
- According to theF12Open the DevTool
- The mouse to select<html>TAB, right-click Copy > Copy OuterHTML
- Paste the content tostatic.htmlCan be saved
Static page compression optimization
- Open it in an editorstatic.htmlDelete all of them and their contents
- Browser to open the static page, pressF12Open DevTool to make sure no errors are reported
- Depending on the complexity of the page, the volume optimization program can be reduced to one-tenth of its original size

Verify the effect of

Search engine platforms, such as Google Search, provide tools like Google URL checkers that allow you to test spa-type PAGE SEO.

You can also visually see your site’s search ranking on the keyword results page of the search engine within three to five days, and gradually improve.

If the above can not solve your problem, you can contact the search engine platform to help solve.

Reference article links

Meta Tags and Search Engine Optimization
What are the steps and skills of SEO website optimization?
Angular2 SEO Guide
SPA SEO: A Single-Page App Guide to Google’s 1st Page
MDN – : document level metadata element

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[🧪 Front Lab] SEO guide for Spa-type pages

Mainstream search engine crawler UA

Baidu Baidu

Google Google

General strategies for web SEO optimization

Several factors that influence SEO rankings

How to make good use of Meta Tag

SPA website SEO optimization guide

(I) Three solutions:

(2) How to judge crawler access or browser access

(three) how to return static pages when baidu crawler visits

(4) how to generate static pages and optimize

Verify the effect of

Reference article links

[🧪 Front Lab] SEO guide for Spa-type pages

Mainstream search engine crawler UA

Baidu Baidu

Google Google

General strategies for web SEO optimization

Several factors that influence SEO rankings

How to make good use of Meta Tag

SPA website SEO optimization guide

(I) Three solutions:

(2) How to judge crawler access or browser access

(three) how to return static pages when baidu crawler visits

(4) how to generate static pages and optimize

Verify the effect of

Reference article links

Related Posts

Front-end testing Jest is easy to understand

Nuxt user authentication login

How to learn the front end in 2018?