seo-article-html-generator

name	seo-article-html-generator
description	Generate a single-file SEO article detail page HTML (inline CSS) from structured article data (title, TOC, blocks, banners, product cards). Use when the user asks to generate an HTML article page, SEO article template, article detail page, or provides article text + images for rendering into an HTML page. Produces a standalone .html file that opens directly in a browser.

SEO Article HTML Generator

Generate a production-ready, single-file HTML article detail page from structured input data. The output is a standalone .html file with inline CSS that renders immediately in any browser.

When to Use This Skill

• User provides article text, images, TOC, and product data and wants an HTML page
• User asks to "generate an article page", "create SEO HTML template", "render article as HTML"
• User needs a styled article page matching a specific design (hero banner + TOC + content + product cards)
• User wants to preview article content as a web page before publishing

Input Variables

The skill accepts the following structured input. If any field is missing, use sensible defaults.

Page Meta

Variable	Type	Description	Default
pageTitle	string	Main article title	"Article Title"
lastUpdated	string	Last updated date	"April 7, 2026"
categoryChip	string	Category label shown as chip	"General"
heroImageUrl	string	URL of hero image (top-right circle)	"" (hidden)
heroDescription	string	Short description under title in hero	"" (hidden)

SEO Meta Tags (from geo-content-generator output)

Variable	Type	Description	Default
metaDescription	string	<meta name="description"> content, 150-160 chars	Auto from heroDescription
metaKeywords	string	<meta name="keywords"> content	Auto from pageTitle
metaAuthor	string	<meta name="author"> content	"Wide Warren"
canonicalUrl	string	<link rel="canonical"> URL	""
ogTitle	string	Open Graph title	pageTitle
ogDescription	string	Open Graph description	metaDescription
ogImage	string	Open Graph image URL	heroImageUrl
ogSiteName	string	Open Graph site name	"Wide Warren"
ogLocale	string	Open Graph locale	"en_US"
articlePublishedTime	string	ISO 8601 published date	""
articleModifiedTime	string	ISO 8601 modified date	""
twitterTitle	string	Twitter Card title	ogTitle
twitterDescription	string	Twitter Card description	ogDescription
twitterImage	string	Twitter Card image	ogImage
schemaJson	string	JSON-LD schema markup (raw JSON string)	""

Table of Contents

Variable	Type	Description
tocItems	array	[{ id: "sec-1", label: "Section Name" }, ...]

Article Content Blocks

Variable	Type	Description
articleBlocks	array	Each block has a type and associated data (see below)

Block types:

• h2: { type: "h2", id: "sec-1", text: "Heading text" }
• h3: { type: "h3", text: "Sub-heading text" }
• p: { type: "p", text: "Paragraph content with optional <a href='...'>links</a>" }
• ul: { type: "ul", listItems: ["item 1", "item 2"] }
• table: { type: "table", table: { headers: ["A","B"], rows: [["1","2"],["3","4"]] } }
• hr: { type: "hr" }
• callout: { type: "callout", text: "Highlighted tip content" }
• quote: { type: "quote", text: "Quotation text" }
• cards_intro: { type: "cards_intro", text: "Intro text before product cards" }
• Unknown type → fallback to <p> rendering

In-Article Banners

Variable	Type	Description
bannersInArticle	array	[{ id: "banner-1", imageUrl: "...", alt: "...", afterSectionId: "sec-1" }]

Banners are inserted after the section matching afterSectionId.

Product Cards

Variable	Type	Description
productsGrid	array	[{ imageUrl, name, priceText, aliExpressUrl }, ...]

Output

A single .html file that:

1. Renders a full article page matching the design spec (orange hero, two-column TOC+content, product cards)
2. Works standalone — no external dependencies, no build step
3. Is responsive (desktop two-column → tablet stacked → mobile single column)
4. Handles missing/empty data gracefully without layout breaking
5. Uses semantic HTML5 tags and inline CSS

Rendering Approach

The HTML uses a JavaScript render() function embedded in the page that:

1. Reads a PAGE_DATA configuration object from the top of the script
2. Generates TOC, article blocks, banners, and product cards dynamically
3. Handles empty arrays by hiding sections
4. Falls back unknown block types to paragraphs

Quality Requirements

Layout Stability

• Main container max-width: 1000px
• Two-column: TOC 260px fixed + article flex:1
• < 900px: stack TOC above content
• < 540px: hero right image hides/moves, no text squeeze

Image Robustness

• All images use object-fit: cover
• onerror handler keeps placeholder aspect ratio
• Banner height ~280px
• Empty imageUrl → module hidden

Text Robustness

• System font stack, line-height: 1.7
• word-break: break-word; overflow-wrap: anywhere
• Card titles use -webkit-line-clamp: 2

Table Robustness

• Full-width, font-size: 12.5px
• < 900px: horizontal scroll wrapper
• Light gray header background, #eee borders

TOC & Anchors

• H2 blocks get id="sec-x" anchors
• TOC links use href="#sec-x"
• Missing sections → TOC link gracefully ignored

Spacing Consistency

• All blocks have uniform margin-bottom (12-18px)
• No giant blank gaps
• Tables/lists stay within content area

Generation Steps

When invoked:

1. Ask the user for input data if not provided:

   • Page title, last updated date, category
   • TOC items
   • Article blocks (content sections)
   • Banners (in-article images)
   • Product cards
   • Hero image URL

2. Construct the PAGE_DATA object with all provided data, using defaults for missing fields.

3. Generate the complete HTML using the template below, substituting the PAGE_DATA object.

4. Write the HTML file to the user's working folder with a descriptive name like article-{title-slug}.html.

5. Verify the file was created and report the file path.

Template Reference

The complete HTML template is maintained as a separate file at: /Users/wzjn/.qoderwork/skills/seo-article-html-generator/template.html

When generating, copy this template and inject the user's data into the PAGE_DATA object.

Example Usage

Generate an SEO article HTML page with:
- Title: "Best Ergonomic Office Chairs 2026"
- Category: "Office Furniture"
- Last Updated: "April 7, 2026"
- 4 TOC sections
- 8 content blocks (mix of h2, p, ul, table)
- 2 in-article banners
- 3 product cards

Tips

• For best visual results, provide high-quality images (hero image should be square for circular crop)
• Keep TOC labels concise (1-5 words each)
• Product card names should be descriptive but allow line-clamp truncation
• Use callout blocks for tips, warnings, or key takeaways
• Use cards_intro before the product cards section for natural flow