SEO在网页制作中的应用笔记

SEO在网页制作中的应用笔记

慕课网地址：http://www.imooc.com/learn/204

搜索引擎数据库，百度蜘蛛，用小蜘蛛的语言，就是seo（搜索引擎优化），为了提高网站被搜索到的次数及排名。白帽seo合规的，黑帽seo欺骗。
白帽SEO对网站的标题、关键字、描述，网站内容优化，robot.txt文件，网站地图，增加外链引用
前端工程师目标：网站结构布局优化，网页代码优化。

 

网站结构优化：前端工程师与seo：1、网站结构布局优化2、网页代码优化

网站扁平化结构：
1.控制首页链接数量。（中小型网站建议一百个左右）
2.扁平化的目录层次。（尽量三次就能到达目的地）

3.导航SEO优化。（主导航、副导航、分类导航（导航尽量用文字表示））

-面包式导航：
优势：用户体验-》可以了解当前所在位置，以及页面在当前网站的位置，能帮助用户快速学习和了解网站内容组织方式。
网站结构布局优化
避免使用table布局——1）不利于后期维护 2）不利于SEO（小蜘蛛不喜欢table布局）
——扁平化结构（目录层次越少越容易被搜索，因为层次结构超过三层小蜘蛛就不愿意爬了）
1.控制首页链接数量（中小网站100以内，页面导航、底部导航、锚文字链接等有实质性的链接）
2.扁平化的目录层次（顶多跳转三次进入内容页）
3.导航seo优化（导航尽量用文字，如果为了用户体验或整体风格而用图片，则图片代码一定要优化，必要的title、alt要添加；面包屑导航：用户体验，让用户知道当前所处位置以及当前页面在整个网站中的位置，了解网站的组织形式）
4.细节：
1）见图片

 

1.    留住访客2.对于SEO，这些文章对于正文来说属于相关链接，增强了页面相关性，也会增强页面的权重；

2）在栏目内有很多记录时，会按20/50个每页来分页
分页：
1.首页-上页-下页-尾页（不易收入）；
2.首页 1 2 3 4 5 6 下一页（更有利于小蜘蛛抓取内页，如果抓取第101页，直接进入第10页进行抓取）；
3.首页 1 2 3 4 5 6 下拉选择，小蜘蛛最喜欢第3种（可以直接进入每一页）；

3）网页加载速度，过慢小蜘蛛不会等待，一个页面最好不要超过100k

 

 

 

网页代码优化：

1、 title标题、<meta keywords>关键词、<meta description>简介
2、body中语义化代码。h1~h6, ul, ol,li之类的。用好标签。
3、标签详解
①<a>标签.要写title这样，小蜘蛛能更好读懂。对于外链，要加上"rel=nofollow"属性，让小蜘蛛不要爬，一爬就出去了。
②h标签。正文标题，一定要用h1.这个小蜘蛛很喜欢。分级的标题，也要用h2~hx
③table标签。子元素加入<caption>表格标题</caption>
④img标签。加入alt,让小蜘蛛读得懂。因为它对图片的读取有限。
⑤<strong><em>会让SEO看重，<b><i>只是效果。看情况选择。
4、重要内容HTML代码放在最前面。
5、重要内容不要用JS输出
6、尽量少使用iframe框架。
7、谨慎使用display:none; 这个，小蜘蛛会过滤掉。
8、精简页面标签层级数量。
网页代码优化：
1 <a>标签：title,rel
2 <h1>标签：正文用<h1>,二级标题用<h2>，其他不重要的标题不用h
3 <p>标签与<br>标签：<br>标签只用于文本内容的换行
4 <table>标签：使用<caption>
5 <img>标签：使用alt说明
6 <strong><em>与<b><i>标签：strong><b>加粗，<em><i>斜体，<strong>标签是权重标签的代表，在搜索引擎中能够得到高度重视，能突出关键词，表现重要的内容，<b>标签在浏览器中显示效果和<strong>相同，但在SEO中不会起到很好的效果，所以不推荐使用。<em>标签表现为斜体，意为强调主体内容，吸引用户关注，在权重标签中的重要度仅次于<strong>标签，若仅仅为了表现出加粗、斜体的效果，建议使用<b><i>标签，如果使用<strong><em>，会影响到SEO的效果；如果是为了强调文字内容，则建议使用<strong><em>标签。
7 重要内容HTML代码放在最前面。
8 重要内容不要用js输出。
9 尽少使用iframe框架。
10 谨慎使用display:none;(可以使用z-index,或者设置让其显示在浏览器以外)
11 不断精简代码。

 

实战分析：

1.<p><br/></p>很赞的写法 <br/>写在p内部
2.外链 要加上 rel=“nofollow” 避免搜索引擎爬网爬跑掉其他网页去了
3.<a>标签加title描述
4.<img>标签加alt描述
5.标签中的内容就是内容，不要加的代码，&nbsp尽量设置padding/margin/缩进来实现效果
外站链接应在a标签内写 rel="nofollow"