A Gemini-optimized blog post template that gets your content read, cited, and recommended by AI search engines. Built from a direct interview with Gemini about what makes content discoverable. Includes structured JSON-LD (Article + FAQPage + HowTo in a @graph array), semantic HTML classes for every content element, and Schema.org microdata throughout. Download the template and start using it today.

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.

Key takeaway

AI search engines prioritise content they can parse into structured answers. The right HTML template does that parsing work for them.

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:

Element	Purpose	Who renders it
Meta line	Author, date, read time, category	Page wrapper
H1 headline	Post title with `itemProp="headline"`	Page wrapper
Lede paragraph	Excerpt with blue left border	Page wrapper
Summary box	KEY TAKEAWAY - primary AI extraction target	Your content
Table of contents	Numbered links to H2 sections	Your content
Body sections	H2s, paragraphs, callouts, tables, steps	Your content
FAQ section	Question/answer pairs (mirrors FAQPage schema)	Your content
CTA block	Downloads and newsletter signup	Your content
Author box	Name, title, bio with Schema.org Person microdata	Page wrapper
JSON-LD	@graph with Article + FAQPage + HowTo	Page wrapper

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.

<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.

Key takeaway

Every CSS class maps to a specific type of information that AI engines know how to extract: summaries, steps, Q&As, comparisons, and calls to action.

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

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.
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.
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).
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.
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.
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.

Key takeaway

The implementation is six steps: CSS, page layout, JSON-LD, content classes, metadata mirroring, and validation. You can do it in an afternoon.

Frequently asked questions

Does this template work with any blog framework?

Yes. The CSS classes and HTML structure are framework-agnostic. Whether you're using Next.js, Astro, Hugo, WordPress, or plain HTML, you can use these classes in your post content. The page wrapper (meta line, author box, JSON-LD) needs to be adapted to your framework's templating system, but the content elements work anywhere.

Will this actually improve my search rankings?

Structured data and semantic HTML are confirmed ranking signals for Google's rich results. FAQPage schema qualifies for expandable FAQ snippets. HowTo schema qualifies for step-by-step cards. Whether you rank higher depends on your content quality and competition, but this template removes the structural barriers that prevent good content from being discovered.

Do I need the dark colour scheme?

No. Every colour is defined as a CSS custom property in the :root block. Swap the hex values for your brand colours. The structural classes (summary-box, callout, steps, faq-item) work regardless of your colour scheme.

What if my blog doesn't have a metadata JSON field?

You can use frontmatter in markdown files, a custom field in your CMS, or even hardcode the JSON-LD in your page template for each post. The FAQ and HowTo data just needs to end up in the JSON-LD script block. How it gets there is up to your stack.

Is the summary-box the same as a TL;DR?

Functionally, yes. It's a 3-5 sentence summary at the top of your post. The difference is the implementation: it uses a CSS class that generates a "KEY TAKEAWAY" label, has a gradient background, and is positioned as the primary extraction target for AI engines. A blockquote TL;DR works for humans but doesn't signal anything special to crawlers.

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.

Download the template and start building AI-discoverable blog posts today.

Download the template Subscribe to the newsletter

ai-search

The Blog Post Template That Gemini Actually Wants to Read