一、合理的title、description、keywords

搜尋對著三項的權重逐個減小，title值強調重點即可；description把頁面內容高度概括，不可過分堆砌關鍵詞；keywords列舉出重要關鍵詞。

1、title

title，就是瀏覽器上顯示的那些內容，不僅使用者能看到，也能被搜尋引擎檢索到（搜尋引擎在抓取網頁時，最先讀取的就是網頁標題，所以title是否正確設定極其重要。）title一般不超過80個字元，而且詞語間要用英文“-”隔開，因為計算機只對英語的敏感性較高，對漢語的敏感性不高。

用法：<title>網站標題</title>

（1）首頁title寫法，一般是“網站名稱-主關鍵詞或一句含有主關鍵詞的描述”。一般網站名稱放後面，因為搜尋引擎給予標題最前面的詞比後面的高。比如，做“冰箱”這個詞，就這樣寫“冰箱_變頻冰箱-海爾官網”。

（2）欄目頁title寫法，一般有2種：“欄目名稱-網站名稱”、“欄目名稱欄目關鍵詞-網站名稱”。而且欄目名稱最好用關鍵詞來確定，比如企業招聘欄目最好就用企業招聘，而不要起個讓人無法識別的名字如企業來人，企業看看，或企業加上一些特殊符號，這種寫法雖然很有個性，但會讓你的網站在優化上佔了下風。

（3）分類列表頁title寫法，一般是“分類列表頁名稱-欄目名稱-網站名稱”，這個和欄目頁差不多。

（4）文章頁title寫法，一般有3種：“文章標題-網站名稱”、“內容標題-欄目名稱”、“內容標題-欄目名稱-網站名稱”。其中，“內容標題-欄目名稱-網站名稱”的寫法最為規範，但也相對複雜，它能給使用者很好的提示，讓使用者知道他在訪問哪篇文章，並且是在哪個網站的哪個欄目下。

2、description（內容摘要）

description是對於一個網頁的簡要內容概況。description一般不超過150個字元，描述內容要和頁面內容相關。

用法：<metaname=”Description”Content=”你網頁的簡述”>

（1）首頁description寫法，一般是將首頁的標題、關鍵詞和一些特殊欄目的內容融合到裡面，寫成簡單的介紹。

（2）欄目頁description寫法，一般是將欄目的標題、關鍵字、分類列表名稱融合到裡面，寫成簡單的介紹。

（3）分類列表頁description，這個就比較簡單了，一般只需要把分類列表的標題、關鍵詞融合在一起，寫成簡單的介紹。

（4）文章頁description寫法，一般有2種寫法，標準寫法就和前面的一樣，將文章標題、文章中的重要內容和關鍵詞融合在一起，寫成簡單的介紹。這是最好最標準的寫法。但是這樣寫比較麻煩，還有一種種偷懶的方法，你可以在文章首段和標題中加入關鍵詞，比如我這篇文章是講title、keywords、description的，那麼在文章首段和標題中就加入這些內容，然後直接將文章首段的內容複製到description中即可。

3、keywords（關鍵詞）

keywords，主要作用是告訴搜尋引擎本頁內容是圍繞哪些詞展開的。因此keywords的每個詞都要能在內容中找到相應匹配，才有利於排名。keywords一般不超過3個，每個關鍵詞不宜過長，而且詞語間要用英文“,”隔開。為什麼用英文上文已經說過。而且，儘量將重要的關鍵字靠前放，因為靠後的關鍵字排名較差，除非你站有很高的權重。

用法：<metaname=”Keywords”Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>

（1）首頁keywords寫法，一般是“網站名稱,主要欄目名,主要關鍵詞”。

（2）欄目頁keywords寫法，一般是“欄目名稱,欄目關鍵字,欄目分類列表名稱”。

（3）分類列表頁keywords寫法，這個就比較簡單了，只要將你這個欄目中的主要關鍵字寫入即可。

（4）文章頁keywords寫法，建議大家提取文章中的關鍵詞，比如我的文章主要是講SEO優化的，那麼我關鍵詞肯定是SEO優化，如果你覺得你提取關鍵詞的能力較差，也可以選擇文章中出現比較多的詞來作為關鍵詞，比如我現在寫的內容是關於title、keywords、description的，那我的文章頁關鍵詞就是這3個。

二、語義化的HTML程式碼，符合W3C規範：語義化程式碼讓搜尋引擎容易理解網頁

1. 什麼是HTML語義化

什麼是HTML語義化，我的理解是：用最恰當的標籤來標記內容。通俗的說，就是告訴你：“這是一個一級標題或二級標題”，“這是一個段落”，“這是頭部”，“這是一個導航欄”，並不會告訴你：“這是紅色的”，“這個有多麼寬，多麼高”。標題脫了CSS這層外衣，它還是一個標題。這就是簡單的HTML語義化：表現網頁的結構。語義化的HTML元素指的是那些使用最恰當的HTML進行標記的內容，在標記構成中並不關心內容顯示。語義化的HTML是構建有效網站的基石。

