优化VuePress博客的SEO

前言

为了提高VuePress的SEO，我用了下面几个方法优化SEO

• 生成 sitemap （站点地图）
• 为页面添加 description 和 keywords
• 为页面添加 JSON-LD

生成 sitemap

使用插件 vuepress-plugin-sitemap 来生成站点地图

安装插件：

yarn add vuepress-plugin-sitemap -D

在 config.js 中配置：

module.exports = {
	plugins: [
		[
			"sitemap",
			{
				hostname: "https://www.meowpass.com",
			},
		],
	]
}

添加 description、keywords

编辑 config.js ：

module.exports = {
    title: "title",
    description: 'description',
    head: [
        "meta",
            {
                name: "keywords",
                content: "前端,Vue,树莓派,Linux,秋澪,冬安,CSS,HTML",
            },
    ]
}

每个文章的 Front Matter 中也写上文章相关的 description、keywords：

---
meta:
  - name: description
    content: hello
  - name: keywords
    content: super,duper,SEO
---

添加 JSON-LD

因为没有现成的插件，所以需要自己写一个插件，参考 VuePress 博客之 SEO 优化（五）添加 JSON-LD 数据 文章，对里面的代码做了些小小的修改

编写插件

在 .vuepress 目录下新建文件夹 vuepress-plugin-jsonld ，然后在新建的文件夹中执行 npm init

新建 index.js：

const { path } = require("@vuepress/shared-utils");

module.exports = (options) => ({
    name: "vuepress-plugin-jsonld",
    enhanceAppFiles() {
        return [path.resolve(__dirname, "enhanceAppFile.js")];
    },
    globalUIComponents: ["JSONLD"],
});

新建 enhanceAppFile.js：

import JSONLD from "./JSONLD.vue";

export default ({ Vue, options }) => {
    Vue.component("JSONLD", JSONLD);
};

新建 JSONLD.vue：

<template></template>

<script>
export default {
    created() {
        if (typeof this.$ssrContext !== "undefined") {
            this.$ssrContext.userHeadTags += `<script type='application/ld+json'>
            {
                "@context": "https://schema.org",
                "@type": "Article",
                "headline": "${this.$page.title || this.$title}",
                "url": "${"https://www.meowpass.com" + this.$page.path}",
                "image": [
                    "https://www.meowpass.com/assets/img/head-portrait.webp"
                ],
                "datePublished": "${
                    (this.$page.frontmatter.date && new Date(this.$page.frontmatter.date).toISOString()) ||
                    (this.$page.lastUpdated && new Date(this.$page.lastUpdated).toISOString()) ||
                    new Date().toISOString()
                }",
                "dateModified": "${(this.$page.lastUpdated && new Date(this.$page.lastUpdated).toISOString()) || new Date().toISOString()}",
                "author": [{
                    "@type": "Person",
                    "name": "薄荷屋",
                    "url": "https://www.meowpass.com"
                }]
            }
            <\/script>`;
        }
    },
};
</script>

根据自己博客的信息，修改 JSONLD.vue 中的内容

使用插件

修改 config.js：

module.exports = {
	plugins: [
		require('./vuepress-plugin-jsonld')
	]
}

检验

发布后，使用 Google 的 富媒体搜索测试 来检查是否生效