SEO&&SSR

Veröffentlicht am | Bearbeitet am | in

​ 复习期间偶然碰到了 SSR，在大致了解之后个人感觉就是 Webpack 学习流程中的一个子项目，压缩文件罢了。可是与此同时他还利于 SEO。SSR 跟搜索引擎优化有什么关系？

定义

SEO：搜索引擎优化，旨在方便蜘蛛、爬虫对网页概要信息进行抓取，进而爬取网页信息

SSR：服务器端渲染，将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序，也可以叫做“同构”。旨在提高页面渲染速度，优化搜索引擎排名。

搜索引擎优化_SEO

​ 搜索引擎优化在前端的黎明时代通常是通过三种途径进行判别：title、description、keywords。在对应的 HTML 上进行相应的设置。

title

​ 通过设置标题来告知用户一个特定网页的主题，所以 title 应该准确描述网页的内容，并且 title 在搜索引擎显示结果时会直接输出

search_result

而 baidu 主页中对应的 title 也正是这个

baidu主页的title

description

​ 顾名思义，就是为网站提供一个概括性的描述。若搜索词和存在于描述字段中那么则会被高亮度显示。

例子的话还是刚才的那张图，你可以看到把 百度 全部标红啦。

当然百度对应的 HTML 是一个外链

1
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索">

拿掘金的举个例子吧

1
<meta name="description" content="掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。">

keywords

​ 在 keywords 中堆砌关键词即可，当然最好少一些效果更好哦

1
<meta name="keywords" content="掘金,稀土,Vue.js,微信小程序,Kotlin,RxJava,React Native,Wireshark,敏捷开发,Bootstrap,OKHttp,正则表达式,WebGL,Webpack,Docker,MVVM">

OK FINE，我们说完了传统的 SEO 方法，可是众所周知 SPA 并不利于 SEO，那么我们可以另辟蹊径，也就是 服务端渲染

服务端渲染_SSR

​ 这个玩意儿比较好理解。就拿我们这篇博客来说，就是通过将 .md 文件生成静态的 HTML 然后展示到个人博客 https://burning-shadow.github.io 中去。

​ 我们的传统客户端（如 Java 的 .jsp页面）就是服务端渲染。我们将渲染完成可以直接呈现的静态文件传给客户端，如此一来就节约了首屏运行 JS 代码而消耗的时间。也就是说，客户端只负责解析 HTML

优势：

  • 首屏加载快
  • 利于 SEO
  • 可生成静态的文件

缺点：

  • 用户体验较差
  • 不容易维护 - 通常修改了前端的部分 HTML 或 CSS，后端亦需更改

使用情景

​ 众所周知服务端渲染的主要目的就是为了：

  • 提升受屏渲染速度

  • SEO 优化

    ​ 所以其应用场景自然也很明显：

  • 需要优化 SEO 的 SPA 项目

  • 服务器足够强大，足以支撑高昂的服务端渲染成本（哦如果你想打我的话那这条当作没看到好啦）

设置方法

​ 由于是服务端渲染，所以我们需要设立自己的服务器。当然后端一般是不帮咱做这个的，所以就用到了我们最常用的编写中间层的语言 nodeJS

// 不想写了，挖个坑以后再填吧

Nuxt.js

这玩意儿处理 SSR 方便得多啦，但是我还没了解就不在这里献丑啦。

写在最后

​ 最后的最后用一段在网上看到的一位开发老哥的评价来总结一下吧~大家当个乐儿看，具体还是看业务需要和技术需求咯~

1
2
3
4
5
6
7
8
9
我负责过两年日峰值并发4W的前端业务，结合自我总结，对于绝大部分发展中的公司（尤其是toC）来说：

1. SEO: 考虑前端SSR的人力成本费，服务器费用，有时候还不如百度花钱买index。本来前后端分离，让前端和后端 | 服务器解耦，现在又整回去了。

2. 首屏渲染: 首屏落地页前端文件碎片到几十kb，cdn一下很难吗，很容易跑步进1.5s，努努力实现1s。

看过好多网站开发者整天引入阑尾技术栈挖深坑，后续成果呢？（有感而发，不针对文章）

总结：try to be simple，很多复杂事情可以简单做

那么，后会有期。