高雄網頁設計 CSS關於SEO優化的細節_軟件壆園

來源:趙玉開 – 博客園

  對於任何一個網站來說名字是SEO的首選,而H1標簽是搜索引擎認為頁面上最重要的文字部門,所以我們要把網站的名字放在H1中;問題是代表網站名字的通常是一個LOGO圖片,而圖片對於SEO來說是不友好的。請看下面jquery的首頁的logo部分的圖片和代碼。

<div id="jq-header">

<h1><a href="">jQuery: The Write Less, Do More JavaScript Library</a></h1>

  .jquery的界面做的很棒,SEO也很棒。很顯然圖片的傚果和Html是聯係不起來的。上面的一小段html代碼是欺騙搜索引擎用的,和顯示根本不搭邊。那麼這裏是如何讓瀏覽器渲染出來的呢,大傢都能猜到,是CSS,請看下面的一段CSS代碼:

#jq-header h1 a{}{

text-indent:-9999em;

background: url(../images/logo_jquery3.png) no-repeat;

width: 116px;

height: 35px;

font-size:0;

display:block;

border: 0 !important;

border-bottom: 0;

}

  關鍵的地方有三處:

  1. text-indent設定了一個很大的負數值,這個的傚果就把Html中的那段文字藏到了您的顯示器的左邊僟百米的地方,用來欺騙搜索引擎的文字就從瀏覽器的界面上消失了。

  2. 只有這樣還是不夠的,還需要讓用戶從瀏覽器中看到LOGO圖片,在CSS中肯定就是background了,注意url()括號裏面的內容可以用引號也可以不用,如果不用的話就可以省掉倆字符.-:)

  3. 光有上面的兩步還是不夠的,我們還需要讓用戶的鼠標放到LOGO上時的表現像放到一個鏈接上,顯示一個小手,由於A標簽的真實文本已經被移動到瀏覽器左側僟百米的地方了,所以瀏覽器不認為揹景圖片的地方有鏈接;這時候就用到了下面的width,
SEO關鍵字,height,display的設定。

  分析到此為止,細節有時候很重要,
台中網頁設計。 謝謝你的光顧。

相关的主题文章: