【網頁爬蟲白話文系列2】n8n 網頁爬蟲教學：免寫 Code！三步驟視覺化抓取網站資料到 Google Sheets

在上一篇文章中，我們建立了網頁爬蟲的基本觀念，並了解到它就像一個能自動搜集資料的私人助理。我們也預告了，就算你不是工程師，也能透過像 n8n 這樣的視覺化工具，輕鬆駕馭這項超能力。

這篇文章將是一篇手把手的實戰教學。我會帶你從零開始，使用 n8n 這個強大的自動化工具，一步步建立你的第一個網頁爬蟲工作流。我們的目標很明確：自動抓取一個公開網站的文章標題和連結，並將這些資料整整齊齊地存放到你的 Google Sheets 試算表中。

準備好了嗎？讓我們一起捲起袖子，體驗免寫程式碼的爬蟲魔法吧！

行前準備：你需要什麼？

在開始打造我們的自動化爬蟲之前，請先確認你已經準備好以下幾樣東西：

1. 一個 n8n 帳號：n8n 提供了雲端版本 (n8n Cloud) 和自行架設 (Self-hosted) 的選項。對於初學者，我建議直接註冊免費的 n8n Cloud 帳號，省去所有複雜的環境設定，專注在學習工作流本身。
2. 一個 Google 帳號：我們將使用 Google Sheets 來存放爬取下來的資料，所以你需要一個可以登入的 Google 帳號。
3. 一個目標網站：為了方便教學，我們會鎖定一個結構單純的公開網站。你可以找一個你感興趣的新聞網站、部落格，或是任何有列表形式的頁面。
4. 一顆好奇且願意動手嘗試的心：這是最重要的！過程中可能會遇到小狀況，但解決問題的過程，正是學習最快的途徑。

核心概念：什麼是 CSS 選擇器？抓資料的藏寶圖！

在正式進入 n8n 操作前，我們必須先搞懂一個關鍵概念：「CSS 選擇器 (CSS Selector)」。別被它的名字嚇到，你可以把它想像成一張給爬蟲的「藏寶圖」。

上一篇文章我們提到，爬蟲抓回來的網頁是一堆 HTML 原始碼。我們需要給爬蟲一個精確的指令，告訴它寶藏（我們想要的資料）埋在哪個位置。CSS 選擇器就是這個用來「指路」的語法。

如何找到這張藏寶圖？

這非常簡單，你只需要使用你手邊的 Chrome 或 Edge 瀏覽器內建的「開發者工具」即可。

1. 打開目標網頁：用瀏覽器前往你想抓取資料的頁面。
2. 右鍵點擊你想抓的資料：例如，把滑鼠移到一篇文章的標題上，按下滑鼠右鍵。
3. 選擇「檢查」(Inspect)：點擊後，瀏覽器畫面右邊或下方會跳出一個充滿程式碼的視窗，這就是開發者工具。
4. 定位 HTML 結構：你會看到有一行程式碼被反白了，這就是你剛剛點擊的那個標題在 HTML 中的位置。

舉例來說，你可能會看到像這樣的結構： <a href="/news/article-123.html" class="post-title">文章標題文字</a>

這段程式碼告訴我們：

• 這是一個 <a> 標籤（代表一個連結）。
• 它的 href 屬性是 /news/article-123.html（這是我們要的連結）。
• 它的 class 屬性是 post-title（這是它的身份證）。
• 它的文字內容是「文章標題文字」（這是我們要的標題）。

有了這些資訊，我們就可以寫出給爬蟲的指令（CSS 選擇器），例如：.post-title，意思就是「請幫我找到所有 class 是 post-title 的元素」。學會這個方法，你就掌握了爬蟲的精髓！

n8n 爬蟲實作：三步驟打造你的第一個工作流

好的，概念武裝完畢，讓我們正式進入 n8n 的世界！登入你的 n8n 帳號，建立一個新的工作流 (Workflow)，你會看到一片空白的畫布，我們將在這裡用三個節點 (Node) 完成我們的爬蟲。

步驟一：【HTTP Request 節點】取得網頁骨架

這是我們的第一步，目標是讓 n8n 幫我們去目標網站，把整個網頁的 HTML 原始碼拿回來。

1. 點擊畫布上的 + 號，在搜尋框中輸入 HTTP Request 並選取它。
2. 在右側跳出的設定視窗中，將目標網站的網址完整地貼到 URL 欄位中。
3. 其他設定保持預設即可。
4. 點擊右下角的「Execute Node」(執行節點)。

