Top 10 lists without Carousel Schema = 10 plain blue links. With Carousel Schema = swipeable cards with images in mobile search.

In this tutorial, you'll add Carousel Schema to Blogger list posts. Follow along and you'll get horizontal swipeable results on Google mobile in 2025.

Step 1: Why Carousel Schema Wins List SEO 2025

Google shows swipeable carousel for list posts only with ItemList Schema.

  1. Mobile carousel: Shows horizontal swipe cards with images, not vertical list
  2. 3x more screen space: Your Top 10 list takes full mobile screen
  3. Image + position: Shows rank #1, #2 with image + title
  4. 120% higher CTR: Carousel gets tapped more than plain links

Image: Google mobile showing Top 10 Laptops carousel swipeable with images

Step 2: Add Carousel Schema to Blogger List Post

Paste this in post HTML editor BELOW your Top 10 list.

  1. Posts → Edit Top 10 Post → Switch to "HTML" view → Paste at BOTTOM:
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "Top 10 Best Laptops Under $500 for Students in 2025",
  "description": "Best budget laptops under $500 for students. Tested 15 models for battery, performance, and value. HP, Lenovo, Acer, ASUS.",
  "itemListOrder": "https://schema.org/ItemListOrderDescending",
  "numberOfItems": 10,
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "url": "https://yourblog.blogspot.com/best-laptops-under-500.html#hp-pavilion-15",
      "name": "HP Pavilion 15",
      "image": "https://yourblog.blogspot.com/hp-pavilion-15.jpg"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "url": "https://yourblog.blogspot.com/best-laptops-under-500.html#lenovo-ideapad-3",
      "name": "Lenovo IdeaPad 3",
      "image": "https://yourblog.blogspot.com/lenovo-ideapad-3.jpg"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "url": "https://yourblog.blogspot.com/best-laptops-under-500.html#acer-aspire-5",
      "name": "Acer Aspire 5",
      "image": "https://yourblog.blogspot.com/acer-aspire-5.jpg"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "url": "https://yourblog.blogspot.com/best-laptops-under-500.html#asus-vivobook-15",
      "name": "ASUS VivoBook 15",
      "image": "https://yourblog.blogspot.com/asus-vivobook-15.jpg"
    },
    {
      "@type": "ListItem",
      "position": 5,
      "url": "https://yourblog.blogspot.com/best-laptops-under-500.html#dell-inspiron-15",
      "name": "Dell Inspiron 15",
      "image": "https://yourblog.blogspot.com/dell-inspiron-15.jpg"
    }
  ]
}
</script>

Step 3: Advanced Carousel - With Full Product Data Inside

For best results, nest Product/Recipe/Movie inside each ListItem:

"itemListElement": [
  {
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@type": "Product",
      "name": "HP Pavilion 15",
      "image": "https://yourblog.blogspot.com/hp-pavilion-15.jpg",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "reviewCount": "120"
      },
      "offers": {
        "@type": "Offer",
        "price": "499",
        "priceCurrency": "USD"
      }
    }
  }
]

Step 4: Carousel Types - Choose Correct Combo

List Type Use This Schema Combo Gets What Result
Top 10 Products ItemList + Product Swipeable products with price + stars
Top 10 Recipes ItemList + Recipe Swipeable recipes with time + rating
Top 10 Movies ItemList + Movie Swipeable movies with poster + rating
Top 10 Places ItemList + LocalBusiness Swipeable places with map + rating
General Top 10 ItemList + Article Simple swipeable titles + images

Step 5: Add Visible List That Matches Schema Exactly

Carousel Schema must match visible H2/H3 headings with anchor IDs:

<h2>Top 10 Best Laptops Under $500 for Students</h2>

<h3 id="hp-pavilion-15">1. HP Pavilion 15 - Best Overall</h3>
<img src="https://yourblog.blogspot.com/hp-pavilion-15.jpg" alt="HP Pavilion 15 laptop" style="width:100%;max-width:600px;border-radius:8px;" />
<p>Intel i5, 8GB RAM, 512GB SSD, 10hr battery. Price $499 on Amazon.</p>

<h3 id="lenovo-ideapad-3">2. Lenovo IdeaPad 3 - Best Budget</h3>
<img src="https://yourblog.blogspot.com/lenovo-ideapad-3.jpg" alt="Lenovo IdeaPad 3" style="width:100%;max-width:600px;border-radius:8px;" />
<p>Ryzen 5, 8GB RAM, 256GB SSD, great keyboard. Price $399.</p>

<!-- Repeat for 3-10 -->

Step 6: Test Carousel Schema + Fix Errors

  1. Rich Results Test: search.google.com/test/rich-results → Enter URL → Must show "Item List" or "Carousel" valid
  2. Mobile Test: Search your keyword on phone → Must swipe horizontally
  3. Search Console: Enhancements → Item List → No errors
  4. Fix: Images not showing: Each ListItem must have image URL 1200px+ wide, JPG, public
  5. Fix: Position error: position must be 1,2,3 sequence with no gaps. Start at 1
  6. Fix: URL mismatch: url in Schema must match H3 id anchor on page. Use #id anchors
  7. Fix: Only 2 items: Carousel needs min 3 items, ideal 5-10. Google shows max 10

Bad practice to avoid: Adding ItemList Schema to non-list post like single product review. ItemList only for posts with "Top X", "Best X", "X Ways". Single review = Product Schema only.

Important: For summary page linking to 10 separate posts, use url to each separate post URL, not #anchors. For Top 10 in one long post, use #anchor links as shown. Add itemListOrder: ItemListOrderDescending for Top 10 Best (1 = best). Use Ascending for steps 1-10. Combine with FAQ Schema from Post #60 for "Which laptop is best?" question. Update list yearly - change title to 2025 and update prices.