HTML5和SEO,讓你的內容行銷更上一層樓

Photo of author
Written By CMO

HTML5是HTML4誕生10年後的一項重大突破,在2010年4月成為了網絡媒體的主流。國內對HTML5的認知很大程度還停留在HTML5強大的可以替代Adobe Flash的那部分。事實上,作為數字行銷者或網絡行銷從業人員,你更應該了解HTML5最精華的那部分,即HTML5可以使你的網站結構更加清晰並使你具有價值的內容付出水面。對於SEO來說它更方便搜索引擎理解你的網頁的內容,並告知搜索引擎哪些是頁面中重要的內容,而哪些是次要內容。你可能要問搜索引擎真的關心這些嗎?答案是肯定的,這已經是搜索引擎判斷網頁質量的重要依據。

合理使用HTML5提升SEO效果
合理使用HTML5提升SEO效果

那些重要的HTML5標籤

HTML5相對於HTML4來說最重大的革新就是增加了這些標籤:

  • <NAV>標籤,用於標識網站導航。

    導航標籤中往往包含大量鏈接,它可以告訴搜索引擎你的網站的大致分塊結構便於搜索引擎理解。同時讓搜索引擎理解你放置大量鏈接的用意。

  • <HEADER>標籤,用於標識網頁頁頭。

    網頁頁頭往往是每個頁面都為重複內容,而且這些內容位於HTML文件的上部。添加這個標籤是為了通知搜索引擎該頁面的頁頭範圍,避免將其用作摘要和內容比較。我們也可以把<NAV>標籤放置在<HEADER>標籤中。

  • <FOOTER>標籤,用於標識網頁頁腳。

    與頁頭標籤相似,頁腳標籤往往也包含大量重複內容和一些友情鏈接。我們可以把這些內容用<FOOTER>標籤劃定範圍。

  • <ASIDE>標籤,用於標識網頁邊欄。

    這是用於側欄或邊欄的標籤。習慣上很多網站會放置一些小工具或廣告位。為了避免喧賓奪主,我們要把這些內容用<ASIDE>標籤括起來。

  • <ARTICLE>標籤,用於標識網頁正文。

    這才是網頁內容的精華,也是你要下功夫的地方。你要知道一篇好的文章會是原創的,內容相關的同時是條理清晰的。一些社群媒體,如微博,在分享你的頁面時會自動抓取<article>標籤內的圖片作為縮略圖。如果一個頁面含有多篇文章,你可以用多組<ARTICLE>標籤進行整理。在<ARTICLE>標籤裡你要做好的主要是3點:

    1. 正文需要有一定字數,100字以上為佳。別忘了分段。
    2. 用好標題標籤<H1>,<H2>,<H3>。
    3. 最好插入1到2張圖片。
  • <SECTION>標籤,用於標識正文中一個段落章節。

    段落章節標籤用於長文章的分篇,在文章較長時合理運用<SECTION>標籤可以起到優化作用。 <SECTION>標籤和<ARTICLE>標籤的區別在於,後者可以獨立形成一個完整的主題。前者卻不可。所以<SECTION>可以用於正文以外的內容,如,前言、腳註、聲明等等。你也可以把<SECTION>嵌套在<ARTICLE>裡使用。

那些很實用的HTML5新標籤

還有一些很實用的HTML5標籤也可以便於搜索引擎理解你的網頁。它們是:

  • <ADDRESS>用於放置地址和聯繫訊息。不知道那些防騷擾電話的手機app是否從這裡抓取了訊息。
  • <BLOCKQUOTE>用於引用,給你一個抄襲的理由。 (笑)
  • <MAIN>用於標識主體內容。這個標籤的層次介於<BODY>和<ARTICLE>之間。它用於劃定主要內容的範圍(即不包括頁頭,頁腳和邊欄)但是它又是唯一的,它可以包含好幾個<ARTICLE>標籤。但是它不能被<ARTICLE>和<SECTION>標籤包含。
  • <SUMMARY><DETAILS>這兩者要成對使用,前者用於表面內容的摘要,後者用於點擊摘要後顯示(可通過CSS或調用JavaScript)的詳細內容。

以上就是HubSpot One為你整理的一些實用的HTML5標籤,你可以查看你的頁面源碼,如果你的前端工程師還不太了解,那請你轉給他看吧。

我們在不久前曾經介紹過Google的網頁質量白皮書和關於結構化數據的討論。如果可以結合這兩篇會有更好的效果。