moment.tw網站由wordpress建置,在2020年後才陸陸續續更新較多的內容。
但是有一個問題困擾了好長一段時間,透過google搜尋可以找到相關的網頁,
但是google搜尋自己的網站卻沒有相關圖片,而且還一張都沒有。
在google搜尋過類似的條件,如:google搜尋沒有縮圖、google圖片搜尋沒有網站圖片等等,
但是都沒有找到正中問題的核心,也就是說根本找不到問題的癥結點。
連一張網站的相關的圖片都沒有 ,網站上的圖片你在哪裡啊~
說明
最近閃過一個念頭有時間一定要把問題的癥結點找出來,
還好在中華民國國慶雙十節普天同慶之時展露曙光,
終於有找出一些些蛛絲馬跡,希望藉此將問題解決。
檢測
一般的網站通常有網站的Logo與Favicon這兩兩個基本的圖片,以下將會針對Logo與Favicon來說明
Logo檢測
檢測方式一
可由Google提供的複合式搜尋結果測試網頁來測試自己的網站。
從測試結果中的螢幕截圖來查看能是否正確顯示網站的logo。
輸入要測試的網址
測試中
測試結果,點選查看已測試的網頁
網站logo沒有出現,表示被擋住了
檢測方式二
另外利用Google robots.txt 測試工具檢測來進行網站logo圖檔測試
首先先找出logo圖檔的位置,如何檢視logo的詳細內容呢?可以透過Firefox瀏覽器來檢視。
工具 > 頁面資訊 > 媒體
透過Google robots.txt 測試工具檢測logo測試失敗,同時也告訴為何被擋住了。
原因是因為robots.txt中的Disallow: /wp- 阻擋了。
Favicon檢測
以下以Favicon為例,先找自己網站的Favicon。
Favicon會在網址列中呈現出來。
如何檢視Favicon的詳細內容呢?可以透過Firefox瀏覽器來檢視。
工具 -> 頁面資訊
工具 -> 頁面資訊 ->媒體
Favicon 詳細位置
另外利用robots.txt 測試工具檢測來進行Favicon圖檔測試
在下方網址將Favicon 網址貼上,禁行測試
透過Google robots.txt 測試工具檢測Favicon測試失敗,同時也告訴為何被擋住了。
原因是因為robots.txt中的Disallow: /wp- 阻擋了。
調整
圖片盜連調整
原先以為會不會是設定圖片盜連相關設定所導致,利用上面兩種方式去測試,答案依舊,暫時排除圖片盜連因素
如何防止盜連呢?在主目錄下新增.htaccess檔案。
新增如下的內容:
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https://moment.tw(.*) [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ https://moment.tw/error.jpg [R,NC]
說明:
第二三行設定允許的連線
第四行則是從其他地方連進來且是那些檔名的,看到403錯誤訊息,也可以改成顯示指定的圖片。
如何搜尋圖片是否遭到盜連呢?在google中下條件,
將inurl:與-site:後面改成自己網站名稱
robots.txt調整
robots.txt這份文件,可以讓搜尋機器人應該如何讀取這個網站,
當搜尋引擎機器人讀取該網站時,會依據robots.txt內容,去抓取網站。
當去檢查網站的robots.txt時發現,Disallow: /wp- ,因此符合/wp-條件的目錄都不會去搜尋。
因為圖片都放在/wp-content/gallery與/wp-content/uploads/下,難怪圖片都沒有被搜尋引擎讀取
也難怪google搜尋都沒有找到網站中所有的圖片,我想應該找到主要的原因了
接下來就針對robots.txt來做調整
調整前
調整後
Allow: /wp-content/gallery
Allow: /wp-content/uploads/
測試
調整完之後可以透過複合式搜尋結果測試網頁測試一次
看到這裡都快哭出來了,Logo終於出現了。
前後對照
方式二測試結果網站logo成功,同時也知道是個哪一個條件成功的
Allow: /wp-content/uploads
網站Favicon成功同時也知道是個哪一個條件成功的
Allow: /wp-content/uploads
觀察與等待
調整完之後,就先觀察多久之後會被google收錄。
等待的時間多久呢?2022/10/11下午調整,在20022/10/15之後就慢慢可以找到了
google搜尋圖片結果出現
如何只搜尋自己網站的圖檔呢?
在site:之後輸入自己網站的網址。
結論
架設一個網站說簡單也可以很簡單,說不容易也相當的不容易。
經營一個部落格遇到的問題,這一路上走來也遇上不少,一些眉眉角角的事情相對來的多。
光一個google就有很多技術成面需要去了解,也需要去配合,這樣在google上才能呈現較好的結果。
因為Google搜尋不到自己網站上的圖片,找到最後的原因竟然是robots.txt中設定的條件所引起。
不過也很佩服Google機器人很遵守robots.txt中設立的規則。
回過頭來看這次的問題,是因為robots.txt中設定Disallow的條件,阻擋了Google機器人進行爬文,導致無法被搜尋引擎收錄。
如果您也遇到類似的問題,建議好好的把google搜尋中心說明文件建立 robots.txt 檔案好好的閱讀一遍,這樣就會很清楚的知道robots.txt檔案如何運作,以及自己可以如何透過robots.txt來達成自己的需要功能。
延伸閱讀
.google搜尋中心說明文件 建立robots.txt檔案
.google搜尋中心說明文件 圖片Sitemap