About structural marking (Structured Data)

Structured Data

Structural tagging is an additional way of marking the content of a website. 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).

Content tagging is implemented using the knowledge that different types of content have their own specific characteristics. These specific content features are grouped together in a vocabulary format. Dictionaries are sets of feature/value pairs that describe the content in more detail. The major search engines Google, Microsoft, and Yahoo have agreed to standardize features into a single dictionary called schema.org. Each specific type of content has its own set of pairs, so the content related to the restaurant is described by the following features:

working hours
address
reservations
menu

while content related to the term book is described by the following features:

number of pages
ISBN of the book
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 developer and his personal choice.

Does it improve SEO?

Search engine personalization and localization (especially expressed for mobile search) is the future of search engines, and since structured data gives such details a search opinion, it will improve the site’s ranking. Based on a statement from Moz, it can be concluded that structured labeling of data will be one of the key factors in the future:

“The days of keyword domination are over”

Schema.org Dictionary

Schema.org is the most famous dictionary web site with a large number of predefined cases. The most basic term is Thing while everyone else inherits his features and adds his own characteristic ones. Thus, the term “Place” inherits the term “Thing” and the term “LocalBusines” inherits the two previously mentioned terms. You can view all types of hierarchically stacked here.

Control of the written JSON-LD code at linter.structured-data.org, and control of the structural data site on google’s Testing Tool site.

An excellent article with well-documented examples of using structured data via microdata or JSON-LD syntax can be viewed on the Builtvisible website.

Syntax

Microdata

Microdata is a collection of HTML 5 attributes that help to describe some content. In order to enter property (eng.property) from the schema into the HTML code, we need to use HTML attributes:

itemscope – defines a tag within which it is structurally tagged with the itemprop attribute. It always comes complete with an itemtype attribute that defines which scheme will be used

itemtype – defines which scheme will be used within a tag

itemprop – defines the attribute associated with that tag, usually inserted through the span tag

An example

In the following example, the name of the company is structurally marked, with the name property, which is an integral part of the simplest (initial) Thing scheme, and whose properties are inherited by the Organization scheme.

A standard tag without structured tagging

<div>
    <p> The name of the company is AlenIBRIC Studio </p>
</ div>

Structural markup inserted

<div itemscope itmetype="http://schema.org/Organization">
    <p>The name of the company is<span itemprop="name">AlenIBRIC Studio </span></p>
</div>

An example application and control code written with microdata syntax are at foolip.org or linter.structured-data.org, while the Google Chrome extension Semantic inspector shows a 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 tag

property – defines the attribute associated with that tag, usually inserted through the span tag

A standard tag without structured tagging

<div>
    <p> The name of the company is AlenIBRIC Studio </p>
</ div>

Structural markup inserted

<div vocab="http://schema.org/Organization" typeof="Organization">
    <p>The name of the company is <span property="name">AlenIBRIC Studio</span></p>
</div>

See more about this on the official RDFa- Lite site and you can check the code at linter.structured-data.org

JSON-LD

JSON-LD is the latest JSON-based syntax (so-called Linked Data format) and allows JSON data to be inserted through the script anywhere in the HTML. Because the data is put in one place, this type of syntax is easier to view.

Example
@context is related to the choice of vocabulary, while @type indicates the type of vocabulary scheme.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
 
  "name": "Alen Ibric",
  "jobTitle": "Graduate research assistant",
  "affiliation": "University of AI",
  "additionalName": "Johnny",
  "url": "http://www.alenibric.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Peach Drive",
    "addressLocality": "Wonderland",
    "addressRegion": "Georgia"
  }
}
</script>

A Google site for developers to control the JSON-LD format, visit https://developers.google.com/structured-data/testing-tool/, while a great workout site is json-ld.org/playground.

The benefits of structural marking

Knowledge Graph

When the content of a website is structurally marked, search engines display it in a detailed and prominent way. Such a detailed view of the search results is called the “Knowledge Graph” and depends on the type of content. The choice of properties that will be displayed depends on the type of content, ie. of the type of dictionary used.

Example
If it is a hotel, the knowledge graph may contain the following information (see picture):

Location map
Review (average rating and star rating)
Address
Phone
Working hours
Pictures
More information

Displaying the logo

By using structural tagging, we can define which image will be displayed as a logo in the search results. The logo will appear in standard search results but also in a detailed view of the so-called. Knowledge Graph. We will use the scheme “Organization” and its properties “logo” and “url“.

Example
The following example uses JSON-LD syntax:

JSON-LD

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "name" : "[organization name]",
  "logo" : "[logo image url]",
  "url" : "[website url]",
}
</script>>

Microdata

<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>

View corporate data

Displaying corporate information in results such as a service phone number or business address gives quick search results so that the user can access the information that matters to him without opening the page. To display corporate information, we use the “Organization” scheme and the “ContactPoint” sub-scheme. This structural marking is only possible with JSON-LD syntax.

Example

<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>

Showing social icons

To display social media profiles in search results, we need to structure the content structurally using the “sameAs” feature from the “Person” dictionary if it is a person or from the “Organization” dictionary if it is a business.

Google recognizes the most famous social networks:

Facebook
Twitter
Google+
Instagram
YouTube
LinkedIn
Myspace
Pinterest
SoundCloud
Tumblr

Example
This example shows the code via two syntaxes: Microdata and JSON-LD, in the case of a person or organization:

Microdata (Organization)

<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>

JSON-LD (Person)

<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>

JSON-LD (Organization)

<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>

Leave a Reply

Your email address will not be published. Required fields are marked *