The Blog Post Template That Gemini Actually Wants to Read

Why does Gemini care about your HTML structure?

AI search engines don't just crawl your content. They parse it. They look for signals that tell them what's a key takeaway, what's a step in a process, what's a question and answer pair, and what's just filler paragraph text.

When your content uses semantic HTML with consistent CSS classes, clear heading hierarchy, and structured data markup, AI engines can extract clean, attributed, citable answers. When it doesn't, your content is just another wall of text competing with millions of others.

We sat down with Gemini directly and asked: what format, layout, and structure would make you most likely to read, understand, and recommend a blog post in search results? The answer became this template.

What does the template actually look like?

The template has two layers: a page wrapper (rendered automatically by your blog framework) and content elements (the HTML you write inside each post). Together they produce a page that's optimised for both human readers and AI crawlers.

Here's the visual hierarchy from top to bottom:

The page wrapper: what renders automatically

The page wrapper handles everything that should be consistent across all posts. You don't write this HTML - your blog framework generates it from post metadata.

The meta line

A monospace line at the top: Author / Date / Read time / Category. Uses uppercase JetBrains Mono with forward-slash separators. The date sits inside a <time> element with a datetime attribute for machine parsing.

The lede

Your post excerpt, styled with a 3px blue left border. This isn't just decoration - it visually separates the "what this post is about" from "the post itself." AI engines treat this as a secondary summary after the headline.

The author box

After your content, an author card with Schema.org Person microdata: itemProp="name", itemProp="jobTitle", itemProp="worksFor", itemProp="url". AI engines use this to verify author credibility and attribute citations correctly.

The JSON-LD structured data

A single <script type="application/ld+json"> block containing a @graph array. This is the most important part for AI discoverability. More on this below.

The content elements: your toolkit

These are the CSS classes you use when writing post content. Each one has a specific purpose for AI parsing.

Summary box

<div class="summary-box">
  <p>Your 3-5 sentence summary. Use <strong>bold</strong> for key claims.</p>
</div>

Generates a "KEY TAKEAWAY" label automatically via CSS ::before. This is the primary AI extraction target - make it citable and complete. If an AI engine only reads one thing from your post, it reads this.

Table of contents

<nav class="toc" aria-label="Table of contents">
  <div class="toc-title">Contents</div>
  <ol>
    <li><a href="#section-id">Section title</a></li>
  </ol>
</nav>

Numbered with zero-padded counters (01, 02, 03). Links use anchor IDs that match your H2 id attributes. Gives AI engines a map of your content structure before they read a single paragraph.

Callout boxes

<div class="callout">
  <div class="callout-label">Key takeaway</div>
  <p>Your one-sentence insight.</p>
</div>

Blue left border, surface background. Use one every 500-800 words maximum. AI engines extract these as citable insights from specific sections.

Data tables

<div class="data-table-wrap">
  <table>
    <thead><tr><th>Column</th></tr></thead>
    <tbody>
      <tr><td class="val-good">Good value</td></tr>
      <tr><td class="val-bad">Bad value</td></tr>
      <tr><td class="val-highlight">Key metric</td></tr>
    </tbody>
  </table>
</div>

Four value classes: val-good (green), val-bad (red), val-highlight (cyan), val-neutral (grey). AI engines can reference and reproduce structured tabular data accurately.

Numbered steps

<ol class="steps">
  <li><strong>Step title.</strong> Step description.</li>
</ol>

Renders with blue circle counters instead of plain numbers. Each step should be a complete, actionable instruction. AI engines extract numbered steps extremely well for how-to queries - and these mirror your HowTo schema in the JSON-LD.

FAQ items

<div class="faq-item">
  <div class="faq-q">Your question here?</div>
  <p class="faq-a">Your answer here.</p>
</div>

These should mirror the faq array in your post metadata exactly. The visual FAQ and the FAQPage schema both feed AI engines the same Q&A pairs - one for crawlers that render HTML, one for crawlers that read JSON-LD.

CTA block

<div class="cta-block">
  <p>Your call to action text.</p>
  <a href="#" class="cta-btn">Primary action</a>
  <a href="#" class="cta-btn secondary">Secondary action</a>
</div>

Gradient background, centred text. Primary button is solid blue, secondary is outlined. One per post, at the end.

Structured data: the @graph array

Most blog templates include a single Article schema in their JSON-LD. This template uses a @graph array that can contain three schema types in one block:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Article",
      "headline": "Your post title",
      "author": {
        "@type": "Person",
        "name": "Your Name",
        "url": "https://yoursite.com",
        "jobTitle": "Your Title"
      },
      "datePublished": "2026-03-21",
      "mainEntityOfPage": { "@type": "WebPage" }
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "Your question?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Your answer."
          }
        }
      ]
    },
    {
      "@type": "HowTo",
      "name": "How to do the thing",
      "step": [
        { "@type": "HowToStep", "text": "Step 1" },
        { "@type": "HowToStep", "text": "Step 2" }
      ]
    }
  ]
}

Article gets you into standard search results with author attribution. FAQPage qualifies your content for expandable FAQ rich results. HowTo qualifies for step-by-step rich results. All three in one page, all driven from your post metadata.

How to implement this on your own blog

1. Add the CSS. Copy the template's CSS variables and class definitions into your stylesheet. The colour scheme uses a dark theme (background #09090b, text #e4e4e7) but every value is in CSS custom properties so you can swap them.
2. Update your post page layout. Add the meta line, lede paragraph, and author box to your post template. Include Schema.org itemScope and itemProp attributes on the article, headline, date, and author elements.
3. Upgrade your JSON-LD. Switch from a single Article object to a @graph array. Add FAQPage and HowTo schemas, driven from your post metadata (a JSON field in your database or frontmatter in your markdown).
4. Write content using the CSS classes. Use summary-box, toc, callout, data-table-wrap, steps, faq-item, and cta-block in your post HTML. Each class maps to a specific information type that AI engines can extract.
5. Mirror your FAQ in metadata. Every faq-item in your HTML should have a matching entry in your post's metadata JSON. This feeds the FAQPage schema in your JSON-LD. Same content, two formats - one for HTML crawlers, one for structured data parsers.
6. Test with Google's Rich Results Test. Paste your published URL into Google's Rich Results Test. You should see Article, FAQPage, and HowTo detected. Fix any validation errors before moving on.

Frequently asked questions

Get the files

Two downloads to get you started. The template file is a complete standalone HTML page with all the CSS and structure. The agent file is a set of instructions you can drop into Claude or ChatGPT to help you implement the template on your own blog.