我愛騾:網站前端研發預設中的SEO技法

  在施行網站前端研發預設的時刻,怎麼樣做到用戶與SEO兼得,是每個站長都要思索問題的問題,很很長時間候要做到的確不易,下邊收拾幾個小技法,大家可以看下。

  一、書契調換圖片

  這種手法在LOGO的處置上最為常見,很很長時間候許多人會把首頁的LOGO加上<H1>標簽,可是<H1>標簽裡假如沒有書契的話,效果肯定非常不好,因為這個眾多人會在logo上加上alt描寫,不過肯定仍然沒有直接書契還是錨文壓根兒的效果好,這個時刻我們就需求用到這個技法了,我們來看一下子普通人的作法:

<h1 class=main-logo>

<a href=#>

<img src=images/header-image.jpg alt=淘客站長網 />

</a>

</h1>

  下邊我們來看下怎麼樣使用CSS成功實現書契調換圖片:

<h1 id=tk>

<span>淘客站長網</span>

</h1>

  下邊是CSS代碼:

h1#tk {

width: 250px;

height: 25px;

background-image: url(logo.gif);

}

  經過這種辦法,我們就可以美好的兼顧用戶體驗認識和SEO。

  二、文章列裝裱字畫數截取一段問題

  這是全部網站都會碰到的問題,如上所述圖所示,文章列表假如字數非常多,便會分成兩排還是把列表擠變型,這個時刻就需求截取一段題目的字數,這麼一來對SEO是很不順利的,這個時刻我們可以用CSS來扼制,不截取一段字數,不過顯露的依舊是截取一段字數的,這麼一來,在好看及SEO上都能兼顧到。

  我們來看下網頁代碼:

<div class=list>
<ul>
<li><a href=#>多個啟示靈感頁面網站預設多個啟示多個啟示靈感頁面網站預設多個啟示</a><span>2010-03-14</span></li>
<li><a href=#>315個JS廣告代碼和269個特效</a><span>2010-03-14</span></li>
<li><a href=#>SNS網多個啟示靈感頁面網站預設多個啟示多個啟示靈感頁面網站預設多個啟示站</a><span>2010-03-14</span></li>
<li><a href=#>阿裡吧吧推商旅</a><span>2010-03-14</span></li>
<li><a href=#>谷歌評估必應搜索算法</a><span>2010-03-14</span></li>
<li><a href=#>谷歌評估必應搜索算法谷歌評估必應搜索算法</a><span>2010-03-14</span></li>
<li><a href=#>漢王創藝聖手+無線0604數的所在位置板</a><span>2010-03-14</span></li>
<li><a href=#>跨過後臺研發的那道檻</a><span>2010-03-14</span></li>
<li><a href=#>09年海外100大最佳預設博客網站</a><span>2010-03-14</span></li>
<li><a href=#>阿裡吧吧推商旅</a><span>2010-03-14</span></li>
</ul>
</div>

  再來看下CSS代碼:

body{
padding:2em;
font-size:12px;
font-family:SimSun;
}
.list{
width:300px;
}
.list ul{
margin:0;
padding:0 0 0 30px;
list-style:none;
background:url(,過載請注明鏈接來源。