Auto-Generate and Publish SEO Articles to Webflow with Claude AI

Scheduled topic pull from Google Sheets → fetch and analyze competitor articles → Claude rewrites SEO content → auto-generate images → quality gate → publish to Webflow

Who

Content teams that need to produce SEO articles at scale and publish automatically to Webflow

You get

Daily automated SEO articles with images published to CMS with minimal manual intervention

You need

n8n · google-sheets · replicate · webflow · slack

Steps

1. Configure schedule trigger

   Add a Schedule Trigger node in n8n, set to run every 2 hours (rule.interval.hoursInterval = 2). Save and activate the workflow.

2. Read unfinished topics from Google Sheets

   Add a Google Sheets node, connect googleSheetsOAuth2Api credential. Select document Example SEO research (documentId) and sheet Blogs (ideas) (sheetName). In filtersUI, set lookupColumn=Completed, lookupValue=false to read only unfinished rows. Output fields include URL, Top keyword, row_number, etc.

3. Fetch and clean source article

   Add an HTTP Request node with URL set to {{ $('Google Sheets').item.json.URL }} to fetch competitor article HTML. Then add a Code node running the following JavaScript to clean: extract <body> content, remove <header>, <script>, <iframe> tags, keeping body text for analysis.

   Execution prompt · Source text。Code node JS Code field

   Copy prompt

   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 analyzes page structure

   Add an AI Agent node (Page structure analiser), model connected to Haiku (claude-3-5-haiku-20241022). This node receives cleaned HTML and outputs page structure bullet points (e.g., content, faq, testimonials) with SEO key points for each section, feeding into content rewriting.

   Execution prompt · Source text。Page structure analiser AI Agent Text field

   Copy prompt

   =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 rewrites SEO article

   Add an AI Agent node (Content writer), model connected to Thinking Claude (claude-sonnet-4-20250514, maxTokensToSample=4096). This node also connects to Get Articles (webflowTool, for existing article URLs as internal links) and Auto-fixing Output Parser. Inputs: source article URL (Google Sheets), page structure (previous step), primary keyword (Top keyword). Output must be JSON with article (HTML Markdown) and summary fields.

   Execution prompt · Source text。Content writer AI Agent Text field

   Copy prompt

   =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. Check if article was generated

   Add an If node (Article written?), condition: output.article is not empty. If empty, route to Slack error notification; if present, proceed to SEO evaluation.

7. Run external SEO quality evaluation

   Add an Execute Workflow node calling external sub-workflow Shape workflows — SEO Content evaluator (workflowId: 7FHTcSuCIjHvvBfe). Inputs: article and summary. Returns multi-dimensional score array. Note: this sub-workflow is author-private and not included in the template.

8. Check quality threshold

   Add an If node (Is it good enough?), checking three dimensions: output[1].percent_ok > 60, output[5].percent_ok > 60, output[8].percent_ok > 50. All must pass to proceed to image generation and publishing; otherwise loop back to Content writer for regeneration.

9. Generate image prompt

   Add an AI Agent node (Prompt engineer), model connected to OpenAI Mini model (o4-mini). Input: full article text from Content writer. Output: detailed visual prompt suitable for Midjourney/DALL-E/FLUX.

   Execution prompt · Source text。Prompt engineer AI Agent Text field

   Copy prompt

   =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. Call Replicate to generate image

    Add an HTTP Request node, POST to https://api.replicate.com/v1/models/black-forest-labs/flux-1.1-pro/predictions. Headers include Authorization: Bearer <token> (replace with actual token) and Prefer: wait. Body is JSON with prompt (from previous step, stripped of quotes and newlines), aspect_ratio=16:9, output_format=png, etc.

11. Wait and fetch image URL

    Add a Wait node for 30 seconds (Replicate async generation). Then add get_image_url HTTP Request node, URL: {{ $json.urls.get }}, with Authorization: Bearer <token> header, to retrieve final image URL.

12. Optional: Slack notification for human review

    Add a Slack node (disabled by default), sending article title and thumbnail to a channel with sendAndWait for human approval. Enable by connecting slackOAuth2Api and setting channelId if needed.

13. Publish to Webflow and mark complete

    Add a Webflow node, operation=create, select siteId and collectionId. Field mappings: cover-image and first-post-image from get_image_url output; name extracted from first <h2> in article; article-body-text is article content with <h1> removed; short-paragraph is summary; read-time fixed at 5 min. Also add Google Sheets1 node to update Completed=true for the matching row_number.

Use the following materials to reproduce this workflow in n8n: 1) Import workflow.json or build manually per steps; 2) Configure all OAuth2/API Key credentials; 3) Replace placeholders: Google Sheets documentId, Webflow siteId/collectionId, Replicate token; 4) Test a single run first, confirm Content writer outputs valid JSON before activating the schedule trigger.