2、在寫HTML程式碼時應該注意

• 儘可能少的使用無語義的標籤div和span；
• 在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
• 不要使用純樣式標籤，如：b、font、u等，改用css設定。
• 需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；
• 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
• 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
• 每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

3、HTML5常用的語義元素

HTML5提供了新的語義元素來定義網頁的不同部分，它們被稱為“切片元素”，如圖所示

常用的語義化元素：

（1）header元素

header 元素代表“網頁”或“section”的頁首。

通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜尋框，一個nav，或者任何相關logo。

整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素

<header> 
  <hgroup> 
    <h1>網站標題</h1>
    <h1>網站副標題</h1>
  </hgroup> 
</header>

header使用注意：

• 可以是“網頁”或任意“section”的頭部部分；
• 沒有個數限制。
• 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

（2）footer元素

footer元素代表“網頁”或“section”的頁尾，通常含有該節的一些基本資訊，譬如：作者，相關文件連結，版權資料。如果footer元素包含了整個節，那麼它們就代表附錄，索引，提拔，許可協議，標籤，類別等一些其他類似資訊。

<footer> 我是頁尾 </footer>

footer使用注意：

• 可以是“網頁”或任意“section”的底部部分；
• 沒有個數限制，除了包裹的內容不一樣，其他跟header類似。

3）hgroup元素

hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

<hgroup> 
  <h1>這是一篇介紹HTML 5語義化標籤和更簡潔的結構</h1> 
  <h2>HTML 5</h2> 
</hgroup>

hgroup使用注意：

• 如果只需要一個h1-h6標籤就不用hgroup
• 如果有連續多個h1-h6標籤就用hgroup
• 如果有連續多個標題和其他文章資料，h1-h6標籤就用hgroup包住，和其他文章元資料一起放入header標籤

（4）nav元素

nav元素代表頁面的導航連結區域。用於定義頁面的主要導航部分。

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

但是我在有些時候卻情不自禁的想用它，譬如：側邊欄上目錄，麵包屑導航，搜尋樣式，或者下一篇上一篇文章，但是事實上規範上說nav只能用在頁面主要導航部分上。頁尾區域中的連結列表，雖然指向不同網站的不同區域，譬如服務條款，版權頁等，這些footer元素就能夠用了。

nav使用注意：

• 用在整個頁面主要導航部分上，不合適就不要用nav元素；

（5）aside元素

aside元素被包含在article元素中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）

在article元素之外使用作為頁面或站點全域性的附屬資訊部分。最典型的是側邊欄，其中的內容可以是日誌串連，其他組的導航，甚至廣告，這些內容相關的頁面。

<article>
    <p>內容</p>
    <aside>
        <h1>標題呢</h1>
        <p>這裡是內容呢</p>
    </aside>
</article>

aside使用總結：

• aside在article內表示主要內容的附屬資訊，
• 在article之外則可做側邊欄，沒有article與之對應，最好不用。
• 如果是廣告，其他日誌連結或者其他分類導航也可以用

（6）section元素

section元素代表文件中的“節”或“段”，“段”可以是指一篇文章裡按照主題的分段；“節”可以是指一個頁面裡的分組。

section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。如下：

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>關於section</h1>
            <p>section的介紹</p>
            <section>
                <h3>關於其他</h3>
                <p>關於其他section的介紹</p>
            </section>
    </article>
</section>

section使用注意：

一張頁面可以用section劃分為簡介、文章條目和聯絡資訊。不過在文章內頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和指令碼的便利，可以用div。

• 表示文件中的節或者段；
• article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div

（7）article元素

article元素最容易跟section和div容易混淆，其實article代表一個在文件，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，部落格上的文章，一篇使用者的評論，一個互動的widget小工具。（特殊的section）

除了它的內容，article會有一個標題（通常會在header裡），會有一個footer頁尾。

<article>
    <h1>一篇文章</h1>
    <p>文章內容..</p>
    <footer>
        <p><small>small內容</small></p>
    </footer>
</article>

更多語義化元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Element

4、一些簡單的語義化舉例

下面是一段html程式碼，我們來進行優化

<div class="main">
    <div class="h2">標籤的語義<a href="#">更多</a></div>
    <div class="p">段落1內容<span class="strong">強調內容</span></div>
    <div class="p">段落2內容</div>
</div>

上述程式碼新增CSS樣式可以達到效果，但用的只是向div,span這樣的無語義標籤，我們從標籤上看不出結構這樣顯然是不行的，我們需要用程式碼清晰表現出：“哪是標題”，“哪是內容”。我們改進一下。

版本一

<div class="main">
    <h2>標籤的語義 <a href="#">更多</a></h2>
    <p>段落一的各種內容.....<strong>強調的內容</strong></p>
    <p>段落二的內容。。。段落二的內容。。。</p>
</div>

