用 Claude AI 自动生成并发布 SEO 文章到 Webflow

定时从 Google Sheets 读取选题 → 抓取竞品文章并分析结构 → Claude 重写 SEO 内容 → 自动配图 → 质量评估后发布到 Webflow

给谁

需要批量生产 SEO 内容并自动发布到 Webflow 的内容团队

你会得到

每日自动产出完整 SEO 文章（含配图）并发布到 CMS，减少人工干预

你需要

n8n · google-sheets · replicate · webflow · slack

步骤

1. 配置定时触发器

   在 n8n 中添加 Schedule Trigger 节点，设置每 2 小时执行一次（rule.interval.hoursInterval = 2）。保存并激活工作流。

2. 从 Google Sheets 读取未完成的选题

   添加 Google Sheets 节点，连接 googleSheetsOAuth2Api 凭证。选择文档 Example SEO research（documentId）与工作表 Blogs (ideas)（sheetName）。在 filtersUI 中设置 lookupColumn=Completed、lookupValue=false，仅读取未完成的行。输出字段包括 URL、Top keyword、row_number 等。

3. 抓取并清洗来源文章

   添加 HTTP Request 节点，URL 设为 {{ $('Google Sheets').item.json.URL }}，抓取竞品文章原始 HTML。随后添加 Code 节点，运行以下 JavaScript 清洗：截取 <body> 内容，移除 <header>、<script>、<iframe> 标签，保留正文供后续分析。

   运行提示词 · 来源原文。Code 节点的 JS Code 字段

   复制提示词

   const items = $input.all();
   const updatedItems = items.map((item) => {
     let html = item?.json?.data;
   
     // Trim to body
     let bodyStart = html.indexOf("<body>");
     let bodyEnd = html.indexOf("</body>") + 7;
     html = html.slice(bodyStart, bodyEnd);
   
     // Remove header
     html = html.replace(/<header>[\s\S]*?<\/header>/g, "");
   
     // Remove scripts
     html = html.replace(/<script>[\s\S]*?<\/script>/g, "");
   
     // Remove iframes
     html = html.replace(/<iframe[\s\S]*?<\/iframe>/g, "");
   
     item.json.data = html;
     return item;
   });
   
   return updatedItems;

4. AI 分析页面结构

   添加 AI Agent 节点（Page structure analiser），模型连接 Haiku（claude-3-5-haiku-20241022）。该节点接收清洗后的 HTML，输出页面结构要点（如 content、faq、testimonials 等区块及各区块 SEO 关键点），供内容重写参考。

   运行提示词 · 来源原文。Page structure analiser AI Agent 的 Text 字段

   复制提示词

   =You are an expert SEO writer. You will get page data return me bulltpoints for what sections are being used in this webpage. for example:
   - content
   - faq
   - testimonials 
   
   {{ $json.data }}
   
   For each section also give me what is the key point for SEO

5. Claude 重写 SEO 文章

   添加 AI Agent 节点（Content writer），模型连接 Thinking Claude（claude-sonnet-4-20250514，maxTokensToSample=4096）。该节点同时连接 Get Articles（webflowTool，获取现有文章 URL 作为内链素材）与 Auto-fixing Output Parser。输入包括：来源文章 URL（Google Sheets）、页面结构（上一步输出）、主关键词（Top keyword）。输出必须为 JSON，含 article（HTML Markdown）与 summary 字段。

   运行提示词 · 来源原文。Content writer AI Agent 的 Text 字段

   复制提示词

   =You are an expert SEO writer working for www.productai.photo.
   
   Rewrite the following article directly and return the full SEO-optimized version **in one complete response**, in **JSON** format with the following structure:
   
   {
     "article": "HTML Markdown-formatted article goes here",
     "summary": "1–2 sentence summary of the article here"
   }
   
   Return only the requested output with no explanations, commentary, or additional text.
   
   ## Guidelines:
   - Use the primary keyword:{{ $('Google Sheets').item.json['Top keyword'] }}  throughout the article, naturally and repeatedly.
   - Follow this exact structure based on the original HTML:
     1. Header Navigation (SEO context)
     2. Hero Section (main headline + paragraph)
     3. Main Content Sections (H2s, H3s, internal links <a> tags)
     4. Use Case Explanations
     5. Step-by-Step Tutorial (numbered list with headings)
     6. Call-to-Action Section (use link: create.productai.photo)
     8. Technical SEO elements (image alt text, responsive, semantic)
   
   ## Markdown Formatting:
   - Don't use H1 for the article title, start with H2.
   - Use H2 html tag for main sections and H3 html tag for subsections.
   - Short paragraphs, clear headings, internal links where relevant.
   - All CTA buttons or links use <a> tag must point to: **create.productai.photo**
   - Add **bold**, *italic*, and lists <li> where helpful.
   - User rich text elements HTML:
   * Paragraphs
   * Heading tags (H1-H6)
   * Images
   * Image captions
   * Image alt attributes
   * Custom code
   * Block quotes
   * Unordered lists (bulleted)
   * Ordered lists (numbered)
   * Videos (Youtube, Vimeo)
   * Rich media (Google maps, SoundCloud, Imgur, Giphy, Codepen, and more)
   
   ## Output Rules:
   - DO NOT say “I will now rewrite...” or "I'll rewrite the article based on your requirements. " explain anything, just return the article.
   - DO NOT include planning or step-by-step generation.
   - Just return the **fully rewritten markdown article** in the required JSON structure.
   - Include a brief SEO-friendly summary.
   - Instead of a competition company name like (PixelCut, pixelcut, CreatorKit, Soona, Pebblely), ALWAYS use "ProductAI"
   
   ## Source Article:
   Rewrite the following article: {{ $('Google Sheets').item.json.URL }} 
   
   
   ## Content Structure:
   {{ $json.output }} 
   
   ## Take internal links from webflow tool

