首頁 > web前端 > html教學 > HTML 連結錨標籤及其在SEO中的作用介紹_HTML/Xhtml_網頁製作

HTML 連結錨標籤及其在SEO中的作用介紹_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:38:58
原創
1514 人瀏覽過

標籤主要用於定義鏈接和書籤,又被稱作超鏈接或錨(anchor)鏈接,最常見的用法是下面幾種:

建立超連結href屬性,跳到href=""中間的連結。

<a href="http://www.jb51.net/">www.jb51.net</a>
登入後複製

建立書籤,用name 或 id屬性 和超連結尾部加上「#」及這個書籤的name 跳到網頁某個位置

<a name="top"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">返回顶部</a>
<a href="#1">打开第一章</a>
<a href="#2">打开第二章</a>
登入後複製

當您開啟E維科技W3CSchool 線上教學課程的時候,會顯現標題下面的導航,這些就是透過書籤name建立的。

Javascript 事件屬性,點選後執行不同指令

<a href="javascript:void(0)" onclick="this.href='http://www.jb51.net/'">www.jb51.net</a>
登入後複製

錨連結CSS樣式

在沒有自訂錨定連結錨連結文字的CSS樣式的時候,預設錨連結的樣式都是下面:

預設連結樣式,請用滑鼠觸發就可以看到效果

<a href="http://www.jb51.net/">www.jb51.net</a>

a{color:#00F} 未被存取錨定連結都是藍色、底線樣式

a:visited{color:#800080} 點選後的連結就是紫色、底線樣式

a:hover{color:#F00} 滑鼠觸發上去就是紅色、底線樣式

不過由於這三種顏色太過強烈往往無法匹配所有的網頁設計風格,如果需要其他顏色的錨鏈接樣式,只需要在CSS中按照上面三種樣式自己修改顏色及背景就可以了。

錨連結為什麼要帶下劃線?

其實HTML剛推出的時候,瀏覽器還沒有現在這麼先進,同時當時的電腦螢幕也沒有現在液晶等色彩,很多甚至都是黑白的。而在當時區分是不是連結的方法就是透過下劃線,而在許多黑白顯示器上、或者面向色盲用戶的網頁盡量還是保留下劃線,否則用戶無法區分顏色。

當然為了美觀,一般現代網頁設計都不會在連結上直接放上下劃線。不過為了照顧色盲用戶和黑白手機顯示器用戶,建議在用戶滑鼠觸發的時候盡量設定CSS樣式為有底線的。

錨連結Target跳轉視窗設定

當您打開本頁的連結的時候,會發現打開有的連結會彈出到其他窗口,而打開有的連結會直接替換本頁。而這種跳轉方式可以使用錨連結的target屬性來設定跳轉視窗。

_self 目前視窗開啟,錨連結預設都是跳到目前的瀏覽器視窗中,也就是預設target="_self"

<a href="http://www.jb51.net/" target="_self">这里是当前新窗口显示E维科技首页</a>
登入後複製

_blank 新視窗開啟

<a href="http://www.jb51.net/" target="_blank">这里是打开新窗口显示E维科技首页</a>
登入後複製

無名target 同個新視窗開啟

<a href="http://www.jb51.net/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id,就网页中所有target="_weigeti" 链接都在同一个新窗口打开,而_blank每个链接都打开不同新窗口 </a>
登入後複製

框架name或id

<a href="http://www.jb51.net/" target="weigeti">点击这里,将在下面name="weigeti" 的框架里面显示E维科技首页,不会跳转新窗口或者替换当前窗口</a>
<iframe name="weigeti"></iframe>
登入後複製

_parent 父視窗開啟,將連結的檔案載入含有該連結框架的父框架集或父視窗中。如果含有該連結的框架不是嵌套的,則在瀏覽器全螢幕視窗中載入連結的文件,就像_self參數一樣。

<iframe>
   <a href="http://www.jb51.net/" target="_parent">这里是框架内部</a>
</iframe>
登入後複製

_top 框架最頂層,例如網A中鑲嵌iframe了網頁B,網頁B又鑲嵌iframe了網頁C

<iframe>
   <iframe><a href="http://www.jb51.net/" target="_top">这里是框架内部的框架</a></iframe>
</iframe>
登入後複製

如果網頁C中連接設定target=_parent,則跳將網頁B去掉直接A中嵌入網頁C中連結頁面;

而如果網頁C中target=_top ,則直接跳出所有iframe框架,直接轉向C中連結頁面。

_top 在目前的整個瀏覽器視窗中開啟所連結的文檔,因而會刪除所所有框架

錨連結對SEO的作用

外鏈一直被當作搜尋引擎優化的核心之一,為此各種形式的外鏈都出現了,而並不是所有的外鏈都對SEO有作用。

JS寫的外鏈對SEO無效

搜尋引擎比較不願意去辨識Javascript,這都很容易理解。

<a href="#" onclick="this.href='http://www.jb51.net/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('http://www.jb51.net/');">这样的链接对SEO无效,甚至在Chrome等浏览器下都无法打开</a>
登入後複製

連結 rel=nofollow 也對SEO無效

如果您跟別人網站換鏈的時候,透過原始碼發現對方網站為您的連結添加了rel=nofollow 屬性,那麼就是意味著這條連結不讓搜尋引擎抓取。

<a href="http://www.jb51.net/" rel="nofollow">这样的链接对SEO无效</a>

<meta name="robots" content="nofollow" />
<a href="http://www.jb51.net/">如果网页开头有上面一句话,那么这个网页内部所有链接都不会会搜索引擎抓取,所以对SEO无效</a>
登入後複製

連結和背景顏色一樣對SEO無效

Google搜尋刷先推出新演算法打擊連結顏色和北京顏色一樣的外鏈,而這種外鏈一般被認為是黑鏈。

<style type="text/css">
#vgtlink{background:#FFF}
#vgtlinka{background:#FFF}
</style>
<div id="vgtlink">
  <a href="http://www.jb51.net/" id="vgtlinka">这样的链接对SEO无效</a>
</div>

 <a href="http://www.jb51.net/" style="background:#FFF">这样的链接对SEO也无效</a>
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板