版本一比原始碼大有改進，從標籤可以分清哪是標題哪是內容，也能看到哪被強調，但仔細看有a連結在h2標籤中，雖然它們是在同一行，但a連結並不是屬於標題。我們也可以新增HTML5語音元素進行改進：

版本二

<main>
    <header class="title">
        <h2>標籤的語義化</h2>
        <a href="#">更多</a>
    </header>
    <article class="content">
        <p>段落一的各種內容.....<strong>強調的內容</strong></p>
        <p>段落二的內容。。。</p>
    </article>
</main>

版本二用HTML5定義的新標籤是語義化更加完美，寫到這裡基本上也就可以了，但其實我們還可以利用ARIA(無障礙網頁倡議)更加使程式碼完美。更加具有可讀性。

版本三

<main role="main">
    <header class="title" role="heading">
        <h2>標籤的語義化</h2>
        <a href="#">更多</a>
    </header>
    <article class="content" role="contentinfo">
        <p>段落一的各種內容.....<strong>強調的內容</strong></p>
        <p>段落二的內容。。。</p>
    </article>
</main>

現在可以看到標籤中多了一些role屬性，那是ARIA中定義的地標角色定義它們可以使螢幕閱讀器更好的工作。當然並不是使用div這些標籤就是不重視語義化，有些時候因為樣式的需求必須使用這些無語義標籤，這時我們就應該大膽使用它們。但能少用盡量少用。

但是也不要因為html5新標籤的出現，而隨意用之，錯誤的使用肯定會事與願違。所以有些地方還是要用div的，就是因為div沒有任何意義的元素，他只是一個標籤，僅僅是用來構建外觀和結構。因此是最適合做容器的標籤。

三、非裝飾性圖片必須加alt

<img> 標籤的 alt 屬性指定了替代文字，用於在影象無法顯示或者使用者禁用影象顯示時，代替影象顯示在瀏覽器中的內容。

示例:<img src="xxx.jpg" alt="海爾官網-雙門冰箱" />

1、alt標籤的作用:

• 增強內容相關性

它是可以利用漢字介紹文章內容的，對於一些特定的企業產品，由於視覺的體驗，它往往是少文字的。

• 提高關鍵詞密度

在操作企業站的時候，我們經常遇到是站點首屏一個大的橫幅banner，幾乎佔用了首頁的大部分頁面，為了有效的提高首頁核心關鍵詞密度，我們只能利用一切辦法增添關鍵詞，比如：在圖片的alt標籤中新增。

四、友情連結，好的友情連結可以快速的提高你的網站權重

友情連結，也稱為網站交換連結、互惠連結、互換連結、聯盟連結等，是具有一定資源互補優勢的網站之間的簡單合作形式，即分別在自己的網站上放置對方網站的LOGO圖片或文字的網站名稱，並設定對方網站的超連結（點選後，切換或彈出另一個新的頁面），使得使用者可以從合作網站中發現自己的網站，達到互相推廣的目的，因此常作為一種網站推廣基本手段。

友情連結是指互相在自己的網站上放對方網站的連結。必須要能在網頁程式碼中找到網址和網站名稱，而且瀏覽網頁的時候能顯示網站名稱，這樣才叫友情連結。

友情連結是網站流量來源的根本，比如一種可以自動交換連結的友情連結網站（每來訪一個IP，就會自動排到第一），這是一種創新的自助式友情連結網際網路模式。

五、外鏈，高質量的外鏈，會給你的網站提高源源不斷的權重提升

外鏈就是指在別的網站匯入自己網站的連結。匯入連結對於網站優化來說是非常重要的一個過程。匯入連結的質量（即匯入連結所在頁面的權重）間接影響了我們的網站在搜尋引擎中的權重。

外鏈是網際網路的血液，是連結的一種。沒有連結的話，資訊就是孤立的，結果就是我們什麼都看不到。一個網站是很難做到面面俱到的，因此需要連結到別的網站，將其他網站所能補充的資訊吸收過來，連線外鏈不在於數量，而是在於連結外鏈的質量。

外鏈的效果不只是為了提高網站的權重，也不僅僅是為了提高某個關鍵詞的排名。一個高質量的外部連結是可以給網站帶來很好的流量。

六、向各大搜索引擎登陸入口提交尚未收錄站點

百度提交入口：https://ziyuan.baidu.com/linksubmit/url

Google提交入口：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl

360提交入口：http://info.so.360.cn/site_submit.html

搜狗提交入口：http://fankui.help.sogou.com/index.php/web/web/index?type=1

必應提交入口：https://www.bing.com/toolbox/webmaster/（必應的匿名提交url已經取消，需要去登陸Bing網站管理員到“配置我的網站”選單選項中的“提交URL”工具）

七、重要內容HTML程式碼放在最前：搜尋引擎抓取HTML順序是從上到下，保證重要內容一定會被抓取

八、少用iframe：搜尋引擎不會抓取iframe中的內容

九、提高網站速度：網站速度是搜尋引擎排序的一個重要指標

轉自：https://blog.csdn.net/yuyuking/article/details/89374794