2012年2月25日 星期六

要作好SEO就要先學好HTML

HTML不死

不管是動態網頁或是靜態網頁,最後呈現在你的網站的語言還是HTML,因為這是W3C所制定的標準,也是網路世界共通的語言,但是因為現在的CMS部落格程式已經發展到一個相當「易用」的階段,所以很多人在發文時從來不會想到HTML的語法及結構問題,但是如果你想讓搜尋引擎和你的網站成為麻吉,對HTML的了解是不可少的。

好的HTML讓你上天堂

同樣的一篇5.99的文,有的人就是上不了搜尋首頁,有的人就是一直佔在那裡不下來,你有想過原因嗎?這其中一個很大的原因就是你的HTML結構問題,我在搜尋引擎不能說的秘密之關鍵字的形成提到:「搜尋引擎Bot可以自行判斷你文章的重點在那裡(也就是會做筆記劃紅線啦!)」,但是如果你的文章看起來很亂甚至找不到重點,那就是你的問題了。

Semantic HTML

Semantic HTML翻成中文叫作「語意明確的HTML」,一個語意明確的HTML要包含以下一些要件:
  1. 包含有H1,H2,H3...等重要性不同的標籤(Tag):
    一般而言一篇文章最好只有一個<H1>標籤,可以有許多個<H2>、<H3>...等標籤,一般而言用到<H3>就很夠了,很少人用到<H4>、<H5>甚至<H6>。這個作用就好像分章節一樣,一篇沒有章節的文章可讀性是很差的,所以搜尋引擎很難幫你找出重點。
  2. 圖片加上"alt"的說明文字:
    之前也曾提到圖片不利於SEO,因為搜尋引擎到現在都還無法真正了解圖片的內容,所以如果你的圖片有特別的含義的時候,不妨可以使用「中文檔名」,但是中文檔名在網址列又會變成看起來無意義的亂碼,或是你的BSP或網站空間不允許你用中文檔名,這個時候的變通辦法就是有圖片的連結上加上"alt"這個說明文字,這樣圖片對搜尋引擎來說才有意義。
  3. 重點文字加上強調用語:
    你可以善用<em>或<strong>的強調HTML語法,告訴搜尋引擎這個詞很重要,就像這一段的「重點文字」用了強調語法,就好像幫它劃重點一樣。
  4. 表格加上表頭等註解:
    如果你有用到<table>表格的語法,那最好在表格的最前面加上<th>表頭標籤,並且最好再加上說明文字,這樣你的表格對搜尋引擎而言才有特定的意義。

發文介面的切換

以上只是告訴你原則,而實際的作法就是將你發文介面切換成「HTML模式」加上這些標籤,首先看到的這個畫面應該就是一般人寫文章用的編輯器,這個是Blogger的後台

切換成「HTML修改」模式你就可以看到或是自己加入HTML的語法
至於其他的HTML語法實在太多了,有機會再慢慢介紹了

用Robots.txt來和搜尋機器人打交道

喜歡亂逛的機器人

幾天前的:「主機商客戶資料外洩事件」似乎沒有後續的消息,不過可以確定的是Google在第二天一早就把整個快取網頁中的相關資料都清除了,這個事件反應了兩個不容忽視的事實:

  1. Googlebot是一個很厲害的東西,只要你一不小心就有可能被它挖到不該公開的資料。
  2. 由於網管人員的一個小疏失,就可能造成公司的重大損失。
所以只要你有網站,不管是用什麼程式架設的,你就應該好好地管一下Googlebot在你家的行動,它雖然很厲害但是也是很聽話的,只要你好好跟它溝通一下,就不會對你的網站造成危害。

什麼是Googlebot

