Vuepress SEO优化教程(附完整方法)

VuePress的SEO优化教程、指南与方法

真不是沪小羊吹啊，Google给沪小羊的vuepress网站的SEO水平打97分。

不少人经常提到vuepress自带强大的seo，其实与其他静态网站生成器相比，vuepress除了PWA做得好一点，SEO方面基本上也没啥优势了。外观上与gitbook相似~

今天，沪小羊来细说该vuepress该怎么进行SEO优化~

本人的Vuepress站点 - 大白的故事 | https://dbdgs.cn，优化前的SEO得分: 69。

提交到各大搜索引擎的站长管理后台中

百度站长: https://ziyuan.baidu.com

Bing站长: https://www.bing.com/webmasters

Google: <https://search.google.com/search-console>

提交比较简单，不清楚的朋友自行搜索，这里就不展开了。

优化url

对于新站而言，扁平化的url爬虫爬到的可能性比较大，

我的vuepress站点的文章url是: dbdgs.cn/postname.html这种形式。

具体操作，就是在markdown的frontmatter中把 permanentlink 设置成相对路径即可。

我有个文件名是 00.CSS教程和技巧收藏.md的markdown 文件，

当设置 permalink: /css-tips.html 时，发表后对应的url就会是 https://dbdgs.cn/css-tips.html 。

另外, url中尽量不要出现#、?等特殊字符，尽量不要出现大写字母。

meta优化

使用插件 webmasterish/vuepress-plugin-autometa 可以自动生成meta标签及其内容，包括 meta keywords, meta description, open graph (比如: og:img 等) 以及Twitter card, facebook card等。

首先，需要自行如下命令:

npm install -D vuepress-plugin-autometa

安装插件。

然后修改 docs\.vuepress 路径下的 config.js 文件。

在 config.js 文件开头加入代码:

const autometa_options = {
  site: {
    name: 'Bravo Yeung',
    twitter: 'yanglr',
  },
  canonical_base: 'https://dbdgs.cn',
};

然后，在config.js 的 plugins区域加入:

    ['autometa', autometa_options],

添加sitemap

sitemap可以通过另一个常用的插件vuepress-plugin-sitemap来实现。

安装方法是执行如下命令:

npm install vuepress-plugin-sitemap

接着需要打开config.js, 在config.js 的 plugins区域加入:

['sitemap', {
      hostname: "https://dbdgs.cn",
      // 排除无实际内容的页面
      exclude: ["/404.html"]
    }
]

等构建完毕后，访问 https://dbdgs.cn/sitemap.xml 就能看到了~

增加robots.txt文件

robots.txt的增加就不需要插件了，只需要找到你vuepress中部署时相应的public文件夹，然后创建robots.txt文件即可。

比如我的相应目录是 .\docs.vuepress\public，我创建了的robots.txt文件内容如下:

Sitemap: https://dbdgs.cn/sitemap.xml

User-agent: *

增加feed

可以基于插件 webmasterish/vuepress-plugin-feed 来做。

安装方法:

npm install -D vuepress-plugin-feed

需要注意的是:

_posts文件夹以外地方的markdown文件，都需要加上下面的配置才能确保出现在 rss.xml中。

feed:
  enable: true

后面发布时，就能自动生成feed了。

自动推送到百度

安装vuepress-plugin-baidu-autopush插件，

npm install -D vuepress-plugin-baidu-autopush

然后更新配置文件.vuepress/config.js中的plugins部分:

module.exports = {
  plugins: [
    'vuepress-plugin-baidu-autopush'
  ]
};

JavaScript

给文章页添加面包屑导航

面包屑导航，Google、百度都会在爬虫抓取时使用。
页面的面包屑导航如果符合微数据 Breadcrum 格式，是会显著提示访问流量的，下厨房网站的案例可以参考，代码可以直接模仿之。

面包屑导航，百度是有专门的专利的 - CN103714093A - 一种网站重点页面的挖掘方法及装置, 于2012年发表。

添加社交分享组件

这个有现成的插件，github上有。沪小羊就不具体展开了。

gitalk, 利用github issues可产生github外链。
csdn/博客园/掘金/51cto/SegmentFault/新浪博客等等的外链都可以弄一些。

具体方法是：到相应网站发文章的摘要和目录部分，末尾加上详细内容参考https://www.geekzl.com/weibo-link-whitelist.html 这样的具体文章链接。

给外部链接加上nofollow

据vuepress的官方文档可知，markdown.externalLinks的默认值为: { target: '_blank', rel: 'noopener noreferrer' } , 而我们需要加上nofollow，修改config.js中对应的选项 markdown -> externalLinks 即可，这里只需在合适的地方加上nofollow，如下图~

移动端优化

head中增加如下两行，已加的话就不用重复加了~

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

PWA优化

增加manifest.webmanifest文件

https://dbdgs.cn/manifest.webmanifest

页面中的img标签都加上alt

img加上alt可替换文字是很必要的，防止img无法加载时，也能起到描述图片的功能。

高阶技巧：使用JSON-ld结构化数据

Google推荐向页面的<head>中加入json-ld代码。

