SEO教程:用语义化的HTML制作网页

什么是POSH ？不，这不是一些新的网页设计上的时尚的宣传- POSH是Plain Old Semantic HTML（清晰老式语义化HTML）缩写。语义的HTML这个词被用于种种各样的事情，但它起源于一个目的：使用语义化的标志和属性建设XHTML文档，而不是用表象的HTML 。POSH这个名词被缔造出来，由于一群高度值得尊重的网页设计师想有一个简短的便于影象的，能轻松捕捉的语义化HTML本质看法 。

为什么要使用语义化的HTML？

你可能会说： “由于对于互联网这是准确的事情， ”但它的利益远远超出了这一点。例如，它使得有屏幕阅读器有序次的剖析网页，从而视觉障碍的用户更容易明确获取网站的信息。

其次，搜索引擎优化和语义的HTML是密不行分的同伴。他们有时可能有利益冲突，我们会稍后在文章中说明，但总的来说，他们是一致的。搜索引擎优化的目的是为了资助搜索引擎爬虫更好地相识网页的信息和将网页更好地归类。搜索引擎爬虫不比视觉阅读器强几多，它需要更多的指引去确定一个网页的结构和主题。好的语义化的HTML能够体现页面的结构。

语义的HTML试图通过网页上文字和标志转达网页的寄义。 实验这样思索：若是网页上的内容是你说的话。那么标签是话的结构，音调，停留，甚至是脸上的心情。基本上标签是一半语言。

网站结构

我在以前的文章dev.opera.com我谈到网站结构，目的是提供一个明确的方式为搜索引擎发现这些网站上的网页讨论的主题-这可以进一步提高使用语义的HTML的效果。

网页结构

网页包罗一个title，内容。 内容可以包罗段落，列表，引用，图片和表格。所有这些类型的信息都有自己特定的标志。我们将所有这些标签以题目*****。使用此有关排序表的网页作为例子引出以后要形貌的点（欠好翻译，原文：Use this page about sortable tables as an example to follow along with for the coming points.）。

题目，由H1至H6

一个很好的文档拥有题目和小题目，由于题目更容易确定网页的主题。这些题目凭证主要性从h1至h6排列。说真话，我自己从来没有使用h5和h6。我通常只有一个h1标志在内容页上;在入口网页，例如博客首页上，你可以有多个h1在你的所有文章上。 从语义的角度出发，这样肯谁人很希奇，可是从搜索引擎优化的角度来看，它是很有用的。

严酷语义研究者会建议你只有一个h1两个h2的，3个h3的等，在我来看，我差异意这种说法，通常一个文档不仅仅只有两个h2，我以为这样式也是很是优异的结构。

通常，相识语义化HTML的设计师会把网站的题目放在h1中。在一个网站的主页上，这可能是一个很是明智的决议。网站其他的页面上，你可能有一个特定的题目，这可能与你的网站名称相关，可是不是。关于这些子网页，这个题目应放在h1是明智的，把你的网站名称放在h4甚至span中。

搜索引擎会给题目中的文字以更高的权重。您的网页要害字优化应该至少一次泛起在h1中，而且相关的要害字在其他题目（hx）中，图1所示 。

包罗要害词的题目有助于提高网页的搜索引擎优化 文档中图片被以种种要领使用，应该让图片体现适当语义。 *****真正有用的语义标志是img标志的alt属性，而且只应该用在对文档而言有特定寄义的图片。若是图像只有装饰的目的，让alt属性为空。否则，在alt中注明图像形貌的信息。

若是你想使用的图像来替换文字，由于你文字更悦目一些（用图片取代），确保你使用的是正常的文本在您的HTML中，而使用CSS实现图片替换文字。你必须这样做，由于有视觉障碍的人和搜索引擎无法读取文本中的图像。我自己的*****要领，是通过CSS的background-image属性，然后隐藏HTML文本通过使用一个大的文本缩进（text-indent）（约 -1000px或其他较量大的值。）要小心：文档中的图片上的文字应该是完全和文本一样。否则，你可能失去许多搜索引擎的排名值（译者注：会被搜索引擎处罚为作弊）。

缩略语

作为一个网页设计师，会经常遇到缩略词，我在这篇文章中多次遇到，使用缩写或者简称。若是存在缩略词，请务必提供正式版的术语而且使用abbr或acronym标签。对密渡过大的要害词很有用。

表格

我们都知道，为什么使用表格结构的网站是欠好的，而且我们也知道他们是-用于显示表格数据的。 使用基本的表格已经是在准确偏向迈出的一大步，但也有一些要领，可以改善table语义的价值，从而前进一改善网站的SEO：

1.使用表题目（ th ）为表格的表头（这很简朴简朴）

2 。若是可以的话，使用thead ， tbody和tfoot适当的区分表格

3.为表格提供了一个caption，说明是什么信息在表格中

caption和th是很好的放置你文档要害词的地方。

强调

还记得我说过标签应该是文字的情绪吗？ 这才是真正的情绪：您可以使用em或strong强调某些词。在已往，人们用b和i ，但这些标志已不再提倡，由于它们意味着一个特定的体现，HTML仅仅是用来展示文档结构/寄义（所有气焰气焰应当使用CSS来实现）

搜索引擎会给与这四个标志更高的权重（strong em b i）。 过量使用他们可是弊大于利的，现实会造成损失重点，但若是小心处置赏罚，可为你的文档增色不少。

简短的关于（i）frames

这很简朴：不使用它们。 搜索引擎不会读取他们，屏幕阅读器也很难处置赏罚他们。

利益冲突

所有上述规则也是可以做小小调整的，若是能让你所在的组织的每小我私人兴奋，也是一件好事啊，当你的老板要在网页上有一个令人激动的营销题目，可是你不愿意，由于它没有准确形貌这个网页，还把你以为主要的要害词挤到了第二位。若是你好胜心很强，你不妨把老板以为的一级题目放到h2中，二级题目放在h1中。

同样的问题也可以使用内置页框（iframes）和图像（images）来处置赏罚。若是有人很想你把某个大块内容放在排名较高的页面，但你并不想冒着失去网页重点内容的风险，你虽然可以把这些内容放到iframe或不提供alt的图片中。

最终这些决议在于你-正常语义应该是你设计的基础，当你还想让你的网页最优的时间，这些冲突将泛起。

并非云云简朴的语义化HTML -微名堂

微名堂也语义的HTML ，但他们并不完全简朴！现在，搜索引擎很难使用微名堂的算法，可是，很可能发生转变。 稀奇是在hCard （ HTML版本的的vCard ）对于搜索引擎他显得很是简朴和显着，我嫌疑，未来的几年搜索引擎将*****使用他们。你可以越发智能的通过HTML基本语义使用微名堂，例如，把hCard 放在address标志中也是一个很好的要领！

结论

用语义化的HTML建设你的网页，更具有可会见性，岂论是残障人士照旧搜索引擎。优异的语义标志有助于搜索引擎去确定你网站的主题，若是配合一个优异的网站结构，会让你的网站排名大放色泽！

微名堂：http：//zh.wikipedia.org/w/index.php？title=%E5%BE%AE%E6%A0%BC%E5%BC%8F&variant=zh-cn

vCard：http：//zh.wikipedia.org/w/index.php？title=VCard&variant=zh-cn

hCard：http：//zh.wikipedia.org/wiki/HCard