---
title: "驗證 SSR 或 Pre render SEO 是否正常運行的幾種方式"
description: "介紹三種驗證 SSR 或 Pre-render SEO 是否正常運作的方法，包含模擬 Googlebot 訪問、Google 搜尋結果比對，以及 Google Search Console 收錄狀態查詢。"
canonical_url: "https://blog.markkulab.net/post/how-to-verify-seo"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/author/mark-ku"
site: "Mark Ku's Blog"
date_published: "2022-06-30 01:01:01 +0800"
category: "SEO"
tags: ["seo", "googlebot", "cloudflare", "ssr", "pre-render", "google search console", "user-agent"]
language: "zh-TW"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "轉載或引用請註明作者並附上原文連結"
---

# 驗證 SSR 或 Pre render SEO 是否正常運行的幾種方式

## 前言
最近發現有些網站有做 SEO，但都沒正常運行，所以就順手寫了一篇筆記，記錄如何驗證 SEO 功能面有辦法被 Google 爬蟲所收納。

### 方法一、最即時的方式，就是模擬爬蟲訪問網站
### 到 Chrome 市集安裝 [user-agent-switch](https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=zh-TW) 套件

### 參考 [Google Doc](https://developers.google.com/search/blog/2019/10/updating-user-agent-of-googlebot)，得知 Google搜尋引擎的爬蟲，是採用什麼 useragent 來收錄你的網站

```
目前的 Googlebot 使用者代理程式
行動版：
Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +https://www.google.com/bot.html)

電腦版：
Mozilla/5.0 (compatible; Googlebot/2.1; +https://www.google.com/bot.html)

「或」

Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +https://www.google.com/bot.html) Safari/537.36
```

