最常見的A標(biāo)簽和H標(biāo)簽該如何正確嵌套？網(wǎng)站中幾乎隨處可見，HTML的標(biāo)簽不論你怎么使用都是可以正常解析，被瀏覽器完整地渲染出想要的效果，所以很少有人會(huì)關(guān)注HTML標(biāo)簽的嵌套規(guī)則。而在SEO優(yōu)化中a標(biāo)簽和h標(biāo)簽的嵌套使用不當(dāng)，對(duì)SEO優(yōu)化的影響可以說是非常之大。

要對(duì)a標(biāo)簽與h標(biāo)簽的嵌套規(guī)則首先的理解什么是錨文本和錨鏈接，如果搞不清這個(gè)就會(huì)把HTML標(biāo)簽胡亂嵌套。

01SEO優(yōu)化中的錨鏈接

看下面的示例代碼：

錨文本

上面是一個(gè)標(biāo)準(zhǔn)的錨鏈接，也就是說這個(gè)超鏈接包含有一個(gè)完整的“錨鏈接”和“錨文本”，其中的錨文本可以是文章的標(biāo)題或者一個(gè)關(guān)鍵詞。比如我們?cè)趽Q友情鏈接的時(shí)候，對(duì)方會(huì)要求你提供錨文本和錨鏈，一般情況下錨鏈就是網(wǎng)站網(wǎng)站的URL，錨文本則是網(wǎng)站的名稱或你希望的一個(gè)關(guān)鍵詞。

在網(wǎng)頁設(shè)計(jì)中一個(gè)網(wǎng)站到處都有鏈接，所有的連接不論你怎么嵌套，對(duì)于瀏覽器來說都可以正確的渲染，但是對(duì)于SEO優(yōu)化則不一定會(huì)正確，因?yàn)樗阉饕媸前凑誋TML規(guī)則來進(jìn)行頁面所以和識(shí)別內(nèi)容的。

02正確的A和H標(biāo)簽嵌套方法

在網(wǎng)站頁面上，如logo處的鏈接，內(nèi)頁中二級(jí)欄目的鏈接，相關(guān)文章內(nèi)容的鏈接，這些地方的錨鏈接都是為了用戶體驗(yàn)和網(wǎng)站內(nèi)容相互推薦的重要表現(xiàn)形式。有的地方使用了SEO優(yōu)化的權(quán)重標(biāo)簽h1~h6，而又需要添加鏈接，正確的規(guī)則是：

標(biāo)題

根據(jù)前面錨鏈的原理，a標(biāo)簽里面的鏈接文字就是這個(gè)錨鏈接的關(guān)鍵詞，如果把h1放在a標(biāo)簽的里面，那么意思就是把整個(gè)h1標(biāo)簽作為了錨文本，從邏輯上來說是不對(duì)的，即使在瀏覽器上展現(xiàn)的效果都一樣。

所以超鏈接里面一定是直接寫文字，而不是包含很多的標(biāo)簽，這樣才能真正的有利于SEO優(yōu)化，搜索引擎的判斷方式是按照w3c的標(biāo)準(zhǔn)來進(jìn)行的，如果你沒有按照規(guī)則來編寫代碼，很有可能收錄也不會(huì)太好。

這也解釋了同樣的一個(gè)SEO優(yōu)化人員，在優(yōu)化相同權(quán)重的不同網(wǎng)站時(shí)效果差異會(huì)很大的原因，由于前端代碼的不規(guī)范，影響網(wǎng)站收錄和關(guān)鍵詞排名是不可忽略的，有人說SEO優(yōu)化關(guān)前端代碼什么事，是你自己優(yōu)化技術(shù)不行怪前端！這也巧了，你看你寫的都是什么垃圾代碼吧。

03錯(cuò)誤的HTML標(biāo)簽嵌套分享

一、網(wǎng)站首頁logo處

在網(wǎng)站的首頁logo這里，什么樣的代碼都有，而正確的卻只有

這一種方式，下面提供3種常見的錯(cuò)誤寫法：