6. 检查文章是否成功生成

   添加 If 节点（Article written?），条件为 output.article 非空。若为空，走错误分支到 Slack 发送通知；若有内容，进入 SEO 评估。

7. 执行外部 SEO 质量评估

   添加 Execute Workflow 节点，调用外部子流程 Shape workflows — SEO Content evaluator（workflowId: 7FHTcSuCIjHvvBfe）。输入 article 与 summary，返回多维度评分数组。注意：该子流程为作者私有，模板未提供实现细节。

8. 判断质量是否达标

   添加 If 节点（Is it good enough?），检查三个维度评分：output[1].percent_ok > 60、output[5].percent_ok > 60、output[8].percent_ok > 50。全部满足则进入配图与发布；否则返回 Content writer 重新生成。

9. 生成配图提示词

   添加 AI Agent 节点（Prompt engineer），模型连接 OpenAI Mini model（o4-mini）。输入为 Content writer 生成的 article 全文，输出为适合 Midjourney/DALL-E/FLUX 的详细视觉提示词。

   运行提示词 · 来源原文。Prompt engineer AI Agent 的 Text 字段

   复制提示词

   =You are an expert at generating detailed prompts for AI image generators (like Midjourney or DALL-E) to create eye-catching, clickable thumbnail images.
   
   Your Task:
   Given the full text of an article, analyze and identify its main topic and tone. Based on your analysis, create a clear, visually descriptive prompt suitable for generating a thumbnail image that will attract viewers and convey the essence of the article.
   
   Guidelines:
   
   Highlight the article’s key theme, main characters or elements, and any emotions you want the image to evoke.
   Suggest specific visuals, colors, moods, and, if suitable, stylish text overlays.
   Keep the prompt concise but rich in visual detail so the resulting image will be engaging and informative.
   Avoid vague terms—be as specific as possible.
   Example Input:
   (Article about the rise of electric vehicles and their impact on the auto industry.)
   
   Example Output:
   "Create a bold, modern thumbnail depicting a sleek electric car zooming down a futuristic highway with city skyscrapers in the background. Use vibrant blues and greens to symbolize innovation and eco-friendliness. Add stylized lightning bolts and a glowing 'EV Revolution' text overlay. Convey excitement and progress."
   
   Article:
   {{ $('Content writer').item.json.output.article }}

10. 调用 Replicate 生成配图

    添加 HTTP Request 节点，POST 到 https://api.replicate.com/v1/models/black-forest-labs/flux-1.1-pro/predictions。Header 包含 Authorization: Bearer <token>（需替换为实际 token）与 Prefer: wait。Body 为 JSON，包含 prompt（上一步输出，需去除引号与换行）、aspect_ratio=16:9、output_format=png 等参数。

11. 等待并获取图片 URL

    添加 Wait 节点，等待 30 秒（Replicate 异步生成）。随后添加 get_image_url HTTP Request 节点，URL 为 {{ $json.urls.get }}，Header 携带 Authorization: Bearer <token>，获取最终图片地址。

12. 可选：Slack 通知人工审核

    添加 Slack 节点（默认 disabled=true），发送文章标题与缩略图到指定频道，支持 sendAndWait 人工确认。如需启用，连接 slackOAuth2Api 并设置 channelId。

13. 发布到 Webflow 并标记完成

    添加 Webflow 节点，operation=create，选择 siteId 与 collectionId。字段映射：cover-image 与 first-post-image 来自 get_image_url 输出；name 提取 article 中第一个 <h2>；article-body-text 为 article 内容（移除 <h1>）；short-paragraph 为 summary；read-time 固定为 5 min。同时添加 Google Sheets1 节点，更新对应 row_number 的 Completed=true。

请根据以下材料在 n8n 中复现该工作流：1）导入 workflow.json 或按步骤手动搭建；2）配置全部 OAuth2/API Key 凭证；3）替换 Google Sheets documentId、Webflow siteId/collectionId、Replicate token 等占位符；4）先测试单次运行，确认 Content writer 输出合法 JSON 后再激活定时触发。