SEO Optimization of VuePress Blog (1) Sitemap and Search Engine Indexing

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

This article talks about how to optimize SEO.

1. Generate sitemap

Generate a sitemap with the help of vuepress-plugin-sitemap :

1.1 Installation

yarn add vuepress-plugin-sitemap -D

1.2 Modify config.js

// .vuepress/config.js
module.exports = {
  plugins: {
    'sitemap': {
      hostname: 'https://ts.yayujs.com'
    },
  }
}

1.3 If the build fails

If the build fails:

This may be because you have set lastUpdated or used the @vuepress/last-updated plugin. When the two are used together, an error occurs because of the time object. We search for the issues of vuepress-plugin-sitemap, and we can find a solution , Let's modify config.js:

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      '@vuepress/last-updated',
      {
        transformer: (timestamp, lang) => {
          return new Date(timestamp).toLocaleDateString();
        }
      }
    ],
    [
      'sitemap',
      {
        hostname: 'https://ts.yayujs.com'
      }
    ]
  ]
}

1.4 build success

If the build is successful, we will see a sitemap.xml in the dist directory, roughly similar to this structure:

<?xml version="1.0" encoding="utf-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://ts.yayujs.com/learn-typescript/</loc>
    <lastmod>2022-01-05T16:00:00.000Z</lastmod>
    <changefreq>daily</changefreq>
  </url>
  <url>
    <loc>https://ts.yayujs.com/learn-typescript/handbook/ConditionalTypes.html</loc>
    <lastmod>2022-01-05T16:00:00.000Z</lastmod>
    <changefreq>daily</changefreq>
  </url>
</urlset>

1.5 sitemap address

When we deploy to the server, we can get a sitemap address. For example, mine is:

https://ts.yayujs.com/learn-typescript/sitemap.xml

With such a sitemap address, we can easily submit it to various search engine platforms to crawl our pages according to the sitemap.

2. Baidu Index

2.1 Add a site

Click "Add Site", you may need to complete the account information, and then you will enter the site information filling page, which is divided into three steps:

Step 1: Enter site

Step 2: Site Properties

Step 3: Verify Website

The reason why you need to verify the website is to prove that you are the owner of the domain name. After the verification is successful, you can quickly add sub-sites in batches and view all the data of the sub-sites without needing to verify the sub-sites one by one.

Here I use the HTML tag verification method. According to the code instructions in the figure, modify the config.js file of vuepress:

// config.js
module.exports = {
    title: "title",
    description: 'description',
    head: [
        ['meta', { name: 'baidu-site-verification', content: '填写自己的 code' }]
    ]
}

Then click "Finish Verification" and it will appear:

Click "I know", you will jump to HTTPS authentication here:

After waiting for a day, it will show that the authentication is successful:

2.2 Submit for inclusion

On the site management page, click "General Collection":

Common indexing tools can actively push resources to Baidu search, shorten the time for crawlers to discover website links, and do not guarantee the indexing and display effect.

Three methods are provided here: API submission, sitemap, and manual submission. How to choose? Refer to platform tools manual :

API push: is the fastest way to submit. It is recommended that you immediately push the new link of the site to Baidu through this method to ensure that the new link can be included in Baidu in time.
sitemap: You can regularly put your website link into the Sitemap, and then submit the Sitemap to Baidu. Baidu will periodically crawl and check the Sitemap you submit, and process the links in it, but the inclusion speed is slower than API push.
Manual submission: If you do not want to submit through the program, you can manually submit the link to Baidu in this way.

Here I choose the sitemap method, and fill in the sitemap address obtained in the previous section:

After submitting, it will enter the state of waiting for crawling:

3. Google Index

3.1 Add site

Visit search.google.com , if you have not added a site before, it will directly let you add a site:

3.2 DNS Verification Site

Here I choose "Domain". After entering the domain name, you will be asked to perform DNS verification:

Since I purchased the domain name from Wanwang, I directly visit Cloud Domain Name Console , and then select the corresponding domain name and click "Resolve":

Then click "Add Record":

Select TXT for the record type, and fill in the content provided by Google for the record value:

After adding, because DNS resolution takes a while, it is best to wait a few minutes before verifying. After the verification is successful, it will enter the site background:

3.3 Submit for inclusion

Click "Site Check" in the left navigation bar, enter the domain name to be checked, if it is not included in Google, click "Request Indexing":

After testing the indexability of the actual URL, it appears:

3.4 Submit a sitemap

3.5 Confirmation of inclusion

You can use site:domain name in the Google search bar to confirm whether the site has been indexed by Google

4. 360 Recording

4.1 Add site

4.2 Authenticating the site

4.3 Submit a sitemap

5. Other platforms

In addition to these three platforms, there are Bing webmaster , Sogou webmaster , Shenma webmaster , the operations are basically similar, so I won't say much.

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 27th article, the address of the full series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.