前言

《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档

本篇讲讲 SEO 与重定向。

问题

最一开始我使用 GitHub Pages 服务建立了站点,地址是:https://mqyqingfeng.github.io/learn-typescript

考虑到 GitHub 在国内访问速度的问题,我又在 Gitee 上同步了一份,地址是:http://mqyqingfeng.gitee.io/learn-typescript

后来我决定自己建站,地址是:http://ts.yayujs.com

后来我想怎么可以不搞下 https 呢?于是有了新的地址:https://ts.yayujs.com

再除此之外,http://yayujs.com 也是这个网站……

这一下子就产生了 5 个地址,所以我决定,统一成一个,既方便记忆和收藏,又方便 SEO 优化,不会导致重复收录,分走应有的搜索流量。

统一

那统一成哪一个呢?

首先肯定是自己的服务器和域名,要不然钱白花了……

然后因为 HTTPS 对 SEO 更加友好一些,就比如百度搜索引擎认为权值相同的站点,采用 HTTPS 协议的页面更加安全,排名上会优先对待,Google 也是建议使用 HTTPS:

Google 会优先选择 HTTPS 网页(而非等效的 HTTP 网页)作为规范网页

所以我们用 HTTPS。

至于 http://yayujs.com/,考虑到这个会作为冴羽的个人博客页面使用,只是因为还没有开发,所以先指向了这个站点,所以这个地址维持原状,后期会上线为冴羽的个人博客。

所以最后统一的地址为 https://ts.yayujs.com

JS 重定向

GitHub Pages 和 Gitee Pages 搭建的站点页面,因为不是自己的服务器和域名,没有方法可以直接通过域名重定向或者 Nginx 重定向之类的方法,所以我们干脆 JavaScript 判断一下域名,然后 location.href 跳转为新的地址:

// config.js
module.exports = {
title: 'TypeScript4 中文文档',
description: 'TypeScript最新官方文档翻译,TypeScript中文手册,提供 TypeScript 从入门到进阶的系统学习教程',
head: [
[
'script', {}, `
(function() {
if (location.href.indexOf('github.io') > -1 || location.href.indexOf('gitee.io') > -1) {
location.href = 'https://ts.yayujs.com'
}
})();
`
]
]
}

注意在所有重定向方法中,JavaScript location 重定向应该是最后考虑的手段,在谷歌搜索中心的文档中就有写到:

仅在您无法实施服务器端重定向或 meta refresh 重定向时,才使用 JavaScript 重定向。虽然 Google 会尝试呈现 Googlebot 抓取到的每个网址,但可能会由于各种原因而呈现失败。这意味着,如果您设置了 JavaScript 重定向,但 Google 无法呈现相应内容,那么 Google 可能永远都无法看到该重定向。

Nginx 重定向

HTTP 重定向 HTTPS

接下来我们借助 Nginx 实现 HTTP 重定向到 HTTPS,这个在之前的文章《VuePress 博客优化之开启 HTTPS》中也有讲到过,我们借助 Nginx 的 rewrite 语句实现:

server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
rewrite ^(.*)$ https://$host$1 permanent; location ^~ /learn-typescript/ {
alias /home/www/website/ts/;
} location / {
alias /home/www/website/ts/;
index index.html;
}
}

注意 rewrite 这句,我们加了一个 permanent,表示这是一个 301 重定向,如果不加这个,会是 302 重定向,虽然表现上是一样的,但对于搜索引擎来说,却是不一样的,Google 也是更建议使用 301 重定向

如果您需要更改某个网页在搜索引擎结果中显示的网址,建议您尽可能使用永久服务器端重定向。这是确保将 Google 搜索和用户定向到正确网页的最佳方式。301 和 308 状态代码表示网页已永久地迁移到新位置。

只有使用 301 重定向,才不会对网站排名产生任何负面的影响。

yayujs.com 重定向 www.yayujs.com

对于搜索引擎来说,yayujs.comwww.yayujs.com 是不同的站点,这很好理解,毕竟 www.yayujs.com 就相当于 ts.yayujs.com 是一个子域名了,但如果域名不一样,内容却是一样的,这就会使得搜索引擎做两份收录,反而影响了两个地址的自然流量,为此我们需要将一个重定向到另外一个地址。

那具体是从 yayujs.com 重定向到 www.yayujs.com 还是 www.yayujs.com 重定向到 yayujs.com 呢?

其实也无所谓,带不带 www,对 SEO 来说没有任何影响,这更多是个人偏好。

在 Google 搜索中心的文档中也有举过例子:

假定用户可通过以下几种方式访问您的网页:

可从这些网址中挑选一个作为规范网址,并使用 301 重定向将来自其他网址的流量引导至您的首选网址。

如果你希望 yayujs.com 重定向到 www.yayujs.com,你可以这样修改 Nginx 配置:

server {
listen 443 ssl;
server_name yayujs.com www.yayujs.com;
if ($host != 'www.yayujs.com') {
rewrite ^/(.*)$ https://www.yayujs.com/$1 permanent;
}
}