在 Layout.vue组件的 Created() 方法中加入如下代码:

    var siteUrl = this.$site.themeConfig.domain;      
    if (typeof this.$ssrContext !== "undefined") {    
      var pageTitle = this.$page.title ? this.$page.title.toString().replace(/["|'|\\]/g, '') : null;
      var imageUrl = this.$page.frontmatter.image ? this.$page.frontmatter.image : 'https://cdn.jsdelivr.net/gh/dbdgs/images@main/dabai.jpg';
      var siteName = this.$site.title || null;
      var publishedTime = dayjs(this.$page.frontmatter.date).toISOString() || dayjs(this.$page.lastUpdated).toISOString() || moment().toISOString();
      var modifiedTime = dayjs(this.$page.lastUpdated).toISOString() || moment().toISOString();
      var pageUrl = siteUrl + this.$page.path;
      var pageType = this.$page.path.length <= 1 ? 'website' : 'article' ;
      // var author = this.$site.themeConfig.personalInfo ? this.$site.themeConfig.personalInfo : null;    

      const data =
      {
          "@context": "https://schema.org",
          "@graph": [
              {
                  "@type": "ImageObject",
                  "@id": imageUrl,
                  "inLanguage": "zh-CN",
                  "url": imageUrl,
                  "width": 266,
                  "height": 266,
                  "caption": pageTitle + " - " + siteName
              },
              {
                  "@type": "WebPage",
                  "@id": pageUrl,
                  "url": pageUrl,
                  "name": this.$title,
                  "isPartOf": {
                      "@id": siteUrl,
                      "name": siteName
                  },
                  "primaryImageOfPage": {
                      "@id": siteUrl,
                      "name": siteName
                  },
                  "datePublished": publishedTime,
                  "dateModified": modifiedTime,
                  "description": this.$description,
                  "inLanguage": "zh-CN",
                  "potentialAction": [
                      {
                          "@type": "ReadAction",
                          "target": [
                              pageUrl
                          ]
                      }
                  ]
              },
              {
                  "@type": pageType,
                  "@id": pageUrl,
                  "isPartOf": {
                      "@id": pageUrl
                  },
                  "author": {
                      "@id": siteUrl,
                      "name": siteName
                  },
                  "headline": this.$title,
                  "datePublished": publishedTime,
                  "dateModified": modifiedTime,
                  "commentCount": 30,
                  "publisher": {
                      "@id": siteUrl,
                      "name": siteName
                  },
                  "image": {
                      "@id": imageUrl
                  },
                  "articleSection": this.$title,
                  "inLanguage": "zh-CN",
                  "potentialAction": [
                      {
                          "@type": "CommentAction",
                          "name": "Comment",
                          "target": [
                              pageUrl
                          ]
                      }
                  ]
              },
              {
                  "@type": "Person",
                  "@id": siteUrl,
                  "name": siteName
              },
              {
                  "@context": "https://schema.org/",
                  "@type": "Recipe",
                  "name": this.$description,
                  "description": this.$description,
                  "author": {
                      "@type": "Person",
                      "name": siteName
                  },
                  "image": [
                      imageUrl
                  ],
                  "url": pageUrl,
                  "recipeIngredient": [
                      "第1步",
                      "第2步",
                      "第3步",
                      "第4步"
                  ],
                  "recipeInstructions": [
                      {
                          "@type": "HowToStep",
                          "text": "第1步",
                          "url": pageUrl + "#step-1"
                      },
                      {
                          "@type": "HowToStep",
                          "text": "第2步",
                          "url": pageUrl + "#step-2"
                      },
                      {
                          "@type": "HowToStep",
                          "text": "第3步",
                          "url": pageUrl + "#step-3"
                      }
                  ],
                  "datePublished": publishedTime,
                  "@id": pageUrl,
                  "isPartOf": {
                      "@id": siteUrl
                  },
                  "mainEntityOfPage": siteUrl
              }
          ]
      };

      //creating the script element and storing the JSON-LD
      var my_jsonld = '\n<script type="application/ld+json">\n' + JSON.stringify(data, null, 2) + "\n<\/script>\n";
      this.$ssrContext.userHeadTags += my_jsonld;
    }

JavaScript

SEO得分: 97

Google的 https://web.dev/measure/ 或 lighthouse插件给出的SEO得分从69变成现在的97。

5 / 5 ( 6

votes )

VuePress的SEO优化教程、指南与方法

提交到各大搜索引擎的站长管理后台中

优化url

meta优化

添加sitemap

增加robots.txt文件

增加feed

自动推送到百度

给文章页添加面包屑导航

添加社交分享组件

给外部链接加上nofollow

移动端优化

PWA优化

页面中的img标签都加上alt

高阶技巧：使用JSON-ld结构化数据

SEO得分: 97

Recommend

SEO是什麼？怎麼學？ SEO完整學習指南（2021年版）

Wordpress网站SEO优化教程

VuePress教程之部署到Github Action

新站SEO教程之用图说透页面SEO优化

VuePress 博客优化之 last updated 最后更新时间如何设置

VuePress 博客优化之添加数据统计功能

VuePress 博客优化之开启 Algolia 全文搜索

搭建 VuePress 站点必做的 10 个优化

VuePress 博客优化之开启 HTTPS

友情链接在SEO优化中的作用及寻找方法

About Joyk