Home » Interactive Website Content » Schema Markup

How to Add Schema Markup to Your Web Pages

Schema markup is structured data you add to your web pages that helps search engines understand your content. It can enable rich results in Google, like star ratings, FAQ dropdowns, how-to steps, and breadcrumb navigation directly in search results. Adding schema to your pages makes them more visible and more clickable in search results without changing how the page looks to visitors.

What Is Schema Markup

Schema markup is a standardized vocabulary defined at schema.org that describes the content of web pages in a format search engines can read. You add it as JSON-LD (JavaScript Object Notation for Linked Data) in a script tag on your page. Search engines read this structured data and use it to display enhanced search results called rich snippets or rich results.

For example, an Article schema tells Google that your page is an article with a specific headline, author, publication date, and description. A HowTo schema tells Google that your page contains step-by-step instructions. A Product schema tells Google about pricing, availability, and reviews. Each schema type can trigger different rich result formats in search.

Schema Types That Matter Most

Article Schema

The most fundamental schema for content pages. It identifies your page as an article with a headline, author, publisher, and dates. Every blog post, news article, and content page should have Article schema. It helps search engines properly categorize and display your content.

BreadcrumbList Schema

Defines the navigation path to your page (Home > Category > Page). When Google displays this in search results, it replaces the raw URL with a clean breadcrumb trail. This makes your search result more informative and can increase click-through rates because users can see exactly where the page fits in your site structure.

HowTo Schema

For pages that walk through a process with numbered steps. Google can display these steps directly in search results, which takes up more visual space and attracts more clicks. Any page with step-by-step instructions should include HowTo schema alongside Article schema.

QAPage Schema

For pages that directly answer a specific question. The question and answer can appear in Google's search results as an expanded result. Pages structured as "How much does X cost?" or "What is the difference between X and Y?" are ideal candidates for QAPage schema.

FAQPage Schema

For pages that contain multiple questions and answers. Google can display expandable FAQ sections directly in search results, which significantly increases the visual size of your result and provides immediate value to searchers.

Product Schema

For product pages with pricing, availability, and reviews. Google can display price, availability status, and star ratings directly in search results. This makes your product listings stand out and gives searchers key information before they click.

How to Add Schema to Your Pages

Step 1: Identify the right schema types for your page.
Every content page should have Article schema and BreadcrumbList schema at minimum. If the page has steps, add HowTo schema. If it answers a question, add QAPage schema. If it lists a product, add Product schema. You can combine multiple schema types on one page.

Step 2: Build the JSON-LD markup.
Schema markup uses JSON-LD format inside a script tag. The basic structure starts with @context set to schema.org and @type set to your schema type. Then you fill in the required and recommended properties for that type. Each schema type has specific fields defined at schema.org.

Step 3: Add the schema to your page.
Place the JSON-LD script tags in the head section of your page or within the page body. For pages hosted through the Web Builder, schema is stored in the userdata field of the page record and injected automatically when the page is served. Multiple schema blocks can be included as separate script tags.

Step 4: Validate your markup.
Use Google's Rich Results Test (search.google.com/test/rich-results) to validate your schema markup. Paste your page URL or the markup code, and the tool will show any errors or warnings. Fix any issues before relying on the schema for search enhancements.

Step 5: Monitor rich results in Search Console.
After adding schema, check Google Search Console for rich result reporting. It may take a few days to weeks for Google to process your schema and start displaying rich results. The Search Console shows which rich result types are active for your site and any errors that need fixing.

Schema Best Practices

Be accurate: Schema data must match the visible content on your page. Do not add schema that describes content not present on the page.
Use JSON-LD format: Google recommends JSON-LD over microdata or RDFa. It is easier to add and maintain because it sits in a separate script tag rather than being mixed into your HTML.
Combine schema types: A how-to article page should have Article, BreadcrumbList, and HowTo schema all at once. Google supports multiple schema types per page.
Keep it updated: If your page content changes, update the schema to match. Outdated schema data can trigger warnings or lose rich result eligibility.
Include recommended fields: Schema types have required and recommended properties. Including recommended fields improves your chances of getting rich results.

Rich result types: Not all schema types trigger visual rich results in Google. Article and BreadcrumbList improve how Google understands your content but may not change the visual display. HowTo, FAQ, Product, and Review schema are most likely to produce visible rich snippets that stand out in search results.

Schema on the AI Apps API Platform

Pages hosted through the Web Builder can include schema markup in the userdata.schema field of each page record. The hosting system automatically injects these schema script tags into the page head when serving the page. This means you can manage schema for all your pages through the admin panel without editing HTML files directly.

For pages built with the platform's article system, schema is generated using helper functions that produce properly formatted Article, BreadcrumbList, HowTo, and QAPage schema. These functions ensure consistent, valid markup across all your content pages.

Add schema markup to your web pages and improve your search result visibility.

Get Started Free

View the Web Builder App