Schema.org: The popular Web standard you’ve never heard of

• Schema.org: The Popular Web Standard You’ve Never Heard Of 🤫
• Original author: david.js
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: lhd951220
• Proofreader: Rachelcdev, Noirlyrik

What is Schema.org?

Schema.org is an open standard created by Google, Microsoft, Yahoo, and Yandex. It was released in version V1 in April 2013. Yes, it has been around for quite some time. However, it continues to evolve to support people using the web in new and unknown ways.

So what is it? According to the Schema.org homepage:

Schema.org is a community-driven initiative that creates, maintains, and promotes patterns for structured data on the Internet, web, email, and other platforms.

To summarize: Schema.org gives meaning to web content. It builds on semantic HTML elements and gives rich meaning to web content.

Like semantic HTML, Schema.org is also used to aid in search engine optimization (SEO). By adding more contextual information to your content, search engines can better parse your content and better categorize your content, making it easier for people to find. Search engines can also use this structured data to create rich preview information.

Preview information for Avengers: Endgame on IMDb shows ratings in search results. This is because IMDb uses Schema.org to mark their content appropriately.

Looking at Schema.org from another perspective, it is similar to ARIA, but it is for SEO rather than accessibility. This allows you to enhance specific users (in this case, the search engine) without modifying the functionality of the site.

Add Schema.org for HTML content

Schema.org supports several encoding methods, but the most common one is Microdata, which allows you to use schema data tags directly through HTML attributes.

The API is very simple. There are only three properties:

• itemtype: Defines the schema for an item.
• itemscope: Defines a container for an item.
• itemprop: Defines attributes on items.

The basic use

Here’s a simple example of using the Person type:

<div itemscope itemtype="https://schema.org/Person">
  <img
    src="/david-leger.png"
    alt="mid-twenties male with brown hair and blue eyes"
    itemprop="image"
  />
  <h1 itemprop="name">David Leger</h1>
  <p itemprop="description">
    Hey! I'm dave.js and I'm from <span itemprop="nationality">Canada</span>. I
    love writing <span itemprop="knowsAbout">JavaScript</span>.<span itemprop="knowsAbout">HTML</span>, and
    <span itemprop="knowsAbout">CSS</span>!
  </p>
</div>
Copy the code

Itemscope and ItemType are set on the top

The itemType value is the URL of the document of the type you want to use. To see which itemType and ItemProp values are best for your content, you can consult the Schema.org documentation for detailed descriptions and examples of how to use each schema type.

Notice how description wraps two additional ItemProp. Regardless of the level of the tag, itemProps will be associated with the nearest ancestor itemScope. We can also define multiple instances of the same ItemProp, as knowsAbout does.

Nested items

What if we want to nest one item inside another? To do this, we can define a new ItemScope. Extend our Person item and add a PostalAddress.

<div itemscope itemtype="https://schema.org/Person">
  <img
    src="/david-leger.png"
    alt="mid-twenties male with brown hair and blue eyes"
    itemprop="image"
  />
  <h1 itemprop="name">David Leger</h1>
  <p itemprop="description">.</p>
  <address
    itemprop="address"
    itemscope
    itemtype="https://schema.org/PostalAddress"
  >
    <span itemprop="streetAddress">1505 Barrington Street</span><br />
    <span itemprop="addressLocality">Halifax</span><br />
    <span itemprop="addressRegion">Nova Scotia</span>
  </address>
</div>
Copy the code

By adding itemScope to the

Hidden data

Sometimes, we want to provide contextual information to search engines, but we don’t want to display it on the page. This can be done by using the
tag. This might seem a little strange, since the
tag is usually used in the of a web page, but Schema.org recommends using the meta tag for hidden content.

For the Person item, let’s use the
tag to add my nickname (david.js).

<div itemscope itemtype="https://schema.org/Person">
  <img
    src="/david-leger.png"
    alt="mid-twenties male with brown hair and blue eyes"
    itemprop="image"
  />
  <h1 itemprop="name">David Leger</h1>
  <p itemprop="description">.</p>
  <address
    itemprop="address"
    itemscope
    itemtype="https://schema.org/PostalAddress"
  >.</address>
  <meta itemprop="alternateName" content="dave.js" />
</div>
Copy the code

Test the Schema.org project

Testing your project is simple. Google provides a structured data testing tool to test your project. It parses your HTML and displays a tree of how to parse the attributes in the item. If required or suggested attributes in an ItemType are missing, errors and warnings resulting from those missing attributes are displayed.

Here is an example of our parsing using structured test tools:

Active criteria

Schema.org is an open source community project. Although it has the support of major companies such as Google, Microsoft and Mozilla, the public is still encouraged to contribute. Although Schema.org has been around since 2013, it is an active standard for adapting to the needs of the web. For example, recent releases include item types such as COVID-19 TestingFacility to help with COVID-19 relief efforts.

Check out the documentation to learn more about Schema.org and its use. There are numerous patterns for different types of items and detailed documentation on how to use them.

If you want to contribute to Schema.org, visit the community page to learn how to help.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.