Getting Started with Schemas Using Schema.org

INTRODUCTION

Web pages are intended to be viewed and understood by people. Interpreting the content on a web page requires a person's understanding of language and context. However, despite being easily understood by people, search engines might have a harder time determining what these pages are about. It is this lack of understanding by the search engines that might prevent your web pages from appearing in the search results that you want them to.

To help solve this problem, the schema.org vocabulary provides a way to use schemas to classify content on web pages so that search engines can understand that content better. For example, you might use schema.org vocabulary to describe the type of business that you have or the details about a product that you are selling.

The additional information provided by the schema.org vocabulary can help search engines generate more relevant search results. Consequently, by incorporating this vocabulary into your web pages, you can help those pages appear more prominently and accurately in search results.

THE SCHEMA.ORG VOCABULARY

The schema.org vocabulary includes a wide variety of item types that can be used to describe the content on your web pages. The vocabulary is organized as a hierarchy of broader "parent" items that have more specific "child" items beneath them.

Some common schema.org item types include:

Each item type has properties specific to that item type and properties that are inherited from its parent, if it has one. For example, some of the Article item type properties include:

articleBody
articleSection
author (inherited from CreativeWork)

The schema.org website has a full list of item types.

HOW DO YOU USE SCHEMA.ORG VOCABULARY?

The schema.org vocabulary is added to your web pages as structured data. The idea behind structured data is to create a standard format for describing the content on a web page that is intended to be understood by all search engines.

Structured data is additional code that you add to your web pages to describe the different elements on the page, such as businesses, events, and people. Structured data can take different forms, such as HTML5 attributes and JSON.

When you use the schema.org vocabulary as structured data, it could appear in Google as rich results, special search results that include images, styling, and additional features. Having your content appear as rich results can improve your search engine traffic because your web pages stand out from regular search results.

Google offers a wide variety of search engine features that are available depending on the type of structured data that you use on your website pages.

SCHEMA.ORG FORMATS

The schema.org vocabulary is usually added as structured data in the following formats:

Microdata - a set of tags to describe content that was introduced with HTML5
RDFa - an HTML5 attribute extension
JSON-LD - a method to encode Linked Data using JSON

Note: Google recommends using JSON-LD for structured data.

Both Microdata and RDFa will require you to update your HTML code while JSON-LD will be added as separate code to your web pages.

EXAMPLES

Listed below are schema.org examples for the Microdata, RDFa, and JSON-LD formats with a description of our business used as the content. Note that the JSON-LD format does not alter the original HTML code.

Here is what the HTML code might look like before adding schema.org markup:

BEFORE SCHEMA.ORG MARKUP


<h1>Daya Web, Inc.</h1>
<p>
    <img src="https://www.dayaweb.com/wp-content/themes/dayaweb_v2/img/logo-text-only-100.jpg" /><br>
    A Custom Website Development Company
</p>
<p>
    Long Beach, CA 90806<br>
    562-304-5791
</p>
<p>
    URL: <a href="https://www.dayaweb.com">https://www.dayaweb.com</a>
</p>
<p>
    Find us on social media:
</p>
<ul>
    <li><a href="https://www.facebook.com/dayawebinc/">Facebook</a></li>
    <li><a href="https://twitter.com/dayaweb">Twitter</a></li>
    <li><a href="https://www.linkedin.com/company/daya-web-inc-"">LinkedIn</a></li>
</ul>

MICRODATA EXAMPLE

In the example below, notice how the original HTML code has been wrapped in a <div> tag and an attribute added to identify this as an "Organization" item type. We've also added some other itemprop attributes to define other information about the business.

<div itemscope itemtype="http://schema.org/Organization">
    <h1 itemprop="name">Daya Web, Inc.</h1>
    <p>
        <img itemprop="logo" src="https://www.dayaweb.com/wp-content/themes/dayaweb_v2/img/logo-text-only-100.jpg" /><br>
        <span itemprop="description">A Custom Website Development Company</span>
    </p>
    <p>
        <span itemprop="address">Long Beach, CA 90806</span><br>
        <span itemprop="telephone">562-304-5791</span>
    </p>
    <p>
        URL: <a itemprop="url" href="https://www.dayaweb.com">https://www.dayaweb.com</a>
    </p>
    <p>
        Find us on social media:
    </p>
    <ul>
        <li><a itemprop="sameAs" href="https://www.facebook.com/dayawebinc/">Facebook</a></li>
        <li><a itemprop="sameAs" href="https://twitter.com/dayaweb">Twitter</a></li>
        <li><a itemprop="sameAs" href="https://www.linkedin.com/company/daya-web-inc-">LinkedIn</a></li>
    </ul>
</div>

RDFa EXAMPLE

The RDFa format is similar to the Microdata format - the original HTML code is wrapped in a <div> tag and attributes are used to define the item type and additional information about the business.

<div vocab="http://schema.org/" typeof="Organization">
    <h1 property="name">Daya Web, Inc.</h1>
    <p>
        <img property="logo" src="https://www.dayaweb.com/wp-content/themes/dayaweb_v2/img/logo-text-only-100.jpg" /><br>
        <span property="description">A Custom Website Development Company</span>
    </p>
    <p>
        <span property="address">Long Beach, CA 90806</span><br>
        <span property="telephone">562-304-5791</span>
    </p>
    <p>
        URL: <a property="url" href="https://www.dayaweb.com">https://www.dayaweb.com</a>
    </p>
    <p>
        Find us on social media:
    </p>
    <ul>
        <li><a property="sameAs" href="https://www.facebook.com/dayawebinc/">Facebook</a></li>
        <li><a property="sameAs" href="https://twitter.com/dayaweb">Twitter</a></li>
        <li><a property="sameAs" href="https://www.linkedin.com/company/daya-web-inc-">LinkedIn</a></li>
    </ul>
</div>

JSON-LD EXAMPLE

Using JSON-LD does not require your original HTML code to be modified. The example below would be added to either the <head> or <body> section of your web page. Note how the format is very different from Microdata and RDFa.

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Organization",
    "address": "Long Beach, CA 90806",
    "description": "A Custom Website Development Company",
    "logo": "https://www.dayaweb.com/wp-content/themes/dayaweb_v2/img/logo-text-only-100.jpg",
    "name": "Daya Web, Inc.",
    "sameAs": [ 
        "https://www.facebook.com/dayawebinc/",
        "https://twitter.com/dayaweb",
        "https://www.linkedin.com/company/daya-web-inc-" 
    ],
    "telephone": "562-304-5791",
    "url": "https://www.dayaweb.com"
}
</script>

ADDING SCHEMA.ORG MARKUP

Once you become familiar with the schema.org vocabulary, you can start adding schema.org markup to your web pages using your preferred format (Microdata, RDFa, JSON-LD). You can also use a tool like Google's Structured Data Markup Helper.

When adding schema.org vocabulary to your website, you will need to determine which item type is most appropriate for the content that you are adding markup to.

TESTING YOUR SCHEMA.ORG MARKUP

You can test your marked up website pages using Google's Structured Data Testing Tool.

Once your website has been crawled with the newly added schema.org markup, you can check the rich results status reports in Google Search Console.

CONCLUSION

Marking up your web pages using the schema.org vocabulary can make it much easier for search engines to understand the content on your web pages. Consequently, people will be able to find your content in more useful and relevant ways. Additionally, it has the potential to give you the edge over your competition by improving your search engine traffic.