SEO教程:用語義化的HTML制作網(wǎng)頁

什么是POSH ？不，這不是一些新的網(wǎng)頁設(shè)計(jì)上的時(shí)尚的宣傳- POSH是Plain Old Semantic HTML（清晰老式語義化HTML）縮寫。語義的HTML這個(gè)詞被用于種種各樣的事情，但它起源于一個(gè)目的：使用語義化的標(biāo)志和屬性建設(shè)XHTML文檔，而不是用表象的HTML 。POSH這個(gè)名詞被締造出來，由于一群高度值得尊重的網(wǎng)頁設(shè)計(jì)師想有一個(gè)簡(jiǎn)短的便于影象的，能輕松捕捉的語義化HTML本質(zhì)看法 。

為什么要使用語義化的HTML？

你可能會(huì)說： “由于對(duì)于互聯(lián)網(wǎng)這是準(zhǔn)確的事情， ”但它的利益遠(yuǎn)遠(yuǎn)超出了這一點(diǎn)。例如，它使得有屏幕閱讀器有序次的剖析網(wǎng)頁，從而視覺障礙的用戶更容易明確獲取網(wǎng)站的信息。

其次，搜索引擎優(yōu)化和語義的HTML是密不行分的同伴。他們有時(shí)可能有利益沖突，我們會(huì)稍后在文章中說明，但總的來說，他們是一致的。搜索引擎優(yōu)化的目的是為了資助搜索引擎爬蟲更好地相識(shí)網(wǎng)頁的信息和將網(wǎng)頁更好地歸類。搜索引擎爬蟲不比視覺閱讀器強(qiáng)幾多，它需要更多的指引去確定一個(gè)網(wǎng)頁的結(jié)構(gòu)和主題。好的語義化的HTML能夠體現(xiàn)頁面的結(jié)構(gòu)。

語義的HTML試圖通過網(wǎng)頁上文字和標(biāo)志轉(zhuǎn)達(dá)網(wǎng)頁的寄義。 實(shí)驗(yàn)這樣思索：若是網(wǎng)頁上的內(nèi)容是你說的話。那么標(biāo)簽是話的結(jié)構(gòu)，音調(diào)，停留，甚至是臉上的心情?；旧蠘?biāo)簽是一半語言。

網(wǎng)站結(jié)構(gòu)

我在以前的文章dev.opera.com我談到網(wǎng)站結(jié)構(gòu)，目的是提供一個(gè)明確的方式為搜索引擎發(fā)現(xiàn)這些網(wǎng)站上的網(wǎng)頁討論的主題-這可以進(jìn)一步提高使用語義的HTML的效果。

網(wǎng)頁結(jié)構(gòu)

網(wǎng)頁包羅一個(gè)title，內(nèi)容。 內(nèi)容可以包羅段落，列表，引用，圖片和表格。所有這些類型的信息都有自己特定的標(biāo)志。我們將所有這些標(biāo)簽以題目*****。使用此有關(guān)排序表的網(wǎng)頁作為例子引出以后要形貌的點(diǎn)（欠好翻譯，原文：Use this page about sortable tables as an example to follow along with for the coming points.）。

題目，由H1至H6

一個(gè)很好的文檔擁有題目和小題目，由于題目更容易確定網(wǎng)頁的主題。這些題目憑證主要性從h1至h6排列。說真話，我自己從來沒有使用h5和h6。我通常只有一個(gè)h1標(biāo)志在內(nèi)容頁上;在入口網(wǎng)頁，例如博客首頁上，你可以有多個(gè)h1在你的所有文章上。 從語義的角度出發(fā)，這樣肯誰人很希奇，可是從搜索引擎優(yōu)化的角度來看，它是很有用的。

嚴(yán)酷語義研究者會(huì)建議你只有一個(gè)h1兩個(gè)h2的，3個(gè)h3的等，在我來看，我差異意這種說法，通常一個(gè)文檔不僅僅只有兩個(gè)h2，我以為這樣式也是很是優(yōu)異的結(jié)構(gòu)。

通常，相識(shí)語義化HTML的設(shè)計(jì)師會(huì)把網(wǎng)站的題目放在h1中。在一個(gè)網(wǎng)站的主頁上，這可能是一個(gè)很是明智的決議。網(wǎng)站其他的頁面上，你可能有一個(gè)特定的題目，這可能與你的網(wǎng)站名稱相關(guān)，可是不是。關(guān)于這些子網(wǎng)頁，這個(gè)題目應(yīng)放在h1是明智的，把你的網(wǎng)站名稱放在h4甚至span中。

搜索引擎會(huì)給題目中的文字以更高的權(quán)重。您的網(wǎng)頁要害字優(yōu)化應(yīng)該至少一次泛起在h1中，而且相關(guān)的要害字在其他題目（hx）中，圖1所示 。

包羅要害詞的題目有助于提高網(wǎng)頁的搜索引擎優(yōu)化 文檔中圖片被以種種要領(lǐng)使用，應(yīng)該讓圖片體現(xiàn)適當(dāng)語義。 *****真正有用的語義標(biāo)志是img標(biāo)志的alt屬性，而且只應(yīng)該用在對(duì)文檔而言有特定寄義的圖片。若是圖像只有裝飾的目的，讓alt屬性為空。否則，在alt中注明圖像形貌的信息。

