我收到一个有关SEO优化师的面试，虽然这个岗位应该还是偏向运营，我对运营没经验，新手上路

但想到其实前端编码时也要考虑到SEO，所以回顾一下跟SEO优化有关的前端编码原则

追记：后来被调到运营助理，虽然薪资少一点，也行吧.jpg毕竟我没运营方面的经验，还空窗一年

原理

搜索引擎

搜索引擎其实就是个大型数据库，它存储着海量的关键词以及关键词对应的地址

当用户使用关键词搜索内容时，搜索引擎就会将存储的关联地址都呈现给用户

爬虫

而这个数据库是爬虫大军用一点一点爬来的数据建立的，他们每天都要网上冲浪，从一个连接爬到另一个连接，下载内容、分析提炼、找关键词

如果爬虫发现页面信息是有用的，但数据库对该关键词并没有存储该网页，就会将它存入数据库；反之，如果爬虫发现页面是垃圾信息，就默默离开

排序规则

数据库中几乎总是一个关键词对应多个地址，所以这些地址会被排序。排序的原则就是，这个网址的内容与关键词越符合，其在搜索结果中的排名就越高

但是爬虫它并不能爬JS代码，即使JS里有再多再贴切的关键词也无济于事，这也是Vue应用对SEO较不友好的原因（可以使用Vue的同构渲染特性改善这一缺点）

前端与SEO

在前端编码时，遵循一定的编码规范也可以起到SEO效果

结构优化

  • 让网站的路由安排扁平化，最好不超过三级，如果网站不够大，路由又太深，爬虫就不愿意爬了
  • 合理安排站内链接，尽量让爬虫只要跳转3次就能达到网站的任意页面
  • 做好各种有用的导航，例如面包屑，方便爬虫行军
  • 控制页面大小、减少http请求、提高加载速度，加载一旦超时，爬虫就会离开
  • 把重要内容放前面，因为爬虫是从上往下爬的
  • 注意网站首页，它是整站最重要、权重最高的页面，需要足够的链接让爬虫往深了爬，但链接太多也不行，影响用户体验也降低排名

代码优化

  • 用robot.txt规定爬虫可以爬、不能爬的路由，防止网站受到过多请求
  • 尽量用语义化标签，因为爬虫要根据标签判断内容的意义
  • 图片添加alt和title，链接添加title，因为爬虫要知道这些东西是什么
  • 添加合适的title、meta description和meta keywords，这些更是重量级
  • 尽量使一个页面只有一个h1标签，因为爬虫认为它最重要
  • 不用JS或iFrame输出重要内容，因为爬虫爬不到
  • 慎用display: none;，因为爬虫会无视这种元素