h1標籤的使用技巧_經驗交流
- PHP中文网原創
- 2016-05-16 12:06:481807瀏覽
h1標籤的正確使用可以達到seo的目的，那麼如何在使用h1標籤的同時，又不失去原有的美觀呢？事實上，正確使用h1標籤，我們既可以達到seo的目的，也能達到美觀的目的。大家都知道搜尋引擎比較喜歡h1標籤。在seo中h1標籤也是很基礎也很重要的一步。但有些時候為了介面風格的原因，很多標題性的文字做成了圖片。大多數情況下，切割頁面的時候就直接用上了圖片。在程式碼上，h1標籤也就對搜尋引擎失去了作用。
其實透過一點小的調整則可以將兩者兼顧。我們需要兩張圖片：
1 
2 
看看這段。 h1標籤對搜尋引擎依然可讀，我們只是利用text-indent:-9999px;將「邀請好友加入」的文字遠遠的丟到左邊去了。
代碼如下:
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px;
background:url(header.gif) no-repeat;}
.testbox{background:url(bg.gif); width:522px; height:323px;}
</style>
<div class="test">
<h1>邀请好友加入</h1>
</div>
<div class="testbox"></div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>h1标签的使用</title>
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px;
background:url(/upload/20071124114047865.gif) no-repeat;}
.testbox{background:url(/upload/20071124114047678.gif); width:522px; height:323px;}
</style>
</head>
<body>
正确使用h1标签，兼顾美观与seo.
<div class="test">
<h1>邀请好友加入</h1>
</div>
<div class="testbox"></div>
</body>
</html>
h1標籤還可以這樣使用,當然你也可以對h1標籤使用樣式例如字體大小，字體顏色之類的，當然像上面例子，只是為了達到seo的目的，就不需要使用樣式對h1標籤進行修改了，因為顯示在用戶面前的是一張圖片。
以上是h1標籤的使用技巧_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn