SEO 新手探索

酷家乐Koolab前端组
363 阅读9分钟

搜索引擎优化（英语：search engine optimization，缩写为SEO）是透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。

为什么要做 SEO ？

建立长期有效的流量来源，降低企业网络推广成本

Google 搜索运作方式的基础知识

我们已经知道 SEO 是通过调整网站以适配搜索引擎的运作规则来提高排名，那我们首先就了解一下 Google 的搜索运作方式（p.s. 为什么不是百度呢，因为在百度搜索你可以看到第一页全是广告的壮观景象...）

Google 是一个全自动搜索引擎，它会使用名为“网页抓取工具”的软件定期探索网络，以便查找可添加到 Google 索引中的网站。实际上，Google 搜索结果中收录的大多数网站都不是手动提交的，而是网页抓取工具在抓取网络时自动找到并添加的。

Google 搜索的工作流程主要分为三个阶段：

  • 抓取：Google 会使用名为“抓取工具”的自动程序搜索网络，以查找新网页或更新后的网页。Google 会将这些网页的地址（即网址）存储在一个大型列表中，以便日后查看。我们会通过许多不同的方法查找网页，但主要方法是跟踪我们已知的网页中的链接。在抓取过程中，Google 会使用 Chrome 的最新版本呈现网页。在呈现过程中，它会运行找到的所有网页脚本。如果你的网站使用动态生成的内容，请务必遵循 JavaScript SEO 基础知识页面上的要求。
  • 编入索引：Google 会访问它通过抓取得知的网页，并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件，尝试了解网页的主题。这些信息存储在 Google 索引中，而 Google 索引是一个存储在海量计算机中的巨大数据库。
  • 呈现搜索结果：当用户在 Google 上进行搜索时，Google 会尝试确定最优质的搜索结果。“最佳”结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询。例如，在用户搜索“自行车维修店”后，Google 向巴黎用户显示的答案与向香港用户显示的答案有所不同。支付费用不能提高网页在 Google 搜索结果中的排名，网页排名是完全依靠算法完成的。

如何让你的网站能在 Google 中被搜索到

Google 会自动查找可添加到 Google 索引中的网站；通常你无需执行任何操作，只需将网站发布到网络上即可。但是，网站有时会被遗漏。

你可以通过在 Google 搜索中按以下查询格式搜索你的网站，来查看你的网站是否已经被编入索引：

site:example.com

虽然 Google 可抓取数十亿个网页，但遗漏部分网站也在所难免。如果你的网站没有出现在 Google 的搜索结果中，可以通过 Google Search Console 这一工具看看是否存在可能会导致 Google 无法理解你网站的错误。

针对搜索规则来提高排名

如何改善网站抓取效果

  • 验证 Google 能否访问你网站上的网页，以及这些网页看起来是否正确。确保 Google 能以匿名用户（没有密码和信息的用户）的身份访问网页。Google 必须能够查看该网页的所有图片和其他元素，以便能够正确了解该网页。
  • 如果你创建或更新了单个网页，你可以向 Google 提交具体网址。如需让 Google 同时了解多个新网页或更新后的网页，你可以使用站点地图。
  • 如果你想让 Google 只抓取 1 个网页，请将该网页设为首页，在 Google 看来，你的首页就是你网站上最重要的网页。为促成完整网站抓取，请确保你的首页（以及所有网页）包含一个良好的网站导航系统，能链接到你网站上的所有重要版块和网页。这有助于用户（和 Google）在你的网站上找到所需内容。对于小型网站（少于 1000 个网页），只需让 Google 知道你的首页即可，前提是 Google 可以通过从首页开始的链接路径访问所有其他网页。
  • 将你的网页链接到 Google 已知的其他网页。但是，请务必注意，Google 不会跟踪广告中的链接、其他网站中由你付费的链接、评论中的链接或其他未遵循 Google 网站站长指南的链接。

