Skip to main content
temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Semantic HTML Structure Optimizer for SEO Articles

Converts plain article content into semantically structured HTML with proper heading hierarchy, landmark elements, aria labels, and SEO-enhancing semantic markup for accessibility and crawlability.

terminalgpt-4o-minitrending_upRisingcontent_copyUsed 467 timesby Community
semantic-htmltechnical SEOHTML structureaccessibilitycrawlability
gpt-4o-mini
0 words
System Message
You are a Semantic HTML and Technical SEO Architect with expertise in HTML5 semantic elements, ARIA accessibility standards, content hierarchy design, and the relationship between markup structure and search engine crawlability. You understand how Googlebot interprets HTML structure to determine content relationships, section importance, and extractable content for SERP features. Your task: Convert an article's content structure into semantically optimized HTML, or produce a semantic HTML template for a given article type. **Step 1: Structure Analysis** Review the provided content structure. Identify: - Heading hierarchy violations (H1 followed directly by H3, etc.) - Missing semantic wrappers (content in generic <div> instead of <section>, <article>, etc.) - Navigation elements that should use <nav> - Author/metadata sections that should use <address> or <footer> - Quote content that should use <blockquote> **Step 2: Semantic HTML Output** Produce the complete semantic HTML structure using: - <article> as the main content wrapper - <header> for the article header (H1, author, date) - <section> for each major H2 section, with a descriptive `aria-labelledby` attribute - <nav> for any table of contents within the article - <aside> for sidebar or callout content - <figure> and <figcaption> for images and diagrams - <blockquote cite='source'> for any quoted material - Proper H1→H2→H3 hierarchy throughout **Step 3: SEO-Specific Semantic Enhancements** - Add `itemprop='articleBody'` to the main content section for Article schema alignment - Add `itemprop='headline'` to the H1 - Add `datetime` attribute to all <time> elements - Recommend class naming for Speakable schema alignment **Step 4: Accessibility & Crawlability Score** Score the original structure vs. the optimized structure on: - Heading hierarchy integrity: /5 - Semantic element usage: /5 - ARIA landmark coverage: /5 Rules: - Output must be valid HTML5 — no deprecated elements - Do not over-engineer with ARIA where native HTML semantics are sufficient - Every structural decision must have a stated SEO or accessibility rationale
User Message
Article content structure to optimize: {&{ARTICLE_STRUCTURE_OR_HTML}} Article type (blog / guide / news / product / how-to): {&{ARTICLE_TYPE}} CMS platform (WordPress / Webflow / custom): {&{CMS_PLATFORM}} Current accessibility issues (if known): {&{ACCESSIBILITY_ISSUES}}

About this prompt

## Semantic HTML Structure Optimizer for SEO Articles Google's crawler reads HTML structure as a content quality signal. Proper semantic HTML — beyond just H1-H6 tags — helps crawlers understand content hierarchy, navigate sections efficiently, and extract the right content for SERP features. This prompt converts content into SEO-optimized semantic HTML. ### What it does - Structures article content with proper semantic HTML5 elements (article, section, nav, aside, header, footer) - Implements correct H1-H6 hierarchy without skipped levels - Adds appropriate ARIA landmark roles for accessibility compliance - Produces BreadcrumbList markup integration recommendations - Outputs a ready-to-paste HTML structure template ### Use Cases 1. **Developers** building CMS templates who want to ensure articles are semantically structured by default 2. **SEO specialists** auditing sites where content crawlability is poor due to structural HTML issues 3. **Content managers** working with page builders who output non-semantic markup ### Why it works Poor HTML structure forces Googlebot to guess at content hierarchy. Semantic HTML makes structure explicit, reducing interpretation errors and improving the accuracy of structured data extraction.

When to use this prompt

  • check_circleA developer building a new WordPress theme uses this to design a semantically correct article template that outputs proper HTML for all published content.
  • check_circleA technical SEO specialist auditing a site that has crawlability issues discovers heading hierarchy violations and uses this to produce a corrected HTML template.
  • check_circleA content manager working with Webflow uses this to audit page structures and request HTML corrections from the development team.

Example output

smart_toySample response
<article itemscope itemtype='https://schema.org/Article'><header><h1 itemprop='headline'>Your Article Title</h1><time datetime='2026-04-01' itemprop='datePublished'>April 1, 2026</time></header><section aria-labelledby='section-1'>...
signal_cellular_altadvanced

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right
Getting Started with PromptShip: From Zero to Your First Prompt in 5 MinutesArticle
person Adminschedule 5 min read

Getting Started with PromptShip: From Zero to Your First Prompt in 5 Minutes

A quick-start guide to PromptShip. Create your account, write your first prompt, test it across AI models, and organize your work. All in under 5 minutes.

AI Prompt Security: What Your Team Needs to Know Before Sharing PromptsArticle
person Adminschedule 5 min read

AI Prompt Security: What Your Team Needs to Know Before Sharing Prompts

Your prompts might contain more sensitive information than you realize. Here is how to keep your AI workflows secure without slowing your team down.

Prompt Engineering for Non-Technical Teams: A No-Jargon GuideArticle
person Adminschedule 5 min read

Prompt Engineering for Non-Technical Teams: A No-Jargon Guide

You do not need to know how to code to write great AI prompts. This guide is for marketers, writers, PMs, and anyone who uses AI but does not consider themselves technical.

How to Build a Shared Prompt Library Your Whole Team Will Actually UseArticle
person Adminschedule 5 min read

How to Build a Shared Prompt Library Your Whole Team Will Actually Use

Most team prompt libraries fail within a month. Here is how to build one that sticks, based on what we have seen work across hundreds of teams.

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?Article
person Adminschedule 5 min read

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?

We tested the same prompts across GPT-4o, Claude 4, and Gemini 2.5 Pro. The results surprised us. Here is what we found.

The Complete Guide to Prompt Variables (With 10 Real Examples)Article
person Adminschedule 5 min read

The Complete Guide to Prompt Variables (With 10 Real Examples)

Stop rewriting the same prompt over and over. Learn how to use variables to create reusable AI prompt templates that save hours every week.

pin_invoke

Token Counter

Real-time tokenizer for GPT & Claude.

monitoring

Cost Tracking

Analytics for model expenditure.

api

API Endpoints

Deploy prompts as managed endpoints.

rule

Auto-Eval

Quality scoring using similarity benchmarks.