首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[原创]Vuepress SEO优化教程(附完整方法)

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

作者头像
极客中心
发布2021-01-21 15:51:55
3.7K0
发布2021-01-21 15:51:55
举报
文章被收录于专栏:极客中心极客中心

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

本文阅读重点 <

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

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

3 优化url

4 meta优化

5 添加sitemap

6 增加robots.txt文件

7 增加feed

8 自动推送到百度

9 给文章页添加面包屑导航

10 站内优化

11 添加社交分享组件

12 外链建设

13 给外部链接加上nofollow

14 移动端优化

15 PWA优化

16 页面中的img标签都加上alt

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

18 SEO得分: 97

真不是沪小羊吹啊,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'
  ]
};

给文章页添加面包屑导航

面包屑导航,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;
    }

即可。

SEO得分: 97

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

5 / 5 ( 5 votes )

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-12-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • VuePress的SEO优化教程、指南与方法
  • 提交到各大搜索引擎的站长管理后台中
  • 优化url
  • meta优化
  • 添加sitemap
  • 增加robots.txt文件
  • 增加feed
  • 自动推送到百度
  • 给文章页添加面包屑导航
  • 站内优化
  • 添加社交分享组件
  • 外链建设
  • 给外部链接加上nofollow
  • 移动端优化
  • PWA优化
  • 页面中的img标签都加上alt
  • 高阶技巧:使用JSON-ld结构化数据
  • SEO得分: 97
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档