Google機器人(Googlebot)有好幾種名稱,有人叫它「爬蟲(Crawler)」,也有人叫它「蜘蛛(Spider)」,不過它既不是機器人,也不是爬蟲,更不是蜘蛛,而是Google用來檢索你的網頁的一種「程式」,這個程式會主動到你的網站,然後分析你的網站資料並且將資料傳回到Google的搜尋資料庫中,當有人在Google的搜尋引擎輸入「關鍵字」搜尋時,就是從Googlebot所取回的資料中找出最適合的顯示在搜尋結果頁面(SERP),所以就你的網站一定要善待它,萬一它把你的網站列為「拒絕往來戶」那可是一件最糟的事。
為了要討好Googlebot,你的部落格最好像高登之前教大家的:「向Google提交Sitemap」的方法提交一份網站地圖如Googlebot作參考,這樣子它才會樂於到你家逛逛。
但是這一隻「怪獸」很喜歡在你家到處亂逛,所以為了要限制Googlebot的行動,Google貼心地提出了「Robots.txt」這樣子的解決方案,讓Googlebot在你家真的就會乖乖聽話,而不再到處惹禍!

Robots.txt的用途

Robots.txt是一個提供給搜尋引擎機器人Bot參考的檔案,這個檔案要放在網站的「根目錄」,一般設定好了就很少動它。你可以在你的電腦編輯這個檔案再上傳到網站就可以了,裡面主要是記載網站檢索的容許和限制項目。
這個協定雖然是Google訂的,但是其他搜尋引擎也大都遵循這一個模式,當然你也可以不設Robots.txt讓搜尋引擎自己找(如果沒有什麼不能見人的資料的話)。
我們就來看一下怎麼設這個Robots.txt檔案。

Robots.txt語法

Robots.txt裡面可以有幾個指令可以用:
  • User-agent:指定檢索程式的種類。
  • Allow:允許檢索的項目。
  • Disallow:禁止檢索的項目。
  • $:從後面往前的萬用字元,用來指定檔案類型用的。
  • *:從前面往後的萬用字元,用來指定目錄或檔名用的。
  • Sitemap:用來指定Sitemap的名稱。
我們來看一下最常見的Robots.txt設定像這樣:
User-agent: *
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content
Disallow: /trackback
Disallow: /feed
Disallow: /comments
Disallow: /category
Disallow: */trackback
Disallow: */feed
Disallow: */comments
Allow: /wp-content/uploads
第一行的User-agent是指定對所有的Bot程式都有效
接下來的一連串Disallow就是禁止檢索的目錄,那為為什麼要禁止檢索這些目錄呢?有二個目的:
  1. 這些目錄裡在跟你網站內容無關的東西,或是有隱私的資料不希望被檢索,前面所提到的主機商案例應該就是網管人員沒有設該管理後台目錄的禁止檢索。
  2. 為了避免相同的網頁被重覆檢索,例如「分類文章」和「彙整文章」等。
最後面的Allow則是允許檢索該目錄,如果有Disallow掉的目錄下面有要允許檢索的就要加Allow來設除外條件。

什麼網站可以設Robots.txt

如果你是放在BSP的話那就免了吧!所有的BSP(包括Blogger)都不讓你上傳檔案,所以就只能看該BSP的網管,因此最好的作法是不要放任何不能曝光的資料在網站上才是上上之策。
如果是自架的網站那就一定可以設Robots.txt,至於怎麼設就請你自己找一下資料了,如果你是用WordPress架站的話,上面的設定值應該就夠用了。
如果覺得還不夠的話,請看一下別人的建議,不過提醒你每一個網站都要針對自己的狀況來設,像我的網站是用WordPress的預設網址結構,就不能有禁止「?」的檢索設定,這樣子所有的文章都檢索不到了!

用Broken Link Checker檢查文章中的連結

文章中有無效連結(Dead Link)是網站SEO的大忌,因為這樣子會被搜尋引擎扣分,有的時候是因為你打錯字而造成無效連結,但是更多的時候是經過一段期間之後,你原來連結的網站不見了、或者是連結的網址有所變動,這樣子都會造成對你網站無形的傷害。
而這些錯誤的無效連結如果要你一個一個去查那要花多少時間呀?還好我們用WordPress來架站就不用擔心這一方面的問題,因為有人幫你寫好檢查的外掛程式了。

