這一兩天越來越多人收到一封來自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的索引調整，就可以解決問題。

▲ 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

為什麼網站有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，自己寫規則囉！

Google 告訴你的修正檢查方法

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

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

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

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

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

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

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

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

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

語法在此，請參考使用：

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

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

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

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

相關文章

[教學]如何領取TPASS 悠遊卡補助100元？

[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？

[教學]如何申請台北捷運誤點證明？

免用Photoshop！Adobe Express 免費線上圖片裁切服務

[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告

免註冊帳號！ChatGPT 開放免費使用並且無任何限制！

菲律賓遊學攻略｜語言學校太多難以抉擇？看這篇就對了！

Line Mobile 月租24元！中華電信隱藏資費方案(附邀請碼+申請教學)

[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？