SEO优化

主要介绍了SEO优化的使用场景，以及具体实施步骤。

有node服务——服务端渲染

• 渲染时机：用户访问时执行渲染
• 优缺点：
  • 缺点：
    • 组件的一些生命周期不能在这里使用，转而使用其他方式实现。
      • 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同，服务端渲染应用程序，需要处于 Node.js server 运行环境；
    • 用户量大，服务器压力大。
      • 在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive – CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。
    • 一些事件和一些DOMAPI是无法在服务端用的。所以某些页面需要重构。
      • 例如：在componentDidMount里请求数据的情况需要页面重构。
  • 优点：
    • SSR 可以一边下载 HTML 一边渲染界面。在网络环境差的时候体验简直是天差地别（所以 Gmail 加载界面有一个按钮叫 “加载 HTML 基础视图” 😛）。
    • 服务器性能好的话渲染较快
• 服务端渲染： 本质上是用服务端压力换取首屏体验的提升。

无node服务——预渲染

• 预渲染的时机是在项目构建时渲染
• 优缺点：
  • 缺点：
    • 预渲染不适用经常变化的数据，比如说股票代码网站，天气预报网站。因为此时的数据是动态的，而预渲染时已经生成好了dom节点。此时如果要兼容seo就需要使用SSR了。 预渲染也不适用大量的路由页面,比如成千上百个路由，因为此时打包后预渲染将会非常慢。而SSR并没有这些问题。 预渲染最好的应用场景是需要seo的活动页面。
  • 优点：
    • 预渲染（Pre Render）在构建时执行渲染，将渲染后的 HTML 片段生成静态 HTML 文件。无需使用 web 服务器实时动态编译 HTML，适用于静态站点生成。
• Umi 3 中内置了预渲染功能，不再通过安装额外插件使用，同时开启 ssr 和 exportStatic，在 umi build 构建时会编译出渲染后的 HTML。

服务端组件

• react提出的概念：参考https://www.zhihu.com/question/308792091 (opens new window)里的 【服务端组件】
• 但是在2021年还不建议用于生产。

共同点：

• 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）

对比一下就会发现一个很有意思的事，服务端渲染的优点就是客户端渲染的缺点，服务端渲染的缺点同时也是客户端渲染的优点，反之亦然。

客户端渲染：

• 服务器端把模板和数据发送给客户端，渲染过程在客户端完成。
• 对于客户端渲染，我们经常会讨论 React/Vue/Angular 三大框架，或者 SPA。

如果是针对SEO，你应该用的是puppeteer或randertron等方案去实践

• 参考 https://www.zhihu.com/question/308792091 (opens new window) 里的【如果是针对SEO，你应该用的是puppeteer或randertron等方案去实践】

  • 这两种方案是否可以解决SSR和客户端渲染以及预渲染在SEO上的问题。

  • rendertron方案：

    • https://baijiahao.baidu.com/s?id=1689820609135896901&wfr=spider&for=pc (opens new window)

    • 这里也解释得很清楚：http://www.fashi.net/seo/1016.html (opens new window)

      • 上面地址里谷歌给我们给了一个完整的项目示例链接https://render-tron.appspot.com/ (opens new window)，我们把spa页面地址输入到框里，然后点击第二个框（渲染静态pc页面），等待静态页面的生成，之后会自动跳转到生成的静态页面里去（页面生成之后，我们发现是纯静态网页没有一点js）。

    • 这个对rendertron解释得很到位：https://blog.csdn.net/grootxu59/article/details/90453679 (opens new window)

    • node里结合randertron使用（实际上在其他服务器里也可以使用randertron这种方案）：参考谷歌文档 (opens new window)

      • 结合这里的讲得非常清楚：https://blog.csdn.net/grootxu59/article/details/90453679 (opens new window) 这个链接下面会提到，我们称之为“链接1”

        • 文章截图 (opens new window)

      • 实际上我们只需要三个东西：

        • 第一个：一个web服务器（web静态资源都在里面），里面可以配置代理，以便把爬虫的请求代理给rendertron (opens new window)创建的服务。具体的作用是：链接1 (opens new window)里的【服务器（官方推荐express）中增加中间件，先判断UA（user-agent）里面有没有带有类似Baiduspider（百度爬虫）等字样，如果没有，就像正常的单页面服务器那样，把原始html推送出去，由客户端浏览器完成js、css渲染的工作；如果带有指定UA头字样，就先把网页推送给本地服务器那个google-chrome（无头浏览器），等他渲染好对应页面后，把渲染好的html结果推送出去。不就是为了SEO么，你爬虫来了我再渲染给你总行了吧，其余的我还是做我的单页面，呵呵哒。】
          • 自己已经配置了可以跑起来的代码，在自己的gitee里面 (opens new window)。
        • 第二个：使用rendertron (opens new window)创建一个服务
          • 他的作用是：链接1 (opens new window)里的【服务器上装有个google-chrome（无头浏览器），rendertron把他打开】。
          • 具体做法：参考链接1里的【安装rendertron】。最好使用npm安装，以防报错。
          • 使用 npm run start 即可启动服务。
        • 第三个：在服务器里装无头浏览器。
          • 假如我们在heroku里装无头浏览器（Chromeheadless）：https://www.codenong.com/8fe07126f00c8e94e13b/ (opens new window)
          • 当然不同服务器也可以装无头浏览器，参考https://blog.csdn.net/grootxu59/article/details/90453679 (opens new window)里的【网上关于安装Chromeheadless的教学贴很多】。
          • chrome从60版本开始就已经支持无头浏览器：也就是说我们本地的谷歌已经有无头浏览器的功能，具体怎么使用查看：https://blog.csdn.net/rubulai/article/details/103975477 (opens new window)，从而我们本地测试rendertron方案很容易。

