h1標簽的使用技巧

2020-10-23 18:38:00

字體：大中小

來源：轉載

供稿：網友

h1標簽的正確使用可以達到seo的目的，那么如何在使用h1標簽的同時，又不失去原有的美觀呢？事實上，正確使用h1標簽，我們既可以達到seo的目的，也能達到美觀的目的。大家都知道搜索引擎比較喜歡h1標簽。在SEO中h1標簽也是很基礎也很重要的一步。但有些時候為了界面風格的原因，很多標題性的文字做成了圖片。大多數情況下，切割頁面的時候就直接用上了圖片。在代碼上，h1標簽也就對搜索引擎失去了作用。

其實通過一點小的調整則可以將兩者兼顧。我們需要兩張圖片：
1

看看這段。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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

h1標簽還可以這樣使用,當然你也可以對h1標簽使用樣式比如字體大小，字體顏色之類的，當然像上面例子，只是為了達到seo的目的，就不需要使用樣式對h1標簽進行修改了，因為顯示在用戶面前的是一張圖片。

上一篇：base href 使用方法詳解

下一篇：input文本框樣式代碼實例