用n8n做AI工作流驅(qū)動網(wǎng)站出海賺美金2:網(wǎng)站截圖與寫 SEO友好的介紹

1 評論 2000 瀏覽 4 收藏 11 分鐘

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

書接上回:用n8n做AI工作流驅(qū)動網(wǎng)站出海賺美金1:連接Supabase數(shù)據(jù)庫

年初的時候我做了一個AI編程工具的導航網(wǎng)站,打算流量上來后就可以接谷歌廣告賺美金:

https://www.aicoding.help/cn

設想是根據(jù)AI編程開發(fā)的流程來推薦每個階段的效率工具:靈感與想法、原型與設計、編程開發(fā)、數(shù)據(jù)庫與存儲、部署上線、擴展能力、數(shù)據(jù)分析、內(nèi)容管理、協(xié)作與運營

這是整個網(wǎng)站的后端處理邏輯:

需求描述

今天來解決第二個階段:

  • 1.?把submit表中待處理的網(wǎng)站,逐個處理
  • 2.?打開網(wǎng)站截圖
  • 3.?AI生成seo偏好的詳情信息存放數(shù)據(jù)庫

效果是這樣:

每個網(wǎng)站的截圖作為卡片封面,網(wǎng)站自帶的標題作為卡片標題,同時生成短描述

每個卡片點進去后就是一個詳情描述,這里也是希望谷歌收錄的信息,所以需要SEO友好

網(wǎng)站截圖

這個需求的核心就是網(wǎng)站截圖,有 3種方式

1.?第一種是 本地部署python跑

例如tap4ai自帶的后端就是用的pyppeteer,相當于調(diào)用Chrome去訪問網(wǎng)址后,截圖,核心代碼

2. 第二種 是調(diào)用別人現(xiàn)成的API

目前測下來效果比較好、且免費的是 urlscan

這是它的文檔地址https://urlscan.io/docs/api/

能順利截reddit的圖,示例:https://urlscan.io/liveshot/?width=600&height=400&url=https://www.reddit.com/

結(jié)構(gòu)就是 https://urlscan.io/liveshot/?width=【寬度】&height=【高度】&url=【網(wǎng)址】

但測了幾個網(wǎng)站,語言都是德語。如上圖還會有一些遮擋,應該是設備設置的問題。

其他的,要么是被禁了,要么要付費。

例如用wordpress的預覽功能,會限制被禁止,應該是因為服務器在國內(nèi)的原因

https://s0.wp.com/mshots/v1/https://www.reddit.com/?w=600&h=400

其他的,例如 https://gugudata.com/,就要付費,效果未知,pass

3.?第三種,就是docker部署一個無頭瀏覽器,通過端口的形式供n8n調(diào)用

具體參考:https://community.n8n.io/t/automate-screenshots-pdfs-and-more-integrating-n8n-with-self-hosted-browserless-playwright-changedetection-io/53351

這種,說實話還是很麻煩,嘗試了一下沒成功,就先放棄了。

看下來效果最好的還是第一種方法,但工作流平臺都有一個通?。簾o法運行復雜的 python 腳本。

所以解決方案是把第一種,也就是tap4ai原本就有的python調(diào)用playwright截圖功能封裝成api,供n8n調(diào)用。

這個也是我解決很多復雜功能的方案:先在 Cursor完成單獨模塊的開發(fā),再打包成 fastapi,通過寶塔面板部署到服務器上,再打開端口權限給 n8n 調(diào)用 。

參考 cursor 的提示詞:請新建一個腳本,然后幫我把@website_crawler.py中的網(wǎng)頁截圖的相關能力,單獨寫到一個腳本里,如果涉及到調(diào)用其他的腳本也把代碼一起放進去這是網(wǎng)頁截圖的核心部分,你需要去分析還需要哪些:…調(diào)用`sequentialthinking`MCP工具去一步一步思考處理,確保不要影響到其他的功能代碼

繼續(xù)把代碼封裝成 fastapi 接口:繼續(xù)優(yōu)化把@website_screenshot.py 封裝成fastapi接口,用戶傳入一個網(wǎng)址后,返回截圖的url,包括云存儲url、縮略圖url

同時,我還讓 cursor 寫了一個 api 測試腳本,測完沒問題,我才部署:

上傳到寶塔面板,部署成API

插句題外話,部署服務器很推薦用寶塔面板,通過面板來操作,能省不少事。包括 n8n、dify 等的部署基本上都很絲滑。

1.?在寶塔面板新建文件夾

把關鍵文件,包括代碼腳本、.env環(huán)境配置、requirements.txt等一起上傳進去

2.?新建Python項目

在下圖位置,填好信息即可。

3.?查看日志確保服務啟動

4.?在線調(diào)試

fastapi 有自帶一個接口文檔同時還能在上面調(diào)試很方便:

例如我部署在3333端口,文檔就在 http://ip:3333/docs

找到接口函數(shù),點Try it out,并修改下面的請求參數(shù)

點Execute,下面Curl就是自動生成好的請求

下面Response boy我們看到返回200,數(shù)據(jù)正常

調(diào)通了,最后才是到 n8n 新建 HTTP Request 節(jié)點,確保能正常返回網(wǎng)站的截圖信息:

至此,我們最麻煩的一步就解決了。

n8n工作流

接下來,就可以著手去新建工作流。

方便起見,我們繼續(xù)沿用上次的工作流,在提交網(wǎng)站后,直接就把提交的信息拿來抓網(wǎng)站截圖和寫介紹。

如圖,上面的就是上次的工作流,解決的是從用戶的輸入中解析出網(wǎng)址,并提交到數(shù)據(jù)庫,等待爬取。

不同的是,我補充了一個提取多個網(wǎng)站信息的節(jié)點,方便用戶同時提交多個網(wǎng)站,甚至是把一個多網(wǎng)站介紹的文章放進去,也能直接全部錄入了。

下面的是這次新增的工作流,解決的是把用戶提交的網(wǎng)站進行截圖、生成SEO友好的詳情。

對于網(wǎng)站截圖,上一小節(jié)已經(jīng)說了通過把python腳本部署成API后,新建http請求。

接下來看寫網(wǎng)頁詳情的這個節(jié)點:

測試一下錄入網(wǎng)站:https://www.reddit.com

數(shù)據(jù)庫有了:

前端也有了:

詳情頁也寫好了:

感興趣可以進去看看:

https://www.aicoding.help/ai/Reddit

因為我服務器在海外,通過這樣的形式,對于風控較高的Reddit也能正常截圖,并不會出現(xiàn)攔截之類的。這也是為什么我要「多此一舉」部署到線上的其中一個原因。

本文由人人都是產(chǎn)品經(jīng)理作者【餅干哥哥】,微信公眾號:【餅干哥哥AGI】,原創(chuàng)/授權 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. AI技術太牛了,竟能把網(wǎng)站出海流程搞得這么高效!n8n搭建工作流、自動生成SEO介紹,這效率簡直讓人驚嘆,博主的技術實力也太強了吧。

    來自山東 回復