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.

  1. Good for: "How to" posts, tutorials, guides, recipes, DIY
  2. Not for: News, opinions, lists, product reviews
  3. 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.

  1. Use H2 for each main step. Example: <h2>Step 1: Open Blogger Dashboard</h2>
  2. Add 1-3 sentences + image under each H2 explaining the step
  3. 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.

  1. Posts → Edit → Top right "HTML" view
  2. 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

FieldWhat to PutRequired?
nameExact post titleYes
description1 sentence summary of tutorialYes
imageFeatured image URL of postYes
totalTimePT10M = 10 minutes. PT1H = 1 hourNo
step > nameSame as H2 text in postYes
step > textShort description of stepYes
step > imageScreenshot of that stepRecommended

Step 5: Test & Request Indexing

  1. Test: search.google.com/test/rich-results → Enter URL → Must show "How-to detected"
  2. Fix errors: Missing bracket or comma breaks schema. Use jsonlint.com
  3. Index: Search Console → URL Inspection → Request Indexing
  4. 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.