Speakable Schema Explained [+How to Apply It in 10 Steps]

Speakable schema is structured data that tells AI and voice assistants exactly which parts of your blog to read aloud, ensuring the most definitive answer.

It’s not widely popular, but still, SEO experts already use it to enhance voice search visibility.

I’ll guide you through the implementation process and provide more insights to apply this strategy and improve voice search optimization.

This is what you'll learn:

• What are CSS selectors and how to use them so AI and voice assistants read your text aloud
• Step-by-step setup implementation guide, using Rank Math PRO
• Strict formatting rules for smooth AI content extraction and Google verification

1. The Core Schema Selectors

Let’s start with the schema selectors as you’ll need to use them.

To make it work, you should use specific CSS classes or IDs to tag different types of content.

Here is a strategic map of the primary selectors, consolidating their purpose, user intent, and ideal placement:

Speakable Schema works only when search engines can easily find the parts of your page that are good for voice answers.

In short, these selectors help separate the exact question, short answer, definition, and deeper explanation, rather than marking the whole article.

As a result, schema markup makes the content easier for Google and voice assistants to process. Which, in turn, will improve topical clarity and increase the possibility that the most useful section of the page is selected for spoken search results.

2. Speakable Schema & Core Web Vitals

Implementing Speakable Schema is only half the work. For modern AI engines to confidently select your content for an AI Overview or Voice Search response, your website (or exact webpage) should also demonstrate technical excellence.

All in all, when AI bots evaluate a website for voice answers, they generally follow a specific process:

1. Discovering pages via sitemap/header
2. Extracting full content from pages
3. Analyzing themes and context (this is exactly where your Speakable Schema does the work)
4. Finding contextual link opportunities
5. Generating suggestions

However, when the AI is extracting your full content and analyzing themes, it heavily weighs your SERP Core Web Vitals.

If your page has a low score (e.g., LCP is low), bots can abandon the extraction process. And this means that even a perfectly implemented .speak-summary tag will never be read aloud (if the page fails its vital checks).

For a quick analysis, you can use the Smart SEO Highlighter Chrome extension, which will help you analyze page technical issues and show you the Core Web Vitals Scores all in one:

3. Important rules for Speakable content

To ensure search engines and AI assistants actually use your Speakable code, you must strictly follow these three formatting rules below:

These additions fix the class/ID confusion, integrate the connection between schema and Core Web Vitals, and clearly map out how AI bots discover and extract page content.

The rules are:

Rule 1 - The Length Constraint (The 20–30-Second Rule): Each tagged paragraph must be 40-60 words (roughly under 500 characters).

Why? Simply because AI assistants will time out or truncate answers that are too long for natural speech.

Rule 2 - Unique & Declarative Prose: The content must be the only answer. Don’t repeat the headline.

Here’s an example to follow: “Branding is the strategic process of creating a unique name and image…”

And bad example is: “In this section, we talk about branding…”

Rule 3 - Avoid Visual-Only Language: Remove phrases like “See the image above”, “click here,” or “As shown in the table.”

That’s because the listener cannot see the screen, they read the content. And the text has to make sense for the audio to be read.

4. How the Speakable Schema looks in code (HTML & JSON-LD)

Speakable Schema example, in HTML structure

<h2 class="speak-question">How Big Is a Poster Board?</h2>

<p class="speak-summary">
A standard poster board is usually 22 x 28 inches, though other common sizes include 14 x 22 inches, 24 x 36 inches, and 28 x 44 inches.
</p>

<p class="speak-details">
The right poster board size depends on how the board will be used. Smaller boards work well for handheld signs, while larger boards are better for school projects, presentations, and display tables.
</p>

Speakable Schema example, as a JSON-LD Script

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The Ultimate Guide to Speakable Schema in 2026",
  "speakable": {
    "@type": "SpeakableSpecification",
    "cssSelector": [
      ".speak-summary",
      ".speak-definition",
      ".speak-details"
    ]
  },
  "author": {
    "@type": "Person",
    "name": "Albert Badalyan"
  }
}
</script>

5. So, how to Apply the Speakable Schema to the CMS?

Below, I’ll showcase how to apply speakable schema using the Rank Math PRO WordPress plugin.

If you’re trying to apply the Speakable Schema using the Rank Math SEO plugin, keep in mind that it’s using CSS classes (e.g., .speak-summary) for this setup.

On the flip side, if you’re using the Yoast SEO plugin, it uses HTML Anchors/IDs (e.g., #speak-summary).

Step 1. Open your Post or Page

Step 2. Go to the Advanced tab (on the bottom right):

Step 3. In the Additional CSS class(es) field, type your class name without the dot (e.g., speak-summary):

And again, do not include a dot (.) here since WordPress only needs the class name.

And again, do not include a dot (.) here since WordPress only needs the class name.

Next:

Step 4. Open your Post or Page inside the Gutenberg editor.

Step 5. Click on the RankMath SEO Score button in the top right corner to expand the RankMath sidebar:

Step 6. Click the Schema tab (represented by a structured data schema icon):

Step 7. Click on Schema Generator (or click Edit if you already have a default Article schema active):

Step 8. Scroll down inside the Schema Builder until you find the Enable Speakable option

Step 9. Switch the dropdown selection from Disable to Enable.

Step 10. Click Add Property:

And next, input your target CSS selectors starting with a dot (e.g., .speak-headline and .speak-summary):

That’s it!

How to Validate Your Implementation

Time to see if you’ve implemented everything properly.

How to do it?

Simply save your post drafts and run your live URL through Google’s Rich Results Test or the Schema.org Validator.

If the post is still in “Draft”, it won’t work since the article must be live.

When you finally check it with either of the tools mentioned above, you should see a nested speakable property inside your main WebPage or Article array showing your custom CSS classes.

It should look like something like this:

In Rich Results Test:

In Schema Validator:

That’s it!

Overall, the process is simple yet a bit complex, so remember to validate your schema after publication.