Contact Us
Home » Blog » Microdata — what is it and why does your website need it?
Author: OPRK Marketing

Microdata — what is it and why does your website need it?

Microdata is the markup of data on a page and on a website that is used to help a search bot better recognize the content on your website. We explain how exactly it works and what you need to know.

Microdata is the markup of data on a page and on a website that is used to help a search bot better recognize the content on your website. To make it clearer, imagine a library with a lot of books. The visitor does not know where each book is or what it is, but the library catalog helps him navigate. Microdata works in exactly the same way. It helps search robots find and better understand the pages of the website.

What exactly does microdata provide?

Strictly speaking, microdata increases the attractiveness of a website for search engines. It allows search robots to better understand the content of the website, its structure and content. Of course, you won’t find yourself in the top positions of search results just by using microdata ; you need to work on many other things. And yet, it increases your chances.

Moreover, the benefit is not only in potentially high positions, but also in how the snippets will look (the description of the pages that you see in the search results).

An extended snippet attracts more attention and looks more advantageous to the user: it can contain a rating, direct links to other pages of the site, product categories, etc.

Types of microdata 

In the context of microdata , there are two concepts – “dictionaries” and “syntax”. To make it easier later, let’s deal with them right away.

A microdata dictionary is like a dictionary in the usual sense, but instead of words and their definitions, it contains data types and their properties that we can use when marking up our web page. For example, a microdata dictionary might have the word “Book” and it will have properties like “name”, “author”, “publicationDate”, etc.

Microdata syntax is the rules by which we structure and record this information. They help search engines understand where information about each type or property begins and ends.

Microdata dictionaries

Let’s consider two of the most popular dictionaries:

  • Open Graph. Microdata developed by Facebook. It is mainly used to create snippets in social networks (when posting links to a site). The Open Graph dictionary is used by WhatsApp, Telegram, Viber, LinkedIn, Pinterest, Slack.
  • Schema.org. The most popular markup, allowing you to describe most products or services.
web developer for microdata

Microdata syntax

There are four types of syntax:

  • RDFa provides the ability to describe a variety of entities, be it a person, an object, or an event. Using triplets of the “subject-predicate-object” or “subject, predicate, object” type allows you to specify, for example, the cost of a certain product on a web page. Similarly, using this method, you can determine such product characteristics as weight, size, description, and others. In addition, you can specify a resource, the date of its appearance, or the authorship of a separate article.
  • JSON-LD is a data exchange method based on the JSON text format used in JavaScript. This approach is used in situations where it is necessary to identify objects and describe their attributes in detail. Most often, this syntax is used for markup in the context of the Schema.org vocabulary, and JavaScript support makes this information available for machine processing. JSON-LD makes it easier for search robots to structure data and interpret concepts. The method also allows you to place several elements on one page. For example, a user can find a recipe not only by its name, but also by ingredients, cooking time, and so on. What is the advantage of using JSON? The main one is that with this syntax there is no binding to the layout, which means you can easily and quickly place microdata . 
  • Microdata. A standard for marking up HTML pages using attributes and descriptive tags that allow search engines to read the contents of the site and automatically “pick up” the necessary data. When a site is going to be advertised, microdata is used for more complete indexing – adding information about the site to search engine databases. Microdata has a major disadvantage: you can’t add a code fragment to a section, you have to mark each HTML element separately.

How and where to add microdata?

Microdata should be added directly to the HTML code of the pages you want to optimize for search engines. It can be added to any part of the HTML code. For simplicity, let’s look at an example.

Let’s say we have a book selling site and we want to enter information about a book. According to the Schema.org dictionary, we have a data type “Book” and it has the properties “title”, “author” and “publication date”.

Now, using JSON-LD syntax, we’ll write it like this:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "Book",
 "name": "Book 1",
 "author": "Author 1",
 "datePublished": "2022-01-20"
}
</script>

In this example, @type, “name”, “author”, “datePublished” are words from the dictionary (types and properties), and everything inside the curly brackets is JSON-LD syntax, showing how to structure and write information.

Now let’s figure out where exactly the microdata should be written.

Why micradata is important

Breadcrumbs

Here is a simple example of breadcrumbs using Schema.org for an online women’s clothing store:

<nav aria-label="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  <ol>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemtype="http://schema.org/Thing" itemprop="item" href="http://example.com/dresses">
        <span itemprop="name">Books</span>
      </a> 
      <meta itemprop="position" content="1" />
    </li>
    > 
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemtype="http://schema.org/Thing" itemprop="item" href="http://example.com/dresses/leather">
        <span itemprop="name">Book about trees</span>
      </a> 
      <meta itemprop="position" content="2" />
    </li>
  </ol>
</nav>

In the example above, the overall breadcrumb list (BreadcrumbList) is defined first, then each item in that list (ListItem). Each ListItem contains a link to the page and a meta tag indicating its position in the overall list.

This example illustrates two levels of navigation: “Dresses” and “Leather Dresses”. The first item “Dresses” has position 1, and “Leather Dresses” has position 2. This reflects the structure of the site and the user’s path to the current page.

