2010年9月20日 星期一

我在網站的後台做什麼?版主、站長必備的27+網站

最近網路有幾件事情讓我覺得全身都輕鬆起來:

一、許多網站,如Ning、Blogger都改版為將後台的管理機制加入許多功能,使用得管理網站變得更為輕鬆。
二、Facebook的「讚」,使得網站能透過社群網站,倍增流量。
三、Twitter改版,今後將在網頁上直接呈現推友的推特的網頁。
四、FlipBoard for iPad將Facebook和Twitter上朋友推薦的網頁,集結成一本「雜誌」,所謂「社群媒體」的時代到臨。

這幾件事都在告訴我,追求PageRank、搜索引擎最佳化(Search engine optimization, SEO)的時代即將過去,代之以經營社群媒體、微型網誌的時代已經成為主流。換句話說,網路與其聽信那些技術人員吹捧,不如個別針對社群做好行銷,這才是王道。

過去,在網站後台的要下的功夫很多,我沒錢請網站開發人員,所以很多瑣碎的工作都必須自已來,現在把這些工作整理出來,以後當然偶而會用得到,但是有人要拿去唬爛人,賺技術錢,大概也沒什麼利頭了。

一、網站設計注意要點:

1.Pingdom tools:這是用來測試網頁開啟,拖慢速度的網頁元素的網站。就好像人跑起來很慢,那到底是關節炎還是扁平足,從這個網站可以診斷出來。

我個人總結我在設計網站時,經常明知故犯的老毛病如下:

其一、圖片、影片尺寸太大。這是不得已的,我喜歡影像,不喜舞文弄墨,所以偏愛大圖,看起來才夠爽,影片亦復如是,日之久了,貼文太多,整個網站就成了龜速大王。

其二、圖片我又喜歡放在全球最大的照片網站FLickr上,這容易和國際接軌,再用嵌入碼,放到部落格來,但壞處是呼叫外部連結,也會拖慢網站速度;影片則以引用Youtube和Vimeo為多,Youtube同屬Google系統,還好;Vimeo則屬高畫質,跑起來很辛苦。

以上兩點,很難取捨,開刀治療方法是把要展現的第一張照片上傳blogger,再用連結,連到Flickr的幻燈片上觀賞其餘圖片;多數影片用Apture嵌入,但Apture也會拖慢網頁速度,不過總比同時要跑許多Flash好,終結之道,就等待HTML5到臨。

其三、使用過多的動態HTML檔。這些元件,有許多不得不裝的原因,理論上是要儘量網頁的下方擺,但如Google的廣告、Facebook的外掛等,放得太下方,又曝光不足,顯得不重要,只好往上提,這又拖慢了網頁速度。

其四、在網頁裡放計數器,對營利站來說,是和廣告商家溝通的重要依據;我的個人小部落格,設置計數器,則是自已看爽的,可裝可不裝,不裝嘛,又少了創作的動力,所以裝了上去,可是再強的計數器,都會出問題,萬一當機,甚至拖慢網頁速度到十數秒及至於無法忍受的地步,唯一的解決的辦法,就是放到最底下,但此帖的效果,普通。

其實設計開發網站,雅虎開發團隊曾經發表了一篇文章:Best Practices for Speeding Up Your Web Site,總計34條法則,我自已算算,這些「天條」,我屢犯再犯,其實是能捨則能得的問題,叮叮咚咚的掛了一堆東西,囉哩囉嗦的加入一堆程式碼,我有一回,趁著暑假,狠狠的長髮為君剪,動了大手術,從此以後,網頁速度加快許多,也可以專心經營社群了。

2.雅虎天條由於寫得很專業,有需要的朋友請看這裡:<譯文出處

二、測試網頁速度的的網站:這個是設計開發網站的基本功,我個人常用者臚列於下:

1.Webwait:台灣人常用的,非常簡易的網頁載入計時工具(website timer),宣稱能排除被用來搞怪的Ajax或Javascript,準確度還不錯。

2.Google Browser site:這是我用來測試網頁優先呈現的次序,關係Google Adsense的曝光值,通常以左方為優先,那麼把Side bar改到左方會產生什麼驚人效果?不多啦,應該說是遵守交通規則罷了,然而因為顯現網頁出現的優先次序,可以據以判斷那些網頁元素要優先呈現給讀者,非常實用。

3.Web Page Analyzer from Website Optimization :這是個非常值得推薦的網站,測試結果後,會將網頁所有的元素與語法來個總體分析,最後以綠色(恭喜,符合SEO的標準)、淡綠(預警)和紅色(警告!你必須要要做適度的調整)三級處理,是從事為SEO工作的網站開發人員很有用的工具。

4.WebSitePulse Test Tools 主要是用來測試主機訊息和加載速度用,尤其是在中華電信連絡國際網路又出問題時用。

5.Internet Supervision Url Check 這可以測試從全世界來的,使用不同瀏覽器連結到你的網站的速度,魚腸劍譜和魚夫創辦的玉山集團,由於遭到中國封鎖,結果呈現N/A,沒有中國方面的任何資料。




















6. Webkaka:這個中國叫「卡卡網」,測試中國13個地區連結到你的網站的情況,至於我所創辦的網站,資料當然是N/A,我會使用這個網站,當然是用來測試中國封鎖的現狀,以及幫忙台商運用雲端運算時,給他們自我測試的工具。

