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.

terminalchatgpttrending_upRisingcontent_copyUsed 467 timesby Community

crawlabilityHTML structuretechnical SEOsemantic-htmlaccessibility

chatgpt

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

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

chatgptshieldTrusted

bookmark

React Animation & Transitions Code Reviewer

Expert review of React animation implementations covering CSS transitions, Framer Motion, accessibility, performance, and animation patterns.

Senior React Component Code Reviewer

Expert React review covering component design, hooks correctness, state management, rendering performance, and accessibility.

Frontend Form Handling Code Reviewer

Expert review of form implementations covering validation UX, controlled/uncontrolled patterns, accessibility, error states, and React Hook Form.

Enterprise Accessibility Implementation Approach

Production-ready accessibility implementation framework that transforms vague requirements into structured, implementable plans with built-in risk assessment.

Semantic HTML Structure Architect

Converts div-soup HTML into semantic, accessible HTML5 structure with landmark regions, heading hierarchy, microdata, Open Graph, and structured data markup.