ItemList Schema Example

<script setup lang="ts">
useSchema({
  context: 'https://schema.org',
  type: 'ItemList',
  name: 'Top 10 Products',
  description: 'Best selling products this month',
  itemListElement: [
    {
      type: 'ListItem',
      position: 1,
      name: 'Product 1',
      item: '/products/1', // Relative URL - will be normalized to absolute
    },
    {
      type: 'ListItem',
      position: 2,
      name: 'Product 2',
      item: 'https://example.com/products/2', // Absolute URL - used as-is
    },
  ],
  renderHtml: true, // Generate semantic HTML
  visuallyHidden: true, // Visually hide
})
</script>

<script setup lang="ts">
// Catalog data with mixed absolute and relative URLs
const catalog = {
  name: 'Top 10 Best Selling Products',
  description: 'Our most popular products this month based on sales data.',
  items: [
    {
      position: 1,
      name: 'Premium Wireless Headphones',
      url: '/products/headphones', // Relative URL - will be normalized to absolute
      description: 'High-quality wireless headphones with noise cancellation.',
    },
    {
      position: 2,
      name: 'Smart Watch Pro',
      url: 'https://example.com/products/smartwatch', // Absolute URL - used as-is
      description: 'Advanced smartwatch with health tracking features.',
    },
    {
      position: 3,
      name: 'Portable Laptop Stand',
      url: '/products/laptop-stand', // Relative URL - will be normalized to absolute
      description: 'Ergonomic laptop stand for better posture.',
    },
    {
      position: 4,
      name: 'Mechanical Keyboard',
      url: '/products/keyboard', // Relative URL - will be normalized to absolute
      description: 'RGB mechanical keyboard with customizable keys.',
    },
    {
      position: 5,
      name: 'USB-C Hub',
      url: 'https://example.com/products/usb-hub', // Absolute URL - used as-is
      description: 'Multi-port USB-C hub for laptops and tablets.',
    },
  ],
}

// Add ItemList Schema
useSchema({
  context: 'https://schema.org',
  type: 'ItemList',
  name: catalog.name,
  description: catalog.description,
  itemListElement: catalog.items.map(item => ({
    type: 'ListItem',
    position: item.position,
    name: item.name,
    item: item.url,
  })),
  renderHtml: true,
  visuallyHidden: true,
})
</script>

<script setup lang="ts">
// Ranking data
const ranking = {
  name: 'Top 5 JavaScript Frameworks 2024',
  description: 'Most popular JavaScript frameworks based on GitHub stars and npm downloads.',
  items: [
    {
      position: 1,
      name: 'React',
      url: 'https://react.dev',
      description: 'A JavaScript library for building user interfaces.',
    },
    {
      position: 2,
      name: 'Vue.js',
      url: 'https://vuejs.org',
      description: 'The Progressive JavaScript Framework.',
    },
    {
      position: 3,
      name: 'Angular',
      url: 'https://angular.io',
      description: 'The modern web developer\'s platform.',
    },
    {
      position: 4,
      name: 'Svelte',
      url: 'https://svelte.dev',
      description: 'Cybernetically enhanced web apps.',
    },
    {
      position: 5,
      name: 'Next.js',
      url: 'https://nextjs.org',
      description: 'The React Framework for Production.',
    },
  ],
}

// Add ItemList Schema
useSchema({
  context: 'https://schema.org',
  type: 'ItemList',
  name: ranking.name,
  description: ranking.description,
  itemListElement: ranking.items.map(item => ({
    type: 'ListItem',
    position: item.position,
    name: item.name,
    item: item.url,
  })),
  renderHtml: true,
  visuallyHidden: true,
})
</script>

{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "Top 10 Best Selling Products",
  "description": "Our most popular products this month based on sales data.",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Premium Wireless Headphones",
      "item": "https://example.com/products/headphones"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Smart Watch Pro",
      "item": "https://example.com/products/smartwatch"
    }
  ]
}

<div class="nuxt-aeo-semantic-itemlist nuxt-aeo-visually-hidden" aria-hidden="true">
  <div itemscope itemtype="https://schema.org/ItemList">
    <span itemprop="name">Top 10 Best Selling Products</span>
    <span itemprop="description">Our most popular products this month based on sales data.</span>
    <ol>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <meta itemprop="position" content="1">
        <span itemprop="name">Premium Wireless Headphones</span>
        <a itemprop="item" href="https://example.com/products/headphones">https://example.com/products/headphones</a>
      </li>
      <!-- More items... -->
    </ol>
  </div>
</div>

{
  type: 'ListItem',
  position: number,        // Required: Position in the list (1, 2, 3, ...)
  name: string,           // Required: Name of the item
  item: string,          // Required: URL or identifier
  [key: string]: unknown // Optional: Other properties
}

// Check semantic HTML
document.querySelectorAll('.nuxt-aeo-semantic-itemlist').forEach(el => {
  console.log('✅ ItemList semantic HTML:', el.innerHTML)
})

// Check JSON-LD schema
document.querySelectorAll('script[type="application/ld+json"]').forEach(script => {
  const schema = JSON.parse(script.innerHTML)
  if (schema['@type'] === 'ItemList') {
    console.log('✅ ItemList JSON-LD:', schema)
  }
})

<script setup lang="ts">
useSchemaFaq({
  mainEntity: [
    {
      name: 'When should I use ItemList Schema?',
      acceptedAnswer: {
        text: 'ItemList Schema is used to structure ordered lists, catalogs, ranking pages, etc. It can be used for product catalogs, Top 10 lists, navigation menus, breadcrumbs, recipe steps, playlists, and more. It helps AI models and search engines better understand the order and structure of items.',
      },
    },
    {
      name: 'Is the position property required?',
      acceptedAnswer: {
        text: 'The position property is required for each item in ItemList. This property indicates the position of the item in the list and is a number starting from 1. Through the position property, the order of the list is clearly communicated, which is particularly useful for ranking pages or lists where order is important.',
      },
    },
    {
      name: 'What can it be used for?',
      acceptedAnswer: {
        text: 'ItemList Schema can be used for various purposes. It can be used to display sales rankings in product catalogs, create Top 10 lists, structure navigation menus or breadcrumbs, represent step-by-step order in recipes, display playlist order, and more.',
      },
    },
    {
      name: 'What is the structure of itemListElement?',
      acceptedAnswer: {
        text: 'itemListElement is an array of objects of type ListItem. Each item must include type: "ListItem", position (position), name (name), and item (URL or identifier). Additionally, you can include description or other properties. position is a number starting from 1 and represents the order in the list.',
      },
    },
  ],
})
</script>