公司之前新来了个前端美工，刚刚毕业只是对代码的含义上有点了解，对于seo却没有接触过，所以基本上每做完一套页面我就要来修改很多地方，在做网站的时候有的美工前端以及程序员网站可能做得很熟练，但是有一部分对于seo优化却不是很了解，所以就会造成一些代码、标签等运用的不是很规范，这个时候就需要seo人员来对网页进行调整修改了。这也是一名seo人员所要具备的基本素质了。当然能提前做好这些工作那是最好的，所以小编就给公司新来的前端美工整理了一份关于代码方面的一些用法以及讲解，现在给大家分享一下。 ! h/ A3 t$ z5 j0 E: M. c) B
% l8 C, J- F" Z
! }2 y, D6 k( S
网页标签在seo优化当中的一些用法
8 A) j* j2 {/ {% l. R 网页头部部分：
6 P, [4 F q G, ? title标记：声明网页标题(必需要有，title的内容即为搜索引擎收录后，直接显示的网页标题名称。并且是优化环节重要因素，需特别设计组合，考虑搜索引擎分词规则)词与词之间用“-”、“_”、“|”来间隔，这三个符号作用相同的，当然也可以混合使用，不过要注意美观。
3 l) F) v" V1 X- e2 [; w( ~" c+ j8 a0 V
; j( a; W4 r& q3 w% Y, o
meta属性： 4 h9 p! B& u" G* _+ N8 s
Keywords 声明网页关键词(告诉搜索引擎当前页面的关键词是什么)，每个关键词之间用英文的逗号“,” 分割。
- {* l" Z1 J" F. l Description 声明网页描述，用来表达网站的主要内容概述。(Description的内容非常重要，并且会在搜索引擎的搜索结果中显示，将网站想要展现的重点内容以及广告引导词等展现出来。建议是200字符以内)。copyright 声明网页版权 author 声明作者，这两个主要是用于网页规范性，对优化影响不大。
7 N; C! [; M, E( q. r css和js等文件要外部调用，尽量不要直接写在网页当中，一些刚入行的前端可能会把css样式JavaScript等直接写在当前网页中。 - g3 W! w3 ^) M1 x$ y
. z0 W( L4 D: k) O, z" D
: `2 d# v' l: {% k3 f! b' P6 F: m2 _+ l
为什么要外部调用?
# T: H7 Z( B. u8 Q 1、对于程序维护人员来说，统一的外部调用可以更方便的来进行修改和维护。
4 I$ }9 X$ `3 r+ @ 2、对于搜索引擎来说，该部分代码并无实际意义，影响搜索引擎蜘蛛抓取效率。
, V: ~; q+ U+ U' [0 D 3、对于网站速度来说，页面代码增多，影响网站速度。 * k2 K$ m! D& V: G$ _+ h' m3 z
图片：除幻灯、banner轮播图等必须直接插入图片的地方，其他地方图片尽量用做背景，然后在上面写上文字。若是某些标题部分一定要用图片则需要在img里面用alt标签申明图片含义。格式：
8 M' w. o1 W; l# d* Z* l) Q9 v0 f* |# U
3 I5 g+ ~' P$ [+ y( ~* c1 q
为什么? % h0 j& ~5 [+ T0 b+ F7 V
1、对于用户来说，网页图片越多，用户打开网页时所缓存的数据就越大，网页打开速度就越慢。所以尽量用颜色或者小图片来做背景。 6 q7 } a, S- q `9 o4 t L
2、对于搜索引擎来说，搜索引擎蜘蛛只认识汉字数字英文等字符形式的内容，无法识别图片的内容。所以要加alt进行描述。 3 B* B- L' J& I
, n- v- s' T0 w% \+ O3 ~
6 q2 J+ ?7 b! s# m1 B 外部链接:
4 P b3 M: Q* N' ? 如果网站有外部导出链接：例如链接到淘宝，QQ空间,微博时。链接内加入nofollow属性来阻止向该链接传递权重。例如：淘宝。 t, z, B. P) L# ?0 a
另外，某些网页效果会用iframe框架来完成。虽然有的文章说现在百度可以抓取到框架里面的内容了。但是无论能否抓取到，反正百度不喜欢这个标签，所以网页里面尽量不要用框架。
. M) H& x% G( K, f
- B6 U7 L6 Y$ y1 o! s4 I" p
: W6 K8 `7 D* r1 h; c7 b$ y h标签 / g, J6 c$ j, w& x: ~ {
h1标签申明该网页最重要内容。一般每个网页只有一个h1标签，尽量不要用多个。在首页时h1常用于标记网站名称或最主要关键词，在频道页、栏目页h1标签常用于标记频道页、栏目页名称。在内容页h1标签时常用于标记文章名称。
9 q g: K) u ~0 R4 v h2标签可出现多次，常用于导航栏目名称，或长尾关键词等。不过也要适度应用。
( L! x9 I5 W7 }4 g( i- E4 K+ m; a( e
5 G$ s( r+ c- H b标签strong标签
0 j/ N6 a& G9 k0 t7 ?3 O 这两个标签的含义是对文字加粗，申明文章中的关键内容，这两个标签含义相同。
/ b, x% D$ C9 R4 E" n0 ?4 \ 网站地图：分为html地图以及xml地图。
& F0 l6 b& G8 n) O3 J html地图是给用户看的，体现网站框架目录，一目了然。 1 g" f5 B Z0 [3 s3 k
xml地图也叫sitemap，做优化需要有的。是给搜索引擎蜘蛛看的，就如同把网站所有结构页面做成了一张网，蜘蛛可以顺利的爬行整个网站。当然虽然现在百度出了主动推送，应用起来也挺方便。不过360等其他搜索引擎还是看xml地图的。
% }3 D! a- P' Q0 c Y) Q6 M; P& q; [8 @+ E
8 P* r' V) Y& B) G; C
404页面： ! O, B; t7 b" H$ e% c8 K% i) h. n
当网站改版、换程序、换空间、内容删除替换时，会出现一些打不开的页面，被称为死链接。404页面可以避免产生死链接，并且对于网站访客来说，也是很好的用户体验。 . E% U+ j! g. s# m0 a6 F% f
" _6 }$ [7 j; l5 _! ~5 l/ u7 s6 w5 T: A
' b4 C. ]9 X$ y3 K5 U# G: P) n
内容页：
7 P! `3 ]' K* @) U" n 通常H1用作内容标题名称。文章底部可以加“扩展阅读”或“相关文章”等列表。用来增加用户粘度，并且可以引导搜索引擎蜘蛛爬向更多的页面。
( y& M0 }1 X# l
9 ~7 \7 Y" U* v/ q+ x* R6 U1 z
9 x7 } O, w2 M0 Y6 |+ } M& U % u: o4 \4 s( n' P) [2 \1 n/ H1 l
原文出处链接：http://www.zbyunjian.com/yx/0620.html / l' R0 h( F* M- B4 G! j" O) t
得知论坛原创作者：最后的角落 . I( o! c1 P; m" _2 h6 }! `% @5 r
日期：2015/09/06
, h' T; `0 B- n1 }& X# C. c* ?7 H$ I& O9 }
学习了，好好学习，温故而知新哈 公司之前新来了个前端美工，刚刚毕业只是对代码的含义上有点了解，对于seo却没有接触过，所以基本上每做完一套页面我就要来修改很多地方，在做网站的时候有的美工前端以及程序员网站可能做得很熟练，但是有一部分对于seo优化却不是很了解，所以就会造成一些代码、标签等运用的不是很规范，这个时候就需要seo人员来对网页进行调整修改了。这也是一名seo人员所要具备的基本素质了。当然能提前做好这些工作那是最好的，所以小编就给公司新来的前端美工整理了一份关于代码方面的一些用法以及讲解，现在给大家分享一下。 # ?$ t* U" G8 o" _
; ], ?7 J e4 g1 N; f5 [ x. }
A6 e3 {' U A1 S2 `" c: p1 k! \9 N3 R5 c8 l
网页头部部分：
4 j7 E) Q7 F0 d title标记：声明网页标题(必需要有，title的内容即为搜索引擎收录后，直接显示的网页标题名称。并且是优化环节重要因素，需特别设计组合，考虑搜索引擎分词规则)词与词之间用“-”、“_”、“|”来间隔，这三个符号作用相同的，当然也可以混合使用，不过要注意美观。 * q Y* K$ A1 ]
: Y3 y* ~, w+ {3 j
0 Y& @" X# D9 Y) o, p. m+ v
meta属性：
$ T5 B& I( k$ k3 k+ A! c Keywords 声明网页关键词(告诉搜索引擎当前页面的关键词是什么)，每个关键词之间用英文的逗号“,” 分割。 ( @/ |! L" o+ c6 e
Description 声明网页描述，用来表达网站的主要内容概述。(Description的内容非常重要，并且会在搜索引擎的搜索结果中显示，将网站想要展现的重点内容以及广告引导词等展现出来。建议是200字符以内)。copyright 声明网页版权 author 声明作者，这两个主要是用于网页规范性，对优化影响不大。
8 N6 H5 Q+ |8 D' ^0 G css和js等文件要外部调用，尽量不要直接写在网页当中，一些刚入行的前端可能会把css样式JavaScript等直接写在当前网页中。
* {& C( D1 e( P7 k0 m9 Y2 g& P
9 ~& X* i. j0 }' N 为什么要外部调用?
/ Q. W7 B: @+ ]' ?5 W 1、对于程序维护人员来说，统一的外部调用可以更方便的来进行修改和维护。 1 x' J( E+ k) r, J7 v
2、对于搜索引擎来说，该部分代码并无实际意义，影响搜索引擎蜘蛛抓取效率。
+ I( Y* W; X' p) I' O+ T 3、对于网站速度来说，页面代码增多，影响网站速度。
9 c( X' f$ s) ]2 n; y 图片：除幻灯、banner轮播图等必须直接插入图片的地方，其他地方图片尽量用做背景，然后在上面写上文字。若是某些标题部分一定要用图片则需要在img里面用alt标签申明图片含义。格式：
$ I# N! f% v6 l8 k$ O' k; e [
& V8 f9 y+ h4 S; |
+ ?; l5 P; C: H) o* ^9 K; e
为什么? , K3 a4 f# G# i, R3 d3 {
1、对于用户来说，网页图片越多，用户打开网页时所缓存的数据就越大，网页打开速度就越慢。所以尽量用颜色或者小图片来做背景。 5 L+ [% P1 L: O2 x8 s1 F, q x
2、对于搜索引擎来说，搜索引擎蜘蛛只认识汉字数字英文等字符形式的内容，无法识别图片的内容。所以要加alt进行描述。 . j! u! k6 k7 e! Q( h6 w
* A5 o0 j' L4 a6 ?
- ]: P7 F" s, G9 n
外部链接:
; G% [) `1 f% N0 e 如果网站有外部导出链接：例如链接到淘宝，QQ空间,微博时。链接内加入nofollow属性来阻止向该链接传递权重。例如：淘宝。
$ J& |# x# W2 E8 z+ ?! ^0 F; C 另外，某些网页效果会用iframe框架来完成。虽然有的文章说现在百度可以抓取到框架里面的内容了。但是无论能否抓取到，反正百度不喜欢这个标签，所以网页里面尽量不要用框架。 0 e. }, D3 ?* R( X0 [
7 V8 z: M$ W6 U" l& m: ~1 r
5 A8 a: K* Q2 h' A; b2 t
h标签 ( x! m6 I% @6 w, d$ q
h1标签申明该网页最重要内容。一般每个网页只有一个h1标签，尽量不要用多个。在首页时h1常用于标记网站名称或最主要关键词，在频道页、栏目页h1标签常用于标记频道页、栏目页名称。在内容页h1标签时常用于标记文章名称。
& }2 ]+ b5 L: @1 v/ i( M, Z' Q h2标签可出现多次，常用于导航栏目名称，或长尾关键词等。不过也要适度应用。
+ p( H. `$ |/ i- R# Z" [; ]$ ?; W, d+ X% Q( u- H' S0 V
) y" |% q0 k# h( ]7 Z b标签strong标签 - t7 S, B) i$ }3 \% N7 P6 D) [; s
这两个标签的含义是对文字加粗，申明文章中的关键内容，这两个标签含义相同。
4 W$ ?2 v; d9 l" U9 }( J3 x 网站地图：分为html地图以及xml地图。
3 h; g I) i8 @% ?* }& e html地图是给用户看的，体现网站框架目录，一目了然。 7 M8 g6 T _( {9 C
xml地图也叫sitemap，做优化需要有的。是给搜索引擎蜘蛛看的，就如同把网站所有结构页面做成了一张网，蜘蛛可以顺利的爬行整个网站。当然虽然现在百度出了主动推送，应用起来也挺方便。不过360等其他搜索引擎还是看xml地图的。
9 s6 h+ b1 f- s; B$ e, O! l& D, L4 A7 K* R% z
/ D& K0 ^7 f( U- g- h 404页面：
- {7 c# n. f" i8 Z5 e1 Y/ Z 当网站改版、换程序、换空间、内容删除替换时，会出现一些打不开的页面，被称为死链接。404页面可以避免产生死链接，并且对于网站访客来说，也是很好的用户体验。
+ H' C' [) |* N! u! n
& ?1 C/ @ u" q% |9 s
& w6 t: M$ c. e$ w+ U S0 P 内容页： ; m$ _0 a' d! L, g1 n
通常H1用作内容标题名称。文章底部可以加“扩展阅读”或“相关文章”等列表。用来增加用户粘度，并且可以引导搜索引擎蜘蛛爬向更多的页面。 $ z7 h% ?5 C9 A; y
5 z; t7 d1 m( p/ W1 |
# N: O9 F; c# r! g: e4 e/ l
2 G4 }7 \ W' v 原文出处链接：http://www.zbyunjian.com/yx/0620.html & v( g3 F" i) O) e3 z! ]) j
得知论坛原创作者：最后的角落 % D0 x2 J ?0 h/ F
日期：2015/09/06
" e6 C* v1 w! a6 S5 v! c
0 z( ]0 x) y) N. ^ w) q: I同意楼主的观点，赞一个写的不错 学习 了 | 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
