下文中, 出現部份 HTML 語法
有使用上的疑問, 也可以到 http://www.w3schools.com/html/ 查詢

簡單說HTML

剛開始看見密密麻麻的英文字, 除了工程師之外的人, 大概都會很反感

不過, 在那面幾篇文章裡, 也有提到一點 HTML 相關的內容…

怎麼做 SEO – HTML
http://cola.workxplay.net/whats-seo/#how-seo

網頁原始碼&HTML
http://cola.workxplay.net/how-to-use-chromes-developer-tools/#source-code

前面幾篇文章認識 HTML
雖然不到精通，不過也能大概認識 HTML

HTML  的格式主要分為 有結尾 和 沒結尾 兩種：

有結尾類型的HTML：

<i>這裡會變成斜體字</i>

<a href=”http://cola.workxplay.net”>這是工作玩樂實驗室的連結</a>

沒結尾類型的HTML：

<hr /> 這傢伙會在畫面上畫出一條水平線

<meta name=”description” content=”這個是網頁簡介用的HTML Tag”>

當然, 如果你不是工程師
也不需要完全看懂上圖裡的 HTML Tag

不過只要你做 SEO 最少也要略懂格式就是了

針對網頁標題的 H1 系列

h1, h2, h3, h4, h5, h6

由1~6, 分別是大到小
h1 表示內容訊息愈重要, 6 則否

他們j是有階層、巢狀關係
如下圖..

(H Tag 的巢狀關係)

一般來說一個頁面只能有一個 H1

一個頁面只能有一個 H1

一個頁面只能有一個 H1

一個頁面只能有一個 H1

(很重要所以說三次 lol)

H1 代表一個網頁、網址的標題和唯一性
所以好的標題, 能讓 Google、使用者 更容易找到你
對 SEO 是大大加分

建議把 H1 留給 頁面標題, 而不是 網站名稱 (註1 : 網站最重要的是頁面內容)
並把 H1 盡可能放在頁面最上方

範例：
<h1>SEO與HTML標籤優化-文章篇</h1>

錯誤範例：
<h1>工作玩樂實驗室</h1>

而 H2 則可以是小標, H3、H4 …可以是內容重點等(參依上圖)

總之最重要是 H1

註3 : 本站的 H1 ?!

針對網站標題的 Title

一篇文章有其標題，當下這個網站也有個標題(下圖)

(圖中瀏覽器(頁籤)上方可以看見，目前的 網站標題, 而文章內也有已的 文章標題)

<title>我是網站標題</title>

這樣的Tag，多數幫助 Google 把網站標題取至 搜尋列表頁上顯示..

(網站標題顯示於上圖紅框處，可點圖放大)

網頁簡述 Description

description、簡述、描述、概要、描要(Outline)
主要顯示於, Google 查詢後顯示網頁說明….(如下圖)

就像寫書一樣, 封面的說明、前言非常重要

讓使用者在最短、最快時間內，知道你的頁面內容
感覺很像 這個頁的自我介紹

過長、過短、過於文言文都不行,
最好可以夠通俗、直白
可以放入預期關鍵字、關聯字
猜測使用者會用怎麼樣的方式查詢這個內容的相關文字

不過內容不是本文的重點, 我先說明方法…

方法並不難
在編寫文章時,
在整篇文章(網頁) 最上方，利用  …

寫下一小段話, 字數約 20~40字左右即可

也因此, 文章頁面的在 簡述 出現之前，盡可能不要有過多的文字出現

進階：
當然也可以透過更多的 HTML Tag 去包裝整個頁面
告知 Google 文章的重點和主題在哪, 不過我的目地是簡單教會大家重點在哪…, <article></article>, <nav></nav> 這些Tag 就不多提了

  圖片優化 Img alt

網路文章, 大多會包含些圖片
這些圖片除了幫助, 讀者暸解內容之外
也在 SEO 上有所幫助!

HTML img 範例 ：

<img src=”http://cola.workxplay.net/wp-content/uploads/2015/10/1172781_350309468447623_1212592616_n.jpg” alt=”工作玩樂實驗室Banner”>

alt 屬性本來的目地是在網路狀況不好時, 圖片無法顯示, 取而代之顯示的文字
可以讓使用者, 大略由文字暸解圖片的內容

早期 Google 沒辦法辦識圖片時, 需要 alt 來輔助
讓 Google 在做 SEO 時, 可以分辦這張圖與什麼內容有關

現在!, Google Image 非常強大,
但還是因為很多原因,
無法100% 在圖片和文章之間做出很好的 SEO 關係(抱歉用了個奇怪的詞)
(註2 : Google Image 的圖片辦識)

所以我們撰文、插圖時, 需要利用 alt 屬性, 告知圖片內容

註1 : 網站最重要的是頁面內容

由於 黑帽SEO手法泛濫, 因此 Google 與幾家入口網站,
不斷的調整 SEO 排序規則與 SEO 手法等…

在不斷變動、調整的問題下, Google 告訴所有網站經營者,

Content is King，內容為主

各種奇奇怪怪的偏方、手法, 在未來或是現在將不在有效
網站管理員只需要專注在好的內容裡
只要把網頁內容、文章內容, 維護好, 讓其有價值, SEO 效果自然好!

(其實所有手法都有加分效果, 主要是讓大家知道 黑帽SEO手法遲早會受到處罰, 腳踏實地經營才是對)

註2 : Google Image 的圖片辦識

雖然，google image 非常強大, 不過如果你的搜尋目標題是一台相機
卻遇到下面這樣的例子, google 也愛莫能助…

照片內容 “失焦” 問題, 非常難以 “自動” 解決!

註3 : 本站的H1 ?!

眼尖的人可能有發現, 本站的 H1不但有很多個, 而且還到處都是
上上下下左左右右都有 H1

這非我的本意, 這算是 WordPress 先天上的問題
WordPress 可以隨意變更 theme, 每套 theme 不論付費、免費都是由網友自行製作

所以在 HTML Tag 上並沒有限制, 所以靠成如此混亂的問題 Orz

如果你也有一樣的問題, 也不用太難過, 文章上述的 HTML 優化, 都是 SEO 中的加分條件
並沒有所謂的 SEO要求這樣做、SEO絕對要這樣做或是規定要這樣做的 規則