製作符合SEO的html版

網路上有很多SEO方法以及教學.
根據一直以來學習和開發的經驗.
今天阿傑就來談談怎樣製作一個比較符合SEO的頁面
製作前我們先來了解,結構的正確使用方法對SEO有多重要

SEO與內容的關聯性

1.合理使用meta標籤是關鍵

相信很多人在製作SEO時常常會塞入很多關鍵字(多到有點像垃圾).
早期就是把很多關鍵字都放在meta keywords裡面~
阿傑也是如此了好多年~@@..
html5發佈後,也沒有移除meta keywords這標籤,
導致現在很多網站一樣會在meta 裡面 塞入好多資訊..

但對於搜尋引擎龍頭Google來說,他們是否認有使用這個標籤的= =...
那這些年..我們的meta keywords都是寫心酸,寫給自己(和客戶)看爽的!!!!

沒關係,竟然meta keywords沒被google 收錄~但又沒有被html5移除(為何不統一..是要弄死誰).
那我們就換個方式使用h1~h3標籤來當成keywords.

也就是在<head>裡面我們可以放一組meta keywords來說明網站的簡單方向.
以阿傑通通學為例:
<meta content='SEO教學,Jquery教學,html5教學,CSS3教學,Python教學,Django教學' name='keywords'/>
但真正呈現內容合理性的標籤會是body的h1~h3

關鍵字要怎麼用架構去呈現?
對於越來越聰明的搜尋引擎來說,這是你必須要知道的知識.

2.善用h1,h2,h3標籤

對搜尋引擎而言,內容的完整度絕對佔了最大的因素,
顧名思義,你的內容若完全符合引擎抓的關鍵字(包含內容合理性,內容完整度,內容無過多非相關內容),
搭配我們餵給引擎的關鍵標籤,
就更容易讓標題與內容的合理結構得到加分~
h1~h6標籤其實非常有爭議性..
若依照google SEO龍頭 Matt Cuttsh標籤整理 來看.
真的只會讓人越來越不懂到底該怎樣定義h標籤

若依照google blogger標準版型來看的話~
<html>
<head>
 .......
 <title>阿傑通通學</title>
</head>
<body>
 <h1>阿傑通通學</h1>
 <h2>2016年4月15日 星期五</h2>
 <article>
  <div>
   <h3>
    Jquery教學
   </h3> 
  </div>
  <div>
   <h3>
    SEO教學
   </h3> 
  </div>
  <div>
   <h3>
    Django教學
   </h3> 
  </div>
 </article>
</body>
</html>
我們可以看到title和h1 blogger都餵給標題使用
依據權重來看,非常合理
但第二重要的標籤h2 卻給了時間?
很多教學會建議把h2的時間改掉,讓更具意義的內容標題來取代h2
但我這邊試著以不同角度來觀察~
如果我們以SEO的角度去思考,時間的有效性也會是SEO的搜尋標準喔~
例如我在搜尋關鍵字上打了SEO教學~
如果內容完整度和結構都差不多,那內容更新時間越接近現在的文章,權重會不會比很久以前的文章還要高出許多?

如果這點假設是正確的話~那時間標記使用h2來表示就非常合理.
因為更新時間也是重點搜尋項目之一

再來談到h3標籤,很多教學說明h3最好在3個以內~理由是避免權重被分散
但我們以另一個角度來看
如果這是一個內容豐富的網站,每個內容的標題都是SEO的查詢關鍵我都想被查詢到~
這樣的話,網站首頁的每篇文章的標題,除了使用h3,實在也沒有其他標籤比他更合理
那如果網站有好幾百篇文章~就有好幾百個h3顯示在首頁~
那不就是超級無敵濫用標籤了??

但龍頭google 的 blogger 還是這樣規則下去~
h3 餵給每篇文章的標題~
以此看來這樣的設定並不會造成濫用的風險~
h1 餵給網站主題
h2 餵給時間
h3 餵給每篇內容的標題
h4~h6 依據重點再去制定內容的輔助標題
感覺這是目前大型內容網站會走的方向
個人認為以這樣的結構餵給引擎,是目前非常合理的關鍵字陳述.和編排

但點進內頁以後~
blogger依舊是讓文章標題排在h3?
為何會這樣呢? 因為點入內容的每篇文章內容是會被收錄在title上的
例如我在首頁時,
title是阿傑通通學
h1 是阿傑通通學
h2 是時間
h3 是每篇文章的標題

當點選文章標題進入內頁後
title是SEO教學
h1 是阿傑通通學
h2 是時間
h3 是這篇文章的主標,SEO教學

這邊看起來,SEO對於時間的權重佔了很大的比例
但h1 阿傑通通學並沒有人會把它當關鍵字來打阿~
給他h1太浪費了吧是不是應該把它換掉~
讓這篇文章的標題使用h1來增加有效權重?

答案是可改也不一定要改!?

換個不同角度來思考看看.
h1是你的品牌名稱
h2依舊餵給時間
h3的標題如果內容完整度都符合,權重都被提升以後~

我做了一個大膽假設~h2+h3有效度提升後~會把h1的權重整個拉上來!
這解釋有點複雜,但卻不無可能性
當我內容每篇文章都做到符合SEO標準以後~

會不會在以後使用者打了我內容的關鍵字以後.會撈出我的品牌名稱?
例如: 輸入 jquery教學
排在第一頁的會是阿傑通通學, 而不是我這篇文章的標題jquery教學~
以此類推~
當我輸入SEO教學時
會不會也是出現阿傑通通學,而不是這邊文章的主標呢?

答案是可能的.

如果照這個角度去想~那對於blogger的布局應該會有更深的體會


搭配更完整的meta讓頁面結構更完整

meta標籤的每個意義,這邊我們就不再說明了
示範範例如下

<!DOCTYPE html> 
 <html>
   <head>
     <meta charset='utf-8'/>
     <meta content='width=device-width, initial-scale=1' name='viewport'/>
     <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
     <meta content='India' name='geo.placename'/>
     <meta content='阿傑通通學' name='Author'/>
     <meta content='general' name='rating'/>
     <meta content='id' name='geo.country'/>
     <meta name="author" content="作者名稱"/>
     <meta name="copyright" content="版權所有人名稱"/>
     <meta name="description" content="網頁描述"/>
     <meta itemprop="name" content="網站名稱或標題"/>
     <meta itemprop="image" content="要顯示的縮圖網址"/>
     <meta itemprop="description" content="網頁描述"/>
     <meta property="og:title" content="網站名稱或標題"/>
     <meta property="og:url" content="網址"/>
     <meta property="og:image" content="要顯示的縮圖網址"/>
     <meta property="og:description" content="網頁描述"/>
     <link rel="author" href="google plus 個人頁網址/posts"/>
     <link rel="publisher" href="google plus 個人頁網址"/>
     <meta content='網站的簡短方向說明' name='keywords'/>
     .....
   </head>
   <body>
   <h1>阿傑通通學</h1>
   <h2>2016年4月15日 星期五</h2>
   <article>
    <div>
     <h3>Jquery教學</h3> 
    </div>
    <div>
     <h3>SEO教學</h3> 
    </div>
    <div>
     <h3>Django教學</h3> 
    </div>
   </article>
  </body>
 </html>


這個網誌中的熱門文章

Jquery on scroll 事件

快速安裝Django(Mac)

開始寫Django模組