上面第一個(gè)和第二個(gè)的錯(cuò)誤都是邏輯不對(duì)，不符合錨鏈接的規(guī)則，a標(biāo)簽里面嵌套的塊級(jí)元素div和標(biāo)題標(biāo)簽h是個(gè)什么邏輯，請(qǐng)你給我解釋一下！第3個(gè)的錯(cuò)誤在于沒有錨文本，a標(biāo)簽里面是空的，logo圖片使用css的background屬性展示出來，沒有錨文本這就是一個(gè)空連接，搜索引擎都找不著錨文本請(qǐng)問憑什么收錄，還要給你一個(gè)優(yōu)質(zhì)的排名，你在逗我嗎。

二、欄目列表鏈接到詳細(xì)頁

欄目列表的錯(cuò)誤方法主要表現(xiàn)在將文章的標(biāo)題和摘要直接使用一個(gè)A標(biāo)簽鏈接，這樣對(duì)于前端來說也蠻省事的。

欄目文章列表

比如上圖中你可以點(diǎn)左邊的圖片打開詳細(xì)頁，也可以點(diǎn)右邊紅框的任意位置進(jìn)入文章詳情頁，用戶使用和瀏覽器渲染等都沒有問題，但是源碼就不符合規(guī)范了，右邊紅框內(nèi)的源碼如下。

GET 與 POST 兩種請(qǐng)求方法的區(qū)別

說到WEB開發(fā)中GET與POST兩種請(qǐng)求方法……

根據(jù)錨鏈接的規(guī)則，這一個(gè)a標(biāo)簽里面的h4和p標(biāo)簽都是錨文本，這么多的內(nèi)容被當(dāng)作錨文本來處理，搜索引擎會(huì)覺得這孫子到底寫的是啥，老子難以理解代碼的意思讀不懂啊。

三、文章詳情頁相關(guān)文章

有時(shí)候?yàn)榱藢?shí)現(xiàn)一些特殊效果或者為了省事，直接使用某些嵌套可以很方便的就能實(shí)現(xiàn)想要的功能，并且是視覺上有不錯(cuò)的表現(xiàn)。比如下面的截圖是文章詳情頁的相關(guān)文章代碼。

相關(guān)文章

從前臺(tái)的表現(xiàn)看沒有什么問題，當(dāng)我們打開源碼，你就會(huì)發(fā)現(xiàn)這個(gè)HTML標(biāo)簽嵌套是不規(guī)范的、不合理的，代碼如下：

HTML中的哪些meta標(biāo)簽該用或不該用？這段代碼有2個(gè)錯(cuò)誤，第一是HTML標(biāo)簽中l(wèi)i和div均屬于塊級(jí)元素，用于頁面的布局，屬于兄弟關(guān)系，不宜進(jìn)行嵌套使用；第二是超鏈接a標(biāo)簽里面嵌套的div，請(qǐng)你解釋一下這個(gè)邏輯是什么，不符合錨鏈接的規(guī)則，也不利于SEO優(yōu)化。

經(jīng)過上面的分析，其實(shí)正確的寫法就嚴(yán)格按照w3c標(biāo)準(zhǔn)來寫前端代碼，由于HTML標(biāo)簽不管你怎么寫，瀏覽器幾乎都可以渲染出來，但是如果嵌套的不規(guī)范，也會(huì)加重瀏覽器渲染頁面的時(shí)間，也就是打開網(wǎng)頁看到效果的時(shí)間會(huì)延長(zhǎng)；其次是對(duì)SEO優(yōu)化非常不友好。

不要說SEO優(yōu)化和前端代碼沒有關(guān)系或影響可以忽略不計(jì)，當(dāng)一個(gè)網(wǎng)站上不規(guī)范的代碼多了自然影響就大了，SEO優(yōu)化靠的就是一點(diǎn)一滴的權(quán)重積累，這里可以不用管，那里也可以忽略不計(jì)，這樣的地方多了，你的網(wǎng)站整體權(quán)重就不行了，細(xì)節(jié)很重要，因?yàn)榇蟮牡姆矫嫫渌硕贾?#xff0c;別人也都做了。

舉報(bào)/反饋

總結(jié)

以上是生活随笔為你收集整理的seo html空格影响,这一对HTML标签嵌套对SEO优化的影响，居然99%的人不知道！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。