前端具体实施步骤

标签的语义化

• h1~h5的合理利用
• 导航类尽量使用a标签
• 可在图片中添加alt"关键词"标签，提高关键词密度
• 减少网站对站外的跳转

TDK使用规则：

• 网站收录太少，收录需要提升，至少15条；网站是动态网站需要改成静态的，方便收录；（提高收录建议：每天上午发2篇原创文章或高伪原创文章，增加收录，固定一个时间（最好是在早上12点之前）进行更新文章和提交链接（https://ziyuan.baidu.com/linksubmit/url (opens new window)）这是提交链接的地址，这样更利于提高上词效果。）
• 网站tdk需要修改，标题符号统一，一个标题不需要用多种间隔符号，且符号必须要用英文，带有关键词。层次最多是5个左右，字数27字以内最佳,不要带官网或者电话号码或者网址。
• 关键词设置：6~10个关键词左右，字数在50左右。关键词符号用 ：英文逗号（,）：且密度要控制在2%~8%之间越大越好。

网站添加收录页：

• 网站更目录下，添加robots.txt:

  • robots.txt写法参考：(放在网站根目录下)

    • https://www.juyuadv.com/robots.txt (opens new window)

    • https://www.c8hr.com/robots.txt (opens new window)

      • User-agent: *
          Disallow:
          Sitemap: https://www.c8hr.com/sitemap
        

    • 在robots.txt里的Sitemap对应的是本网站收录页：

      • 我们一般建议把内容经常发生变化的页面放到收录页里面去。至于https://www.c8hr.com/robots.txt (opens new window)里为什么没有把收录页放进去是因为网站的导航本身使用a元素做的，蜘蛛会自动爬取里面的链接地址；所以它把一些动态页放到收录页里去了（发现里面的标题很多都是和网站关键字相关的，增加了关键字密度）。
      • 收录页Sitemap怎么写：
        • 写sitemap.xml放在网站根目录下，参考：https://www.juyuadv.com/sitemap.xml (opens new window)
        • 写一个html页面作为网站地图放在网站已有页面里，并在页面里使用a元素（a元素不在页面展示出来也可以，但是必须被渲染）链接这个页面。这两条可以相辅相成，优化SEO。

• SEO之robots.txt和sitemap具体怎么写以及里面字段的意义：

  • http://blog.sina.com.cn/s/blog_68e95e7d0100rjfh.html (opens new window)
    • 自注：加上一个网站地图的HTML文件，不展示也可（和网站地图sitemap.xml文件相辅相成）
  • 例子：https://www.juyuadv.com/sitemap.xml (opens new window)

视频怎么做SEO

• 视频SEO：优化视频以进行搜索的9种方法 (opens new window)
• 这里提到了视频地图：https://www.sumaarts.com/share/738.html (opens new window)