| 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:
- Renders a full article page matching the design spec (orange hero, two-column TOC+content, product cards)
- Works standalone — no external dependencies, no build step
- Is responsive (desktop two-column → tablet stacked → mobile single column)
- Handles missing/empty data gracefully without layout breaking
- Uses semantic HTML5 tags and inline CSS
Rendering Approach
The HTML uses a JavaScript render() function embedded in the page that:
- Reads a
PAGE_DATA configuration object from the top of the script
- Generates TOC, article blocks, banners, and product cards dynamically
- Handles empty arrays by hiding sections
- 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:
-
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
-
Construct the PAGE_DATA object with all provided data, using defaults for missing fields.
-
Generate the complete HTML using the template below, substituting the PAGE_DATA object.
-
Write the HTML file to the user's working folder with a descriptive name like article-{title-slug}.html.
-
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