#12讲项目实战SEO之HTML代码优化-水平框架-竖直框架-混合框架-案例

水平框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  
  <title>标题</title>
  <meta name="Keywords" content="关键词,关键词">
  <meta name="description" content="描述">

</head>

<frameset rows="20%,80%">
<frame src="http://www.baidu.com" name="top"/>
<frame src="http://www.tanzhouedu.net" name="bottom"/>
</frameset>

</html>

竖直框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  
  <title>标题</title>
  <meta name="Keywords" content="关键词,关键词">
  <meta name="description" content="描述">

</head>

</html>

混合框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  
  <title>标题</title>
  <meta name="Keywords" content="关键词,关键词">
  <meta name="description" content="描述">

</head>

</html>

SEO之HTML代码优化

一、    文档类型（DOCTYPE）
        XHTML1.0有三种DOCTYPE：
        1、过渡型（Transitional）
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        2、严格型（Strict）
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        3、框架型(Frameset)
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
        二、名字空间（xmlns）
        <html xmlns="http://www.w3.org/1999/xhtml">
        三、声明语言编码 (charset)

         1、中文简体：
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        2、中文繁体
        <meta http-equiv="Content-Type" content="text/html; charset=big5"/>
        3、英文
        <meta http-equiv="Content-Type" content="text/html; charset=en"/>
        4、中英文（国际）
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        5、西欧
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        6、阿拉伯文
        <meta http-equiv="Content-Type" content="text/html; charset=ASMO-708">

        7、中欧
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
        四、标题标签(title)
        <title>东栋新升_上海SEO行业专业SEO公司上海SEO|搜索引擎优化|SEO公司</title>
        1、第一个关键词
        必须是该页面的主要内容，比如“网站优化页面”，就应该写“网站优化”
        2、名词短语
        必须是介绍前面的一句带有关键字的名词短语，上例中存在“SEO”、“上海SEO”、“SEO公司”、“上海SEO公司”、“上海SEO行业”、“SEO专业”、“专业SEO”、“专业SEO公司”、“上海公司”、“上海专业SEO公司”等等众多关键词，注意尽量不要使用“的”、“了”、“啊”、“上”等不能够组成关键词的字，原因：浪费资源
        3、其他关键词
        网页文本没有的关键词不要放在上面
        4、符号
        符号“_”不要写成“—”(中文状态)，可以写成“-”（英文状态）；符合“|”可以用“,”（英文状态）代替，不要使用“，”（中文状态）。

        5、字数
        关键词四——六个字即可，短语+第一个关键词不宜超过39个字符（19个字以内为宜），总的数量不宜超过80个字符（40个中文汉字），超过39个字符的部分将不被搜索引擎显示，超过80个字符的部门将不被搜索引擎收录，超过部分过多对网站排名有影响。
        6、其他
        结束的时候不要使用“ />”，应该直接写“>”
        <meta name="keywords" content="搜索引擎优化,SEO">
        1、字数
        总的数量不宜超过100个字符（50个中文汉字）
        2、关键词
        关键词不要叠加，“包装机械，包装设计，食品包装，包装公司，包装用户，包装信息，包装订单，包装企业，包装新闻，包装资讯”应改为“包装,设计,食品,公司,企业,用户,信息，机械,订单,新闻,资讯”，有时为了增加相关性，可以添加几个“包装机械，包装设计”之类的关键词，以增加相关性。
        3、符号
        符号需使用“,”（英文状态），而不是“，”（中文状态）
        4、其他
        结束的时候不要使用“ />”，应该直接写“>”
        <meta name="description" content="东栋新升是上海地区专业的SEO公司,主要从事搜索引擎优化(SEO),网站优化，用户体验优化(UEO),营销型网站建设以及相关的SEO咨询和培训等业务”>

        1、字数
        不要超过200个字符（100个中文汉字），超过152个字符（76个中文汉字）的部分将不被搜索引擎显示。
        2、符号
        符号需要使用“(”、“)”(英文状态)，而不是“（”、“）”。原因：浪费字符数。
        <meta name="copyright" content="东栋新升(021-seo.com)版权所有">
        1、关键词
        尽量包含关键词，且能够表示唯一属性。
        2、字数
        28个字符（14个中文汉字）以内即可，比如“上海东栋新升网络科技有限公司”即可。
        3、符号
        不建议使用中文状态下的符合，因为中文状态的字符一般占有两个字符，浪费了一个字符。
        <meta name="author" content="东栋新升">
        建议不要超过12个字符（6个中文汉字），4-8个字符（2-4个汉字）最佳。

        五、层叠样式表（CSS）调用
        <link href="http://www.021-seo.com/img/main.css " type="text/css" rel="stylesheet">
        尽量只用一个.css文件，地址采用绝对地址。
        六、脚本语言（JS）调用
        <script src="http://www.021-seo.com/JS/VIP.js" type="text/javascript"></script>

        同层叠样式表（css）调用
        七、其他代码尽量不用
        尤其注意到有：
        1、把css代码直接写在头部
        2、把JS代码直接写在头部
        3、<meta http-equiv="Refresh" content="5;url=http://www.021-seo.com">
        尤其注意：不要使用刷新的方式进入首页。
        八、去<table>化
        美工尽量使用DIV+CSS的模式，而不是传统的table，因为table标签众多，搜索引擎能读懂的标签比较少。
        九、标签大小写要符合规范
        尤其注意不要将下列标签写成大写
        1、<title></title>
        2、<meta>
        3、<body>
        4、<a>
        5、<img>
        6、<h1></h1> <h2></h2>
        7、<strong></strong>
        8、<head></head>
        十、双标签的不要忘记闭合标签
        十一、标签嵌套要合理
        <div><h1>第一包装</h1></div>
        十二、特殊字符用编码标识
        如：“©” 版权符号用“ ©”；“® ”注册商标用“®”表示。

        十三、链接标签（<a>）
         <a href="http://www.021-seo.com/baozhuang/index.html" target="_blank" title="东栋新升
上海SEO培训频道">上海SEO培训</a>
        1、换行符
        如果希望注释多行显示，可以使用“
”作为换行符
        2、关键词字数
        建议不超过36个字符（18个中文汉字）
        3、排列原则
        独特性的关键词放前面，重复性的关键词尽量靠后
        4、其他
        尽量不要使用“的”、“上”、“好”、“等等”等，搜索引擎数据库默认不收录的字
        十四、图片标签（<img>）
        <img src="http://www.021-seo.com/images/logo.gif" alt="东栋新升LOGO">
         十五、Flash标签(<object></object>)
        在标签前添加
        在标签后添加
        1、标签内不要出现“ ”（空格）、“--”、“！”等破坏标签的字符
        2、字数以表示出Flash大体内容为宜，不宜添加Flash未表达的文字，会被判为作弊。

        十六、框架标签（<frameset></frameset>）
        <frameset rows="80,*">
        <noframes><body>正文内容</body></noframes>
        <frame name="top" src="http://www.021-seo.com/top.htm">
   <frame name="bottom" src="http://www.021-seo.com/bottom.htm">
        </frameset>
        十七、CSS代码
        1、如：
        h1 {
            font-size: 16px;
            color: #0000FF;
            text-align: left;
        }
        p {
            font-size: 18px;
            color: #0000FF;
            text-align: left;

         }
        改写为
        h1，p{
            font-size: 18px;
            color: #0000FF;
            text-align: left;
        }
        2、再如：“margin:0px 0px 0px 0px;”改为“margin: 0px;”