Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Understanding the Schema.org

In this article we will analyze how the concepts of syntax, semantics and how the vocabulary can help you better ranking in search engines, making life easier for your users and giving meaning to its content on the Internet.

Squema in Greek means form, plan or model. Already schema.org is a series of xml tags used to provide extra information about Internet content for search engines. That is, small code snippets that helps a lot when people easily find your site among so many others on the web.

The idea to create xml tags that present information about the meaning of a content is not new. There already existed in the past and several other initiatives as microdata, microformats and RDFa.

But this plurality of languages ​​was precisely what made ​​it difficult to adoption by developers. After all, with so many different standards that only work in a certain context how to choose the ideal? And this is just the differential of schema.org. He emerged from a collaborative action among major search engines in the world, Google, Bing, Yahoo! and Yandex, Russian search engine.

The adoption of a more "universal" model eliminated the branching caused by the use of different formats makes it easier for developers (who need no longer unfolds between many different languages​​) and, above all, users.

schema.org

Figure 1: schema.org

Why use it?

Everyone knows some basic particularities of their local languages​​, whether English, Spanish, etc.. But search engines cannot fully understand the particularities of each language.

For all people can easily find the information on the internet we developers need to tell to the search engines what is the meaning of content. And we can do this through the tags proposed by schema.org!

When using the standards set by the schema search engines will know the phone number of your company regardless of context. And may show this information in the body of the search results, facilitating the task of the user who hunt or need information on the site. And this not only works for phone numbers. You can select a multitude of data such as name, address, email, etc.

Rich Snippets

Another great advantage is called Rich Snippets. You've probably seen it around. Are search results that contain extra information and often earn shapes, colors and different symbols. This information comes precisely from different xml tags as we learn in this post. And even if the user is not just seeking information displayed on rich snippet you will get more clicks.

This happens because a concept of perception theory (gestalt) called segregation that basically says that everything is different draws more attention. One result which stands out most will consequently receive more visits. Currently Google supports rich snippets for people, events, reviews, products, recipes and navigation structure (breadcumbs).

For a better understanding, let's see how it works in practice, let's do a search on google and see how the result is displayed with rich snippets.

Rich Snippets Example

Figure 2: Rich Snippets Example

Understanding how the schema works

If you've participated in a change knows from experience that if not properly label the boxes of clothes, books, utensils, etc. may end without finding a pair of clean socks in your new home.

It is best to leave the objects in boxes that have some element in common as they come from the same environment (bedroom, kitchen, bathroom) or have the same function (shoes, toys, tools). Each box can then be regarded as a set of elements that have a common goal. The same goes with the words. They can be grouped by meanings have in common, or, if you want to use the word cool, being part of the same semantic field.

The function of schema.org is mark the meaning behind the boxes of content on the internet. It works basically like your html tag with markers that indicate the semantic field that content part. For this to work in a more organized one hierarchy was created for the vocabulary.

The first set is great "Thing". But of course, "thing" is very generic, right? The ideal is to be as specific as possible. The group 'Thing', in turn, is divided into sets children. They are CreativeWork, Event, Intangible, MedicalEntity, Organization, Person, Place and Product.

For their time these groups (or schemas) are further divided into smaller groups. Each of these entries also has specific properties. Remembering that each of the "children" inherit characteristics from their parents.

And this is just the top of the iceberg. You can and should consult the complete hierarchy on the official website.

Let's see how this works in practice!

Inside the schemas

The first thing to consider is that you need to use HTML5. This type of syntax does not work with other doctypes! So make sure that your document is in the language, ok?