It is important that each breadcrumb element is represented using the appropriate itemprop=”itemListElement” and itemscope itemtype=”http://schema.org/ListItem” tags, and that each element has its itemprop=”position” position specified in the breadcrumb list order.

Please note! There is another small trick with microdata for breadcrumbs. Even if there are no breadcrumbs physically on your site, you can specify them via microdata, either via meta tags or via JSON.

Company information

Company information can lead to sales even without going to the site. If phone numbers or other contacts are immediately visible in the snippet, the user can immediately use them, so as not to waste time searching the site.

Here is an example of microdata:

<div itemscope itemtype="http://schema.org/Organization">
  <h1 itemprop="name">Your company name</h1>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <p>
      <span itemprop="streetAddress">Street, address</span>,
      <span itemprop="postalCode">Postal code</span>, 
      <span itemprop="addressLocality">City</span>, 
      <span itemprop="addressCountry">Country</span>
    </p>
  </div>
  <p>Телефон: <span itemprop="telephone">+7 (999) 999-99-99</span></p>
  <p>Email: <a href="mailto:info@example.com" itemprop="email">info@example.com</a></p>
  <link itemprop="url" href="http://www.example.com" />
</div>

Let’s break down what’s what in our example:

  • Company name (name).
  • Company address (address), including street (streetAddress), postal code (postalCode), city or place (addressLocality), and country (addressCountry).
  • Company phone (telephone).
  • Company email (email).
  • Company website (url).

It’s important that the information you provide using microdata matches the information on the web page. Also remember that microdata should not contain important information that is not displayed on the web page.

Reviews and ratings

This is one of the most important pieces of information that a user uses to make a purchase decision. Here’s an example of the markup for them:

<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Product name</h1>
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.5</span> from <span itemprop="bestRating">5</span> based on <span itemprop="ratingCount">301</span> reviews</div>
</div>

In this example:

  • The main body of the HTML markup describes the “product” using Schema.org markup (itemtype=”http://schema.org/Product“);
  • Inside that block is a section that describes the “aggregate rating” or “aggregateRating” of the product;
  • ‘ratingValue’, ‘bestRating’, and ‘ratingCount’ represent the rating value, best possible rating, and total number of reviews, respectively.

Questions and Answers (FAQ)

An example of microdata for FAQ (frequently asked questions) using Schema.org and JSON-LD can be described as follows:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "What about cats?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Text about cats"
    }
  },{
    "@type": "Question",
    "name": "What microdata is?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Micro-markup helps search engines better understand the content of your site."
    }
  }]
}
</script>

In this code you see two main components: Question and Answer. Each question has a “name” (the text of the question), and each answer contains a “text” (the text of the answer). All of this is wrapped in a common context indicating that this is a FAQ Page.

Product Cards

If we wanted to make microdata for a product, we could use the following elements:

  • Product: General information about the product.
  • name: Product name.
  • image: Link to the product image.
  • description: Product description.
  • brand: Product brand.
  • offers: Offers related to the product, which may include price, currency, and stock availability.

Here is an example of what microdata in JSON-LD format might look like:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "Умные часы Apple Watch",
  "image": "http://www.example.com/apple-watch.jpg",
  "description": "Smartphone",
  "brand": {
    "@type": "Brand",
    "name": "Apple"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "1555.00",
    "availability": "http://schema.org/InStock"
  }
}
</script>

Note that any information can be more detailed. For example, an offer may be described in more detail, including information about the seller, the proposed price, and the availability of the product.

Articles

This is what the markup for articles or other blog posts might look like:

<div itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="headline">The title of my wonderful article</h1>
    <h2 itemprop="alternativeHeadline">Alternative title of my article</h2>
    <img itemprop="image" src="image.jpg" />
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">Author's name</span>
    </span>
    <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
            <img itemprop="url" src="logo.jpg" />
            <meta itemprop="width" content="600">
            <meta itemprop="height" content="60">
        </div>
        <meta itemprop="name" content="Name">
    </div>
    <meta itemprop="datePublished" content="2023-01-20"/>
    <meta itemprop="dateModified" content="2023-01-20"/>
    <div itemprop="articleBody">
        Text...
    </div>
</div>

In this example, each individual article element (headline, author, image, etc.) is marked up with itemprop attributes with the corresponding properties from Schema.org.

Note that the details depend on your specific content and needs. For example, you might want to include an “articleBody” section as well if you want to display the main text of the article in the markup. Or use “NewsArticle” if it’s a news article.

How to automate the process?

If your site is made using a constructor, you can simplify the process with plugins that help add data without manually writing all the tags.

Here are just the main ones:

  • Google Structured Data. Multifunctional extension for Joomla.
  • Schema.org Metatag. Extension for Drupal.
  • Schema.org plugin. Extension for any sites built on the 1C-Bitrix platform.
  • Schema. Paid extension for WordPress.

Is there a simpler way to solve this problem?

Yes, you can. You can order website development from us and use the promotion services of specialists from OPRK Marketing.

Latest Blogs

Let's start work

OR