基于Html的SEO(很基础,更是前端必须掌握之点)

SEO最常用的HTML标签

 

如果你想要成为一名SEOER，就必须了解部分重要的HTML代码。其实，学习HTML很简单，下面我来说一说，SEO最常用的HTML标签有哪些：

 

　　1、H1-H6标签，这些标签在页面中占据着重要的位置，其中H1标签可以说是除TITLE外网页的最重要的另一个标签。这里需要注意的是要慎用H1，不要过多使用，否则被搜索引擎处罚就得不值得了。如果是频道页，大类的栏目名称使用H标签是合适的，当然，这里最大、最重要的分类才能使用H1，再按照栏目重要性，依次使用H2、H3等等H标签。这样合理的安排，让主导层次分明，也可以引导搜索引擎查找本页面的重要部分。如果是文章页，就要根据文章页的优化方法来使用H2，若按照最普通的页面布局，只有文章标题及正文内容，没有其他与正文同等级的信息，那么就可以对文章标题使用H2修饰，可以很清楚的告诉搜索引擎在文章页，我的文章标题就是页面的核心，所以文章页面的H2也只能出现一次。其他H标签可以根据网页栏目适当添加，但注意要合理使用，否则适得其反。

 

　　2、网页关键词加黑标签请用B标签(本人觉得B标签比strong标签质量更好)。B标签往往用在关键词上，一个页面只要加2-5次就差不多了，具体还要根据页面大小而定。

 

　　3、<a href="https://www.cnblogs.com/kelelipeng/p/网址" title="链接说明">网页信息</a> 对于网页中非常重要的链接采用TITLE说明，有助于帮助搜索引擎找到网页的重点URL。

 

　　4、Alt标签《img src=https://www.cnblogs.com/kelelipeng/p/“XXX.jpg” alt=“图片说明”》网页中的ALT标签是用来对图片进行说明的，这里有两方面的作用，一个是告诉搜索引擎图片的信息，另一个是在图片加载不出来或图片路径出问题的时候告诉用户，这是什么样的图片。在一个网页中，所有图片都用ALT标签肯定是不好的，最好的办法还是在网页中重点图片(大多数情况下是和网站突出目标关键词相关的图片)使用ALT标识，这样对搜索引擎爬行网页重要图片很有帮助，对于提高网站关键词权重也会很有好处的。

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

 

 

一、HTML标签权重分值排列

 

内部链接文字：10分

 

标题title：10分

 

域名：7分

 

H1，H2字号标题：5分

 

每段首句：5分

 

路径或文件名：4分

 

相似度（关键词堆积）：4分

 

每句开头：1.5分

 

加粗或斜体：1分

 

文本用法（内容）：1分

 

title属性：1分 （注意不是<title>， 是title属性， 比如a href=https://www.cnblogs.com/kelelipeng/p/… title=”）

 

alt标记：0.5分

 

Meta描述（Description属性）：0.5分

 

Meta关键词（Keywords属性）：0.05分

二、SEO优化

 

1、静态页面

 

将信息页面和频道、网站首页改为静态页面，有利于搜索引擎更快更好的收录。

 

2、页面标题（Page Title）的关键词优化

 

必须列出信息的标题、网站的名称以及相关关键字。

 

3、Meta标签的优化（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略）

 

主要包括：Meta description、Meta keywords的设置。关键字密度要适度，通常为2%-8%，也就是说你的关键字必须在页面中出现若干次，或者在搜索引擎允许的范围内，要避免堆砌关键字。

 

4、针对Google制作Sitemaps

 

Google的sitemaps是对原来robots.txt的扩展，它使用 XML格式来记录整个网站的信息并供Google读取，使搜索引擎能更快更全面的收录网站的内容。　　可以使用Google提供的Sitemap生成器制作（需要技术人员制作）：　　？hl=zh-CN也可以由技术部人员制作更全面的Sitemaps。

 

5、图片的关键词优化

 

图片的替代关键词也不要忽略，其另外一方面的作用是，当图片不能显示的时候，可以给访问者一个替代解释语句。

 

6、避免表格的嵌套

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

 

7、采用web标准进行网站重构

 

尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML＋CSS技术进行网站重构，减少不表格及冗余代码，提高网站页面的扩展性，兼容性，可以使更多浏览器支持。

 

8、网站结构的扁平化规划

 

目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母

 

9、页面容量的合理化

 

合理的页面容量会提升网页的显示速度，增加对搜索引擎蜘蛛程序的友好度。同时建议js脚本和css脚本尽量用链接文件

 

10、外部文件策略

 

把javascript文件和css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部，同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面的重要内容。其他的字体<FONT>和格式化标签也尽量少用，建议采用CSS定义。

 

11、外部链接

 

