Google Structured Data With Examples

Structured Data Tutorials by RankYa

If your website is verified in (also known as Google Search Console) then you may have noticed the menu link for .

What is Structured Data?

Structured Data can be thought of grouping and tagging HTML web page elements (for example BlogPosting, Products, or Reviews) so that can better understand the content according to its structure on a web page. Let’s simplify this by exploring samples

HTML Image Example

<img src="https://www.rankya.com/wp-content/themes/rankya/images/logo.png" />

Structured Data Example for ImageObject

<figure itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="image" src="https://www.rankya.com/wp-content/themes/rankya/images/logo.png" />
<meta itemprop="url" content="https://www.rankya.com/wp-content/themes/rankya/images/logo.png">
<meta itemprop="width" content="65">
<meta itemprop="height" content="150">
</figure>

In the first example, the normal HTML <img tag doesn’t really provide useful information in terms of semantics (meaning). It is just <img tag

However, using Structured Data coupled with , we can now say “hey search engines” you can learn more about that HTML image you found on my web page by looking at its Structured Data markup.

Another Example

<span itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="https://www.rankya.com/wp-content/themes/rankya/images/logo.png'; ?>" />
<meta itemprop="url" content="https://www.rankya.com/wp-content/themes/rankya/images/logo.png'; ?>">
<meta itemprop="width" content="65">
<meta itemprop="height" content="150">
</span>
<meta itemprop="name" content="RankYa">
</span>

Now we can extend the meaning of web page elements by precisely telling search engines information about the content we place on our web pages.

For instance, above example not only provides the normal HTML image, but now specifies which image Google should use as organization’s logo in search results by saying:

Hey Google, that image is a logo for an Organization called RankYa, and you can use that information for anything and everything like building your Knowledge Graph for my , Google Maps, Local Business, and display it accordingly in your Rich Results

I don’t know about you, but that is powerful information, and also major search engines like Google, , Yandex and others understand Structured Data.

Why just use an IMG tag when we can give meaning to our website’s content using Structured Data?

There are many Schema Generators Online, including samples from Google such as and as well as other Schema markup creators.


Here’s another more advanced example for Local Business markup <span itemscope itemtype="https://schema.org/Organization">
<link itemprop="url" href="https://www.exampledomain.com/">
<link itemprop="logo" href="https://www.exampledomain.com/logo.png">
<span itemscope itemtype="https://schema.org/LocalBusiness">
<span itemprop="name"> Your Business Name <span itemprop="makesOffer">what your business offers</span> </span>
<span itemscope itemtype="https://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="123 ABC Street">
<meta itemprop="addressLocality" content="CITY">
<meta itemprop="postalCode" content="00000">
<meta itemprop="addressRegion" content="REGION">
<meta itemprop="addressCountry" content="COUNTRY">
</span>
<span itemprop="description">describe your business</span>
<span itemprop="telephone">+1000000000</span>
</span>
<script type="application/ld+json">{
"@context" : "https://schema.org",
"@type" : "Organization",
"url" : "http://www.exampledomain.com",
"contactPoint" : [{
"@type" : "ContactPoint",
"telephone" : "+1-000-000-000",
"contactType" : "customer service"
}]
}
</script> </span>

All you have to do is simply copy the details and change them to match your Local Business details and simply add it to your website HTML code where you want that information to appear (usually in the footer section).

Video Lesson That Simplifies Google Search Console Structured Data Feature

Complex Methods for Adding Schema Markup for WordPress CMS Built Sites (Sample HTML Tag Using PHP IF ELSE Conditional Statement)
Shows Microdata Example for HTML itemscope for WordPress
Shows Microdata Example for HTML itemscope for WordPress CMS HTML tag section, includes sample PHP IF ELSE conditional statement

What you are seeing in the above example is only for < html > tag itemscope defining the scope of a WordPress site (sample code is what uses only for HTML itemscope logic).

As you can see in these examples provided, the importance of using Structured Data must be realized if you want your website to take full advantage of the latest features such as Rich Cards and Rich Results search engines like Google now officially supports and encourages site owners to use.

At the end of the day, you can easily use the tools made available by Google to take advantage of using Structured Data on your site. Do you think this will evolve to become the next big thing in the SEO world?

72 / 259 Malvern Rd Melbourne Australia 3141

+61421600702 $$

Author: RankYa

RankYa: Online Entrepreneur, Web Developer, Google AdWords and Google Analytics Certified Professional. Specialist in: Structured Data, Microdata, Microformats, RDF, Schema.org Vocabulary, HTML5, WordPress optimization, Advanced Image Optimization, Google Webmaster Tools, Social Media Marketing, Facebook marketing and YouTube video ranking mastery. Check out the latest 2017 Online Marketing course. View all posts by

Have Your Say! Comment

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