### 透過 chrome 套件 user-agent-switch，模擬 google bot 的訪問你的網站
![設定自訂User-Agent字串的介面](https://blog.markkulab.net/content/markku/posts/how-to-verify-seo/images/3K3T80i.png)
### 結果發現被 Cloud Flare 擋下來了
![瀏覽器顯示Cloudflare封鎖pixabay網站的錯誤頁面](https://blog.markkulab.net/content/markku/posts/how-to-verify-seo/images/LQMIVyW.png)

### 我參考了[Cloud falre社群的討論](https://community.cloudflare.com/t/cloudflare-managed-special-rules-are-blocking-googlebot/82911/14)，得知看起來是他的規則造成的

```
Workaround
As @cs-cf said, the best thing to do is to disable the rules individually so you don’t lose all the other Cloudflare Specials benefits.

Step-by-step
Click the Firewall tab
Click the Managed Rules sub-tab
Scroll to Cloudflare Managed Ruleset section
Click the Advanced link above the Help
Change from Description to ID in the modal
Search for 100035 and check carefully what to disable
Change the Mode of the chosen rules to Disable
Rules matching the search
100035 - Fake google bot, based on partial useragent match and ASN
100035B - Prevent fake bingbots from crawling
100035C - Fake google bot, based on exact useragent match and DNS lookup
100035D - Fake google bot, based on partial useragent match and DNS lookup
100035U - Prevent fake BaiduBots from crawling
100035Y - Prevent fake yandexbot from crawling
A seventh rule related to fake bots was deployed during the incident:

100035_BETA - Fake google bot, based on partial useragent match and ASN
```
### 但這解法，礙於免費版不能管理這個規則，猜測是 Pro 版的預設規則所造成
![Cloudflare WAF 管理規則頁面顯示升級專業版](https://blog.markkulab.net/content/markku/posts/how-to-verify-seo/images/smFNMo1.png)

### 如果 SEO 正常，就會顯示正常的頁面
![瀏覽器顯示Let's菓鳳梨果乾電商網站首頁](https://blog.markkulab.net/content/markku/posts/how-to-verify-seo/images/TZci26Z.jpg)
## 方法二、驗證頁面有沒有正確被 google 收錄，這不是立即就生效，需要時間等待 Google 收錄。

### 訪問該網站，從 html 中取得 head description ，並拿去 google 搜尋
![瀏覽器開發者工具顯示 meta description 標籤](https://blog.markkulab.net/content/markku/posts/how-to-verify-seo/images/R4ac5dl.png)

### 確認是否有沒有被正確收錄
![Google搜尋Powershell Mongodb備份還原筆記結果](https://blog.markkulab.net/content/markku/posts/how-to-verify-seo/images/55WLOCy.png)

## 方法三、[查看 Google Search Console  收錄狀態](https://search.google.com/search-console/about)
![Google Search Console已索引但未提交Sitemap頁面](https://blog.markkulab.net/content/markku/posts/how-to-verify-seo/images/XkLNyOa.png)

## 補充
### Chrome DevTools > More tools > Network conditions > 取消 Use browser default 預設有好幾種 ua 可以讓你選，其中就包含了 Google Bot。

---

## 關於本文與作者

本文出自 [Mark Ku's Blog](https://blog.markkulab.net/post/how-to-verify-seo)

授權條款： [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — 轉載或引用請註明作者並附上原文連結

### 關於作者

**[Mark Ku](https://blog.markkulab.net/author/mark-ku)** — Software Solution Provider

- 10+ 年資深軟體工程師，現為 AI 應用 Builder
- 專注大型平台架構設計，從北美電商到AI SaaS訂閱收費系統
- 結合 AI Agent 與自動化，打造高效可演進的產品技術基礎

### 作者開發的免費工具

以下工具皆可免費使用：

- [免費 PDF 簽名工具](https://blog.markkulab.net/tools/pdf-sign): 線上 PDF 簽名工具，瀏覽器內完成手繪、打字、上傳簽名，可拖曳放置、縮放、下載。所有處理都在你的裝置完成，檔案不會上傳。
- [VS Code Refactory](https://blog.markkulab.net/tools/refactory): Refactory 是一款 VS Code 重構擴充套件：34 個重構動作、37 條 code smell 檢查、Code Health 儀表板、18 種語言、534 支測試。懂你的專案慣例：介面放哪、DI 註冊寫在哪、'use client' 該不該加；還會用 git 修改頻率 × 複雜度排出「該先修哪個檔案」，並一鍵把壞味道交給你自己電腦上的 Claude Code 修。免費使用，原始碼不離開你的機器。
- [DB-Kit 資料庫管理工具](https://blog.markkulab.net/tools/db-kit): DB-Kit 是一個用 Tauri + Rust + React 打造的輕量跨平台資料庫管理工具，用單一一致的介面同時管理 MySQL、MariaDB、PostgreSQL、SQL Server、Oracle、SQLite、MongoDB、Redis、Kafka、Elasticsearch 與 RabbitMQ 十一種資料來源：連線密碼以 OS keychain 加密、SSH Tunnel、完整 CRUD、視覺化查詢建構器、多結果集同時顯示、跨連線資料傳輸與比對同步、Excel / CSV 匯入匯出、執行計畫視覺化、ER 圖、排程備份、SQL 壓力測試（p50～p99 延遲百分位）、15 條規則的 SQL 審查、Kafka 訊息瀏覽與監控告警；繁中 / 英文雙語介面，內建 AI 助手（自然語言生成 SQL、AI 審查與調校建議）與命令列工具 dbk。免費開源（MIT），提供 Windows / macOS / Linux 安裝檔。
- [VS Code Super Mermaid](https://blog.markkulab.net/tools/super-mermaid): Super Mermaid 是一款 VS Code 擴充套件：開箱即用的漂亮 Mermaid 圖表，自動上色、即時預覽、滑鼠平移縮放、PNG / SVG 高解析匯出，內建 21 種範本與多種主題。免費開源（MIT）。
- [React Super Mermaid](https://blog.markkulab.net/tools/react-super-mermaid): react-super-mermaid 是一個開源 React 元件庫：一行 <MermaidViewer> 即可渲染漂亮的 Mermaid 圖表，內建 colorful / sketch 主題、平移縮放、圖內搜尋、SVG / PNG 高解析匯出。輕量、SSR 安全、完整 TypeScript 型別。免費開源（MIT）。
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/tools/jira-super-mermaid): Atlassian Forge app：在 Jira issue 與 Confluence 內文直接寫 Mermaid 語法，畫流程圖、時序圖、狀態機與甘特圖。11 種圖表、SVG / PNG 匯出、明暗主題、完整中日韓文字支援。取得 Runs on Atlassian 資格：圖表存在你自己的站台，app 不呼叫任何第三方服務。免費，即將上架 Atlassian Marketplace。
- [Mermaid 線上預覽](https://blog.markkulab.net/tools/mermaid-preview): 在瀏覽器裡寫 Mermaid、即時看圖，整張圖表壓進網址就能分享。免註冊、不上傳伺服器，相容 mermaid.live 的分享連結。
- [React Intl Phone Number](https://blog.markkulab.net/tools/react-intl-phone-number): react-intl-phone-number 是一個開源 React 元件：framework-agnostic、不依賴 antd，提供 E.164 進出、可搜尋國旗 / 國碼下拉、可配置驗證等級（strict / mobile-strict / loose）、可主題化 CSS 與 i18n，電話邏輯由 google-libphonenumber 驅動。輕量、完整 TypeScript 型別。免費開源（MIT）。
- [Uptime Kuma Cluster](https://blog.markkulab.net/tools/uptime-kuma-cluster): 把單機版 Uptime Kuma 改造成高可用叢集：OpenResty + Lua 智慧負載平衡、MariaDB 共享狀態、健康檢查與自動 Failover，附叢集管理 REST API，一行 Docker Compose 啟動。免費開源（MIT）。
- [特教專案](https://blog.markkulab.net/education): 為特殊教育學生製作的學習教材

### 每日 Podcast

- [科技新鮮事](https://blog.markkulab.net/category/tech-news): 每日精選 AI 與科技趨勢，透過語音摘要快速掌握最新技術動態，涵蓋 AI 應用、軟體架構、DevOps 與工程實戰。 — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/category/ai-stock-chat): 每個交易日用 AI 分析台股盤勢，以雙人對話聊當天的盤中觀察與隔日預測。 — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml

### 電子報

[訂閱電子報](https://blog.markkulab.net/subscribe) — 第一時間收到新文章通知，無垃圾信、隨時可取消訂閱。