如何改善网页索引编制效果

  • 创建简短且有意义的网页标题。
  • 使用传达网页主题的网页标题。
  • 使用文字（而非图片）传达内容。尽管 Google 能够理解一些图片和视频，但相比图片和视频，文字更易于理解。请至少使用替代文本（alt 属性）和其他属性为视频和图片。

如何改善网页的呈现和排名效果

React SEO 优化

对于一个普通的 React 应用来说，搜索排名存在问题，基本上都离不开 SPA 这个词

SPA 对 SEO 的影响

单页应用（英语：single-page application，缩写SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。

SPA技术将产出html的逻辑从服务器转移到了客户端，在进入React, Vue等UI框架进行开发时，我们开发的页面更多的是在客户端进行脚本执行、数据请求和UI动态装载。

那么搜索引擎爬虫在抓取这样的页面的时，在未做任何优化的情况下，通常拿到的是类似下面的字符文本：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>

如何解决这一问题呢，听到最多的词就是 SSR

SSR服务端渲染（英语：server side render）指一般情况下，一个web页面的数据渲染完全由客户端或者浏览器端来完成。

但是如果只是为了 SEO 而使用 SSR，它的代价又过于沉重了。如果你的网站更加静态，你可以使用 Prerender 而不是 SSR。使用 react-static 或 gatsby 或 react-snap。

为什么不推荐 SSR

  1. 需要承担额外的开发成本 SSR 就像一个全新的维度，无论你使用什么都需要为 SSR 重新配置（Router、i18n、Redux，HMR、react-loadable，css-in-js 等第三方库需要在服务端重新配置）
    对于之后开发可能引入的第三方库呢？使用前是否还要注意是否支持SSR？这对于开发来讲，同时考虑 2 个环境真的是太费脑了！
  2. 服务端的开发 同时SSR还需要在服务器端开发，这一般也是前端的工作，因为运行的也是前端开发的代码，但对于大部分前端来说，一般没有丰富的服务器开发的经验，服务端为了性能可能需要考虑到缓存策略，如果为了能够很好地监控代码的运行情况，可能需要一些监控方面的开发等等。
  3. 更多的服务端负载 服务端具有更多的负载，需要更多的机器、网络等方面的资源，不过这些相对开发人力资源方面来说还是微不足道的。SSR 耗费更多的开发上和维护上的资源。

什么是 Prerender

Prerender 即为预渲染，预渲染不像服务器渲染那样实时输出 html，它是在用户访问之前就已经提前渲染好了 html，比如 React-Static 库只在构建时为了特定的路由生成特定的静态html。

Prerender 同时具有开发上和非开发上的优点

  1. 服务无关，不能具有丰富的后端开发经验，在利用类似 React-Static 库只在构建的时就渲染出了 html 文件
  2. Static, 静态文件具有 SEO、首屏渲染等优点

但 Prerender 也不是万能的，相比 SSR 来说，

  1. SSR 内容是动态的，PreRender 在部署时就确定了内容
  2. SSR 内容可以是用户相关的，PreRender 是所有用户同一份内容

SSR 更动态，Prerender 更倾向于静态，所以 Prerender 很难覆盖到下面2个场景：

  1. 永远穷尽不了预渲染所有页面，比如博客类网站、租房网站等类似 B 端发布的网站，在 B 端操作的过程中会产生新的页面。
  2. 用户相关内容的首屏渲染问题无法解决

如果可以，请选择 Prerender。如果你唯一关注的是SEO，那么随时都可以轻松使用预渲染。

Fetch As Google

最后推荐一款工具，可以帮助任何拥有网站的人了解其网站在 Google 搜索中的表现，以及如何改进网站在 Google 搜索上的呈现效果，使网站获得更相关的流量。

Search Console，这个工具使你能够测试 Google 如何在你的站点上爬取或呈现 URL。

报告概览 - Search Console帮助

参考

author:@进舟

avatar
文章
阅读
粉丝