三、搜索引擎最佳化(Search engine optimization, SEO):現在有很多網路公司成立此類型的服務,我所創辦的網站,商業競爭性很少,所以只好自己摸石子過河。

1. Google Analytics: 這算是基本配備了,包含所有流量來源、地區別、瀏覽器、到站流向等等,是任何SEO的網站開發人員必備的武器。

2. Sitemeter:和Google Analytics大抵是相同的功能,但要進階,必須付費。

3. Goingup.com:類似Google Analytics,可以監看來到你的網站的重要關鍵字、流量、瀏覽器、PageRank等,是後台分析和SEO的利器。

4. Sitebro:功能和Goingup.com差不多,唯一不同是他號稱會提昇 10﹪的人氣,我資質魯鈍,使用一年,不知如何增加這10%。

5. WEBTOOL Backlink Checker: 這個很有趣,大抵讓你迅速的了解,那些喜愛你的網站朋友引用你的網址,讓你的網站流量增加,別忘了去留言謝謝人家。

6. Link Popularity Checker: 這個好用,是來測試你的連結廣度,可以知道哪些網站連結了你的網站。

7.Class C Checker:C級IP地址檢查,如果同時擁有許多網站,那麼就可以用來測試它們是在同一個Class C的範圍(Range)裡,最好是不要,才能獲得最好的SEO值。

8.SEO Workers SEO Analysis Tool: 這是我用來介紹給專業的SEO人員用的,討論meta tap、加載速度和關鍵字等,不是內行的可以不看。

9. Aptimize: 這是個很用心的SEO網站,必須註冊,然後再寄給你測試結果及建議。

四、瀏覽器模擬:前來觀看我所創辦的網站的瀏覽器,大抵還是微軟的IE是第一名,其次為Firefox,第三為Google Chrome,第四為Safari,最後是Opera等等,這顯示數位差距在台灣仍然很大,許多人仍不知瀏器除了IE外,還有更快速的工具,這造成網頁開發人員必須測試不同的瀏器瀏覽網站所產的結果,我常在一台電腦裡,打開許多瀏覽器,不同的瀏覽器,或不同的作業系統,至少在字型或顏色產生很大的差異,這也造成我很大的困擾,但仍有些工具可以參考:

1.Browsershots: 瀏覽器兼容性測試,展示你在Windows、Linux、 Mac、BSD等不同作業系統,採用不同的瀏覽器,模擬網頁的效果,一樣米,飼百樣人,有些讀者反應看不到這個或看不到那個時,我就拿這個瀏覽器兼容性測試來模擬他的電腦狀況。

2.IE NetRenderer:這是針對IE的使用者,網站開發人員必備的瀏覽器模擬器,但微軟的2010年3月宣佈的IE9仍然無法測試。

3.Widgetbox:使用智慧型手機的人越來越多,從手機來看你的網站的人數也在增加之中。MobiReady Report這個網站本來是在模擬你的網站在手機上看起來的樣子,但由於長期沒有更新,我已經不用了,現在測試手機頁面,我是直接在Widgetbox生成一個,然後製成QR Code,在手機裡觀看。

4.Wptouch: 這是Wordpress的外掛,用來生成手機版,我有一個網站是用Wordpress做的,手機版就是拿這個網站來測試。

五、編碼驗證:我年輕時做個一陣子的程式設計師,當然那是很遙遠的故事了,當時的電腦很無聊,當然也沒連網,我覺得這不是人做的工作,以後就不敢造次了,但現在還是得會測出那裡的語法錯誤,好來跟程式撰寫高手討論,下面是經常使用的測試網站:

1.WDG HTML Validator:臚列語法上每一項的錯誤,可以逐條找出解決方法,非常清楚。

2.W3C Feed Validation Service:修正Atom、RSS的語法,並提出修改建議,不過現在用訂閱的人漸少,山不就我,我來就山,不如直接推到Facebook、Twitter或Pluk去。

3.W3C Link Checker: 備用,檢查連結是否正常。
Juicy Studio Link Analyser:和W3C Link Checker相似。

六、其他:
1.PageRank預測:PageRank是衡量一個網站的重要性的標準,大抵值等於4以上,就很高,但PageRank是什麼碗榚,Google不是講得很清楚,一般會使用蜘蛛模擬器,來模擬Google如何搜尋你的網頁,但我認為要這麼片斷的理解,那不如看我這篇文章的圖解比較清楚:

圖解Google搜擎到底是怎麼運作的?

1.PR checker:關於追蹤PageRank的網站很多,其實上述許多網站裡也都設有這個功能。但PR checker: 我最常採用的測試器。

2.在流量排名上,台灣人比較常用的是「部落格觀察」,不過限於「個人」,群體創作網站我記得是不列入評比的;國外的網站我比較常用的是Alexa Traffic等。

3.搜尋引擎飽和度(Search Engine Saturation),這是觀察搜尋引擎索引網站、網頁的數量統計,我常用的是Marketleap

這些工具整理出來,放著備用,經營網站或部落格,千萬不要流於這些技術問題的枝節末尾,環境不同了,多多經營社群才是正途。

延伸閱讀:
令網站打開提高速度的7大秘方
百萬做個總統府的網站,到底貴不貴?寫給網站開發人員看的。

3 意見:

gaxiong 提到...

魚夫大這裡真是日行千里。
這才是未來生活所必備之教育。

IPLAY 按不累 提到...
作者已經移除這則留言。
文雄 提到...

歐!大哥,這篇好硬喔。我想我只是幼幼班的.... :o