Lynch

301 跳转 vs. 302 跳转

Posted: 10.26.2019

#网络协议 #HTTP #面试问题 - 网络

介绍

  • 301 代表永久性转移(Permanently Moved)
  • 302 代表暂时性转移(Temporarily Moved)

两者的区别很简单，一个是永久性的，一个是暂时性的。

那么什么是 永久性的，什么是 暂时性 的呢？

这个其实是没有硬性的规定的。

也就是说，究竟要采用哪种跳转，是网站自己决定的。

在 SEO 层面上...

对于用户来说，301 和 302 可能没啥区别。

但是对于搜索引擎来说，301 和 302 区别很大。

301

301 跳转传递了 95%~99% 的旧地址的 page authority 到新的地址。

page authority 就是一个页面在搜索引擎中进行排名的指标。

page authority 越高，一个页面在搜索引擎中的排名可能就越高。

因此，301 跳转对于 SEO 是非常友好的。

但是，虽然新的地址能在一定程度上“继承”旧地址的 page authority，但如果你刚刚开始进行 301 跳转，这种继承可能需要好几周，甚至好几个月才能体现出来，因为搜索引擎需要时间来重新恢复到该程度的 page authority。

当然，还是有例外的……

302

302 跳转就不一样了，它默认不会传递任何旧地址的 page authority 到新的地址。

当然，302 跳转后的地址也是一个页面，根据这个页面的内容，搜索引擎也会进行排序。大概需要6个月，302 跳转后的页面排名能够和旧页面差不多。但这并不是因为 page authority 的继承，而是搜索页面把该页面当做一个全新的页面进行处理的结果。

因为绝大多数情况下，我们需要继承 page authority，所以绝大多数情况下我们都用 301 跳转。

什么时候用 302

  1. 就像 302 描述的那样，暂时重定向，起一个临时重定向的作用
  2. 根据语言的不同，跳转到不同语言版本的页面
  3. 从网站的网页版跳转到手机版（例如 abc.com 到 m.abc.com），反之也可以

流量劫持

从网站 A（网站比较烂）上做了一个 302 跳转到网站 B（搜索排名很靠前）。

这时候有时搜索引擎会使用网站 B 的内容，但却收录了网站 A 的地址。

这样在不知不觉间，网站 B 在为网站 A 作贡献，网站 A 的排名就靠前了。

这个很好理解，就是因为 page authority 没有被继承，因此搜索引擎取的是 B 网站的 page authroity。

但是 301 跳转就不会出现这样的情况，因为上面说了，新的 URL 会继承旧 URL 绝大多数的 page authority。

各种跳转方式

我们来看一下，比较常用的跳转方式，分别是哪种跳转。

window.location.href

最简单的自动重定向，可以直接写在 HTML 文档里。

window.location.href

我们可以发现……根本就没有 301 或者 302 的状态码。

当然这是必然的，因为通过 JS 跳转根本就没走服务器，因此根本就不存在是 301 还是 302 的问题。

不过，普通的 JS 是这样，但如果我们用了框架呢？如果是 Vue/React 的 router 呢？

vue-router

做一个简单的重定向。

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/redirect',
    redirect: {
      name: 'home'
    }
  }
];

图片是 history 模式，但不管是 hash 还是 history 模式都无法触发 301。

原因自然是因为没有在服务器里进行跳转。状态码毕竟是包含在 HTTP 响应里的。

vue redirect

react-router / react-router-dom 就不看了，一个道理。

node with express

搞一个简单的 express 服务器，然后进行跳转。

const express = require("express");
const path = require('path');

const app = express();

app.use(express.static("./redirect.html"));

app.get("/redirect", (req, res) => {
  res.sendFile(path.join(__dirname, './redirect.html'));
});

app.get("/origin", (req, res) => {
  res.redirect("/redirect");
});

app.listen(8081, () => console.log("SB server running on port 8081"));

这是跳转的结果：

node 302

我们可以发现，express 跳转是默认 302 跳转的。

如果想要 301 跳转，则需要这么做：

app.get("/origin", (req, res) => {
  res.redirect(301, "/redirect");
});

实现的效果如下：

node 301

客户端重定向

上面提到的利用 JS 进行跳转的方式就是客户端重定向。

客户端重定向显然更加方便一些，但它和服务器重定向相比，有着诸多劣势。

  1. SEO 没法做。因为搜索引擎“看不见” JS 的逻辑。好了，此贴终结
  2. 返回键被废了。比如说当你进入某些不可描述的网站时，你会发现自己被重定向到了广告上，就算点击返回键也只是返回原来的网站，并且再次被重定向。这就是客户端跳转的一个非常让人恼火的问题。影响到你冲冲冲了

因此，综上所述，99.9% 的情况下，不要使用客户端重定向。

当然，客户端重定向不止是用 JS 一种方法，还可以使用 meta 标签。

<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />

但还是一样的问题，搜索引擎未必能够 value 这种类型的重定向。

只有刷新时间为0的时候，搜索引擎才有可能 value。

因此，能用服务器重定向的话，就不要用客户端重定向。

更多的重定向状态码

除了 301 与 302 外，表示重定向的状态码还有：

  1. 303
  2. 307
  3. 308

这里我就不多说了，因为在一般情况下根本就碰不到。

如果感兴趣的话，可以查阅这篇文章，讲得很详细：Redirects: the ultimate guide

参考资料

http状态码301和302详解及区别——辛酸的探索之路

Redirects: the ultimate guide

Authority and Trust in SEO explained