前端须知之符合SEO优化的HTML布局规范

简介】

任何一个网站，不管是个人网站、企业网站还是门户网站，建站之时首先要确定的就是网站的整体结构布局，一个好的网站结构布局会让搜索引擎蜘蛛更好的爬行，从而使网站得到更好更多的收录，进而提升网站的排名。

要想提升网站的 SEO 优化效果，增加对百度蜘蛛的吸引力，首页的科学设计显然是其核心环节，那么从 SEO 优化的角度来看，如何才能优化网站首页结构布局呢？

下面以一个例子给大家说明

【 Demo 】

[HTML] 纯文本查看复制代码

 
          <!DOCTYPE html> 
         
 
          < 
          html 
          lang 
          = 
          "en" 
          > 
         
 
          < 
          head 
          > 
         
 
               
          < 
          title 
          >页面标题</ 
          title 
          > 
         
 
               
          < 
          meta 
          http-equiv 
          = 
          Content 
          -Language  
          content 
          = 
          zh 
          -cn /> 
         
 
               
          < 
          meta 
          http-equiv 
          = 
          "Content-Type" 
          content 
          = 
          "text/html; charset=gb2312" 
          /> 
         
 
               
          < 
          meta 
          name 
          = 
          "description" 
          content 
          = 
          "网站描述" 
          /> 
         
 
               
          < 
          meta 
          name 
          = 
          "keywords" 
          content 
          = 
          "关键词" 
          /> 
         
 
               
          < 
          link 
          href 
          = 
          "inc/css.css" 
          type 
          = 
          "text/css" 
          rel 
          = 
          "stylesheet" 
          /> 
         
 
          </ 
          head 
          > 
         
 
          < 
          body 
          > 
         
 
               
          < 
          div 
          > 
         
 
                   
          < 
          h1 
          >页面内容标题</ 
          h1 
          > 
         
 
                   
          < 
          h2 
          >页面相关性标题</ 
          h2 
          > 
         
 
                   
          < 
          h3 
          >标题系列</ 
          h3 
          > 
         
 
                   
          < 
          h4 
          >标题系列</ 
          h4 
          > 
         
 
                   
          < 
          h5 
          >标题系列</ 
          h5 
          > 
         
 
                   
          < 
          h6 
          >标题系列</ 
          h6 
          > 
         
 
                   
          < 
          img 
          src 
          = 
          "xxx.jpg" 
          alt 
          = 
          "图片说明" 
          /> 
         
 
                   
          < 
          a 
          href 
          = 
          "/" 
          title 
          = 
          "链接说明" 
          >链接词</ 
          a 
          > 
         
 
                   
          < 
          strong 
          >重点关键词强调</ 
          strong 
          > 
         
 
                   
          < 
          b 
          >关键词强调</ 
          b 
          > 
         
 
                   
          < 
          u 
          >关键词强调</ 
          u 
          > 
         
 
                   
          < 
          i 
          >关键词强调< / 
          i 
          > 
         
 
               
          </ 
          div 
          > 
         
 
               
          < 
          div 
          > 
         
 
                   
          版权部分关键词强调 
         
 
               
          </ 
          div 
          > 
         
 
          </ 
          body 
          > 
         
 
          </ 
          html 
          > 
         

【 Demo 说明】

1. 在<body>..</body>标签区中的罗列，都是一些基础的HTML标签，这些标签出现的次序是可以变化的。但head里面的标签最好不要变动！

2. 第4行<title>页面标题</title>。

这是相当重要的！不要堆关键字，保持你的主要词在这里出现三次就行，太多对你没有好处，对排名也不会有好处。谷歌并不喜欢太长的标题，百度也偶尔提到只希望在标题的前20个字里出现你的关键词。还要注意的是，主要关键词应该在标题里越靠前越好！

3. 第7行<meta name="description"content="网站描述" />

这个是主要是在索引结果就是在bd搜索你的站的时候标题下面的摘要内容。现在的权重不高，跟keywords标签一样，不太受重视。所以主要需要描述得吸引一点，能让用户有点进去的欲望！

4. 第8行<meta name="keywords"content="关键词" />

这个的用途现在权重越来越低，但是再低都是有权重的，只要认真对待，这里的词是有效果的。这里注意2点：

