关于javascript:VuePress-博客之-SEO-优化三标题链接优化

前言

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

本篇讲讲 SEO 中的一些细节优化。

1. 设置全局的 title、description、keywords

// config.js
module.exports = {
    title: "title",
    description: 'description',
    head: [['meta', { name: 'keywords', content: 'keywords'}]
    ]
}

对于题目如何写，参照老旧的《百度搜索引擎优化指南 2.0》:

咱们倡议网页题目能够这样形容：

首页：网站名称 或者 网站名称_提供服务介绍 or 产品介绍

频道页：频道名称_网站名称

文章页：文章 title_频道名称_网站名称

也能够参考这篇《百度搜寻网页题目标准》里的标准。

对于形容：

Meta description 是对网页内容的简练概括。如果 description 形容与网页内容相符，百度会把 description 当做摘要的抉择指标之一，一个好的 description 会帮忙用户更不便的从搜寻后果中判断你的网页内容是否和需要相符。Meta description 不是权值计算的参考因素，这个标签存在与否不影响网页权值，只会用做搜寻后果摘要的一个抉择指标。

对于关键词，留神 keywords 应用英文逗号分隔，中文逗号则会被认为是长句。

咱们间接看一个百度百科词条的设置：

2. 自定义页面 title、description、keywords

通过 Front Matter 自定义：

---
title: title
description: description
meta:
  - name: keywords
    content: super duper SEO
---

3. 图片增加 alt 属性

依据 Google 的老手 SEO 指南：

应用 alt 属性

为图片提供说明性文件名和 alt 属性阐明。alt 属性使您可能为图片指定代替文本，在图片因为某种原因不能显示时起到救场的作用。

为什么应用此属性？如果用户应用屏幕阅读器等辅助技术查看您的网站，则 alt 属性的内容会提供对于照片的信息。

另一个起因是，如果您将图片用作链接，则该图片的代替文本会等同于文字链接的定位文字。然而，如果文字链接能够起到雷同的作用，咱们倡议不要在网站的导航中应用太多图片作为链接。最初，优化图片文件名和代替文本可使图片搜寻我的项目（如 Google 图片）更好地了解您的图片。

4. 精简 url

参照《百度搜索引擎优化指南 2.0》：

URL 尽量短，长 URL 不仅不美观，用户还很难从中获取额定有用的信息。另一方面，短 url 还有助于减小页面体积，放慢网页关上速度，晋升用户体验。

参照 Google 搜寻核心的《SEO 老手指南》：

简洁网址易于传播内容信息

为网站上的文档创立形容精确的类别和文件名，不仅能够帮忙您更好地组织网站，而且能够为心愿链接到您的内容的用户创立更简略、易于应用的网址。如果网址极为简短、含意含糊，并且蕴含很少的可识别字词，访问者可能会望而生畏。

上面的网址可能会造成困惑且不易于应用：
https://www.brandonsbaseballcards.com/folder1/22447478/x2/14032015.html

如果您的网址有明确的含意，则该网址在不同上下文中都可能会更实用且更易于了解。
https://www.brandonsbaseballcards.com/article/ten-rarest-baseball-cards.html

像我文档的地址是：https://ts.yayujs.com/learn-typescript/handbook/TheBasics.html

其实其中的 learn-typescript 就是没有必要的，之所以会有这个，是因为之前应用 GitHub Pages，这是我对应的 GitHub 的仓库名，但如果是本人建站，其实就没有必要写这个了，咱们间接批改 config.js 中的 base 配置：

module.exports = {base: ''}

然而如果你的地址曾经对外收回去了呢？亦或者曾经被收录了，这个时候你能够通过 Nginx 的 301 重定向来实现：

    server {
        listen 443 ssl;
        server_name ts.yayujs.com;
              // ...
        location ^~ /learn-typescript/ {rewrite ^/learn-typescript/(.*)$ https://yayujs.com/$1 permanent;
                    alias /home/www/website/ts/;
        }
              // ...
   }

此时你再拜访 https://ts.yayujs.com/learn-typescript/handbook/EverydayType.html，就会跳转到 https://yayujs.com/handbook/EverydayType.html

5. 链接加上 nofollow

搜索引擎根本的 PageRank 算法，其根本假如是：更重要的页面往往更多地被其余页面援用。所以咱们能够应用 nofollow 来告知 Google 不要跟踪链接到的网页，这样就不会分走咱们页面的权重。

那为什么会有 nofollow 这种办法存在呢？这也很好了解，就比方一些你在你的博客发表了一个垃圾网站的评论，为了揭示别人，加了这个网站的链接，你当然不心愿这个网站因为你的名誉而获益。这时候就非常适合应用 nofollow。

