用n8n做AI工作流驅動網站出海賺美金2:網站截圖與寫 SEO友好的介紹
在數字化出海的用n友好浪潮中,AI工作流正成為提升效率、做站出降低成本的工作利器本文作者通過n8n搭建了一個AI驅動的工作流,用于幫助網站出海并賺取美金在第一部分介紹了如何連接Supabase數據庫后,流驅本文繼續深入探討如何實現網站截圖以及生成SEO友好的動網的介介紹信息。

書接上回:用n8n做AI工作流驅動網站出海賺美金1:連接Supabase數據庫

年初的時候我做了一個AI編程工具的導航網站,打算流量上來后就可以接谷歌廣告賺美金:https://www.aicoding.help/cn設想是美金根據AI編程開發的流程來推薦每個階段的效率工具:靈感與想法、原型與設計、網站編程開發、截圖數據庫與存儲、用n友好部署上線、做站出擴展能力、工作數據分析、流驅內容管理、動網的介協作與運營
這是整個網站的后端處理邏輯:
需求描述今天來解決第二個階段:1. 把submit表中待處理的網站,逐個處理2. 打開網站截圖3. AI生成seo偏好的詳情信息存放數據庫
效果是這樣:每個網站的截圖作為卡片封面,網站自帶的標題作為卡片標題,同時生成短描述
每個卡片點進去后就是一個詳情描述,這里也是希望谷歌收錄的信息,所以需要SEO友好
網站截圖這個需求的核心就是網站截圖,有 3種方式1. 第一種是 本地部署python跑例如tap4ai自帶的后端就是用的pyppeteer,相當于調用Chrome去訪問網址后,截圖,核心代碼2. 第二種 是調用別人現成的API
目前測下來效果比較好、且免費的是 urlscan這是它的文檔地址https://urlscan.io/docs/api/能順利截reddit的圖,示例:https://urlscan.io/liveshot/?width=600&height=400&url=https://www.reddit.com/
結構就是 https://urlscan.io/liveshot/?width=【寬度】&height=【高度】&url=【網址】
但測了幾個網站,語言都是德語如上圖還會有一些遮擋,應該是設備設置的問題其他的,要么是被禁了,要么要付費例如用wordpress的預覽功能,會限制被禁止,應該是因為服務器在國內的原因https://s0.wp.com/mshots/v1/https://www.reddit.com/?w=600&h=400。
其他的,例如 https://gugudata.com/,就要付費,效果未知,pass
3. 第三種,就是docker部署一個無頭瀏覽器,通過端口的形式供n8n調用具體參考:https://community.n8n.io/t/automate-screenshots-pdfs-and-more-integrating-n8n-with-self-hosted-browserless-playwright-changedetection-io/53351
這種,說實話還是很麻煩,嘗試了一下沒成功,就先放棄了看下來效果最好的還是第一種方法,但工作流平臺都有一個通?。簾o法運行復雜的 python 腳本所以解決方案是把第一種,也就是tap4ai原本就有的python調用playwright截圖功能封裝成api,供n8n調用。
這個也是我解決很多復雜功能的方案:先在 Cursor完成單獨模塊的開發,再打包成 fastapi,通過寶塔面板部署到服務器上,再打開端口權限給 n8n 調用 參考 cursor 的提示詞:請新建一個腳本,然后幫我把@website_crawler.py中的網頁截圖的相關能力,單獨寫到一個腳本里,如果涉及到調用其他的腳本也把代碼一起放進去這是網頁截圖的核心部分,你需要去分析還需要哪些:…調用`sequentialthinking`MCP工具去一步一步思考處理,確保不要影響到其他的功能代碼。
繼續把代碼封裝成 fastapi 接口:繼續優化把@website_screenshot.py 封裝成fastapi接口,用戶傳入一個網址后,返回截圖的url,包括云存儲url、縮略圖url
同時,我還讓 cursor 寫了一個 api 測試腳本,測完沒問題,我才部署:
上傳到寶塔面板,部署成API插句題外話,部署服務器很推薦用寶塔面板,通過面板來操作,能省不少事包括 n8n、dify 等的部署基本上都很絲滑1. 在寶塔面板新建文件夾把關鍵文件,包括代碼腳本、.env環境配置、requirements.txt等一起上傳進去。
2. 新建Python項目在下圖位置,填好信息即可。
3. 查看日志確保服務啟動
4. 在線調試fastapi 有自帶一個接口文檔同時還能在上面調試很方便:例如我部署在3333端口,文檔就在 http://ip:3333/docs找到接口函數,點Try it out,并修改下面的請求參數
點Execute,下面Curl就是自動生成好的請求下面Response boy我們看到返回200,數據正常
調通了,最后才是到 n8n 新建 HTTP Request 節點,確保能正常返回網站的截圖信息:
至此,我們最麻煩的一步就解決了。n8n工作流接下來,就可以著手去新建工作流。方便起見,我們繼續沿用上次的工作流,在提交網站后,直接就把提交的信息拿來抓網站截圖和寫介紹。
如圖,上面的就是上次的工作流,解決的是從用戶的輸入中解析出網址,并提交到數據庫,等待爬取不同的是,我補充了一個提取多個網站信息的節點,方便用戶同時提交多個網站,甚至是把一個多網站介紹的文章放進去,也能直接全部錄入了。
下面的是這次新增的工作流,解決的是把用戶提交的網站進行截圖、生成SEO友好的詳情。
對于網站截圖,上一小節已經說了通過把python腳本部署成API后,新建http請求。接下來看寫網頁詳情的這個節點:
測試一下錄入網站:https://www.reddit.com數據庫有了:
前端也有了:
詳情頁也寫好了:
感興趣可以進去看看:https://www.aicoding.help/ai/Reddit因為我服務器在海外,通過這樣的形式,對于風控較高的Reddit也能正常截圖,并不會出現攔截之類的這也是為什么我要「多此一舉」部署到線上的其中一個原因。
本文由人人都是產品經理作者【餅干哥哥】,微信公眾號:【餅干哥哥AGI】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。題圖來自Unsplash,基于 CC0 協議。