What is structural markup?
Structured data markup (eng.“Structured data markup”) is an additional way of marking web page content. It allows machines (read: search engines) to better understand the content of a web page, and therefore to better display search results related to that page (see image).
Structural content markup is implemented using the knowledge that different types of content have their own specific properties. Those specific features of the content are collected in one place in the form of dictionary (eng.vocabulary). Dictionaries are sets of property/value pairs that describe content in more detail. The major search engines Google, Microsoft and Yahoo have agreed to standardize the properties in a single dictionary called schema.org. Each specific type of content has its own set of pairs, so restaurant-related content is described by the following properties:
- working hours
- address
- reservations
- menu
while the content related to the term book is described by the following features:
- number of pages
- ISBN book number
- who is the illustrator
Property names standardized within the schema.org dictionary can be inserted into web pages via three different syntaxes:
- Microdata
- RDFa
- JSON-LD
The choice of syntax is left to the programmer and his personal choice.
Does it improve SEO?
Personalization and localization of search (especially expressed for search from mobile devices) is the future of search engines, and since structured data provides such details search opinion will improve the ranking of the site. Based on the statement of the marketing agency “Moz” it can be concluded that structural data marking will be one of the key factors in the future:
“The days of keyword dominance are over”
Schema.org dictionary
Schema.org is the most famous web presentation dictionary with a large number of predefined cases. The most basic concept is Thing while all others inherit its properties and add their own distinctive ones. Thus, the term “Place” inherits the term “Thing” and the term “LocalBusines” inherits both previously mentioned terms. You can view all types hierarchically stacked here.
Checking the written JSON-LD code at linter.structured-data.org, and checking the structured data site at Google’s Testing Tool.
An excellent article with well-documented examples of using structured data via microdata or JSON-LD syntax can be found at Builtvisible.
Syntax
Microdata
Microdata is a collection of HTML 5 attributes that help describe some content. In order to enter some feature (eng.property) from the schema into the HTML code, we need to use HTML attributes:
- itemscope – defines a tag inside which is structurally marked with the itemprop attribute. It is always accompanied by an itemtype attribute that defines which scheme will be used
- itemtype – defines which scheme will be used within a tag
- itemprop – defines a property related to that tag, usually inserted through the span tag
Example
In the following example, the company name is structurally marked, with the attribute name, which is an integral part of the simplest (initial) schema Thing, and whose properties are inherited by the schema Organization.
|
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 example application and control of code written with microdata syntax is at foolip.org or linter.structured-data.org, while the Google Chrome extension Semantic inspector shows structure written with HTML Microdata.
RDFe
RDFa has a very similar syntax to microdata, it also uses attributes within HTML
- vocab – defines which dictionary is used e.g. vocab=”http://schema.org/”
- typeof – defines which scheme will be used within a tag
- property – defines a property related to that tag, usually inserted through the 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> |
See more about this on the official site RDFa-Lite and you can check the code on the site linter.structured-data.org
JSON-LD
JSON-LD is the latest syntax based on JSON (so-called Linked Data format) and allows inserting JSON data through a script anywhere in HTML. Since the data is entered in one place, this type of syntax is easier to view.
Example
@context is bound to the dictionary selection, while @type indicates the dictionary schema type.
|
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> |
Google’s site for developers to check the JSON-LD format visit https://developers.google.com/structured-data/testing-tool/, while a great practice site is
Advantages of structural markup
Knowledge Graph
When web page content is structurally marked up, search engines display it in detail and prominently in the search results. Such a detailed display of search results is called a “Knowledge Graph” and depends on the type of content. The choice of features that will be displayed depends on the type of content, ie. from the type of dictionary used.
Example
If it is a hotel, the knowledge graph can contain the following data (see image):
- Location map
- Review (average rating and star rating)
- Address
- Phone
- Working hours
- Images
- Additional information
Logo display
Using structural markup we can define which image will be displayed as a logo in the search results. The logo will be displayed in the standard search results, but also in the detailed display of the so-called Knowledge Graph. We will use the schema “Organization” and its properties “logo” and “url”.
Example
The syntax JSON-LD:
is used in the following example
|
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> |
Display of corporate data
The display of corporate data in the results, such as the phone number of the service or the address of the company, provide quick search results, so that the user can find the information that is important to him without opening the page. To display corporate data, we use the schema “Organization” and the sub-schema “ContactPoint”. This structural 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 the content using the “sameAs” attribute from the “Person” dictionary if it is a person or from the “Organization” dictionary if it is a company.
Google recognizes the most famous social networks:
- Google+
- YouTube
- Myspace
- SoundCloud
- Tumblr
Example
In this example, the code is shown via two syntaxes: Microdata and JSON-LD, in cases where it is a person or an organization:
|
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> |