Semantic Microdata & Rich Snippets
What is Microdata?
Imagine listing a recipe online. Humans can read the ingredients easily. But to a search engine crawl bot, it's just a raw wall of text. They don't know whether the number "20" refers to baking time, serving size, or calories.Microdata is a set of HTML attributes used to label content so search engines understand exactly what type of real-world information is on your page:
itemscope: Declares that the element contains structured info.itemtype: Specifies the schema database type (e.g., http://schema.org/Book or Product).itemprop: Labels individual data properties (like name, author, or price).Why does it matter?
Adding microdata enables Google to display Rich Snippets (also called search cards) in search results. These show star reviews, prices, recipes, or event dates directly on search pages, dramatically increasing user clicks.How to write it
Add schema labels directly to your wrapper tags:<div itemscope itemtype="http://schema.org/Book">
<h2 itemprop="name">HTML Guide</h2>
</div>
★★★★★ Product Review (Rich Snippet)
Google uses microdata to show reviews and prices on results.
Common Mistakes
itemprop="booktitle" instead of itemprop="name" won't be indexed correctly by search crawlers.Quick Reference
itemscope — Declares structured data scope.itemtype="URL" — Specifies item type from Schema.org database.itemprop="property" — Labels data elements.Your Task
Add the attribute `itemprop="name"` to the `<h2>` tag inside the book item wrapper.
index.html
Type code above to start the lesson.
Live Preview