应用 nofollow，咱们只用在链接上加上 nofollow 属性即可：

<a href="http://www.example.com" rel="nofollow">Anchor text here</a>

依据 VuePress 的官网文档，咱们晓得：

VuePress 博客默认的链接属性是 noopener noreferrer，咱们批改下 config.js，增加上 nofollow:

    
module.exports = {
      markdown: {externalLinks: { target: '_blank', rel: 'nofollow noopener noreferrer'}
    }
}

咱们再查看下 DOM 元素，就会发现带上了 nofollow 属性：

6. 多页文章

参考 Google 搜寻核心的“遵循抓取和索引编制最佳做法”：

多页文章：如果您的文章分为几个页面，请确保有可供用户点击的下一页和上一页链接，并且这些链接是可抓取的链接。您只需这样做，Google 就能够抓取这种网页集。

这里不须要咱们特地做什么，别感觉有了侧边栏，就把高低篇文章的链接干掉就行。

7. robots.txt

robots.txt 文件规定了搜索引擎抓取工具能够拜访你网站上的哪些网址，此文件次要用于防止网站收到过多申请。

然而要留神：robots.txt 不是一个好的阻止搜索引擎抓取某个网页的机制，如果 robots.txt 规定了某个文件不应该被拜访，但是否被执行，齐全看搜索引擎是否依照 robots.txt 的标准来执行，当然像 Google 等搜索引擎会依照标准正规抓取，其余的搜索引擎就不肯定了。又比方网页被其余公开的网页援用了，仍可能会找到该网页并收录。

若要正确阻止网址呈现在 Google 搜寻后果中，应该为服务器上的文件设置密码保护、应用 noindex 元标记或响应标头，或者彻底移除网页。

对于我这样一个容许齐全拜访的站点来说，更多的作用是通知搜索引擎我的 sitemap 地址。

因为 robots.txt 文件应该位于网站的根目录下，因而，咱们能够间接在 .vupress/public 下新建一个 robots.txt 文件，文件内容写入：

Sitemap: https://ts.yayujs.com/sitemap.xml

User-agent: *

具体 robots.txt 能够设置的字段能够参阅「创立 robots.txt 文件」。

除了间接创立，也能够应用 [vuepress-plugin-robots]() 插件，这里就不多叙述了。

8. 404 页面

参照「搜索引擎优化 (SEO) 老手指南」：

显示实用的 404 页面

用户偶然会因点击损坏的链接或输出谬误的网址而转到您网站上不存在的网页。应用自定义 404 页面可能无效疏导用户返回到您网站上的失常网页，从而大幅晋升用户的体验。无妨思考增加返回根网页的链接，并提供指向您网站上热门内容或相干内容的链接。您能够应用 Google Search Console 找出导致“未找到”谬误的网址起源。

vuepress-theme-reco 这个主题的 404 页面默认用的是腾讯公益：

如果你想敞开：

module.exports = {
  theme: 'reco',
  themeConfig: {noFoundPageByTencent: false}  
}

款式会变成这样：

如果你想要批改这里的文案，能够间接在源码里批改，目录为 node_modules/vuepress-theme-reco/layouts/404.vue：

9. 挪动端设置

module.exports = {
      head: [['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1'}],
    ]
}

此标记可告知浏览器如何在挪动设施上出现网页。该标记的存在可向 Google 表明该网页适宜挪动设施。

10. 测试与优化工具

10.1 Lighthouse

Google Lighthouse 是一种用于掂量网页品质的开源自动化工具。它能够针对任何公共或要求身份验证的网页运行。Google Lighthouse 会对网页的性能，可拜访性和搜索引擎优化进行审核。它还包含测试渐进式 Web 应用程序是否符合标准和最佳实际的性能。

咱们装置下 Lighthouse 扩大程序，而后在须要审查的网站上，点击 Lighthouse 插件，再点击「Generate report」：

期待一段时间，就会生成一个报告：

咱们能够查看 Performance、Accessibility、Best Practices、SEO、PWA 五个方面的分数和批改倡议，依据这个倡议进行调整，尽可能的优化就好了。

10.2 web.dev

官网地址：https://web.dev/measure/，你能够了解为网页版的 Lighthouse，只用在网页上输入你的地址就行，背地还是用的 Lighthouse

10.3 Page Speed Insights

Google 提供的页面速度测试工具，地址：https://pagespeed.web.dev/

输出地址后，就能够进行剖析，会呈现分数和优化倡议：

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程，预计 20 篇左右，解说如何应用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 29 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。