lazyload the images

最新精選 Featured post

異世界穿越作品整合

訂閱

訂閱 FB 專頁

每月雙數周日為固定發佈日

訂閱FB 專頁，有新發佈時將會立即看見。
Youtube 頻道經常會有電玩錄影

05/12/2013

Web Publishing SEO - 如何提高搜尋排名

文章分類： , , ,

前言


話說有一次見工時，有一份小測驗，當中有一題就問What is (Search Engine Optimization)SEO 。小測後被問到有遇到什麼困難嗎?不就是那個麼，完全沒有聽過。
回家在WIKI找一找，嗯只有英文不想看了。漸漸又忘記了，近來又聽到有人說SEO，今次真是要弄個明白。
===================================================================

序

SEO，全名Search Engine Optimization，搜尋引擎最佳化，又稱為搜尋引擎優化。一句到尾就是一個為網站提高更好搜尋排名的程序。
在古時，宣傳自己的品牌、網站除了透過搜尋引擎，還有宣傳電郵(即是亂發送的垃圾電郵)、在各大論壇或透過交換連結參加自己網鍵的曝光率。
現在相對的比較依靠搜尋引擎。

那我們會問為什麼要提高自己網站的搜尋排名?對於任何一個網站來說，要想在網站推廣中取得成功，搜尋引擎優化都是至為關鍵的一項任務。
由於不少研究發現，搜尋引擎的用戶往往只會留意搜尋結果最前面的幾個條目，所以不少網站都希望透過各種形式來影響搜尋引擎的排序，讓自己的網站可以有優秀的搜尋排名。當中特別依賴廣告維生的網站自然不用說。
簡單地說就是為了$_$

有關本篇搜尋排名提升的技巧，一切純熟猜測、推敲，並不代表內容由搜尋引擎公司發佈及證實。
如有錯漏，請作為相關網站人員的你作一個參考和經驗累積。
===================================================================
注意︰下表來自Wiki
===================================================================

Copy & Pase 了一大堆，先不要看

  • 站點的年齡
  • 自該網域註冊後過多久
  • 內容的年齡
  • 新內容增加的規律性
  • 鏈接的年齡，連接站點的名譽和其相關程度
  • 一般站內因素
  • 負面站內因素 （例如，太多關鍵字匯標（meta tag），很顯然被優化過，會對站點造成傷害）
  • 內容的獨特性
  • 使用於內容的相關術語 （搜尋引擎關聯到的術語的方式視同如何關聯到網頁的主要內容）
  • Google網頁級別(Web ranking) （只被使用在Google 的演算法）
  • 外在鏈接、外部連結的鏈結文字、在那些和在站點/網頁包含的那些鏈接
  • 引證和研究來源（表明內容是研究性質）
  • 在搜尋引擎資料庫裡列舉的詞根與其相關的術語（如 finance/financing）
  • 導入的逆向鏈結，以及該鏈結的文字
  • 一些導入鏈結的負面計分 （或許那些來自低價值頁、被交換的逆向鏈結等）
  • 逆向鏈結取得速率：太多太快意味著「不自然」的鏈結購買活動
  • 圍繞在導出鏈結、導入的逆向鏈結周圍的文字。例如一個鏈結如果被 "Sponsored Links" （贊助商連結）包圍，該鏈結可能會被忽略。
  • 用 "rel=nofollow" 建議搜尋引擎忽略該鏈接
  • 在站點該檔案的結構深度
  • 從其他資源收集的網格表，譬如監視當搜尋結果導參照戶到某頁後，用戶有多頻繁按瀏覽器的返回鈕
  • 從來源像：Google AdWords/AdSense、Google 工具條等程式收集的網格表
  • 從第三方資料分享協議收集的網格資料 （譬如監測站點流量的統計程式提供商）
  • 刪除導入鏈結的速率
  • 使用子網域、在子網使用關鍵字和內容質量等等，以及從這些活動來的負面計分
  • 和主檔案語意上的連結
  • 檔案增加或改動的速率
  • 主機服務商 IP 和該 IP 旗下其它站點的數量/質量
  • 其他鏈結站會員 （link farm / link affiliation） 與被鏈結的站 （他們分享IP嗎? 有一個共同的郵遞位址在"聯絡我們 （Contact Us）" 頁嗎?）
  • 技術細節像利用301重定向被移除的網頁、對不存在網頁顯示404伺服器標頭而非200伺服器標頭、適當的利用 robots.txt
  • 主機服務商正常執行時間
  • 是否站點對不同類的用戶顯示不同的內容（稱為「掩飾」（cloaking））
  • 未及時矯正、無效的導出的鏈結
  • 不安全或非法內容
  • HTML代碼品質，以及錯誤出現數
  • 由搜尋引擎自他們搜尋結果觀察到的實際點擊通過率評等
  • 由最常存取搜尋結果的人手動評等