To use shema.org must know three parameters of micro data that emerged with the HTML5. Check it out your new best friends:

  • itemscope - Defines the scope of meta data. Ie, announces to the world that the information which you write are part of the same group of meaning. This property is useless if you do not reference what this group anyway! And for this we use the following parameter: the itemtype.
  • itemtype - is the box label change. Defines which is the group of the item you are using. In the case of schema.org, you always need to define a url beginning with "http://schema.org/" (eg http://schema.org/Place).
  • itemprop - Defines the properties of the item. Each property has an expected value that can be text, numeral, url, etc.. See the documentation for each itemtype which you want to use for a complete list of properties supported by each element and their values​​.

Decorating a phone number of a jingle is an impossible task, right? Luckily there is the Internet! Let's learn to say "Hey search engine! Here is the emergency phone number of the hospital. ". For this we will use the itemtype Hospital (which shares characteristics with Thing, Organization, LocalBusiness and MedicalOrganization) and two itemprops name and telephone.

Listing 1: itemprop example

...
 
<div itemscope itemtype="<http://schema.org/Hospital>">
   <span itemprop="name">Hospital</span>
   <span itemprop="telephone">0118 999 881 999 199 725 3</span>
</div>
 
...

Now let's see another example.

Listing 2: Meta Language example

...
 
 <article>
 <h1>Schema.org - Understanding content on the Internet </h1>
 <h2>By Ricardo Arrigoni</h2>
 <img src="http://file.mrbool.com/mrbool/articles/RicardoArrigoni/SchemaOrg/Schema01.jpg" alt="schema.org">
 <p> This article we will analyze how the concepts of syntax, semantics and vocabulary can help you better ranking in the search engines, make life easier for your users and give meaning to its content on the Internet. <p>
 </article>
 
...

In this example we'll use the itemtype BlogPosting. This schema is "son" Thing of the categories, and CreativeWork Article.

These are some of its properties:

  • author - person or organization responsible for authoring the post
  • headline - the post title
  • articleBody - the text of the post-
  • image - an image display
  • url - page address
  • keywords - keywords

Listing 3: BlogPosting Example

...
 
<article itemscope itemtype="<http://schema.org/BlogPosting>">
<h1 itemprop="headline">Schema.org - Understanding content on the Internet</h1>
<h2>By <span itemprop="author">Ricardo Arrigoni</span></h2>
<img src="http://file.mrbool.com/mrbool/articles/RicardoArrigoni/SchemaOrg/Schema01.jpg" alt="schema.org" itemprop="image">
<p itemprop="articleBody"> This article we will analyze how the concepts of syntax, semantics and vocabulary can help you better ranking in the search engines, make life easier for your users and give meaning to its content on the Internet. </p>
</article>
 
...

You can combine and use different itemscopes on just one page. For example, on the page of a blog author itemscope we could use for each of the columnists. By chaining several itemscopes it can get a little confusing. At this time it is always good to use a tool like the Google Rich Snippet tool to test.

The keywords and url properties don't need to be visible to users and wouldn't be some semantic use an ugly hack as hidden divs to do this. But there is an easy way out and practice. Just declare this information using meta tags. The syntax is very simple: use itemprop and content parameter to the desired content, just like in the listing 4.

Listing 4: Keywords and url properties

...
<article itemscope itemtype="http://schema.org/BlogPosting">
<meta itemprop="url" content="your_url_post_here" />
<meta itemprop="keywords" content="your_keywords_here" />
</article>
...

But what if I want to use one that is not in itemtype schema.org. What do I do?

You can use a more generic markup. There is no specific itemtype programmer or front-end developer, for example, but you can use person for both. Or, you can use the mechanism of expansion of the schema. Let's see how it works?

  • Types and enumerations must start with uppercase and not contain spaces between words. For example instead of WebDesigner, you use Web Designer (standard known as CamelCase). The correct is use WebDesigner.
  • In the case of property the first word should be written in lower case letter, but the second (if any) should be capital letter. If it were a Web Designer property should be written as webDesigner.

Now is the easy part. Just use a slash (the / character) to add your new term to the schema. As our WebDesigner is a person we will expand the term "person".

Listing 5: Expanding the term person

...
 
<div itemscope itemtype="http://schema.org/Person/WebDesigner">
   <h1 itemprop="name">Ricardo Arrigoni</h1>
</div>
 
...

It is important to know that you can not create new items, just expand the classes that already exists. This is a rule that serves to maintain a coherent pattern. If you invented a random tag it would no longer have any link with the schema.org, would not be compatible with any search engine or browser and would lose the purpose of existence since it would not know anything to understand what you tried to write.

But if you thought of an amazing idea and neither the mechanism of expansion meets your expectations you can still try to suggest a new item through this wiki. Remembering that your proposal should be well written and follow the template proposed by the wiki be taken into account with name, description, specific examples of use, etc..

Conclusion

It is impossible to do a good job without consulting the documentation. The tool is in constant evolution so is good to keep an eye on the Blog Schema.org to check the news.

I hope you liked the article and understood how to use the Schema. See you next time.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login