慕课网 SEO在网页制作中的应用 学习笔记

一、基础知识

• 搜索引擎优化 Search Engine Optimization
• 白帽SEO，黑帽SEO（欺骗搜索引擎）

---

二、白帽SEO

内容上的SEO

• 对网站标题、关键字、描述精心设计
• 网站内容优化
  • 网站内容与关键字的对应，增加关键字的密度...
• 在网站上合理设置 Robot.txt 文件
• 生成对搜索引擎友好的网站地图
• 增加外部链接到各个网站上宣传
  • 把搜索引擎从其他网站引到自己的网站上来

前端代码上的SEO

• 通过网站结构布局设计和网页代码优化，让前端页面既能使浏览器看得懂，搜索引擎蜘蛛也能看得懂

---

三、网页结构优化

扁平化结构：

• 控制首页链接数量： 太少，蜘蛛爬不到内页，影响网站收入数量；太多，影响用户体验。中小型网站，首页链接应在100以内。链接包括：页面导航， 底部导航，錨链接..
• 扁平化的目录层次： 尽量使蜘蛛跳转3次就可到达站内任何一个内页。如网页设计为 主页 - 栏目 - 内容页，扁平铺开而不能用纵深型结构。

导航的SEO优化：

• 通常分为主导航，副导航，分离导航 。
• 导航设计应尽量查用文字；若用图片形式，必须有 title 和 alt。
• 面包屑导航：
  • 让用户了解当前所处的位置。
  • 使用户可了解网站的组织形式。
  • 提供返回阶层的快速路口，方便用户操作。
  • 让搜索引擎清楚地了解网站结构，同时增加了大量内部链接，方便抓取，降低跳出率。

如以下形式：
全部问答 > 部分问答 > 详细问答

内容页面的SEO优化：

• 常用结构：

c81fd1c2-98a2-46bc-8e31-246357a03de5.png

• 分页形式：

1edb410b-a5e6-4621-b9d7-dd6878e553f9.png

- 第三种最好

---

四、网页代码优化

tltle 标题：

• 强调重点，重要的关键词放前面，不要重复关键词。
• 每个页面的 title 不要相同。

meta keywords 关键词：

• 列举出几个重要关键词即可，不要过分堆砌。

meta description 网页描述：

• 要高度概括网页内容，不可太长，不要过分堆砌关键词。
• 每个页面的 description 要有所不同。

1.png

语义化代码：

• 即在适当的位置用适当的标签。
• a 标签：
  • 要加 title。
  • 对于指向其他网站的链接要加 rel="nofollow"，防止蜘蛛跳到其他网站不回来了。
• hn 标签：
  • 标题用 h1 标签，用 css 修饰字体样式。
  • 正文标题用 h1 ，副标题用 h2 ，其他不重要的地方不要用 hn 标签。
• p 标签和 br 标签：
  • br 标签只用于文本内容的换行。
• table 标签：
  • 表格标题要用 caption 标签。

2.png

• img 标签：
  • 蜘蛛对图片读取有限，要使用 alt 说明。
• strong、em 和 b、i 标签：
  • strong 在搜索引擎中能够得到高度重视，它可突出关键词，表现重要的内容。b 标签虽然样式和 strong 一样，但在SEO中无效果。
  • em 在SEO中的重要度仅次于 strong ，i 则不重要。
  • 因此，strong 和 em 不要乱用，或者会影响到SEO的效果。
• 代码编写的贴士：
  • 重要内容的HTML代码放在最前面，蜘蛛是按文档流抓取的，这样可使重要的代码优先读取。
  • 重要内容不要用 JS 输出，蜘蛛看不懂 JS代码。
  • 不要用 iframe 框架。蜘蛛不会读取里面的内容。
  • 对于暂时不想显示的文字，应谨慎使用 display: none; ，因为蜘蛛会忽略。可利用 z-index 或 将其移到浏览器显示范围外，来使其隐藏。
  • 不断精简代码。能一个标签完成的事，就不要用两个标签。

---

五、例子

2.png

• 正文标题应该用 h1 标签，若字太大，用CSS修改。

---

3.png

• 图片 title 描述要写上。

---

4.png

• 强调部分用 strong 标签，注意这里的 br 包在了 p 标签里。
• 空格符太多，可用用CSS实现缩进。（text-indent，padding，margin）

---

5.png

• a标签应尽量加上 title 说明。

---

6.png

• 外部链接，应该加上 rel="nofollow"，反正蜘蛛爬走。

---