如果你希望 www.yayujs.com 重定向到 yayujs.com,你可以这样修改 Nginx 配置:

server {
listen 443 ssl;
server_name yayujs.com www.yayujs.com;
if ($host = 'www.yayujs.com') {
rewrite ^/(.*)$ https://yayujs.com/$1 permanent;
}
}

不过要注意,虽然对 SEO 来说是一样的,但我们在做项目时可能会遇到一些差别,就比如我们在处理 Cookie 相关的内容时,由于 Cookie 的同源策略,只能修改当前域以及父域的 Cookie,比如 ts.yayujs.com 和 www.yayujs.com 的 Cookie 就是隔离的,但 ts.yayujs.com 和 yayujs.com 的 Cookie 就不是完全隔离的了。

系列文章

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

微信:「mqyqingfeng」,加我进冴羽唯一的读者群。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。

VuePress 博客之 SEO 优化(二)重定向的更多相关文章

  1. VuePress 博客之 SEO 优化(三)标题、链接优化

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  2. VuePress 博客之 SEO 优化(五)添加 JSON-LD 数据

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲 ...

  3. VuePress 博客之 SEO 优化(一) sitemap 与搜索引擎收录

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  4. VuePress 博客之 SEO 优化(六)站长工具

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇接着 ...

  5. 新博客在SEO方面需要注意哪几点?

    无论是什么程序的博客,都应该注意这重要的几点! 第一点:网站目标明确进入主题,有些人对于SEO不是特别熟悉,或者说没有接触过.当你做好一个网站,不管网站内容是什么,首先你都得了解最基本的SEO,比如网 ...

  6. Hexo + Github 个人博客设置以及优化

    原文地址: Hexo + Github 个人博客设置以及优化 一.博客设置 分类.标签云.关于等页面 在站点目录下分别执行: hexo new page "categories" ...

  7. Linux下使用 github+hexo 搭建个人博客04-next主题优化

    上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...

  8. Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

    上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护. ...

  9. 小技巧(2) 查询自己博客的SEO(如果违规,请先提醒)

    今天,教大家查看自己博客的SEO. 首先,上网站http://seo.chinaz.com/ 接着,在网页输入框中输入自己博客地址(带后面路径,不是cnblogs.com这样的,类似https://w ...

随机推荐

  1. cmd中删除、添加、修改注册表命令

    转自:http://www.jb51.net/article/30586.htm regedit的运行参数 REGEDIT [/L:system] [/R:user] filename1 REGEDI ...

  2. js实现网页中英文翻译

    1,html 2,metrics.js 3,需要 http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKk ...

  3. A*算法及其matlab实现

    教程 基本理论教程 A*算法程序 最简单的A*算法

  4. Java中的equals和==的区别以及几个常用的object中的方法简单的调试方法

    一.equals 1.equals:是Object类中的方法,只能判断引用类型 2.默认判断的是地址是否相等(判断两个参数是否是同一个对象),子类中往往重写该方法,用于判断内容(值)是否相等 二.== ...

  5. Java访问修饰符和三大特征(封装,继承和多态)

    一.访问修饰符基本介绍: java提供四种访问控制修饰符号,用于控制方法和属性(成员变量)的访问权限(范围): 1.公开级别:用public修饰,对外公开2.受保护级别:用protected修饰,对子 ...

  6. Spring中的Environment外部化配置管理详解

    Environment的中文意思是环境,它表示整个spring应用运行时的环境信息,它包含两个关键因素 profiles properties profiles profiles这个概念相信大家都已经 ...

  7. java的不正确使用方法以及什么情况不能使用java

    一.Python3.6新特性 什么情况下不能运用 Java 泛型   1. 前语 Java 1.5 引入了泛型来保证类型安全,避免在运行时发作类型转换反常,让类型参数化,提高了代码的可读性和重用率.可 ...

  8. 使用Hot Chocolate和.NET 6构建GraphQL应用(9) —— 实现Mutate更新数据

    系列导航 使用Hot Chocolate和.NET 6构建GraphQL应用文章索引 需求 在上一篇文章中,我们演示了如何使用Hot Chocolate进行GraphQL的Mutate新增数据,这篇文 ...

  9. 【缓存】CPU高速缓存 之MESI 性协议 Gif 动画

    CPU缓存架构 不同的CPU厂商的架构也有些不同,在这里只介绍流行的缓存架构 缓存一致性可以分为三个点: 在进程每个写入运算时都立刻采取措施保证资料一致性 每个独立的运算,假如它造成资料值的改变,所有 ...

  10. 缓冲区(buffer)与缓存(cache) 缓冲:缓解冲击,缓存:临时存储

    缓存与缓冲区 简要概述 缓存(cache):故名思意就是临时存储一下数据的存储器,其他设备可能等下还用的到数据.缓存区可以用来做缓冲区 缓冲区(Buffer):故名意思就是解决设备之间速度不匹配的问题 ...