[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

這一兩天越來越多人收到一封來自Google Webmaster的網站通知郵件「Googlebot 無法存取網站上的 CSS 和 JS 檔案」。因為JS和CSS一般來說都是被robots.txt列為禁止索引檔案,檔案僅有網站JS特效語法或者是CSS網站樣式表,對搜尋來說這並沒有意義,因為搜尋注重的是文字內容或者是網頁HTML Tag。不過仔細去爬文後會發現Google早在2014年10月就告知索引結果開始變動,將會納入CSS和JS的索引,請網站經營者不要擋住他。

WordPress的網站來說,一般預設索引會擋住「wp-admin」、「wp-includes」,因為這些都是系統檔案,沒有必要提供給搜尋引擎檢索,若開放檢索一來沒有意義、二來是增加網站的索引負擔與不必要的流量與頻寬的消耗。不過既然越來越多人收到來自Google網站管理員的通知信,而且還告知說「如果禁止 Google 存取這些資源,會導致您的網站無法達到最佳排名。」,使得越來越多人擔心。

那要解決Googlebot 搜尋機器人索引網站的CSS和JS檔案也不是很困難,只要我們改寫主機上的robots.txt就可以解決這樣的Google搜尋問題。當然解決方法其實Google在郵件中也有告知該如何處理,僅需要透過Google 模擬器(Fetch as Google),模擬後抓出問題,再針對有提出警告的JS做robots.txt的索引調整,就可以解決問題。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

▲ Googlebot 無法存取網站上的 CSS 和 JS 檔案。

Google搜尋蜘蛛(機器人)到底是否會因為網站CSS和JS封殺,而讓網站排名降低?關於這點有一種可能,由於Google開始重視網站使用者速度體驗,把JS和CSS納入索引讀取,一方便可能可以模擬出網站樣式並評估網站的配置狀況,二來可以因為JS和CSS的讀取,更完整的得知網站的整體網頁載入速度,透過這個載入速度因子,來給網站SEO分數。

Google 很多SEO規則的變更,近年來可以看到從不要用Meta keywords取消PageRank更新SSL的網站可加分1%到現在網站須開放索引JS和CSS等,SEO的優化規則已經從早期的認知變成新時代的系統規則,所以對於這次的CSS和JS的修正,大家可以自行決定是否修正或者是保留原先。而香腸自己的修正做法將會針對Google開放JS和CSS索引,其餘搜尋引擎則封殺不讓他們索引JS和CSS

如何檢查自己的robots.txt檔案?

一般網站如果沒有自己加入robots.txt,網站可能預設是支援所有內均可以索引與收錄,所以很多人在網站上亂丟一些公司重要文件會被搜尋到,就是這個關係,加上robots.txt,就可以避免正規搜尋引擎去收錄,但是暴力搜尋引擎可能就不一定會根據這些規則收錄網站。

檢查自己網站的robots.txt規則,其實僅需網址列造訪一下,就可以看到有沒有這個了。在WordPress網站,很多可能是透過虛擬化的產生,也就是透過一些SEO外掛產生這個檔案,實際上在FTP上並不存在,所以修改上會比較困難。不過檢查的時候不論是虛擬或實際有這個檔案,造訪網址都可以看到。


直接造訪http://你的網站網址/robots.txt

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

為什麼網站有robots.txt但我無法修改robots.txt?

有些人會覺得奇怪,為什麼上面香腸說的檢查網址怎麼有robots.txt檔案,但是卻無法修改?或者是FTP目錄中卻沒有看到?就算建立這個檔案並丟入,好像還是不太一樣?那可能是你網站上安裝的WordPress SEO外掛中,有啟用了robots.txt的設定,以讀取外掛設定為優先了。遇到這樣狀況,您得自行在網站後台檢查個外掛的設定。

不過有時候更扯,那就是新手不知道卻安裝好多個SEO外掛,結果功能蓋來蓋去,相同功能啟用好幾次,造成你可能以為你關了A外掛的robots.txt設定以為弄好了,卻不知剛好B外掛的設定因為A外掛關閉而啟用,最終你還是失敗。所以SEO外掛檢查一下囉!

以香腸自己網站為例,因為Google XML Sitemaps外掛本身會啟用robots.txt虛擬檔案,所以把此勾勾取消後,就可以自己用筆記本新增robots.txt,自己寫規則囉!

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

Google 告訴你的修正檢查方法

根據郵件內的通知,檢查Googlebot為什會因為robots.txt對於網站的JS和CSS無法收錄索引的狀況,有三個步驟,首先須先透過Google模擬器找出封鎖的指令。接著修正robots.txt檔案,最後使用Google模擬器檢查網站收錄是否正常,就可以解決問題。

第1步  首先先進入Google Wemaster 網站管理員。(如果尚未設定請參考:申請Google網站管理員教學),一進入後可能會看到以下的警告訊息。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第2步  接著點選左側的【檢索】→【Google 模擬器】,接著在右側點選﹝擷取並轉譯﹞。


[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第3步  接著轉譯完畢後下方會出現結果,點選後方時間進入查看。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第4步  很快地你會發現奇怪Googlebot(Google搜尋蜘蛛)和你實際訪客看到的網頁並不同?這就是卡在CSS和JS檔案被禁止索引,所以才會顯示不同。Google就是希望你解決這個問題,才發出上述的Googlebot無法存取網站上的CSS和JS檔案之通知。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第5步  接續上一步驟往下滑,可以看到禁止索引的網址,只要解決這些網址就可以了,如果是站外連結可能就無法協助處理,先把站內的連結搞定就好了。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第6步  如果你不知道如何修正,可以點選後方的「robots.txt測試工具」,Google網站管理員將會告知你這個檔案無法收錄是因為哪一段的robots.txt語法影響了。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第7步  沒錯,原來是香腸設定了「Disallow: /wp-content/」的阻擋語法,因此只要取消它問題就可以解決了。


[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第8步  香腸修改了原先的撰寫規則,開放Google搜尋引擎可以讀取網站上所有的JS和CSS檔案,至於其他搜尋引擎則設定為禁止搜尋原先指定的目錄(紅色圈起來部分),這樣就可以了。(請透過FileZilla連線到主機FTP,然後抓下robots.txt檔案並修改。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

語法在此,請參考使用:

第9步  更新完畢後,上傳到FTP上面覆蓋,接著再次用Google 模擬器再次檢查,點選﹝擷取並轉譯﹞。然後再點選下方的日期進入查看模擬狀況。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第10步  很快的,我們會發現Googlebot 擷取的網頁和訪客看到網頁的兩視窗模擬是相同的,那就代表你規則設定成功,Google的搜尋蜘蛛機器人可以正確抓網站的CSS和JS檔案了。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第11步  可能下方還有部分的檔案無法正確被收錄,這個還好,主要的JS和CSS解決就可以了,至於外部的CSS或者是JS我們可能無法控制,解決方式就是不理它、或者是連繫該網站管理員解決,又或者是不要使用即可。

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案

第12步  再次確認一下我們的robots.txt,是不是已經更新了呢?

[SEO優化] 解決Googlebot 無法存取網站上的CSS和JS檔案