Loading page
Free HowTo tool
Marks up step-by-step guides so Google can show them as visual how-to carousels and AI engines can cite individual steps in answers. Rich result eligible. No signup. No credit card.
Marks up step-by-step guides so Google can show them as visual how-to carousels and AI engines can cite individual steps in answers.
PT30M = 30 min, PT2H = 2 hours, P1D = 1 day
Steps
{
"@context": "https://schema.org",
"@type": "HowTo"
}Validation
★ Rich result eligible — validate at Google Rich Results Test
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to install a Shopify theme",
"step": [{
"@type": "HowToStep",
"position": 1,
"name": "Log in to Shopify Admin",
"text": "Go to your Shopify Admin at admin.shopify.com and log in."
}]
}
</script>Understanding the format
HowTo schema tells Google that your page contains a step-by-step process — from 'how to install a Shopify theme' to 'how to file a GST return'. Google renders HowTo as a rich result with numbered steps, optional images, and time estimates. AI Overviews and Perplexity parse HowTo steps to give procedural answers with source attribution. Each step should have a clear name (imperative verb phrase) and a text description. You can optionally add images per step, a total time in ISO 8601 duration, and estimated cost — all of which may appear in the Google result.
Winning how-to rich results for tutorial and guide content
Supplying step-level citations to AI engines answering procedural 'how do I...' queries
Increasing engagement by helping users understand the process before clicking through
Using HowTo for listicles or recommendations — it must be a sequential procedure with distinct steps
Omitting 'position' numbers on HowToStep — Google requires them to order the carousel correctly
Setting 'totalTime' to an arbitrary string instead of ISO 8601 (e.g. PT30M for 30 minutes)
Missing the 'name' property on each step — the step name is the carousel card heading
Having steps on the page that differ from the schema — Google compares visible content with schema
Need expert implementation?
Our team audits your existing schema, fixes errors, and deploys a complete structured data strategy — Organisation, Service, FAQ, Article, and BreadcrumbList — for Google Rich Results and AI Overviews.
FAQ
HowTo schema tells Google that your page contains a step-by-step process — from 'how to install a Shopify theme' to 'how to file a GST return'. Google renders HowTo as a rich result with numbered steps, optional images, and time estimates. AI Overviews and Perplexity parse HowTo steps to give procedural answers with source attribution. Each step should have a clear name (imperative verb phrase) and a text description. You can optionally add images per step, a total time in ISO 8601 duration, and estimated cost — all of which may appear in the Google result.
Winning how-to rich results for tutorial and guide content Supplying step-level citations to AI engines answering procedural 'how do I...' queries Increasing engagement by helping users understand the process before clicking through
Yes — HowTo schema is eligible for rich results. You can validate your generated JSON-LD using Google's Rich Results Test at search.google.com/test/rich-results.
Using HowTo for listicles or recommendations — it must be a sequential procedure with distinct steps Omitting 'position' numbers on HowToStep — Google requires them to order the carousel correctly Setting 'totalTime' to an arbitrary string instead of ISO 8601 (e.g. PT30M for 30 minutes) Missing the 'name' property on each step — the step name is the carousel card heading Having steps on the page that differ from the schema — Google compares visible content with schema
In WordPress, you can add JSON-LD schema by inserting a Custom HTML block at the top of your page containing a <script type="application/ld+json"> tag, or by using Yoast SEO's Schema tab to add custom schema. You can also paste the script into your theme's header.php file.
In Shopify, paste the JSON-LD script block inside the <head> section of your theme.liquid file. For Online Store 2.0 themes, you can also add it via a JSON section or App Block if your theme supports it.
In Next.js (App Router), add the schema directly in your page.tsx server component using: <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaObject) }} />. Place it at the top of the returned JSX alongside other metadata.
This tool was built by Sterlingweb Growth Labs Private Limited, an India-based Shopify, WordPress, and SEO/AEO/GEO agency headquartered in Nashik. Learn more at /about or see our technical SEO services at /services/technical-seo-aeo-geo-services.