在進(jìn)行網(wǎng)站前端開(kāi)發(fā)設(shè)計(jì)的時(shí)候，如何做到用戶與SEO兼得，是每個(gè)站長(zhǎng)都要考慮的問(wèn)題，很多時(shí)候要做到確實(shí)不易，下面整理幾個(gè)小技巧，大家可以看下。
一、文字替換圖片
這種手法在LOGO的處理上最為常見(jiàn)，很多時(shí)候人們會(huì)把首頁(yè)的LOGO加上<H1>標(biāo)簽，可是<H1>標(biāo)簽里如果沒(méi)有文字的話，效果肯定不好，因此很多人會(huì)在logo上加上alt描述，但是肯定還是沒(méi)有直接文字或者錨文本來(lái)的效果好，這個(gè)時(shí)候我們就需要用到這個(gè)技巧了，我們來(lái)看一下一般人的做法：
<h1 class="main-logo">
<a href="#">
<img src="images/header-image.jpg" alt="淘客站長(zhǎng)網(wǎng)" />
</a>
</h1>
下面我們來(lái)看下如何運(yùn)用CSS實(shí)現(xiàn)文字替換圖片：
<h1 id="tk">
<span>淘客站長(zhǎng)網(wǎng)</span>
下面是CSS代碼：
h1#tk {
width: 250px;
height: 25px;
background-image: url(logo.gif);
}
通過(guò)這種方法，我們就可以很好的兼顧用戶體驗(yàn)和SEO。
二、文章列表字?jǐn)?shù)截取問(wèn)題
這是所有網(wǎng)站都會(huì)遇到的問(wèn)題，如上圖所示，文章列表如果字?jǐn)?shù)太多，就會(huì)分成兩排或者把列表擠變形，這個(gè)時(shí)候就需要截取標(biāo)題的字?jǐn)?shù)，這樣一來(lái)對(duì)SEO是很不利的，這個(gè)時(shí)候我們可以用CSS來(lái)控制，不截取字?jǐn)?shù)，但是顯示的依然是截取字?jǐn)?shù)的，這樣一來(lái)，在美觀及SEO上都能兼顧到。
我們來(lái)看下網(wǎng)頁(yè)代碼：
再來(lái)看下CSS代碼：
再來(lái)看下顯示效果：
可以看出，標(biāo)題中多余的字?jǐn)?shù)已經(jīng)沒(méi)有顯示出來(lái)了，而html代碼中的標(biāo)題卻很完整。
三、用CSS來(lái)控制網(wǎng)頁(yè)的布局
大家都知道在一個(gè)網(wǎng)頁(yè)中，越重要的東西越靠前越好，而在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，有的時(shí)候因?yàn)榭紤]到用戶體驗(yàn)而不得不把重要的內(nèi)容放到后面，其實(shí)，我們還是把重要性強(qiáng)的內(nèi)容靠前，次要的東西放置靠后一些，然后用CSS來(lái)定位實(shí)際顯示的位置。
上下布局：
<html>
<head>
<style>
#navigation {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}
#content {position: absolute;top: 150px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}
body { text-align: center; min-width: 600px;}
</style>
</head>
<body>
<div id="content">content<!-- SEO optimized content text goes here.--></div>
<div id="navigation">navigation<!-- navigational elements, ads go here--></div>
</body>
</html>
左右布局：
#navigation {position: absolute;top: 0px;left: 400;width: 200px;margin-left: −400px;text-align: left;}
#content {position: absolute;top: 0px;left: 600;width: 600px;margin-left: −400px;text-align: left;}
body { text-align: center; min-width: 800px;}
<div id="content">SEO optimized content text goes here.</div>
<div id="navigation">navigational elements, ads go here</div>
混合布局：
#top {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;}
#left {position: absolute;top: 150px;left: 50%;width: 200px;margin-left: −400px;text-align: left;}
#main {position: absolute;top: 150px;left: 50%;width: 600px;margin-left: −200px;text-align: left;}
#right {position: absolute;top: 150px;left: 50%;width: 200px;margin-left: 0px;text-align: left;}
<div id="main">optimized main body</div>
<div id="left">left panel</div>
<div id="top">top panel</div>
<div id="right">right panel</div>
湘公網(wǎng)安備 43010302000270號(hào) 統(tǒng)一社會(huì)信用代碼：92430103MA4LAMB24R 網(wǎng)站ICP備案號(hào)：湘ICP備13006070號(hào)-2 
