Web 2.0

[SEO] 建立標準網址 - Canonical URL

花水木 — Sat, 19 Sep 2009 15:47:35 +0000

同一頁面多個網址？

有時候一個網站裡面，同一個頁面會有不同的網址。比方說產品頁面，可能網址會因為分類不同而有不同的網址，但事實上是同一產品。

對Google、Yahoo或MSN搜尋引擎來說，他們的蜘蛛來爬你網站時會辨認所有的URL，若有許多URL內容都重複，則會降低分數，進而降低名次。

Canonical URL

有個辦法可以解決，就是在每個重複內容的頁面裡面的<head></head>加入以下程式碼：
<link rel="canonical" href="真正的產品頁面網址" />

其中「真正的產品頁面網址」可以使用絕對或相對路徑。

參考網站：

http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonica...
http://mrjavo.com/what-is-a-canonical-url/

六個網站測速工具

花水木 — Tue, 01 Sep 2009 15:30:26 +0000

網站易用性的理論很多，不過首要重點仍舊是：速度。

今天用各種測速方法測試了最近使用Drupal製作的獎金獵人，因為我現在人在澳洲，網路不快，常常懷疑我做的網站到底是真慢還是因為澳洲網路慢，故做了測速。

順便介紹幾種測速方式。

1.Webwait

http://webwait.com

很乾脆給你讀個十次看平均速度，我得到5.48秒。

2.Webslug

http://www.webslug.info/
可以比較兩個網站的速度，我拿來比較的是我的Wordpress部落格以及Drupal獎金獵人。

不過我覺得這不能說wordpress就比較慢，只能暫時說是個案。

3.YSlow

https://addons.mozilla.org/en-US/firefox/addon/5369
這是Firefox外掛，會幫你分析你的網站慢在哪，並用等級告訴你哪個地方最需要加強。

目前還沒時間一一優化。之後再分享。

4.Pingdom Tools

http://tools.pingdom.com/fpt/
老牌測速網站，會列出所有讀到檔案的連線、下載時間。我測起來是17.3秒。好慢！

5.Website Pulse

http://www.websitepulse.com/help/tools.php
從西雅圖測速。

6.Load Impact

http://loadimpact.com/
數據頗詳細。點免費測速之後要等一陣子，他會測試你的網站「抗壓性」，也就是可以經得起多少人同時在線上。不過測的同時我用Woopra看，倒是沒看到有人的蹤影。
我的測速結果在此。

順帶一題，雖然Woopra沒偵測到有人，不過你看：

Drupal內建的功能卻偵測到呢！這個網站從未有過這麼多人同時在線上。

最後，可以做個可用性小測驗：
http://www.humanfactors.com/downloads/webquiz.asp

之後我會朝網站介面可用性努力，讓獎金獵人動線更為完整。(目前有點混亂說)

[網站易用性] 下拉式選單的迷思

花水木 — Mon, 16 Feb 2009 06:39:47 +0000

常常會有人覺得下拉式選單很酷、很棒，如果某個網站有下拉式選單，就會覺得比較厲害，連我自己在內，都覺得下拉式選單很酷，尤其是有suckerfish或superfish特效的下拉式選單，一直是我夢寐以求，希望可以隨意應用的效果。

不過最近突然有個驚覺，那就是下拉式選單的實用性，似乎不像我想像中的那麼方便。

看起來，有下拉式選單的話導覽會很方便，可是，有時候沒有思考好整個架構，反而會造成使用者有點混亂的感覺。並且，我本來覺得很炫的superfish漸變效果，最近發現有時會讓整個選單速度變慢，更難使用，所以這些東西用之前還是需要思考一番。

以下是我認為需要下拉式選單的地方。

目標明確的目錄

首先需要下拉式選單的地方，我認為是目標明確的東西。比方說公司的產品、課程的介紹等等，也就是主選單標題是「產品」，滑鼠移過去之後，會出現所有「產品名稱」作為子選單。或是主選單標題是「課程」，滑鼠移過去之後是所有「課程名稱(或分類)」。

像是adobe這樣的導覽就很明確，你馬上就會知道你需要的資訊在哪邊。

並且在滑鼠按下主選單標題「產品」時，會出現「產品總覽」或是這種東西，才是最直覺的。

像這個「師資介紹」，直覺上，點主標題應該可以看「所有師資」，而點下拉的分類之後，才是看到分類的師資情報。

不過因為還要另外製作類似首頁的「導覽頁面」有點困難，必須重新考慮這個頁面的元素，所以有的網站因為一些困難或時間上來不及，會直接把主選單連到子選單的第一項，這也是可接受的。

有些反例，就是選單子母關聯性不夠的。