===================================================================
注意︰我們由淺入深，上方的一大堆先忽略
===================================================================

由<head>說起，在此採用HTML5標準

title tag <title>網頁標題</title>那個會直接顯示在搜尋結果中
meta tag <meta charset="utf-8"> 向網頁瀏覽器宣告網頁使用的編碼，令瀏覽器能夠適當地解碼。如沒有宣告，瀏覽器會使用語系去判斷網頁 或 是自行偵測編碼類似。
沒有明確地宣告網頁使用編碼，容易在顯示時出現亂碼。

如何查找自己網頁是使用什麼編碼的呢?
使用Dreamweaver > 修改 > 頁面屬性(Ctrl+J) > 標題 / 編碼方式 > 編碼方式
使用Notepad++ > Encoding
基本上呢，網頁都建議使用utf-8，如果你使用的編碼別人電腦沒有提供自然就看不到內容啦。 <meta name="keywords" content="關鍵字1, 關鍵字2">那個會僅用，理由之後講 <meta name="description" content="網頁說明">那個會直接顯示在搜索結果中
上圖中已經出現了title和description的內容

順帶一提可以在Dreamweaver 中預設新網頁的編碼︰Dreamweaver > 編輯 > 偏好設定(Ctrl+U)

完成網頁時要做的三件事

當你用最新的Dreamweaver做好你的網頁/網站後，你必需繼續一些後續工序。
檢查一下網站內有沒有死鍵 Dead link
就是一些無效的連結，例如是一些不存在/錯誤的連結，導致點擊後會找不到網址/網頁/圖片，發生錯誤的統稱為死鍵
此功能以網站為單位開始偵錯，在此之前請確保你在Dreamweaver中設定好網站。

檢查一下網站內有沒有孤立檔案
Dreamweaver 會幫你看看網站資料夾中(包括子資料夾內)，有那些從來沒有連接的檔案，例如圖片(*.png, *.jpg, *.gif)、網頁(*.html, *.php)等等
找出誰是孤兒，只是放著，從來沒有使用的檔案，是幫你大掃除用的。

透過W3C - 驗證目前文件
假如網頁使用HTML5編寫，那你寫法是否符合HTML5的規範。自然就要到定立HTML5的W3C檢查一下。
Dreamweaver CS6的掫圖，Dreamweaver CC那個快捷鍵不知飛去那裡，解決︰按上一張圖左下>驗證那個Tab
在此最常犯的錯誤例如<br />和<br>到底那一個是錯的寫法，答案是要看你編寫的標準
HTML5使用的是<br>，
XHTML使用的是<br />，不論是1.0 Strict，1.0 Transitional、1.0 Frameset還是最新版本1.1

假若自動偵測檔案類型失敗，可手動設置，上圖按>設定>那裡定出驗證網頁時使用那項準則

