VuePress 博客之 SEO 优化（一） sitemap 与搜索引擎收录

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。

本篇讲讲如何进行 SEO 优化。

相关问答

Q1: 1. 生成 sitemap

借助 vuepress-plugin-sitemap 生成站点地图：

1.1 安装

yarn add vuepress-plugin-sitemap -D

1.2 修改 config.js

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

1.3 如果生成失败

如果 build 的时候，生成失败：

这可能是因为你设置了 lastUpdated 或者使用了 @vuepress/last-updated 插件，当两个一起用的时候，因为时间对象的缘故，产生了报错，我们搜索 vuepress-plugin-sitemap 的 issues，可以找到一个解决方法，我们修改一下 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 成功

如果 build 成功，我们则会在 dist 目录里看到一个 sitemap.xml，大致类似于这种结构：

<?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 地址

我们部署到服务器上，就可以获得一个 sitemap 地址，比如我的就是：

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

有了这样一个 sitemap 地址，我们可以方便的提交给各个搜索引擎平台，方便根据 sitemap 抓取我们的页面。

Q2: 2. 百度收录

2.1 添加站点

登陆百度搜索资源平台，进入用户中心：

点击「添加站点」，可能需要你完善下账户信息，然后会进入站点信息填写页面，分为三步：

第一步：输入站点

第二步：站点属性

第三步：验证网站

之所以需要验证网站，是为了证明你是该域名的拥有者，验证成功后，可以快捷批量添加子站点，查看所有子站数据，无需再一一验证子站点。

这里我采用的是 HTML 标签验证的方式，根据图中的代码指示，修改 vuepress 的 config.js 文件：

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

然后点击「完成验证」，就会出现：