html如何进行seo（图文教程）

seo工作类似于写文章，不同的词语，语句组合达成最终的目的。html代码是网站的基础，是网站的构件，对html代码进行seo角度的操作，从搜索引擎的角度来讲，这个分值就会拿到，网站在搜索引擎眼中的总体分值就会提升，网站s […]

seo工作类似于写文章，不同的词语，语句组合达成最终的目的。html代码是网站的基础，是网站的构件，对html代码进行seo角度的操作，从搜索引擎的角度来讲，这个分值就会拿到，网站在搜索引擎眼中的总体分值就会提升，网站seo排名的概率就会增大。

以seo教程自学网首页为例，简单说明一下html相关的seo设置。

一：html代码头部即head标签的seo设置。

1：<meta charset=”UTF-8″>：指明网站编码。

2：<title>SEO教程自学网_网站SEO优化教程学习『武汉小明SEO』</title>：网站标题设置，标题里面的语句字字千金，需着重把握。

3：<meta name=”description” content=”SEO教程自学网,解答seo是什么,武汉小明专业研究搜索引擎优化,致力网站SEO优化教程学习以及seo技术教程培训,提供自学seo视频教程免费观看。” />：网站描述设置，描述也能影响目标关键词排名。

4：

<meta http-equiv=”Cache-Control” content=”no-transform” />

<meta http-equiv=”Cache-Control” content=”no-siteapp” />

<meta name=”applicable-device” content=”pc,mobile”>

<meta name=”MobileOptimized” content=”width”/>

<meta name=”HandheldFriendly” content=”true”/>

移动禁止转码声明。

5：<script src=”//msite.baidu.com/sdk/c.js?appid=1567888488359210″></script>：百度熊掌号ID声明。现目前熊掌号是大势所趋，很有必要。

6：<link rel=”canonical” href=””/>：百度明文规定支持的一种标签，目的是给搜索引擎传达信息：来抓取网站管理者想要呈现的重要内容。

7：其他方面的设置，如301重定向，404页面等。

二：html代码其余部分进行seo设置。

1：<h1><span class=”yusi-mono”>SEO教程自学网</span></h1>。

h1标签是权重标签，建议一个页面使用一次即可。

2：<strong class=”text-success”></strong>。

个人认为，strong标签有强调作用，比B标签效用更好。

3：<a target=”_blank” href=”https://www.xminseo.com/2390.html” title=”seo经验案例分享”><img src=”/images/2-2.png” title=”seo经验案例分享” alt=”seo经验案例分享” /></a>。

图片必须添加alt标签，搜索引擎根据alt标签中的内容来识别图片。

4：

<script type=”application/ld+json”>

{

“@context”: “https://zhanzhang.baidu.com/contexts/cambrian.jsonld”,

“@id”: “https://www.xminseo.com/2747.html”,

“title”:”有关Canonical标签的一些说明”,

“images”: [

“/images/1-10.jpg” ],

“description”: “&nbsp; 如果网站中有大量网址形式不同而内容相同的页面，那么从网站seo优化的角度来看，是有问题的。不同的网址都可以访问同样内容的页面，会给有可能引起搜索引擎的误判。Canonical标签的出现，”,

“pubDate”: “2017-10-22T12:57:35”,

“isOriginal”: “0”

}

</script>

熊掌号页面改造代码，经过相关代码设置，能让页面符合熊掌号规范。

5：

<script>

(function(){

var bp = document.createElement(‘script’);

var curProtocol = window.location.protocol.split(‘:’)[0];

if (curProtocol === ‘https’) {

bp.src = ‘https://zz.bdstatic.com/linksubmit/push.js’;

}

else {

bp.src = ‘’;

}

var s = document.getElementsByTagName(“script”)[0];

s.parentNode.insertBefore(bp, s);

})();

</script>

主动推送相关代码，借助用户行为，点击之后自动推送给百度搜索引擎。

三：以上是seo教程自学网html代码进行seo操作的部分说明，除此开外，还有一点必要的教程需了解，包括但不限于以下方面。

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

2、页面标题（Page Title）的关键词优化 必须列出信息的标题、网站的名称以及相关关键字。

3、Meta标签的优化（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略） 主要包括：Meta description、Meta keywords的设置。关键字密度要适度，通常为2%-8%，也就是说你的关键字必须在页面中出现若干次，或者在搜索引擎允许的范围内，要避免堆砌关键字。

4、针对Google制作Sitemaps Google的sitemaps是对原来robots.txt的扩展，它使用 XML格式来记录整个网站的信息并供Google读取，使搜索引擎能更快更全面的收录网站的内容。

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一般出现较少。

seo教程自学网点评：

细化来讲，html代码部分的seo操作点是较多的，理想状态下是每个细化的点都操作到位。seo是综合得分，每一个细化的点上面发力，最终的seo优化结果才是相对完美的。