XHTML要求所有element Must Also Be Closed，即使那個element是沒有closing tag都要幫佢Close
例如<br>，<hr>，<img>都沒有</br>，</hr>，</img>但是你都要幫它Close
寫成<br />，<hr />，<img />，那空格之後斜線是必要的，不准問為什麼，因為那是規矩。
我想強調那點，如果你寫錯，在XHTML中寫成<br>，瀏覽器不會看到有分別，因為現在的瀏覽器已經進化，讀懂那句的意思是<br />
但錯就是錯，那往往在中小學、一些短期的自學課程中被忽略，而高低就是那樣分出來。

以上(由meta開始)都是一些基本功，希望日後注意嚕。
不過Google停用了meta keywords，因為那個很早被濫用了。不過我建議你自行判斷刪除/空置/留著與否，Google只說不用meta keyword作web ranking，而BING還會看，不過你打一千個關鍵字，BING會全單照收？就是另一回事。

robots.txt、Sitemap、Crashing、deflate

最上三項不論Web Server類型，瀏覽對象是什麼環境都幾符一定會涉及。做好那三項，對網站絕對有幫助。
robots.txt - 網絡蜘蛛(Web spider)、網路爬蟲(Web crawler)
搜尋引擎會定時定侯到從你的網站擷取特定的資料，例如連結是否健在等等，從而去建立搜尋索引googlebot
那些自動會找上門的稱為 網絡蜘蛛，各大搜尋引擎會派出自各的蜘蛛去檢視網站內的不同檔案。收集相關資訊帶回家再建立出 一份清單，當有人搜尋某樣東西時搜尋引擎便抽出清單上相對應的項目供你選按。

Googlebot 等蜘蛛來我家時被伺服記錄了足跡，清楚看到蜘蛛檢視了robots.txt


Google 派出的蜘蛛叫 Googlebot， BING 用的叫 Bingbot ， 百度的代表是 baiduspider ，蜘蛛自己四處爬，什麼檔案也會記錄。可能你會問︰吓，那我惹不是沒有私隱。
實情也不是，蜘蛛們都會遵守網絡禮儀，進家門前牠會先看看豎立在門前的告示牌。告示牌可以明文規定︰蜘蛛你不可以偷看在我房間床下的色情雜誌，好像跨張了。其實只要寫明︰蜘蛛你不可以在我房間床下東查西找就已經足夠。那塊告示牌就是robots.txt

教一教 robots.txt 的寫法，其實不用特別的教學。請到 http://www.robotstxt.org/robotstxt.html ，一堆英文不想看？那不要看，
看Google的好了，有多國語言翻譯=] https://support.google.com/webmasters/answer/156449?rd=1 或看另一個實例︰
http://www.popcap.com/robots.txt ，或隨便一個你喜愛的網站地址，加上robots.txt直接去偷師學藝。

在此簡單說明幾項︰
robots.txt必需放在網域根目錄(root directory)，例如www.example.com/robots.txt，如果有多一個www.example.com/something/robots.txt，在子目錄下的會被忽略。話雖如此，不建議你嘗試冒險。
User-agent: * 代表所有蜘蛛適用，你也可以指名特定蜘蛛不能檢索特定路徑。例如User-agent: Googlebot，那之後Disallow所禁止的項目就只有Googlebot會遵守
Disallow: 禁止的可以是目錄，可以是檔案。例如 Disallow: /includes/，Disallow: /UPGRADE.txt，在此，路徑是區分大小寫的(Case Sensitive)

Sitemap 網站地圖
robots.txt 和 Sitemap之間有著一種微妙的關係
如果把robots.txt比喻成插在家門前警告蜘蛛的告示牌，那sitemap就是給蜘蛛看的地圖，地圖詳細列出你家全部房間的前往路徑。
蜘蛛的性格是不會在你的家中作地毯式搜索，由於無法找到你網站中所有的網頁，而Sitemap 正好可以彌補不足的資訊。
例如：網頁最後更新的日期，以及預計的網頁更新頻率，網頁在你的網站中的優先排行。

