SEO--搜索引擎优化

白帽SEO和黑帽SEO（不良商家为提高网站浏览量恶意做的）

一、白帽SEO（前端工程师）

A.网站结构布局优化：

1.扁平化结构：

控制首页链接数量（不能太大，太少，有实质内容 ）

扁平化的目录层次（不要使用纵深型目录，最多三层）：

导航SEO优化（多导航，主导航，次导航，侧边导航等）

2.面包屑导航（一般放在正文左上角）：

让用户了解当前所处位置

使用户可以了解网站组织形式

3.不可忽略的细节（页面布局）：

首页--上页---下页--尾页

首页 1 2 3 4 5 6 7 8 9 10下一页

首页 1 2 3 4 5 6 7 8 9 10 下拉选项

4.其他

二、网站结构优化

  1、控制首页链接数量（100个以内）

  2、扁平化的目录层次（3个最佳）

  3、导航SEO优化  如“面包屑导航”：让用户了解当前所在位置；并能使用户可以了解网站组织形式

  4、不可忽略的细节

  5、其他 加载速度等等

三、代码SEO优化

 1、网页代码优化（语义化代码）

A、title标题：强调重点

B、meta keywords关键词：列举几个关键词/简洁高效词语<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

C、meta description网页描述：高度概括网页的内容<meta http-equiv="description" content="This is my page">

以上信息不要堆积、重复

  2、语义化代码（HTML 标签有自己的意义，在适当的位置用适当的标签）

1、h1~h6 多用于标题

2、ul 多用于无序列表

3、ol 多用于有序列表

4、dl 用于定义数据列表

5、em、strong 表示强调

div、span 是 html 标签中最没有语义的

3、有利搜索引擎

1、a：访问外部链接时要加上 rel="nofollow"，告诉搜索引擎外部链接无需追踪，加上 title 说明

2、h1：搜索引擎外认为 h1 最重要，使用 css 调整，网页正文标题用 h1，副标题用 h2，其他不要乱用 h 标签

3、br 用于文本间的换行，用在 p 内，也可以用 <p><br/></p> 表示空行

4、caption：表格标题

5、img：使用 title、alt 说明

6、<strong><em>表示强调，<em>的权重仅次于<strong>,如果只想表示加粗斜体，建议使用<b><i>,表示强调则使用<strong><i>

7、重要内容 HTML 代码放在最前面（使用 css 改变布局）

8、重要内容不要用 JS 输出（搜索引擎看不懂 JS）

9、尽量少使用 iframe 框架（搜索引擎不喜欢）

10、谨慎使用 display:none（搜索引擎会过滤掉其内容，设置 z-index/text-index 代替）

11、精简代码