Luke a Pro

Luke Sun

Developer & Marketer

Let search engine know your page better by using Schema.org

Published: Sun Dec 25 2022 , 10 minutes reading.

Schema.org is a standardized vocabulary of microdata tags (or schema) used to annotate and describe web pages. The annotations provide search engines with more information about the content on a page, allowing for better and more accurate representation in search results. Schema.org is supported by major search engines including Google, Bing, and Yahoo.

using schema.org on your website is recommended. It helps search engines understand the structure and content of your website, improving the way your site appears in search results and potentially increasing visibility and traffic.

Does schema.org help my website’s SEO?

Yes, using schema.org can help improve your website’s SEO. By providing more information about the content on your website, schema helps search engines better understand and index your pages. This can result in better representation in search results, potentially increasing visibility and click-through rate, which can lead to improved search engine rankings. However, it is important to note that schema is just one factor that can impact SEO, and a comprehensive SEO strategy should include other elements such as high-quality content, user experience, and technical optimization.

How to use schema.org on your webpage?

To use schema.org on your website, follow these steps:

  • Determine the type of content on your page (e.g. article, product, event, etc.).
  • Choose the appropriate schema from the schema.org library that describes the content on your page.
  • Add the schema to your HTML code, either by using microdata tags or JSON-LD.
  • Test your implementation using Google’s Structured Data Testing Tool to ensure it is correctly applied and functioning.

Note: It’s important to ensure that the schema accurately describes the content on your page, as incorrect implementation can have a negative impact on search results.

an JSON-LD example

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Apple iPhone X",
  "image": "https://example.com/iphonex.jpg",
  "description": "The latest iPhone with edge-to-edge display and facial recognition.",
  "brand": {
    "@type": "Thing",
    "name": "Apple"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "200"
  }
}
</script>

In this example, @type is set to “Product” to indicate the content is a product page. The aggregateRating property provides the average rating value of 4.5 based on 200 reviews.

same example in microdata tags format

<div itemscope itemtype="http://schema.org/Product">
  <img itemprop="image" src="https://example.com/iphonex.jpg" alt="Apple iPhone X">
  <h1 itemprop="name">Apple iPhone X</h1>
  <p itemprop="description">The latest iPhone with edge-to-edge display and facial recognition.</p>
  <div itemprop="brand" itemscope itemtype="http://schema.org/Thing">
    <meta itemprop="name" content="Apple">
  </div>
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <meta itemprop="ratingValue" content="4.5">
    <meta itemprop="reviewCount" content="200">
  </div>
</div>

In this example, the itemscope and itemtype attributes are used to specify the type of content and the itemprop attribute is used to provide additional information about the content. The aggregateRating property provides the average rating value of 4.5 based on 200 reviews.

A blog post example

<div itemscope itemtype="http://schema.org/BlogPosting">
  <h1 itemprop="headline">The Benefits of Regular Exercise</h1>
  <div itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="John Doe">
  </div>
  <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="Acme Inc.">
    <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <meta itemprop="url" content="https://example.com/logo.png">
    </div>
  </div>
  <meta itemprop="datePublished" content="2021-01-01T12:00:00+00:00">
  <meta itemprop="dateModified" content="2021-02-01T12:00:00+00:00">
  <div itemprop="articleBody">
    <p>Exercise has numerous physical and mental health benefits. Regular exercise can improve cardiovascular health, strengthen muscles and bones, and boost mood and self-esteem. It can also help with weight management and reduce the risk of chronic diseases such as heart disease, stroke, and diabetes.</p>
    <p>To get the most out of exercise, it is recommended to aim for at least 30 minutes of moderate activity, such as brisk walking, every day. This can be broken up into shorter 10-minute increments if needed. Find an activity you enjoy and make it a part of your daily routine for optimal benefits.</p>
  </div>
</div>

In this example, the itemscope and itemtype attributes are used to specify the type of content and the itemprop attribute is used to provide additional information about the content. The BlogPosting type is used to describe the blog post and the Person and Organization types are used to describe the author and publisher, respectively.

More examples

We will try to use two different way to describe a Person.

Microdata format

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">John Doe</span>
  <meta itemprop="birthDate" content="1980-01-01">
  <meta itemprop="gender" content="Male">
  <span itemprop="jobTitle">Software Engineer</span>
  <div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Acme Inc.</span>
    <meta itemprop="sameAs" content="https://www.acmeinc.com">
  </div>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">123 Main St.</span>
    <span itemprop="addressLocality">Anytown</span>
    <span itemprop="addressRegion">State</span>
    <span itemprop="postalCode">12345</span>
    <span itemprop="addressCountry">USA</span>
  </div>
  <meta itemprop="email" content="[email protected]">
  <meta itemprop="telephone" content="+1-555-555-1212">
  <meta itemprop="url" content="https://www.johndoe.com">
</div>

In this example, the itemscope and itemtype attributes are used to define the scope and type of the object. The itemprop attribute is used to specify the properties of the object and their values. The Person object has several properties such as name, birthDate, gender, jobTitle, worksFor, address, email, telephone, and url that provide additional information about the person. The worksFor and address properties are examples of nested objects and use the itemscope and itemtype attributes to define their scope and type.

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "John Doe",
  "birthDate": "1980-01-01",
  "gender": "Male",
  "jobTitle": "Software Engineer",
  "worksFor": {
    "@type": "Organization",
    "name": "Acme Inc.",
    "sameAs": "https://www.acmeinc.com"
  },
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St.",
    "addressLocality": "Anytown",
    "addressRegion": "State",
    "postalCode": "12345",
    "addressCountry": "USA"
  },
  "email": "[email protected]",
  "telephone": "+1-555-555-1212",
  "url": "https://www.johndoe.com"
}
</script>

In this example, the @context attribute is used to specify the schema.org context, and the @type attribute is used to specify the type of object. The Person object has several properties such as name, birthDate, gender, jobTitle, worksFor, address, email, telephone, and url that provide additional information about the person. The worksFor property is an example of a nested object and uses the Organization type to describe the person’s employer.

Should I use microdata or JSON-LD?

Both microdata and JSON-LD formats are recommended for use with schema.org. The choice between the two formats typically depends on personal preference and the specific use case.

Microdata is an HTML-based format that uses HTML attributes to embed schema.org information directly into the HTML content. It is easy to implement and can be read by search engines and other web crawlers.

JSON-LD (JavaScript Object Notation for Linked Data) is a JavaScript-based format that uses a script tag to provide schema.org information. It is less intrusive than microdata and can be added to a page without modifying the HTML content. JSON-LD is also more flexible and can be used for a wider range of applications, including non-HTML content.

Ultimately, both formats have their strengths and weaknesses and either can be used effectively for schema.org implementation. It is recommended to choose the format that is most suitable for the specific needs of your website and use case. if you want to add schema to an existing website then maybe using JSON-LD format is a good way without changing the webpage’s structure.