What is structured data markup?
Structured data markup (eng.“Structured data markup”) is an additional way to mark up website content. It enables machines (read: search engines) to better understand the content of a web page, and thereby display search results related to that page more effectively (see the image).
Structured content markup is implemented using the knowledge that different types of content have their own specific characteristics. Those specific content characteristics are collected in one place in the form of a vocabulary (eng. vocabulary). Vocabularies are sets of property/value pairs that describe content in more detail. The major search engines Google, Microsoft, and Yahoo agreed to standardize properties into a single vocabulary called schema.org. Each specific content type has its own set of pairs, so content related to a restaurant is described by the following properties:
- opening hours
- address
- reservations
- menu
while content related to a book is described by the following properties:
- number of pages
- ISBN number
- illustrator
Property names standardized within the schema.org vocabulary can be embedded in web pages through three different syntaxes:
- Microdata
- RDFa
- JSON-LD
The choice of syntax is left to the developer and their personal preference.
Does it improve SEO?
Personalization and localization of search (especially pronounced for mobile search) is the future of search engines, and since structured data provides such details to search, the opinion is that it will improve site ranking. Based on the statement from the marketing agency “Moz“, it can be concluded that structured data markup will be one of the key factors in the future:
“The days of keyword domination are over”
Schema.org vocabulary
Schema.org is the best-known web presentation of a vocabulary with a large number of predefined use cases. The most basic concept is Thing, while all others inherit its properties and add their own characteristic ones. Thus the concept “Place” inherits the concept “Thing”, and the concept “LocalBusines” inherits both of the previously mentioned concepts. You can browse all types arranged hierarchically here.
Validate written JSON-LD code at linter.structured-data.org, and validate a site with structured data on Google’s Testing Tool.
An excellent article with well-documented examples of using structured data via microdata or JSON-LD syntax can be found on Builtvisible.
Syntax
Microdata
Microdata is a collection of HTML 5 attributes that help describe some content. To insert a property (eng. property) from a schema into HTML code, we need to use HTML attributes:
- itemscope – defines the tag within which structured markup is applied with the itemprop attribute. It always goes together with the itemtype attribute, which defines which schema will be used
- itemtype – defines which schema will be used within a given tag
- itemprop – defines the property associated with that tag, usually inserted through a span tag
Example
In the following example, the company name is structurally marked with the name property, which is part of the simplest (initial) Thing schema, whose properties are inherited by the Organization schema.
|
1 2 3 |
<div> <p>Ime firme je ProSystem Studio</p> </div> |
|
1 2 3 |
<div itemscope itmetype="http://schema.org/Organization"> <p>Ime firme je <span itemprop="name">ProSystem Studio</span></p> </div> |
An application with examples and code validation for microdata syntax is available at foolip.org or linter.structured-data.org, while the Google Chrome extension Semantic inspector displays structure written with HTML Microdata.
RDFe
RDFa has a very similar syntax to microdata; it also uses attributes within HTML
- vocab – defines which vocabulary is used, e.g. vocab=”http://schema.org/”
- typeof – defines which schema will be used within a given tag
- porperty – defines the property associated with that tag, usually inserted through a span tag
|
1 2 3 |
<div> <p>Ime firme je ProSystem Studio</p> </div> |
|
1 2 3 |
<div vocab="http://schema.org/Organization" typeof="Organization"> <p>Ime firme je <span property="name">ProSystem Studio</span></p> </div> |
Learn more on the official RDFa- Lite page, and you can validate code at linter.structured-data.org
JSON-LD
JSON-LD is the newest syntax based on JSON (the so-called Linked Data format), and it allows JSON data to be inserted through a script anywhere in HTML. Since the data is placed in one location, this type of syntax is easier to review.
Example
@context is related to vocabulary selection, while @type indicates the schema type from the vocabulary.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "name": "John Doe", "jobTitle": "Graduate research assistant", "affiliation": "University of Dreams", "additionalName": "Johnny", "url": "http://www.example.com", "address": { "@type": "PostalAddress", "streetAddress": "1234 Peach Drive", "addressLocality": "Wonderland", "addressRegion": "Georgia" } } </script> |
Visit Google’s developer site to validate the JSON-LD format at https://developers.google.com/structured-data/testing-tool/, while an excellent site for practice is json-ld.org/playground
Benefits of structured data markup
Knowledge Graph
When website content is structurally marked up, search engines display it in search results in a detailed and prominent way. This detailed display of search results is called “Knowledge Graph” and depends on the type of content. The choice of properties to be displayed depends on the content type, i.e. on the vocabulary type used.
Example
If a hotel is involved, the knowledge graph can contain the following data (see the image):
- Location map
- Review (average rating and star display)
- Address
- Phone
- Opening hours
- Images
- Additional information
Logo display
Using structured markup, we can define which image will be displayed as a logo in search results. The logo will appear in standard search results and also in the detailed display known as the Knowledge Graph. We will use the “Organization” schema and its “logo” and “url” properties.
Example
In the following example, the JSON-LD syntax was used:
|
1 2 3 4 5 6 7 8 9 |
<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "name" : "[organization name]", "logo" : "[logo image url]", "url" : "[website url]", } </script>> |
|
1 2 3 4 |
<div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">[organization name]</span> <img src="[logo image url]" itemprop="logo" /> <a href="[website url]">Website</a> |
Corporate data display
Displaying corporate data in search results, such as a customer service phone number or company address, provides quick search results so users can access important information without opening the page. To display corporate data, we use the “Organization” schema and the “ContactPoint” sub-schema. This structured markup is only possible with JSON-LD syntax.
Example
|
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 29 30 31 32 33 34 35 |
<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "url" : "http://www.t-mobile.com", "contactPoint" : [ { "@type" : "ContactPoint", "telephone" : "+1-877-746-0909", "contactType" : "customer service", "contactOption" : "TollFree", "areaServed" : "US" } , { "@type" : "ContactPoint", "telephone" : "+1-505-998-3793", "contactType" : "customer service" } , { "@type" : "ContactPoint", "telephone" : "+1-877-296-1018", "contactType" : "customer service", "contactOption" : ["HearingImpairedSupported","TollFree"] , "areaServed" : "US" } , { "@type" : "ContactPoint", "telephone" : "+1-877-453-1304", "contactType" : "technical support", "contactOption" : "TollFree", "areaServed" : ["US","CA"], "availableLanguage" : ["English","French"] } , { "@type" : "ContactPoint", "telephone" : "+1-877-453-1304", "contactType" : "bill payment", "contactOption" : "TollFree", "areaServed" : ["US","CA"] } ] } </script> |
To display social network profiles in search results, we need to structurally mark up content using the “sameAs” property from the “Person” vocabulary if it is a person, or from the “Organization” vocabulary if it is a company.
Google recognizes the most popular social networks:
- Google+
- YouTube
- Myspace
- SoundCloud
- Tumblr
Example
In this example, code is shown using two syntaxes: Microdata and JSON-LD, for cases where a person or organization is involved:
|
1 2 3 4 5 |
<span itemscope itemtype="http://schema.org/Organization"> <link itemprop="url" href="http://www.your-company-site.com"> <a itemprop="sameAs" href="http://www.facebook.com/your-company">FB</a> <a itemprop="sameAs" href="http://www.twitter.com/YourCompany">Twitter</a> </span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Person", "name" : "your name", "url" : "http://www.your-site.com", "sameAs" : [ "http://www.facebook.com/your-profile", "http://instagram.com/yourProfile", "http://www.linkedin.com/in/yourprofile", "http://plus.google.com/your_profile" ] } </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "name" : "Your Organization Name", "url" : "http://www.your-site.com", "sameAs" : [ "http://www.facebook.com/your-profile", "http://www.twitter.com/yourProfile", "http://plus.google.com/your_profile" ] } </script> |