像上圖那樣，很難知道如果我想了解「培育美語」這個課程，到底該點哪個子選單。這是許多網站容易忽略的導覽易用性。或是主選單是「關於我們」，滑鼠過去出現子選單「我們的原則」、「我們的想法」，這樣也很怪。因為關連性不夠直接、直屬。

在這邊會發現，下拉式選單的重點是「子選單必須跟主選單有直屬關連」（子選單「屬於」母選單），也就是必須讓使用者一看就知道「這個子選單會被歸納在哪個主選單裡面」。不過，卻有一個例外，那就是網站後台。

網站後台

因為網站後台有許多零零碎碎的設定頁面，如果沒辦法用下拉式選單一目瞭然的看到所有設定頁面，那真的很浪費時間。但是後台設定的東西太零碎，要兼顧到「子選單和主選單的直接關聯」，其實會有點困難。所以管理區其實做到有大概關連就好，其他的，就是網管們必須去習慣的了。畢竟網管不比一般使用者，前台的導覽易用性必須做到百分之百，但後台因為比較複雜，所以大部分操作方式，還是要看個人的。

有點奇怪的是，我愛用的Wordpress和Drupal，都要另外裝外掛，後台才有下拉式選單呢！

Wordpress的管理區下拉式選單外掛，在2.7之前，最好用的是Lighter Menus，可惜到2.7之後，因為沒及時跟上更新速度，所以毫不留情地被Ozh' Admin Drop Down Menu取代了。這是Ozh' Admin Drop Down Menu的效果，非常舒適好用。

而Drupal的管理區下拉式選單模組也有幾種選擇，但最好的是Administration menu，因為名稱不夠獨特，所以很容易跟其他類似的模組搞混。總之要記得他在Drupal官方的代號是admin_menu。這個模組也是Acquia精選的內建模組之一。

而Joomla後台是直接就有漂亮的下拉式選單了。

用在這邊的下拉式選單，都沒有superfish這種花俏的漸變效果（如果您不清楚superfish，可以上網搜尋看看，總之就是下拉的時候會淡入淡出，整個很美）。管理區根本不需要這種會拖慢選單導覽時間的東西。

如何掌控robots對自己網站的存取?

花水木 — Mon, 16 Feb 2009 06:00:39 +0000

　　今天瞭解了一下這部分，因為網站這麼多東西，也許會有些東西是不想被搜尋到的，比方說只是要暫時上傳到空間、或是開一個目錄拿來放現在正在進行測試的網站等等(我接case時就會必須放到我的空間測試)，又不能直接關掉權限，因為還是需要能夠存取，這種情況又不希望被登記到搜尋引擎裡面弄亂我的網站索引。所以就需要用到robots.txt這個檔案。

　　其實Google在這部分說得滿清楚了。以下我整理出一些要點。

1. robots.txt 必須存放在網域的根目錄。
2. 語法：User-Agent 和 Disallow。意思就是「你不要誰(User-Agent)來存取哪些東西(Disallow)？」
3. googlebot特有語法：Allow，讓google某些bot搜尋剛剛你有Disallow過的特定資料。
4. 使用「*」來代表一串任意字元
5. 使用「$」表示 URL 的結尾字元(副檔名)

　
範例：

所有robots無法檢索目錄folder1
User-Agent:* Disallow: /folder1/

所有robots無法檢索目錄folder1但可以檢索裡面的myfile.html
User-Agent:* Disallow: /folder1/ Allow:/folder1/myfile.html

無法檢索特定檔案
User-Agent:* Disallow: /private_file.html

無法檢索特定檔案類型
User-Agent:* Disallow: /*.gif$

無法檢索動態產生的網頁
User-Agent:* Disallow: /*?

只讓google adsense檢索某網頁
User-Agent:* Disallow:/folder1/
User-Agent:MediaPartners-Google Allow:/folder1/

攔截所有以 private 開頭之子目錄的存取
User-Agent:Googlebot Disallow:/private*/

常用User-Agent列表(Robots)：

* Googlebot：Google 網頁索引及新聞索引
* MediaPartners-Google：Google Adsense 索引網頁以決定廣告內容
* Googlebot-Mobile：Google手機網頁索引
* Googlebot-Image：索引網站裡的圖片
* Adsbot-Google：索引廣告主的廣告網頁來看品質如何
* Feedfetcher-Google：Google的Feed/RSS索引
* MSNBot：MSN 索引機器人
* del.icio.us-thumbnails：del.icio.us的網站縮略圖擷圖robot
* Yahoo-Blogs：Yahoo部落格索引
* Yahoo-MMAudVid：Yahoo多媒體檔案索引
* YahooFeedSeeker：Yahoo的Feed/RSS索引

test

花水木 — Sat, 31 Jan 2009 08:04:19 +0000

test