跳到主要內容區塊

如何檢測你的網站

如何檢測你的網站

近年來RWD的盛行,大部分的網站都已經有相對應的措施,但是由於採用同一套網站,所以勢必有些檔案從手機開啟時是桌機的檔案大小,對於4G的網路來說,如果一張圖要3.4M那肯定是非常嚇人,尤其是月租有限頻寬的狀態下,這樣的網站無疑是網路頻寬用量的殺手,網友一但發現,勢必會減少行動上網的網友數量。再來搜尋引擎的變化這些年來也有不少的變更,要如何讓網站做出來可以符合搜尋引擎的需求,提高被網友搜尋的次數,也是一個很重要的議題,所以一個良好的跨平台網站勢必需要通過一些檢測來驗證,也可以明確的知道網站在建設的過程中是否有所謂的偷斤減兩ˋ或是不專業的情況。

在2017年第一件重要的事,就是網站安全性問題,最新的chrome已經會在非採用https的網站上加上驚嘆號,來提醒網友當前的網站本身並沒有使用SSL安全憑證機制,會有這樣的轉變是因為SSL憑證的取得比起以往簡單許多,費用上也低廉了許多,再加上Let’s Encrypt的誕生與發展,只要是自有主機,只要隨著Let’s Encrypt的說明,就可以自己發行SSL憑證,除了安裝的技術性問題以外,這個憑證是免費且開放的,而且可以自行延長憑證時間,不用擔心過期沒有通知忘記要重新購買憑證這樣的問題。

透過Let’s Encrypt發行SSL憑證

再來除了SSL之外,我們還是要再強調內容為王這件事,但這裡除了說真正的文章式內容以外,也在講求給搜尋引擎機器人看的HTML5語意,比方說在<title>標籤裡除了放網站名稱,也要有其他重點關鍵字來強調網站,而且每一個頁面建立都盡量要有<h1>、<h2>、<h3>的標籤,再來每一頁面最好只有強調一件事就好,然後專心地把這件事相關的關鍵字都可以運用在文章裡,比方說網頁設計這件事,我可以強調使用什麼樣的程式語言做網站,運用什麼樣的網頁設計模式,最重要的是我在大台北地區做網頁設計,如果真的不知道文章該如何撰寫,其實可以參考5W2H七何分析法的模式,也是一個不錯的參考方式。遇到重點關鍵字可以採用<strong>標籤來加強語氣,最重要也最容易被忽略的就是網站的HTML5 Outline了,HTML5 Outline簡單來說,如果網站像一本書,HTML5 Outline就是書籍的目錄,它會非常清楚地列出當前頁面的結構,讓機器人可以在第一時間內就了解當前頁面的組成,以及重要在何處,目前還有許多網站在建置的過程中忽略了這一個非常重要的部分,無形中網站就會在架構上被扣了不少分。所以網站除了文章式的內容為王之外,也要非常注意HTML5 Outline的結構是不是完整,可被機器人蒐入而不會有沒有意義或出現斷層的現象。

處理完了內容以後,因為我們採用是RWD作法,理論上不管什麼平台載具,他們接收到的頁面HTML等資料會是相同的,如果你有採用 schema.org 的schemas標記,那你可以使用Google的結構化資料測試工具來驗證看看是否有不同之處。所謂的schemas標記,其實是一種HTML的延伸標記,主要是讓搜尋引擎更清楚當前的HTML結構內容,感覺就像自己在課本上另外寫了很多筆記一樣,而這些筆記主要的目的也是希望可以提升SEO在搜尋引擎上的自然排序。

HTML5 Outline的呈現

以前最容易拿來當測試工具的Google PageSpeed Insights 也將行動版網頁的“使用者體驗”測試部分獨立出來,變成了行動裝置的相容性測試。先說Google PageSpeed Insights ,它是一個存在許久的網站測試工具,在測試時它會掃描當前輸入的網站裡面的所有檔案,包含頁面結構,有連結的CSS、javascript檔,以及圖片部分,算是非常詳細的測試工具。測試完畢後頁面上會詳細列出您該調整的明細,並且會劃分必須修正的問題、建議修正的問題,以及已通過的規則,而測試結果也會用燈號來顯示,分數過低會用紅色表示,這意味著網站問題過多,建議一定要調整,否則網站會被搜尋引擎機器人大大扣分,接著是建議要調整的黃燈,最後就是安全的綠燈,透過Google PageSpeed Insights,我們可以大幅提升搜尋引擎對網站的親和度,可以減少許多不必要的干擾因素。

而行動版相容性測試工具,是Google這一兩年來才整理推出的新工具,主要是行動裝置普及與手機網站與RWD盛行,使得“是否有行動網站”這項因素也被放置在搜尋引擎的排名運算規則中。所以如果要比較兩個內容差不多的網站,一個有手機網站而另一個沒有的情況下,有手機網站的那一個在搜尋引擎的自然排序下就會高於另外一個。但是行動版相容性測試工具相較於Google PageSpeed Insights 測試工具來說,我們可以獲得的資訊可能就比較沒這麼清楚,檢測內容的項目也沒有名列在其中,所以測試後如果不滿意要怎麼調整,只能參考Google對行動裝置網站的建議說明頁面了。

Google的開發人員管理工具

如果說這些工具你都用過了,還想要用用除了Google以外的檢查工具,目前我比較常使用的還有pingdom的 full page test,尤其是一些比較國際化的頁面,pingdom的 full page test 可以幫你測試主機連線速度,分別可以選擇從美國的德州、加州或是紐約,也可以選擇從澳洲或是瑞典等不同的地點來測試主機的狀態,當你輸入測試的頁面網址、選擇要測試的地點之後,只要稍等片刻,就可以看到一份很詳細的報告,而且與Google PageSpeed Insights很雷同的是,pingdom的 full page test也是用紅、黃、綠作為燈號識別,你可以非常快速的就看出網站在哪些地方有缺失,而且pingdom的 full page test也有融入Google PageSpeed Insights,但是又比Google PageSpeed Insights還在詳細一些,最後還有檔案載入的細節長條圖可以看,你可以一目了然的知道哪些檔案在哪些部分花了多少時間,如果是圖片載入時間過長,你就可以針對單一圖片進行圖片壓縮或更換等步驟,可以大幅度的改善網站載入的速度。另外pingdom也有提供DNS Health 工具,有時候網站連線過慢有可能問題是出在網域上,所以檢查網域的健康程度也是很重要的一件事,如果對於自行管理的主機需要時常測試主機是否正常服務,也可以考慮採用pingdom的付費服務,可以即時幫你檢測主機反應,如果有出現異常時可以在第一間時間進行通知,以降低主機當機或反應過慢所造成的各種傷害。

透過好的內容網架構、安裝SSL安全憑證,以及各種檢測工具協助檢查網站架構,可以幫助網站在搜尋引擎上取得比較好的成果,讓網站可以在搜尋結果頁的自然排名上取得有利的地位,進而提升網站流量,而網站有好的內容才能讓網友獲得所需要的資訊,進而提升網站黏著度,讓網站效益大大提升。

作者:Nowill(張芳瑩) 品禾全端網路工作室策略總監