初学前端与SEO

首先说明，这篇文章是自己在慕课网上面学习seo相关知识的时候做的学习笔记。若有需要，可以直接去慕课网上面学习相关课程。

目的：

了解到符合搜索引擎要求的SEO基础知识，从网页结构设计方面和代码编写方面学习SEO方法。

比如某大型网站，后台有一个搜索引擎数据库。数据库中的内容是如何得来的呢？就是通过蜘蛛爬虫每天不断去获取网址的信息，一点一点收集来的。遇到一个网址，就会下载里面的内容，提炼关键字，如果它认为是有用的，就保存下来放到数据库中。否则就丢弃。进入下一网站的爬取。经过这样的一个过程在数据库中 一个关键字就对应了许多个网址。用户进行搜索的时候后台就返回给前台页面。当然返回的结果由于数目比较多，最理想的情况就是和关键字最吻合的排在前面，但是在实际的过程中，比如说由于百度出的竞价排名，因此有许多的因素影响最后的排序结果。这当中还有一个过程，就是小蜘蛛看不看得懂的情况，如果小蜘蛛进去就是js或者是flash等页面，他就立刻懵逼了。看不懂就别提收录了，因此我们在编写网页的过程中还要让小蜘蛛看的懂，这里就是所谓的SEO了

目的就多多收录网站以及网民搜索网站的时候得到一个好的排名结果。

如果网站是唯一的那么就不能称之为seo

模糊的搜索得到的结果可以称之为seo

白帽seo是大家都允许且鼓励的，对于网站而言，可以更多的收录，获取更多的流量。对于用户也可以得到比较好结果。

利用政策缺陷获取流量，无良网站只是放一些关键字，没有实际的内容，放一些广告。这对任何一方都没有作用，因此这是不鼓励。

上面都可以称之为内容seo

但是对于前端工程师而言，更多的是从网站结构布局优化，以及网页代码优化是我们的seo。

站长一般都是关注于内容seo。

结构布局优化：用扁平化结构（中小型网站，层次结构超过三层小蜘蛛就不愿意爬了，层次越少，蜘蛛越喜欢收录）
控制首页链接数量（中小网站100以内，页面导航、底部导航、锚文字链接等）
扁平化的目录层次（小蜘蛛跳转3次可以到达网站内任何一个内页，网站的设计主页、栏目、内容页，不要用纵线性的结构）

这里就是纵线性的结构，不推荐

这种就是扁平化结构，访客点击三次找不到信息就会离开。
导航seo优化（头部、底部、内容部分，主导航、副导航、分类导航，尽量用文字，面包屑导航，在每个网站上留下面包屑，使用户可以了解网站组织形式，放于正文的左上方）

内容页面的布局细节
左面正文，右面热门文章、相关文章，下面是版权信息及链接，栏目排布：首页123456789下拉选择最赞）

 

小蜘蛛最喜欢第三种。
网站的加载速度会影响小蜘蛛的爬行，页面最好不要超过100k

上面这种就是不利于小蜘蛛爬取

何为语义化代码？

Html中每一个标签都有其作用，我们在页面中应该在合适的位置使用合适的标签，方便我们自己和小蜘蛛都得看的懂

A标签最好是加上title

标题用h1标签，小蜘蛛认为h1标题对应的内容是非常重要的。这个时候如果h1标签字体好，可以使用css修饰

Br标签一般只用于文本内容的换行，而不会用于这样的换行

在table中加上caption

因为小蜘蛛对于图片的读取有限，因此在写图片的时候最好加上alt标签。

小蜘蛛是看不懂js的，小蜘蛛是很不愿意去读取iframe中的内容的

Display:none里面内容