Sitemap 的語法
Sitemap 的生成工具(第三方)
Sitemap 的驗證工具
提交Sitemap 給搜尋引擎
  • Google - 網站管理員工具 提交
  • 在robots.txt注明sitemap路徑 - 只需加入一句 Sitemap: http://example.com/sitemap_location.xml
  • 透過Google提交介面直接提供 (方法已經過時被廢除)
小道消息︰我嘗試即使robots.txt沒有註明sitemap路徑，Google也會嘗試掫取sitemap.xml。
承上一張掫圖，bingbot, Googlebot 也看了一下robots.txt，google 還自動地 看了一下我的Sitemap.xml。
一年多前在相關技術的討論區聞說︰百度不會看守規矩看robots.txt，嗯……伺服器上真的找不到百度有看的記錄

Crashing 瀏覽器快取
在靜態資源的 HTTP 標頭中設定到期日或最長使用期限，這樣可讓瀏覽器從本機磁碟載入先前下載的資源，而不透過網路載入資源。
即時當你的伺服器回應瀏覽方要求回傳網頁時，告訴對方網頁的保鮮期，例如你說保鮮期為七天。瀏覽器便會在第一次下載網頁起計保存七天，在那七天內，瀏覽者多次瀏覽網頁時，瀏覽器會顯示保存好的網頁。而不會再要求伺服器傳送一次，除非你自行清除了網頁快取或保鮮期已過。

好處當然是加快看到網頁的時間，減少自己伺服器的負擔，節省更多的寬頻資源減少網絡擠塞。好像把可回收物品放進可回收箱一樣做好自己本份，是一種高尚品行。
壞處，有個那麼好好處，相對地自然有一個置命的壞處，如果你的網頁更新速度飛快。每一天一次，那瀏覽方因為一直看保存好的舊網頁，看不到你的更新。
除非再從伺服器取得最新的網頁。

現在教你不同伺服器設置Crashing的方法，請到 https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

當設置了Crashing，在Chrome按一下 F12 > Netwoek
可以知道網頁、檔案所設置的保鮮期
當中的max-age以秒為單位︰10800=3小時，604800=7天


deflate、gzip 傳輸時壓縮檔案
壓縮資源可以減少透過網路傳送的位元組數，~!@#$%^&*一大堆的。
壓縮那個範圍要說的話七天也說不完，因為星期日要休息，要說要用兩星期呢。

*.html 的壓縮方法︰曾經見過有網頁的HTML只有一句，因為把所有不必要的換行、空行、空格、Tab 都刪除了，把所有句子擠在一行的壓縮方法
*.css 的壓縮方法︰與上稍似，例如寫成 .
*.js 的壓縮方法，很多時下載js也會經過壓縮的，最常見是下載jQuery會同時出樣一個jquery-Version.min.js。永遠會多了一個 min.js，應該是那說最少化，嚴格說不是壓縮。
如何最少化？過程不用深究，知道有那麼一回事就足夠，最少化會把原來的程式用最少的文字表達。達到減少體縮方便傳送。

圖片的壓縮︰使用索引色(Indexed Color)、由16bit色調到8bit、使用損毀性壓縮……

影片的壓縮︰個別範疇的壓縮就不深入詳述，快天黑了

很好，以下是一些最少化 html, css, js的工具，幫你一次性整批檔案最少化。

說了以上的還未到重點，重點是有種大包圍的壓縮方法。請想像成伺服器把網頁、網頁中的圖片、CSS、JS壓縮成一個ZIP壓縮檔傳送出去。讓瀏覽器自己解壓縮再看內容，只是用的技術不是ZIP就是了。

由於那是從伺服器的層面出發，所以不同伺服器有自己的壓縮設置︰

====================================================================

稍後再補上更多……

====================================================================
外部連結︰
文章分類： , , ,

No comments:

Post a Comment