網站開發人員的SEO小抄(修正版)

seo cheatsheet

Danny DoverSEOmoz整理了一份給網站開發人員看的SEO小抄,滿滿兩張A4,應該稱得上是大抄,而且真的很實用。

我比較感興趣的是其中兩個部份:

  • 建議的Title標籤寫法(Recommended Title Tag Syntax):
  • 5/8補記:經過一連串的討論,Danny在5/1修改了Title寫法。基本上順序就是按照行銷的優先性來排列的:

    關鍵字 < 分類 | 網站標題

    網站名稱 | 分類 > 次分類 - 網頁主題

  • 避免以下會將搜尋引擎機器人拒於門外的情況(Common Robot Traps to Avoid):
    • 表單(Input Forms,不過Google前不久已經宣佈會開始爬GET方法送出的表單)
    • 網址中帶有Session ID(Session IDs in URL)
    • 用Cookie限制瀏覽的頁面(Pages Restricted by Cookies)
    • 頁框(Frames)
    • 登入限制(Logins)

依照前者的建議,我使用All in One SEO Pack這個外掛修改了Idea Grapes的Title寫法;也一併更新了Permalink格式(多虧了Dean’s Permalinks Migration幫忙做301轉向)。目前使用的Permalink格式是/%year%/%monthnum%/%postname%/,之所以不使用一般建議的/%category%/%postname%/是因為我自己做的分類沒有太大的SEO意義,而我在Google如果看到搜尋結果列出部落格的文章,通常會看一下它是什麼時間發表的,避免看到太舊的資料浪費時間,所以還是保留了發文的時間在URL中。

免費網頁小圖示:Circular Icons

Circular Icons

Pro Theme Design設計的Circular Icons,提供117個免費小圖示,概念完整,適合用於各種網頁程式(CMS、購物車、論壇等)。採創用CC 2.5版姓名標示授權,允許用在商業用途。

此外,Pro Theme Design令我更感興趣的產品是一套付費版的WordPress主題:MimboPro;售價約合台幣2,800元,有許多令人心動的客製化功能。有興趣的人不妨先體驗一下免費版的Mimbo,再決定是否需要購買付費的版本。

免費網頁小圖示:Vaga

Vaga是由Ten by Twenty提供免費下載的圖示組,很適合用作網頁的視覺元素,尤其是妝點WebApp。它的風格和famfamfam很類似,不過如果你每天看Web Developer Toolbar已經有點膩了,要作網頁的時候能多一個選擇也不錯。

Ten by Twenty還有兩套免費的WordPress佈景可以下載,我蠻喜歡的。作者Ed說網站提供的產品都可以用在商業用途,真是大方啊。

Design Bookmarklet

Design Bookmarklet

雖然Web Developer Toolbar這個套件已經非常好用了,但是很多時候,能夠直接按一下就啟用的bookmarklet(書籤工具)還是稍稍方便一些,並且也兼具了跨瀏覽器的優點。

Allen Jardine製作的Design Bookmarklet一共有四種功能,如果你和我一樣,做網頁時,有非得把各種元素對齊不可的強迫症,那麼這個工具將非常實用:

  1. Grid:可依需求直接輸入數據(尺寸、欄位數和列數、邊距等)在頁面中產生格線。
  2. Rule:在上方和左側顯示尺規,並且可以拖曳出準線(guides)。
  3. Unit:在頁面中測量任意兩點間的距離。
  4. Crosshair:隨滑鼠游標出現的十字瞄準線,並提示座標。

上述的四項功能可以同時使用,介面也很美觀。這個小工具目前支援的瀏覽器有:Internet Explorer 7、Firefox 2+、Safari 2.0.4+、Opera 9.2+。至於為什麼沒有支援IE 6呢?Allen說,因為這是給開發人員和設計師用的呀。

10個常見的網站購物車設計問題

SURL(Software Usability Research Lab)重新檢視一份2002年時的電子商務報告,發現其中許多網站購物車的易用性(usability)問題,至今仍然存在,包括:

  1. 用使用者不易瞭解的名詞指稱購物車(Calling a shopping cart anything but a shopping cart or whatever is appropriate for the target users of the site’s location)
  2. 將按鈕標示為「購買」而非「加入購物車」(Requiring users to click “Buy” instead of “Add to shopping cart”)
  3. 當使用者將商品加入購物車時,沒有顯著的視覺提示(Giving little to no visual feedback that an item has been added to the cart)
  4. 使用者每次加入商品後,都被強迫瀏覽一遍購物車的內容(Forcing the user to view the shopping cart every time an item is placed there)
  5. 將物品加入購物車之前,要求使用者購買其他相關產品(Asking the user to buy other related items before adding an item to the cart)
  6. 要求使用者必須先加入會員,才能將商品加入購物車(Requiring a user to register before adding an item to the cart)
  7. 要求使用者將商品數量改為0以移除該商品(Requiring a user to change the quantity to zero to remove an item from the cart)
  8. 使用者必須閱讀指南才知道如何使用購物車的功能(Not making it evident how to update the items in the shopping cart)
  9. 使用者必須捲動頁面才能看到更新購物車的按鈕(Requiring a user to scroll to find an update cart button)
  10. 使用者無法在結帳前得知所購商品(加上運費)的總金額(Requiring a user to check out before showing the final costs including shipping and tax)

以上只是翻譯GUUUI上面的節錄內容,SURL的原文包含了豐富圖表,非常精彩,另外還點出了兩個新的設計問題,包括:1. 安全性 2. 無法在結帳前得知商品是否還有庫存。從事電子商務的朋友們,不可錯過。

Pages: 1 2 3 4 5 »