SEO & HTML Tag
下文中, 出現部份 HTML 語法
有使用上的疑問, 也可以到 http://www.w3schools.com/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, h2, h3, h4, h5, h6
由1~6, 分別是大到小
h1 表示內容訊息愈重要, 6 則否
他們j是有階層、巢狀關係
如下圖..
一般來說一個頁面只能有一個 H1
一個頁面只能有一個 H1
一個頁面只能有一個 H1
一個頁面只能有一個 H1
(很重要所以說三次 lol)
H1 代表一個網頁、網址的標題和唯一性
所以好的標題, 能讓 Google、使用者 更容易找到你
對 SEO 是大大加分
建議把 H1 留給 頁面標題, 而不是 網站名稱 (註1 : 網站最重要的是頁面內容)
並把 H1 盡可能放在頁面最上方
範例：
<h1>SEO與HTML標籤優化-文章篇</h1>錯誤範例：
<h1>工作玩樂實驗室</h1>
而 H2 則可以是小標, H3、H4 …可以是內容重點等(參依上圖)
總之最重要是 H1
一篇文章有其標題，當下這個網站也有個標題(下圖)
(圖中瀏覽器(頁籤)上方可以看見，目前的 網站標題, 而文章內也有已的 文章標題)
<title>我是網站標題</title>
這樣的Tag，多數幫助 Google 把網站標題取至 搜尋列表頁上顯示..
description、簡述、描述、概要、描要(Outline)
主要顯示於, Google 查詢後顯示網頁說明….(如下圖)
就像寫書一樣, 封面的說明、前言非常重要
讓使用者在最短、最快時間內，知道你的頁面內容
感覺很像 這個頁的自我介紹
過長、過短、過於文言文都不行,
最好可以夠通俗、直白
可以放入預期關鍵字、關聯字
猜測使用者會用怎麼樣的方式查詢這個內容的相關文字
不過內容不是本文的重點, 我先說明方法…
方法並不難
在編寫文章時,
在整篇文章(網頁) 最上方，利用 …
寫下一小段話, 字數約 20~40字左右即可
也因此, 文章頁面的在 簡述 出現之前，盡可能不要有過多的文字出現
進階：
當然也可以透過更多的 HTML Tag 去包裝整個頁面
告知 Google 文章的重點和主題在哪, 不過我的目地是簡單教會大家重點在哪…, <article></article>, <nav></nav> 這些Tag 就不多提了
網路文章, 大多會包含些圖片
這些圖片除了幫助, 讀者暸解內容之外
也在 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 屬性, 告知圖片內容
由於 黑帽SEO手法泛濫, 因此 Google 與幾家入口網站,
不斷的調整 SEO 排序規則與 SEO 手法等…
在不斷變動、調整的問題下, Google 告訴所有網站經營者,
Content is King，內容為主
各種奇奇怪怪的偏方、手法, 在未來或是現在將不在有效
網站管理員只需要專注在好的內容裡
只要把網頁內容、文章內容, 維護好, 讓其有價值, SEO 效果自然好!
(其實所有手法都有加分效果, 主要是讓大家知道 黑帽SEO手法遲早會受到處罰, 腳踏實地經營才是對)
雖然，google image 非常強大, 不過如果你的搜尋目標題是一台相機
卻遇到下面這樣的例子, google 也愛莫能助…
照片內容 “失焦” 問題, 非常難以 “自動” 解決!
眼尖的人可能有發現, 本站的 H1不但有很多個, 而且還到處都是
上上下下左左右右都有 H1
這非我的本意, 這算是 WordPress 先天上的問題
WordPress 可以隨意變更 theme, 每套 theme 不論付費、免費都是由網友自行製作
所以在 HTML Tag 上並沒有限制, 所以靠成如此混亂的問題 Orz
如果你也有一樣的問題, 也不用太難過, 文章上述的 HTML 優化, 都是 SEO 中的加分條件
並沒有所謂的 SEO要求這樣做、SEO絕對要這樣做或是規定要這樣做的 規則
錯誤追蹤、回報非常重要，看到的錯誤才知道怎麼修。現今 PHP 流行的 Laravel 有很好的 Error Tracking, Error Handling。但 plain PHP 怎麼辦呢? 在 production 為了安全考量會設定…
jenkins、circleci、travis 或 Gitlab CI 皆為目前暫知名的 CI/CD 服務，各自缺點也不言而喻...過於肥大、收費略高(?)、速度不夠快執問題...此時使用 go language 開發的 Drone 就出現啦，完全 docker 容器化的運行方式讓整個 CI…
網頁壓縮技術中 gzip 很好用，deflate 己經過時，但你聽過 brotli 嗎? 有著比 gzip 更好、更快的壓縮效率。看起來利大於弊有什麼不用他的理由嗎?簡單從優、缺點來看 brotli!到底 brotli 布羅特利是什麼、如何設定呢。 目前大多的 web server…
為什麼要讓本機使用 Docker 內 PHP? 情境... docker 容器內用的是 PHP 7.4 但你的開發本機還在跑 PHP 5.6 或是更舊，因為 dockerize 的關係會將所有相關環境都轉移到…
為什麼你需要密碼管理工具現代人一天下來需要輸入多少組密碼，工作與生活己經和密碼密不可分! 除了足夠全安的密碼，密碼記錄、儲存的方式又足夠安全嗎?密碼管理工具可以帶來什麼幫助呢? 為什麼你需要密碼管理工具 資安問題!!大多人說著沒做壞事不怕被偷資料、監聽。嚴重曝露出現代人的基本科技素養的低落和無知 🤯 密碼的使用無所不在!! 行動裝置的普及，APP 、手機遊戲、銀行帳戶所有和生活相關的東西都需要密碼!!facebook, line 只要打開 APP 也會輸入密碼只是他是自動輸入、一般情況不可視 (auth token) 一般人最常發生的密碼資安問題…
mysql 資料表分區 mysql table partition 從架構上調整 mysql 的查詢效率。mysql DB 的優化可以簡單也能複雜，除了調整設定值。也可以透過水平分割(Horizontal Partitioning)、垂直分割(Vertical Partitioning) 分庫或分表將資料分散儲存減少資料搜尋、group by 時的效能消耗。拆開批次處理，理論上效率都會變好，本文就水平分割的…
View Comments
不知道我的 WP Theme ，有沒有把文章標題預設成 H1？！
哦哦!
lucky 的是 woods.workxplay.net 的 H1 都是正常的哦 :D