若是你想使用的圖像來替換文字，由于你文字更悅目一些（用圖片取代），確保你使用的是正常的文本在您的HTML中，而使用CSS實(shí)現(xiàn)圖片替換文字。你必須這樣做，由于有視覺障礙的人和搜索引擎無法讀取文本中的圖像。我自己的*****要領(lǐng)，是通過CSS的background-image屬性，然后隱藏HTML文本通過使用一個(gè)大的文本縮進(jìn)（text-indent）（約 -1000px或其他較量大的值。）要小心：文檔中的圖片上的文字應(yīng)該是完全和文本一樣。否則，你可能失去許多搜索引擎的排名值（譯者注：會(huì)被搜索引擎處罰為作弊）。

縮略語

作為一個(gè)網(wǎng)頁設(shè)計(jì)師，會(huì)經(jīng)常遇到縮略詞，我在這篇文章中多次遇到，使用縮寫或者簡(jiǎn)稱。若是存在縮略詞，請(qǐng)務(wù)必提供正式版的術(shù)語而且使用abbr或acronym標(biāo)簽。對(duì)密渡過大的要害詞很有用。

表格

我們都知道，為什么使用表格結(jié)構(gòu)的網(wǎng)站是欠好的，而且我們也知道他們是-用于顯示表格數(shù)據(jù)的。 使用基本的表格已經(jīng)是在準(zhǔn)確偏向邁出的一大步，但也有一些要領(lǐng)，可以改善table語義的價(jià)值，從而前進(jìn)一改善網(wǎng)站的SEO：

1.使用表題目（ th ）為表格的表頭（這很簡(jiǎn)樸簡(jiǎn)樸）

2 。若是可以的話，使用thead ， tbody和tfoot適當(dāng)?shù)膮^(qū)分表格

3.為表格提供了一個(gè)caption，說明是什么信息在表格中

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

強(qiáng)調(diào)

還記得我說過標(biāo)簽應(yīng)該是文字的情緒嗎？ 這才是真正的情緒：您可以使用em或strong強(qiáng)調(diào)某些詞。在已往，人們用b和i ，但這些標(biāo)志已不再提倡，由于它們意味著一個(gè)特定的體現(xiàn)，HTML僅僅是用來展示文檔結(jié)構(gòu)/寄義（所有氣焰氣焰應(yīng)當(dāng)使用CSS來實(shí)現(xiàn)）

搜索引擎會(huì)給與這四個(gè)標(biāo)志更高的權(quán)重（strong em b i）。 過量使用他們可是弊大于利的，現(xiàn)實(shí)會(huì)造成損失重點(diǎn)，但若是小心處置賞罰，可為你的文檔增色不少。

簡(jiǎn)短的關(guān)于（i）frames

這很簡(jiǎn)樸：不使用它們。 搜索引擎不會(huì)讀取他們，屏幕閱讀器也很難處置賞罰他們。

利益沖突

所有上述規(guī)則也是可以做小小調(diào)整的，若是能讓你所在的組織的每小我私人興奮，也是一件好事啊，當(dāng)你的老板要在網(wǎng)頁上有一個(gè)令人激動(dòng)的營銷題目，可是你不愿意，由于它沒有準(zhǔn)確形貌這個(gè)網(wǎng)頁，還把你以為主要的要害詞擠到了第二位。若是你好勝心很強(qiáng)，你不妨把老板以為的一級(jí)題目放到h2中，二級(jí)題目放在h1中。

同樣的問題也可以使用內(nèi)置頁框（iframes）和圖像（images）來處置賞罰。若是有人很想你把某個(gè)大塊內(nèi)容放在排名較高的頁面，但你并不想冒著失去網(wǎng)頁重點(diǎn)內(nèi)容的風(fēng)險(xiǎn)，你雖然可以把這些內(nèi)容放到iframe或不提供alt的圖片中。

最終這些決議在于你-正常語義應(yīng)該是你設(shè)計(jì)的基礎(chǔ)，當(dāng)你還想讓你的網(wǎng)頁最優(yōu)的時(shí)間，這些沖突將泛起。

并非云云簡(jiǎn)樸的語義化HTML -微名堂

微名堂也語義的HTML ，但他們并不完全簡(jiǎn)樸！現(xiàn)在，搜索引擎很難使用微名堂的算法，可是，很可能發(fā)生轉(zhuǎn)變。 稀奇是在hCard （ HTML版本的的vCard ）對(duì)于搜索引擎他顯得很是簡(jiǎn)樸和顯著，我嫌疑，未來的幾年搜索引擎將*****使用他們。你可以越發(fā)智能的通過HTML基本語義使用微名堂，例如，把hCard 放在address標(biāo)志中也是一個(gè)很好的要領(lǐng)！

結(jié)論

用語義化的HTML建設(shè)你的網(wǎng)頁，更具有可會(huì)見性，豈論是殘障人士照舊搜索引擎。優(yōu)異的語義標(biāo)志有助于搜索引擎去確定你網(wǎng)站的主題，若是配合一個(gè)優(yōu)異的網(wǎng)站結(jié)構(gòu)，會(huì)讓你的網(wǎng)站排名大放色澤！

微名堂：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