代碼中＜a href=“#”＞,這樣用#號(hào)，對(duì)seo有什么影響嗎？

發(fā)表人：金馬　|　2022-04-10

有時(shí)候開(kāi)發(fā)網(wǎng)站前端代碼的時(shí)候，需要用到空鏈接，即代碼中<a href=“#”>,這樣用#號(hào)的，一般像這種情況是在錨點(diǎn)的時(shí)候才會(huì)用#號(hào)做跳轉(zhuǎn)。

空鏈接

錨點(diǎn)最初作用是當(dāng)網(wǎng)頁(yè)太長(zhǎng)，而需要使用跳轉(zhuǎn)到各個(gè)部分時(shí)的代碼，隨著技術(shù)的發(fā)展，像這樣的功能，大多會(huì)使用JS動(dòng)畫(huà)的方式控制到某個(gè)點(diǎn)，使用最廣范的就是單頁(yè)設(shè)計(jì)，這種網(wǎng)頁(yè)注重動(dòng)畫(huà)效果，如我們?cè)O(shè)計(jì)開(kāi)發(fā)的網(wǎng)站煜華科技，以是單頁(yè)與多頁(yè)相結(jié)合的站點(diǎn)，鏈接為：

http://www.adhesionled.com/index.php

所以隨著技術(shù)的升級(jí)，錨點(diǎn)的作用也是越來(lái)越小。

但是有時(shí)候又非常方便，因?yàn)椴挥檬裁醇夹g(shù)即可實(shí)現(xiàn)跳轉(zhuǎn)到局部點(diǎn)。

然后有的開(kāi)發(fā)者就會(huì)想這種空鏈接用得多了，究竟對(duì)SEO有沒(méi)影響呢？

按道理來(lái)說(shuō)是沒(méi)有影響的，因?yàn)樗阉饕嬷粫?huì)分析整頁(yè)的內(nèi)容，不會(huì)按錨點(diǎn)去分析內(nèi)容，還有大部分的HTMl標(biāo)題是會(huì)給過(guò)濾了的。

但采用這種方式，然后加JS做跳轉(zhuǎn)，這樣對(duì)SEO影響是有影響的，就是說(shuō)JS跳轉(zhuǎn)肯定比A鏈接跳轉(zhuǎn)對(duì)搜索引擎更不友好。

所以按SEO出發(fā)，盡量不要用空鏈接。

分析了對(duì)SEO的影響后，再對(duì)用戶(hù)對(duì)空鏈接的操作方面的影響，

如<a href=“#”>,這樣用戶(hù)點(diǎn)擊后會(huì)返回頂部，如果寫(xiě)成href="###"這樣的話，就不會(huì)有任何動(dòng)作。

那么超鏈接中 href='#' 和 href='###' 的區(qū)別是什么呢？

簡(jiǎn)單地說(shuō)，

如果想定義一個(gè)空的鏈接，又不跳轉(zhuǎn)到頁(yè)面頭部，可以寫(xiě)href="###"。

詳細(xì)地說(shuō)，

'#' 是有特定意義的，如果 '#' 后有內(nèi)容會(huì)被認(rèn)為是一個(gè)標(biāo)簽而從頁(yè)面找到相應(yīng)標(biāo)簽跳轉(zhuǎn)到該處，找不到時(shí)會(huì)跳到頁(yè)首；

'###' 是一個(gè)無(wú)意義的標(biāo)簽指定，也就是一個(gè) '#' 和不存在的標(biāo)簽 '##' 的組合，頁(yè)面中找不到命名為 '##' 的 <a> 時(shí)該鏈接就不會(huì)發(fā)生跳轉(zhuǎn)，也就不會(huì)導(dǎo)致執(zhí)行 onclick 中的內(nèi)容時(shí)突然發(fā)生頁(yè)面跳到頁(yè)首的問(wèn)題；