Broken Link Checker外掛

  • 外掛作者網址:http://w-shadow.com/blog/
  • WordPress外掛官網:Broken Link Checker
  • 外掛安裝:請由WordPress後台【新增外掛】搜尋這一個外掛安裝,或者是你的主機空間不支援後台直接安裝請先下載檔案再上傳到主機安裝。
用Broken Link Checker檢查文章中的連結

Broken Link Checker設定

安裝啟用這個外掛之後,你可以在WordPress後台的【設定】看到多出了【Link Checker】的選單,點進去就是外掛的設定頁面。
  • Status:目前檢查的狀況報告,如果work queue還有數字就表示檢查還沒完成。
  • Check each link:檢查的頻率,內定是三天,但這是針對舊連結的設定值,如果你有新的連結還是會馬上檢查的。
  • Broken link CSS:在無效連結加上的CSS程式碼,內定是會將該連結加上刪除線。
  • Exclusion list:排除的清單,當網址包含裡面設定的文字時不檢查連結的有效性。
  • Custom fields:檢查自訂欄位,如果你有設定自訂欄位(像是有些版型的文章縮圖),請輸入每一個自訂欄位的名稱。
  • Max. execution time (advanced):最大執行時間,這個如果設太小的話會加重主機的負荷,所以如果都檢查過一遍之後,建議可以將這個時間值設大一點。
用Broken Link Checker檢查文章中的連結

修正無效連結

設定完成之後在你的WordPress後台【管理首頁】可以找到這一個Link Checker的工具欄:
用Broken Link Checker檢查文章中的連結
點進去就是完整的報告,最上面的【Broken】後面的數字就是無效連結的數目,而【Redirects】則是連結已經被轉址的數目。
用Broken Link Checker檢查文章中的連結
報告又分為以下的欄位:
  • Source:連結的文章,你可以在這裡直接編輯|刪除|查看文章。
用Broken Link Checker檢查文章中的連結
  • Link Text:連結的錨定文字或是形態,不過這個外掛的編碼好像沒辦法正確顯示中文?Image表示連結的圖片網址有問題,Bookmark表示友站連結(Blogroll)有問題。
用Broken Link Checker檢查文章中的連結用Broken Link Checker檢查文章中的連結用Broken Link Checker檢查文章中的連結
  • URL:連網的網址。
用Broken Link Checker檢查文章中的連結
【Detail】是讓你查看連結的詳細內容:
用Broken Link Checker檢查文章中的連結
或者是直接用【Unlink】刪除此一連結,用【Exclude】排除此一連結(不檢查),最好用的是直接用【Edit URL】修改錯誤的連結,它就會將相關文章中的連結一入次通通修正好了。
用Broken Link Checker檢查文章中的連結
最後面的【Discare】則是忽略此一連結。

使用後的感想

由於種種的因素使得高登工作室的無效連結還真不少,其中包括了自己的網址從最初的gordon168.dyndns.org改成gordon168.tw但是連結沒有改到的,還有許多是文章中引用別人的連結,但是別人的網址或是域名改了,所以就變成無效的連結,當然也有一些是真的連結的網站消失了。
尤其是幾個友站更換了網址(域名),不過還好大多數都有設定轉址,所以這些連結都是歸類在【Redirects】這一項,這樣子雖然不會變成無效連結,但是有時間還是改一下好了,不然哪一天他們的轉址無效了還是會變成無效連結的。
還有最多的Redirects是高登最早將圖片外連到Blogger,而Blogger的圖片事實上是用程式作轉址的,所以都會變成Redirects的項目,看來要好好找一些時間把這些圖片通通搬回自己的主機才是最好的作法。

向Google提交Sitemap