執行成功後，你應該會在右邊的 OUTPUT 區域看到一筆資料，裡面包含了整個網頁的 HTML 原始碼。這代表我們的助理已經成功出任務，並帶回了建築藍圖！

步驟二：【HTML Extract 節點】精準解析資料

這是最關鍵的一步，我們要拿出剛剛學會的「藏寶圖」，請 n8n 從這堆原始碼中，幫我們把寶藏（標題和連結）挖出來。

1. 點擊 HTTP Request 節點右邊的 + 號，搜尋並加入 HTML Extract 節點。
2. 在設定視窗中，Source Data 欄位會自動設定為上一個節點的輸出，這部分不用動。
3. 我們要設定 Extraction Values，告訴 n8n 要抓什麼。點擊「Add Extraction」。
   • 抓取標題：
     • Key：取個好懂的名字，例如 title。
     • CSS Selector：填入你用「檢查」工具找到的標題選擇器，例如 .post-title。
     • Return Value：選擇 Text，代表我們只要它的文字內容。
   • 抓取連結：
     • 再次點擊「Add Extraction」。
     • Key：取名為 link。
     • CSS Selector：一樣填入 .post-title，但這次我們要的是連結。
     • Return Value：選擇 Attribute，並在跳出的欄位中填入 href。
4. 設定完畢後，點擊「Execute Node」。

這次，你應該會在 OUTPUT 看到非常乾淨的資料了！它會是一個列表，每一項都包含了 title 和 link 兩個欄位。恭喜你，你已經成功剖析了網頁！

步驟三：【Google Sheets 節點】自動寫入試算表

最後一步，我們要讓助理把整理好的資料，自動謄寫到我們的 Google Sheets 表格中。

1. 點擊 HTML Extract 節點右邊的 + 號，搜尋並加入 Google Sheets 節點。
2. 授權連線 (Authentication)：第一次使用需要授權 n8n 存取你的 Google 帳號。點擊 Credential 旁邊的 - Create New -，跟隨彈出視窗的指示登入 Google 帳號並給予權限。
3. 設定操作：
   • Resource：選擇 Spreadsheet。
   • Operation：選擇 Append or Update (附加或更新資料)。
   • Spreadsheet ID：點擊 List，選擇 Create New Sheet，或貼上一個你已經建立好的試算表 ID。
   • Sheet Name：選擇你要寫入的工作表，通常預設是 Sheet1。
   • Columns：這裡要設定對應關係。
     • A：點擊右邊的小圖示，從 CURRENT NODE > INPUT > JSON 中，將 title 拖拉進來。
     • B：用同樣的方式，將 link 拖拉進來。
4. 點擊「Execute Node」。

現在，打開你的 Google 試算表看看吧！是不是發現所有文章的標題和連結都已經被整整齊齊、一筆不漏地記錄上去了？

大功告成！你的自動化資料助理已上線

恭喜你！你剛剛只用了三個節點，就完成了一個過去可能需要寫上數十行程式碼才能做到的網頁爬蟲。從現在開始，這個工作流就是你的專屬資料助理。

更棒的是，在 n8n 的工作流頁面左上角，有一個「Active」的開關。一旦你把它打開，這個流程就可以根據你設定的排程（例如：每天早上九點）自動執行，從此告別重複的人力剪貼地獄！

結語

透過今天的實戰教學，相信你已經親身體會到，網頁爬蟲並非遙不可及的黑科技。在 n8n 這樣的視覺化工具輔助下，核心的技能不再是寫程式，而是觀察網頁結構的邏輯能力，以及應用資料的商業思維。

當然，今天的範例相對單純。當你開始嘗試爬取更複雜的網站時，你很快就會遇到新的挑戰，例如：「有好幾頁的資料要怎麼抓？」、「為什麼有些資料我看的到，爬蟲卻抓不到？」、「爬到一半被網站封鎖了怎麼辦？」

別擔心，這些都是成為爬蟲高手的必經之路。在我們的三部曲最終章，我將會針對這些進階問題，分享對應的解決策略與技巧，並帶你探索更多 n8n 自動化的可能性。

參考系列文章：
【網頁爬蟲白話文系列1】網頁爬蟲是什麼？一篇搞懂資料抓取原理、合法性與三大應用情境
【網頁爬蟲白話文系列2】n8n 網頁爬蟲教學：免寫 Code！三步驟視覺化抓取網站資料到 Google Sheets
【網頁爬蟲白話文系列3】進階網頁爬蟲攻略：解決分頁、動態內容與反爬蟲，打造 n8n 自動化監控流程