前端工程师与SEO

1.  
网站结构布局优化：建立的网站目录结构少，更加容易抓取

   a.控制首页链接数量：中小型企业网站一般为100个链接，包括页面导航，底部导航，要与网站内容有关，不能为了凑数量

   b.扁平化得目录层次：让小蜘蛛跳转三次就可以到达网页内任何一个内页。eg：网站设计：主页，栏目，内容页，只能是扁平的，类似Dom树，不能使纵向的一层一层。

   c.导航SEO优化：可以放在网站头部，中间，底部。导航可以分为主导航，副导航等。

   d.面包屑导航：*让用户了解当前所处的位置 *使用户可以了解网站组织形式。面包屑导航一般为了醒目，一般都放在正文标题的左上角，如慕课网的问答页面。

   e.不可忽略的细节：比如分页：建议采取：首页 - 1 2 3 4 5 6 7 8 9 10 下拉框。这样容易被抓取到内页，直接能显示共多少页，每个页面通过这个链接都可以进去。

   f.其他：注意加载速度，否则加载时间过长，则抓取不到。

2.   网页代码优化：

   a.<title>标题：会在浏览器标题栏显示，设置时之强调重点即可，把重要的关键词放在前面，不要重复出现，每个页面的title不要设置相同的。

   b.< meta keywords>关键词：列举出几个重要的关键词即可，也不要过分堆砌。

   c.<meta description>网页内容描述：要高度概括网页内容，一定不可过长，也不要过分堆砌关键词，每个页面description也要有所不同。比如看慕课网源代码头。

   d.对于body中的元素要尽量语义化，让浏览器和小蜘蛛更加清楚。多用h1到h6，ul，ol，li，让合适的标签做合适的事。

      比如：*<a>标签：要加上链接的说明，即title。对于指向其他网站的链接，要加上rel="nofollow"，即防止小蜘蛛爬走。

            *<h1>标签：小蜘蛛认为这是最重要的，这是主标题，<h2>是副标题。

            *<p>和<br>标签：p是文本内容。br只用于文本内容的换行。比如：<p>jf<br>ndbj<br></p>

            *<title>标签：要使用<caption>提供表格标题，方便小蜘蛛。

            *<img>标签：应使用alt属性，是对图片起到注释作用。

            *<strong><b><em>标签：strong能得到足够的重视，能突出关键词，显示重要的内容，b标签和strong在浏览器中显示效果一样，但在SEO起不到很好的效果。em表现为斜               体，重要度仅次于strong，如果网页仅仅想表现斜体，加粗，则建议使用i，b，若果使用strong，em则会影响到SEO的效果。 如果强调文字内容，则用strong，em标签。

   e.巧妙利用CSS布局，重要内容的HTML代码放在最前面。让css控制其显示位置。因为小蜘蛛抓取时从上往下。

   f.重要内容不用js代码，小蜘蛛爬虫看不懂。

   g.尽量减少使用iframe框架。因为小蜘蛛不会进入其中爬虫。

   h.谨慎使用display：none；对于暂时不显示的内容，应使用z-index，或让其显示在浏览器内容外，因为浏览器会过滤掉display内容。

   i.不断精简代码。