Boost your click-through rate with schema.org! The basics of JSON-LD markup

Have you ever noticed, when searching for a restaurant's name, that information such as its business hours, address, and a map appears on the right side of the search results screen?
You may have also seen star ratings or price ranges displayed beneath the title of a restaurant's website in the search results.

Google collects information from the sites shown in search results and displays it as extra information—beyond the basics—in what's called the Knowledge Panel (on the right side of the page) or in Rich Snippets. Images and videos catch the eye, and intriguing reviews tempt users to click on the site.
This kind of extra information is more likely to be displayed when you implement structured data markup based on schema.org notation, allowing search engines to better understand the details of your site.

schema.org is a notation method that lets you convey more detailed information about your site to search engines.
When humans look at a page, we can visually understand what each piece of text represents—this is a site name, this is an address, this is a phone number, and so on. But robots can't do this on their own.
Data written in a fixed, standardized format so that the search engine robots that crawl websites can also understand it is called "structured data."

By describing your site's information in the format defined by schema.org, you can tell search engines what kind of site yours is, what content it contains, and what topics it relates to. As a result, more specific information about your site—such as its details, ratings, and images—can be displayed in Rich Snippets or the Knowledge Panel on the search results page. This is helpful because users can grasp an overview of your site without even clicking, and it also tends to attract their interest, leading to more clicks.

Whether Rich Snippets are actually displayed is up to Google, so there's no guarantee they will appear as you intend. However, since this helps search engine robots analyze your site's content more accurately, it's worth setting up.

Also, schema.org was jointly developed by Google, Microsoft (Bing), and Yahoo!, and Bing has announced that it currently supports schema.org as well—not just Google. So, from an SEO perspective, schema.org is something to keep an eye on going forward.

You'll need a basic understanding of HTML to set this up. However, even if you don't have HTML knowledge, you can easily mark up your site using Google's Data Highlighter feature. We've introduced this in a previous TIPS article, so please refer to it as well.

vol.74 Easy Structured Data: Let's Try the Data Highlighter

To mark up your content according to schema.org, you need to:
1. Choose a type that matches your page's content
2. Fill in information according to the properties defined for that type

Schemas are made up of "types" such as Recipe, Product, Article, Person, and Organization, and the "properties" you can set differ depending on the type.
You can check which properties are available on the schema.org website's type listings.

schema.org Type Listings

A typical company can use the "Corporation" type, but you can also choose a more specific type depending on your business—for example, "Attorney" for a law firm's site, or "FoodEstablishment" or "Restaurant" for a café's site.

There are several ways to describe schema.org, such as Microdata or RDFa (which embed the markup directly into each content section) and JSON-LD (which collects all the markup in one block within the page).
In this article, we'll introduce JSON-LD, which is Google's recommended method and what we use at BOEL.

In the JSON-LD method, the markup is written inside the HTML section. You write the items inside a tag that declares you're using JSON-LD format.

In schema.org, each block of information is enclosed in curly braces "{ }".
Inside the curly braces, you write a property corresponding to the type (the "key") and the site-specific information that serves as its value.
The key and value are separated by a colon ":" and each is enclosed in double quotation marks """.
When a "key:value" pair is followed by another key, place a comma "," after the value.
*Keys prefixed with @ are special keys called "keywords."

Now, let's take a look at part of the actual markup on the BOEL website as an example.

<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Corporation",
"name":"株式会社BOEL",
"alternateName":"BOEL Inc.",
"description":"ブランディング、デザインのことならBOEL Inc. ブランド戦略からビジュアルコミュニケーションに至るまでユーザー中心のデザインプロセスを通じ、顧客が満足する価値あるクリエイティブとカスタマーエクスペリエンスを提供します。 We are BOEL -based creative agency. We will help improve the business value of the company through the design process of user-centered design.",
"founder":"Teppei Tazawa",
"foundingDate":"13 May,2010",
"url":"https://boel.jp",
"address":{
"@type":"PostalAddress",
"addressLocality":"Tokyo",
"addressRegion":"JP",
"postalCode":"1520004",
"streetAddress":"3-23-10 TAKABAN MEGURO-KU"
},
"sameAs":[
"https://boel.co.jp","https://www.facebook.com/BOEL.Inc",
"https://twitter.com/BOEL_Inc",
"https://plus.google.com/+BoelJpInc/posts",
"http://boel-inc.tumblr.com"
]
}
</script>

First, the entire markup is wrapped in a "script type" tag.

"@context":"https://schema.org",
"@type":"Corporation",

Below the @type, you write the properties available for the specified type as keys.
Which properties are available is defined by schema.org.
At BOEL, we selected properties from those available for "Corporation," aiming to ensure that the minimum essential company information is properly displayed in search results. For the value corresponding to each key, fill in your site's unique information.

"name":"株式会社BOEL", 
"alternateName":"BOEL Inc.", 
"description":"ブランディング、デザインのことならBOEL Inc. ブランド戦略からビジュアルコミュニケーションに至るまでユーザー中心のデザインプロセスを通じ、顧客が満足する価値あるクリエイティブとカスタマーエクスペリエンスを提供します。 We are BOEL -based creative agency. We will help improve the business value of the company through the design process of user-centered design.", 
"founder":"Teppei Tazawa", 
"foundingDate":"13 May,2010", 

From the list of properties available for "Corporation" in schema.org, we've included the following items.

schema.org Corporation Property List

The next section, "address," is slightly more complex.

"address":{
  "@type":"PostalAddress",
  "addressLocality":"Tokyo",
  "addressRegion":"JP”,
  "postalCode":"1520004",
  "streetAddress":"3-23-10 TAKABAN MEGURO-KU"
},

If you check the "address" property in the list of properties available for "Corporation" on schema.org, you'll find that it accepts either plain text or a "PostalAddress" value.
You can simply enter the address as text—like "address":"3-23-10 TAKABAN MEGURO-KU,Tokyo 1520004,Japan"—but to convey the meaning of each component more accurately, you can embed the "PostalAddress" type within "address." This technique is called "embedding."
Below ""@type":"PostalAddress",", we've added properties available for "PostalAddress": "addressLocality" = locality, "addressRegion" = country/region, "postalCode" = postal code, and "streetAddress" = street address.

When you want to assign multiple values to a single key, enclose them in square brackets "[ ]"—as in the "sameAs" example below. This notation is called an "array." Since "sameAs" is a property for listing related URLs, here we've specified BOEL's related URLs.

"sameAs":[
"https://boel.co.jp","https://www.facebook.com/BOEL.Inc",
"https://twitter.com/BOEL_Inc",
"https://plus.google.com/+BoelJpInc/posts",
"http://boel-inc.tumblr.com"
]

Once you've finished writing your markup, use Google's Structured Data Testing Tool to verify that it displays correctly. You can check whether your markup is written properly by entering your URL into the testing tool or by pasting the relevant code into the "Code Snippet" field.

Google Structured Data Testing Tool

How was that?
schema.org has a wide variety of properties, so start by picking out the important information you want to convey to cover the basics.
Since this is a key factor affecting your site's click-through rate, definitely give it a try.