提交Sitemap是一種對「搜尋引擎友善」(Search Engine Friendly)的行為,主要的目的是要增加搜尋引擎蜘蛛Bot檢索網站的效率,當然你可以不提交Sitemap,但是能提交最好還是提交比較好,這裡有一個比喻:你的網站就好像是一棟公寓大樓,裡面有很多房間住了不同的人,而搜尋引擎蜘蛛Googlebot就像是以前會到各個社區「戶口普查」的員警,當員警到你家普查時,第一種作法是:你請他坐下來喝杯茶,然後給他一份最近住戶異動的清單。還是另一種作法:請他挨家挨戶去按門鈴,看裡面住了什麼人?如果你是那位員警你一定比較喜歡第一種作法,所以是不是在很多方面就會給你方便?當然搜尋引擎沒那麼勢利(這裡指的是Google),也不是這樣作就可以讓它把你的排名放到第一名,但是畢竟搜尋引擎是老大,討好他一點是有利無害的。



一份Sitemap包含有像這樣的內容:
<url>
<loc>http://gordon168.tw/</loc> 〔網址〕
<lastmod>2008-07-27</lastmod> 〔最後更新日期〕
<changefreq>weekly</changefreq> 〔更新頻率〕
<priority>1.0</priority> 〔優先順序〕
</url>
你可以參考本站的Sitemap,你可以看到在Sitemap裡面並沒有文章的內容,只是一張清單而已,但是針對有一些網站無法有真正的Sitemap格式,Google也允許你使用Atom來作為Sitemap的替代,但是這種的Sitemap基本上只是告訴搜尋引擎你最近有哪些文章更新了,而其他有關目錄、分類的更新都沒提到,所以搜尋引擎收錄的資料一定會有錯差,只是一種聊勝於無的作法罷了
現在我們就針對上次可以通過Google網站驗證的對象來告訴你如何提交Sitemap,如果連驗證第一關都過不了,你也不用浪費時間在Sitemap上了。
首先是建立sitemap的方法:

自架WordPress

WordPress的程式並沒有內建Sitemap所以一定要用外掛來達成,一般人比較常用的是Google XML Sitemap這個外掛,但是我的使用經驗是這個外掛會出問題,所以現在是用Karailiev's sitemap這個外掛,使用至今都沒發生過問題,你自已可以試試看。
安裝的方法兩種基本上都差不多,就是上傳到你的wp-content/plugins目錄,然後在網站的根目錄新增一個空白的「sitemap.xml」檔案並將檔案屬性(chmod)改為「777」,再到後台的外掛啟用它就可以了。(這個步驟可能會有許多人卡住了,更詳細的作法是在你的電腦先新增一個文件檔,再將檔案更名為sitemap.xml,然後用FTP程式上傳並變更屬性),這是外掛的設定頁面,全部用內定值就可以了:

WordPress.com

WordPress.com已經幫你準備好sitemap.xml了,所以你不用作其他設定直接到Google提交就可以了。

Blogger/Blogspot

根據Blogger官方的說法你不用提交Sitemap,但是如果你要提交也是可以但是只能提交atom.xml,但是如果你有燒錄Feedburner的話,又是用同一個網址所以會出錯,解決的方法是提交atom.xml?redirect=false就沒問題了。

Pixnet

好消息是Pixnet變更了網址結構之後,你已經可以提交Sitemap了,請你在你的Sitemap提交欄位輸入「sitemap.xml」再提交就可以了。

提交的方法

一樣進入到Google網站管理員工具的頁面,在你的網站Sitemap下方的「新增」按下去
選擇「新增一般網頁Sitemap」,然後在URL欄位輸入你在前面所準備的Sitemap檔案,自架或WordPress.com請輸入「sitemap.xml」,Blogger/Blogspot請輸入「atom.xml」或「atom.xml?redirect=false」,這樣子就完成了。
現在已經完成了網站驗證及提交Sitemap之後,接下來我們會再來看看Google到底會給你什麼資料,有興趣自己先看看囉!