第一、大部分人都会选择在这里写关键词不会超过三个，有的人直接只写一个，这是有好处的，每一处标签都有权重，你强调的内容越少，那么它的权重会相对更高的，所以不要写太多，否则不如不写，而让搜索引擎自己去判断你的页面关键词。

第二、几乎所有的SEO专业人员都会跟你说尽量在每一个页面写不同的关键词，避免被认为是重复页面的危险。

5. 第13行<h1>页面内容标题</h1>

这个标签是一个页面最重要的标签，也是搜索引擎定位这个页面的主要依据，如果你的<h1>标签里没有出现你的页面关键字，那真是的一种很大的损失，这里的权重相对于其它的在<body>区的标签来说更加重要。在HTML代码中，它的重要性仅次于<title>，最好只出现1 次，以达到明确说明的目的。

6. 第14行<h2>页面相关性标题</h2>

这个标签与<h1>是一样和道理，但是权重相对来说较低，如果你的页面没有<h1>，那么这个标签对于页面来说基本上就相当于<h1>的重要性了。这里面你包含的是长尾关键词相关的内容，比如你的页面做几个关键词，主词应该出现在<h1>里，那么其它的词以及你想发展的词就可以出现在<h2>里，这样来说是一种合理的安排。

而<h3>~<h6>这些标签，重要性是依次递减的，在一个页面的权重越来越低。

7. 第19行<img src="xxx.jpg" alt="图片说明" />

我想这个标签主要是写关于图片的说明，这样写当然也有利于你在图片搜索的结果里显示排名更前面一点，不过现在bd基本上是以页面标题作为一张图片排名的要素，当然，你的alt标记做得好，将会增加你的图片匹配度。

8. 第20行<ahref="/" title="链接说明">链接词</a>

这是链接说明，同时也是一个页面链接的SEO重点，这里的"链接词"相当的重要，如果你跟别人交换链接，你这个词的写法是起着外链好坏与否的决定性因素的。"链接词"建议你最好写成自己的关键词，如果觉得实在不行或者怎么样，你一定要在"链接说明"里出现你的关键词。这在SEO专业术语里还有一种叫法，叫做"google炸弹"，就是用很多站点，同时做链接到一个网站，然后所有的"链接词"都写一个词-"刘亦菲"，不久以后google就会将这个站当做"刘亦菲"这个词最权威的站点，即使被那些站点链接的这个页面没有任何与"刘亦菲"相关的内容，这个网站在"刘亦菲"这个词的排名情况也会很好。不过google已经调整了算法，但是这样做链接肯定是有用的，一定要认真对待你的链接。还有一个重点，就是对方的链接，如果是JS调用的，你就别想在他那里得到任何权重，因为搜索引擎不会去读取JS里的内容，所以，建议大家好好做链接，不要做了链接你的站却跟没做一样。。

9. 第21行<strong>重点关键词强调</strong>

这个标签基实重要性仅次于<h1>，它比<b>、<u>、<i>等标签要权重高。所以如果你的页面有很重要的词，而你想强调它，首先选这个<strong>标签吧，接下来相对不重要的词强调请你选<b>、<u>、<i>等标签。当然，不要用得太多了，用得太多没有重点就等于没有用了。

【HTML 的不同标签在SEO 优化中的权重分数】

HTML 标签权重分值排列内部链接文字：10 分标题title ：10 分域名：7 分 H1 ，H2 字号标题：5 分每段首句：5 分路径或文件名：4 分相似度（关键词堆积）：4 分每句开头：1.5 分加粗或斜体：1 分文本用法（内容）：1 分title 属性：1 分（注意不是<title> ，是title 属性，比如a href= … title= ”） alt 标记：0.5 分 Meta 描述（Description 属性）：0.5 分 Meta 关键词（Keywords 属性）：0.05 分

【注意】

1. 少用例如iframe等标签引入内容，可以不用尽量不用，因为搜索引擎无法搜索到框架里面的内容；

2. 避免表格的嵌套目前本站的表格嵌套太多，搜索引擎通常只读取3个<table>的嵌套，如果太多，会造成部分有用信息没有被检测到。

更多技术资讯可关注：gzitcast

前端须知之符合SEO优化的HTML布局规范

猜你喜欢