HowTo schema = Google shows your steps as a carousel in search. Result: 25% higher CTR + voice search traffic.
In this tutorial, you'll add HowTo schema to Blogger tutorial posts. Follow along and you'll get step-by-step rich snippets in 2025.
Step 1: When to Use HowTo Schema
Use HowTo only if your post teaches a process with clear steps.
- Good for: "How to" posts, tutorials, guides, recipes, DIY
- Not for: News, opinions, lists, product reviews
- Google rule: Steps must be in order. Each step = 1 action users can do
Image: HowTo rich snippet carousel in Google search
Step 2: Structure Your Post with H2 Steps First
Schema must match visible steps. Write steps in post before adding code.
- Use H2 for each main step. Example:
<h2>Step 1: Open Blogger Dashboard</h2> - Add 1-3 sentences + image under each H2 explaining the step
- Rule: 2-20 steps allowed. 3-8 steps = best for Google
Step 3: Add HowTo Schema JSON-LD Code
Paste this code in HTML view. Replace title, steps, and images with yours.
- Posts → Edit → Top right "HTML" view
- Scroll to very bottom of post → Paste this code:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Add HowTo Schema in Blogger",
"description": "Step by step guide to add HowTo schema markup in Blogger posts for rich snippets.",
"image": "https://blogger.googleusercontent.com/img/YOUR-FEATURED-IMAGE-URL",
"totalTime": "PT10M",
"estimatedCost": {
"@type": "MonetaryAmount",
"currency": "USD",
"value": "0"
},
"step": [
{
"@type": "HowToStep",
"name": "Open Blogger Dashboard",
"text": "Go to blogger.com and log in to your account.",
"url": "https://yourblog.blogspot.com/post-url#step1",
"image": "https://blogger.googleusercontent.com/img/STEP1-IMAGE-URL"
},
{
"@type": "HowToStep",
"name": "Edit Post in HTML Mode",
"text": "Click Posts, select your tutorial post, click Edit, switch to HTML view.",
"url": "https://yourblog.blogspot.com/post-url#step2",
"image": "https://blogger.googleusercontent.com/img/STEP2-IMAGE-URL"
},
{
"@type": "HowToStep",
"name": "Paste HowTo Schema Code",
"text": "Copy the JSON-LD code and paste at bottom of post. Replace steps with your own.",
"url": "https://yourblog.blogspot.com/post-url#step3",
"image": "https://blogger.googleusercontent.com/img/STEP3-IMAGE-URL"
}
]
}
</script>
Step 4: HowTo Schema Fields Explained
| Field | What to Put | Required? |
| name | Exact post title | Yes |
| description | 1 sentence summary of tutorial | Yes |
| image | Featured image URL of post | Yes |
| totalTime | PT10M = 10 minutes. PT1H = 1 hour | No |
| step > name | Same as H2 text in post | Yes |
| step > text | Short description of step | Yes |
| step > image | Screenshot of that step | Recommended |
Step 5: Test & Request Indexing
- Test: search.google.com/test/rich-results → Enter URL → Must show "How-to detected"
- Fix errors: Missing bracket or comma breaks schema. Use jsonlint.com
- Index: Search Console → URL Inspection → Request Indexing
- Result: Rich snippet appears in 3-14 days if you rank top 5
Image: Rich Results Test showing valid HowTo schema
Bad practice to avoid: Adding HowTo schema to list posts like "10 Best Tools". Google manual penalty. Only use for sequential steps.
Important: HowTo + FAQ schema can be used together in one post. But don't add HowTo to every tutorial. Only use when steps are critical. Google shows max 3 steps in search, but add all steps in code.
0 Comments