尽可能多地让其他跟你主题相关的网站链接本站，同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接，被搜索引擎认为有丰富的与主题相关的内容，也有利于排名，例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网，对搜索引擎而言宁缺勿滥。

12、网站地图

 

网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作基于文本的网站地图，内含网站所有栏目、子栏目。网站地图的三大因素：文本、链接、关键词，都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要 创建网站地图。

 

13、图像热点

 

除AltaVista、Google明确支持图像热点链接外，其他引擎暂不支持。当“蜘蛛” 程序遇到这种结构时，就会无法辨别。因此尽量不要设置图像热点（Image Map）链接。

 

14、FLASH应用

 

FLASH由于不含文字信息，应尽量用于功能展示和广告，少用于网站栏目和页面。

 

15、JS脚本

 

在不支持JS脚步的浏览器里<NOSCRIPT>标签会起到重要提示作用，对搜索引擎的Spider搜索也会有帮助。

 

16、Frame框架

 

Frame标签会被搜索忽略，尽量少用，如果一定要用，则应正确使用Noframe标签， 在<Noframe></Noframe>区域中包含指向frame页的链接或带有关键词的描述文本，同 时在框架以外的区域也出现关键词文本。

 

17、资讯的内部链接

 

有助提高网站排名和PR值，例如相关资讯、推荐资讯等

如何SEO一个网站的文字和HTML代码比

 

其实对于搜索引擎来说，最友好的，当属文字了，虽然现在图片的抓取不断在改进，但是任何一位有经验的老手都会告诉你，SEO，文字最合适。也正因为此，比方说网站建设博客里，图虽有，但仍是文字居多。

 

这里给大家举个简单的例子，说明如何增加网站的文字与HTML代码比：

 

如：

很多人喜欢这样写H1：<h1 class=”title”>这里是标题</h1>

众所周知，一个页面不会出现两个H1，如果有两个，那好比一个人身上长着两个脑袋一样很难看。这不仅是常识，也是标准。所以给h1加上这些那些class或id是画蛇添足。

应这样写：<h1>这里是标题</h1>

然后样式需要在CSS中定义。

这是很简单，那页面中有圆倒角如何做？网上有N多办法，其中最典型的就是HTML+CSS实现圆角矩形，HTML代码部分如下：

<div class="panel">

<DIV class="t-o b1"></DIV>

<DIV class="t-o b2"></DIV>

<DIV class="t-o b3"></DIV>

<DIV class="t-o b4"></DIV>

<DIV class="content">

<!-- 这里放内容 -->

<DIV class="clear"></DIV>

</DIV>

<DIV class="b-o b4"></DIV>

<DIV class="b-o b3"></DIV>

<DIV class="b-o b2"></DIV>

<DIV class="b-o b1"></DIV>

<DIV class="break"></DIV>

</div>

 

其实，我们完全不必用这些代码，可以简化到：

 

<div class="panel">

<!-- 这里放内容 -->

</div>

 

毫无疑问，这样可以很明显的减少HTML代码，当然，光这样写是失去了圆角效果，效果我们可以借助JS加上。

我们完全可以用纯粹的JavaScript代码来写，为了方便，我们采用jQuery来写：

jQuery(function($){

$('.panel').prepend('

 

‘).append(’

 

‘);

})

需要注意的是，这个JavaScript代码要写到一个独立的js文件中。

 

如果页面中，用到多个圆角，则只管设置class为panel即可。

这样，我们可以减少HTML代码，实现了增加内容和HTML代码比的目的。

在不牺牲用户视觉效果的情况下，给爬虫看一个干净的页面代码，并且在网速相等的条件下，一定的减少抓取时间，有利于抓取，毫无疑问，也将有利于搜索引擎的排名。

 

除了这个圆角外，滑动门等，完全可以用jQuery进行代码优化，说点不客气的话，国内常用的那些滑动门实在是恶心，还得加一大堆没用的id，其实滑动门可以做的更简单。

 

这里是HTML代码:

 

<dl>

<dt>滑动门标题1</dt>

<dd>滑动门1对应的内容</dd>

<dt>滑动门标题2</dt>

<dd>滑动门2对应的内容</dd>

......

</dl>

H标签全透视

 

h1一级标题

 

代表重中之重，它的地位在页面中跟关键字的地位一样重要。一般运用于网站标题或者头条新闻上，一些大型网站也运用在LOGO上，虽然h1代码可以写多个，但实际语义上有唯一性，h1标题在一个页面里面最好只出现1次或者没有。

 

h2二级标题

 

主要出现在页面的主体内容的文章标题和栏目标题上，三列结构一般在中间，二列结构一般在重要的一边。可与h3搭配使用。

 

h3三级标题

 

一般主打页面的边侧栏。h4是它的辅助，出现频率不高。

 

页面层级关系不能太深，所以h4，h5，h6一般出现较少。

____________________________________________________________________________________________________