Skip to content

Microdata🔗

Microdata are structured data about your content to help search engines or social networks to understand and qualify your content.

Microdata are documented on schema.org.

Microdata can describe things your website deals with, like articles, products, job offers, rents, cars, events, books, movies, hotel rooms, ... or more generic stuff like breadcrumbs, dates or times.

Each page can have microdata about things the page contains.

See documentation for full list.

Content with microdata can the be displayed in Google top results or in dedicated search engine like Google Careers or Google Travel.

HTML attribute🔗

You can define microdata directly in html attribute by respecting properties tree defined by schema.org.

For example a job offer:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<article itemscope itemtype="https://schema.org/JobPosting">
  <aside>
    <p>
      Salaire : Entre 25k€ et 35k€
      <meta itemprop="baseSalary" itemscope itemtype="https://schema.org/MonetaryAmount">
        <meta itemprop="currency" content="EUR"></meta>
        <meta itemprop="value" itemscope itemtype="https://schema.org/QuantitativeValue">
          <meta itemprop="minValue" content="25000"></meta>
          <meta itemprop="maxValue" content="35000"></meta>
          <meta itemprop="unitText" content="YEAR"></meta>
        </meta>
      </meta>
    </p>
    <p>
      CDI
      <span itemprop="employmentType" content="FULL_TIME"></span>
    </p>
    <p>
      Experience :
      <span itemprop="experienceRequirements">3 à 5 ans</span>
    </p>
    <p>
      Publiée le :
      <time datetime="2020-07-01T12:15:35" itemprop="datePosted" content="2020-07-01T12:15:35">aujourd'hui</time>
    </p>
    <!-- ... -->
  </aside>
</article>

Each non scalar type must be typed. You can set the content in the html tag or in the content property. You can use <meta> tags for complex types.

Example for a breadcrumb:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<nav class="breadcrumb">
  <ul itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemtype="https://schema.org/Thing" itemprop="item" href="/fr/">
        <span itemprop="name">Accueil</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemtype="https://schema.org/Thing" itemprop="item" href="/fr/offres-emploi">
        <span itemprop="name">Toutes les offres d'emploi</span>
      </a>
      <meta itemprop="position" content="2">
    </li>
  </ul>
</nav>

JSON-LD🔗

Instead using html properties, you can describe your microdata in JSON-LD inside a <script> tag:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "JobPosting",
  "baseSalary": {
    "@type": "MonetaryAmount",
    "currency": "EUR",
    "value": {
      "@type": "QuantitativeValue",
      "minValue": "25000",
      "maxValue": "35000",
      "unitText": "YEAR"
    }
  },
  "employmentType": "FULL_TIME",
  "experienceRequirements": "3 à 5 ans",
  "datePosted": "2020-07-01T12:15:35"
}
</script>

or:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Accueil",
      "item": "/fr/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Toutes les offres d'emploi",
      "item": "/fr/offres-emploi"
    }
  ]
}
</script>

You can describe several schemas in your page, a JobPosting, a BreadcrumbList and a Organization entity for example.

You can put the <script> tag where you want in the HTML.

Main Entity🔗

If your have several entities in your page, you can define one of them as main entity.

You can use the mainEntityOfPage property or the mainEntity property.

Testing tool🔗

In order to test if search engines can read and understand your microdata, Google provides a schema validator.

Go to https://search.google.com/test/rich-results and enter an URL or a code sample to test it.

It will shows you errors you have to fix in order to be indexed and warnings with optional recommandations to improve your microdata.

Resources🔗

  • https://schema.org/
  • https://developers.google.com/search/docs/data-types/article?hl=fr
  • https://www.alsacreations.com/article/lire/1509-microdata-microformats-schema-semantique.html
  • https://search.google.com/structured-data/testing-tool

Project references🔗

Last update: December 20, 2024