XFE 技术 生活 笔记 文集

前端与SEO

🔖 技术 👀 40 🕒 2019-04-12 👨‍🎓 XFE/Peter

本文为观看慕课网SEO搜索引擎优化后的笔记。后期如有对搜索引擎优化相关的工作心得和经验也会记录于此。感谢慕课网老师

搜索引擎工作原理

搜索引擎爬虫蜘蛛搜索数据,并绑定关键字存储于搜索引擎数据库中
用户输入关键字,搜索引擎匹配响应的网址,展示给用户

SEO

Search Engine Optimization 搜索引擎优化
网页在搜索引擎自认收录中增加收录数量和提高排序位置所作的优化行为

SEO分类

  1. 白冒SEO 正 常
  2. 黑冒SEO 非正常

白帽SEO

  1. 网站标题,关键字,描述
  2. 网站内容优化
  3. robot.txt文件(生成友好的网站地图便于搜索引擎收录)
  4. 网站地图
  5. 增加外链引用

前端工程师与SEO

网站结构布局优化

  • 控制首页链接数(一百个以内)

  • 三层目录结构(扁平化网站结构)

  • 导航SEO:尽量用文字;图片记得添加title,alt属性;添加面包屑导航

  • 分页导航

简洁,但不利于优化的

首页-上页-下页-尾页

一般,有一定优化的

首页 1 2 3 4 5 6 7 8 9 10 下一页
  • 提高网站加载速度

网页代码优化

<title></title>
<!-- 标题标签,只要重要的内容 -->
<meta keywords />
<!-- 关键词 例举出几个重要的关键词 -->
<meta description />
<!-- 网页描述 高度概括网页内容,不能太长,不要过分堆砌关键词 -->
  • 语义化代码
    H1~H6标签多用于标题
    UL标签多用于无序列表
    OL标签多用于有序列表
    DL标签多用于定义数据列表
    em,strong 表示强调
  • <a>标签要加上描述链接,外链要加上nofollow属性
  • h标签 正文标题H1 副标题H2 其他地方不用
  • 不乱用<br>
  • 表格<table>要加<caption>定义表格标题
  • <img>标签使用alt属性说明
  • <strong>突出关键词,表现重要的内容<em>次于strong标签
    <b><i>标签SEO中并没有作用

  • 重要的html内容代码放在最前面,通过css来调整UI布局
    重要内容不要用JS输出
    尽少使用Iframe框架。
    谨慎使用display:none,SEO会过滤掉这一部分
    不断精简代码,切记用过于复杂的代码

mvvm 与 SEO

目前mvvm框架大行其道,很多公司并没有强力的前端坐镇,我们在享受mvvm带来的爽快是,受能力所限并不能通过纯前端的方法来解决mvvm带来的负面效应————无法让爬虫爬取网站的关键内容

还好MVVM个框架社区都已经有了mvvm框架的服务端渲染的集成解决方案,例如VueJS 的 nuxtJS,React 的nextJS等

在很多公司,通过nuxtJS之类的解决方案或许并不能适应他们公司的现状,他们不会为了让前端爽而去增加一个nodejs服务,所以在面对Mvvm与 SEO需求相冲突时,我们应该根据实际情况来采用mvvm开发方式或者直接由原服务端渲染的方式

  • 例如我们功能简单的展示首页,完全不需要mvvm介入,直接通过以前的服务端渲染方式,能够让用户更快的访问到我们的页面
  • 而在功能复杂的,例如购物车组件中,我们完全可以在这里介入我们的mvvm框架来构建这个复杂的组件
    以上意思即表明,我们在部分页面,或者页面中某部分强交互,并且不影响用户浏览体验的地方使用mvvm框架简化我们的编码难度,提高代码规范和开发效率