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

时间 2019-11-08

标签基于 html seo 基础前端必须掌握栏目 HTML 繁體版

原文原文链接

Html代码seo优化最佳布局，实例讲解

众所周知，搜索引擎对html代码是很是优化的，因此html的优化是作好推广的第一步。一个符合seo规则的代码大致以下界面所示。

一、<!–聚酯多元醇）–> 这个东西是些页面注释的，能够在这里加个人“聚酯多元醇”，但过多关键字可能被搜索引擎惩罚哦！

二、<html> 这个是代码开头结尾时和</html>对应。

三、<head> 头标记结尾用</head>

四、<title>（聚酯多元醇、热塑性聚氨酯树脂）</title>兵家必争之地，很重要，字字值千金啊，各位站长狠抓，注意关键字放置，不要堆砌关键字，否则后果够你吃的。

五、<meta http-equiv=Content-Language content=zh-cn>

六、<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>

七、<meta name=”keywords” content=” 聚酯多元醇|热塑性聚氨酯树脂”> 这个如今权重不过高了，可是只要有轻重咱们也要利用。

八、<meta name=”description” content=” 聚酯多元醇|热塑性聚氨酯树脂生产基地，山东华鑫有限公司！”>这个东西是你百度搜索时候网站下面的那个所用简介，有必定做用哦！

九、<link href=”style/css.css” type=”text/css” rel=”stylesheet”>

十、</head>

十一、<body>

十二、<div>

1三、<h1>聚酯多元醇</h1>很重要，若是不写，你比丢钱了损失还大。

1四、<h2>聚酯多元醇|热塑性聚氨酯树脂</h2>

1五、<h3>聚酯多元醇系列1</h3>

1六、<h4>聚酯多元醇系列2</h4>

1七、<h5>聚酯多元醇系列3</h5>

1八、<h6>聚酯多元醇系列4</h6> 上面这些标题都是很重要的，对没有小版块的内容都要淡定哦！

1九、<img src=”xxx.jpg” alt=” 聚酯多元醇生产基地”>能够增长网站的相关度。

20、<a href=”/” title=” 聚酯多元醇塑料制品必须的原料哦”>聚酯多元醇</a>能够借助超连接来增长关键词出现的次数，这个词最好作成网站关键词，这样助于排名。

2一、<strong>聚酯多元醇</strong>权重次于<H1>的，高于很肯定的是它比<b>、<u>、<i>等标签。

2二、<b>关键词强调</b><u>关键词强调</u><i>关键词强调</i>权重次于上面的

2三、</div>

2五、<div>

2六、版权部分关键词强调，这样能够增长关键字布局，更加合理。并且这个地方放置会获得不错的权重。

2七、</div>

2八、</body>

2九、</html>

SEO最经常使用的HTML标签

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

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

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

　　三、<a href="网址" title="连接说明">网页信息</a> 对于网页中很是重要的连接采用TITLE说明，有助于帮助搜索引擎找到网页的重点URL。

　　四、Alt标签《img src=“XXX.jpg” alt=“图片说明”》网页中的ALT标签是用来对图片进行说明的，这里有两方面的做用，一个是告诉搜索引擎图片的信息，另外一个是在图片加载不出来或图片路径出问题的时候告诉用户，这是什么样的图片。在一个网页中，全部图片都用ALT标签确定是很差的，最好的办法仍是在网页中重点图片(大多数状况下是和网站突出目标关键词相关的图片)使用ALT标识，这样对搜索引擎爬行网页重要图片颇有帮助，对于提升网站关键词权重也会颇有好处的。

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

1、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分

2、SEO优化

一、静态页面

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

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

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

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

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

四、针对Google制做Sitemaps

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

五、图片的关键词优化

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

六、避免表格的嵌套

目前本站的表格嵌套太多，搜索引擎一般只读取3个<table>的嵌套，若是太多，会形成部分有用信息没有被检测到。

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

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

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

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

九、页面容量的合理化

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

十、外部文件策略

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

十一、外部连接

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

十二、网站地图

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

1三、图像热点

除AltaVista、Google明确支持图像热点连接外，其余引擎暂不支持。当“蜘蛛” 程序遇到这种结构时，就会没法辨别。所以尽可能不要设置图像热点（Image Map）连接。

1四、FLASH应用

FLASH因为不含文字信息，应尽可能用于功能展现和广告，少用于网站栏目和页面。

1五、JS脚本

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

1六、Frame框架

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

1七、资讯的内部连接

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

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

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

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

如：

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

众所周知，一个页面不会出现两个H1，若是有两个，那比如一我的身上长着两个脑壳同样很难看。这不只是常识，也是标准。因此给h1加上这些那些class或id是多此一举。

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

而后样式须要在CSS中定义。

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

</DIV>

</div>

其实，咱们彻底没必要用这些代码，能够简化到：

</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通常出现较少。