"###"主要是防頁(yè)面跳動(dòng)。從其他意義來(lái)說(shuō)，只是一種使用者習(xí)慣，如果你愿意，可以隨便找一個(gè)跳轉(zhuǎn)不到的標(biāo)簽作為命名。

說(shuō)白了"###" 就是一個(gè)不是錨點(diǎn)的字符串，瀏覽器找不到也不會(huì)跳到頁(yè)首，原理就是依賴(lài)了網(wǎng)頁(yè)的報(bào)錯(cuò)機(jī)制，找不到就不做處理。以前空鏈接的href屬性通常使用"#"來(lái)填充，但當(dāng)頁(yè)面出現(xiàn)滾動(dòng)條時(shí)，點(diǎn)擊空鏈接，頁(yè)面會(huì)跳動(dòng)到頁(yè)首，給人的感覺(jué)很不爽。

為什么當(dāng)用"#"填充空鏈接時(shí)會(huì)出現(xiàn)頁(yè)面跳動(dòng)的現(xiàn)象？

原因是"#"被默認(rèn)為錨點(diǎn)"#top"，即跳轉(zhuǎn)到本頁(yè)頁(yè)首。查找了下資料，以下為自己嘗試過(guò)的3種解決辦法：

1、使用3個(gè)#號(hào)，<a href="###" onclick="">鏈接</a>。

為什么要用3個(gè)呢，不得其解。也沒(méi)有查資料了，本來(lái)就是一個(gè)讓人蛋疼的問(wèn)題。

試了下使用兩個(gè)#，ff和chrome下可以防頁(yè)面跳動(dòng)，IE8下頁(yè)面依然跳頁(yè)首(其他IE沒(méi)有測(cè)試，應(yīng)該也會(huì)跳動(dòng)吧)。

3個(gè)#，這幾個(gè)瀏覽器就都能防頁(yè)面跳動(dòng)了。當(dāng)然你如果不閑麻煩的話，使用4個(gè)#、5個(gè)#甚至更多#時(shí)，頁(yè)面跳動(dòng)現(xiàn)象也可解決。

2、使用javascript:void(0)，<a href=" javascript:void(0) " onclick="">鏈接</a>。

這種寫(xiě)法曾經(jīng)給我留下過(guò)深刻的印象，可讓我吃過(guò)大苦頭啊。

它在各個(gè)瀏覽器下均可正常工作(這里的正常工作，指防止頁(yè)面跳動(dòng))。但在IE6下它會(huì)防止頁(yè)面整體刷新(ff、chrome、IE8下不會(huì)出現(xiàn)這樣的狀況，其他瀏覽器就不得而知了)，所以你的onclick事件中如果有頁(yè)面整體刷新這樣的操作時(shí)，最好還是不要使用這種寫(xiě)法了。

當(dāng)時(shí)就是因?yàn)樯媸啦簧?，?dǎo)致了調(diào)此bug到深夜的痛苦經(jīng)歷，最終是在師傅的指導(dǎo)下解決了此bug。

也許正因?yàn)樗蟹理?yè)面整體刷新的操作，在ajax的交互中用的比較多。至于javascript:void到底是個(gè)什么玩意，自己去baidu或google吧。懶得在這貼了。

3、在onclick事件函數(shù)中使用return false，<a href=" # " onclick="return false">鏈接</a>。沒(méi)什么可說(shuō)的，至于為什么這樣寫(xiě)可以做到防頁(yè)面跳動(dòng)，自己去探索吧。

介于以上分析原來(lái)在各瀏覽器中這個(gè)鏈接也是會(huì)有各種不同展示效果，這對(duì)于普通用戶(hù)來(lái)說(shuō)可能會(huì)沒(méi)什么在意的，但是對(duì)于程序員的來(lái)說(shuō)絕對(duì)是程序的BUG，不能不去處理啊，所以空鏈接在各個(gè)角度分析，能不使用，還是盡量不要使用哦

我來(lái)說(shuō)兩句(0)