[原创]Vuepress SEO优化教程(附完整方法)

作者: geekzl管理员 发布时间: 2020-12-23 23:12:26 768 人阅读   百度未收录

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

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

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

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

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

vuepress seo优化教程1 - 极客中心

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

百度站长: 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'
  ]
};

给文章页添加面包屑导航

面包屑导航,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,如下图~

vuepress seo优化教程2 - 极客中心

移动端优化

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;
    }

即可。

SEO得分: 97

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

vuepress seo优化教程3 - 极客中心



版权声明

当前位置:极客学长 | 极客中心 » Vuepress SEO优化教程(附完整方法)

发表评论

Captcha Code

我还会在以下平台发布内容

知乎 CSDN