SKIP TO MAIN CONTENT blog uses cookies to help google service, personalise ads, and more. By visiting us you agree with our privacy policy. For more information: Cookies Policy | Privacy Policy

Tips Ngeblog Blogger Blogspot

Learn Microdata Schema For Beginner

Introduction of Microdata Schema

After learning what Microdata schema about is and implement it in my own blog, It's time to share to you all I know about it.
The first thing after having listened to Microdata Schema is to implement it in my own HTML5 script at my own Blogspot blog - I do not mean that this is a blog for a test. I always go serious doing something.

I like doing this since it takes me to have fun with incredible edge of technology designed by qualified and notable programmer and developer.Microdata schema is a rule of writing HTML script - It's a proposal for semantic markup in HTML - further, "Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users."

Microdata HTML is begun to determine what types of the itemtype will be used based on blog's topic and description. On other words, Itemtype refers to the type of, or what type of blogs you belong. When the blog is about article then you can write as follows:-
<div itemscope="" itemtype="http: //schema. org/Article">
There are many itemtypes you can use in marking up your HTML5 script. It all stores in which some of them will be discussed in this page. For BBlog (Blogspot blogger), since Blogspot has its own skin to handle the blog panel which is bundled in CSS (bundle & attribution of authorization), it refers many errors according to HTML5 validation. That's what makes me & other BBlog to find solution by re-marking up the Blogspot HTML5 script into site's markup by ignoring the Blogspot's css bundle in order to be successful validated by validator w3 org.

Best 3 Itemtypes for Blogspot Blogger to Choose

For BBlog, there are 3 types of itemtype you can choose:

1. Blog itemtype > schema. org/Blog

e.g <div itemscope="" itemtype=""> (this type is chosen by this blog)

2. Blogposting > schema. org/BlogPosting

e.g <div itemscope="" itemtype="http: //schema. org/BlogPosting">

3. Article > schema. org/Article

e.g <div itemscope="" itemtype="http: //schema. org/Article">Many sources I found said that it is better to choose the specific one, say, BlogPosting itemtype instead of Article or Blog since its property supports all Blogspot needs. If you use wordpress, you can choose Article itemtype or site's, say, WebPage itemtype, e.g. <div itemscope="" itemtype="http: //schema. org/WebPage">.

How to Markup Microdata Schema into your Blogspot

Firstly, you should clean up your Blogspot HTML script by replacing some original scripts (take notice that this action is valid and legal - that means that Blogspot gives us fully grant for it and it is legal to modify your Blogspot HTML Script - so, no needs to worry about).
This following steps is how to clean up:-

a) The type of your HTML should be in HTML5 tag,
e.g. <!DOCTYPE html>
b) In the head tag, you should replace it into:

as well as the closed head tag, from </head> into:
c) After the open head tag, replace the skin into: -
d) Remove all the skin below the script in point (c) above. It usually contains the script as this follows:-

Blogger Template Style
Name:     Picture Window
Designer: Josh Peterson
----------------------------------------------- */
/* Variable definitions
   <Variable name="keycolor" description="Main Color" type="color" default="#1a222a" value="#1a222a"/>
   <Variable name="body. background" description="Body Background" type="background"
       color="$(body. background. color)" default="#111111 url(//themes. googleusercontent. com /image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#111111 url(//themes.  googleusercontent. com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center"/>
.---- before the sign:
e) Add this follows style type below the closed head tag:-
<style type="text/css">
and, add this following closed style tag before the closed head tag:-

Finally, it all should be like this follows:-
<HTML dir='ltr' lang='en' xml:lang='en' xmlns='http: //www. w3. org/1999/xhtml'>
<meta charset='UTF-8'/>

<style type="text/css">
Before starting to add microdata schema script, the most important thing you should know is that Microdata schema is in case-sensitive. You then must be careful to write the script to avoid fatal error.

"so now what?" :DOkay, it's the simple script in the world and I hope you enjoy to markup your Blogspot HTML Script with Microdata schema since Google, Msn and Yahoo has gathered together and declared that is the center of all decision in relation to microdata types.

First you should do to markup microdata schema is to add this following script into your open body tag.
For example:
<body itemscope="" itemtype="http: //schema. org/Blog">.

That script means to inform crawler or spider of search engine that all inside of the tag will know that all script is bundled in Microdata schema script.

It's okay if you separate the script into tag <div>.
For example:

<div itemscope="" itemtype="http: //schema. org/Blog">.
Inside of the body tag or the div tag, you can replace some itemtype into Microdata schema as you wish, say, Author type, Address, etc. For further script you can visit to

Use span tag <span> and <itemprop> between the open div or p tag and the closed.
For example:

<div itemscope="" itemtype="http: //schema. org/Person">
Author: <span itemprop="name">Herman Bin Nasarudin</span><br/>
Author in Google+ <span itemprop="url"><a href="">Author on Google+</a></span>

The demo is as follows:

Author: Herman Bin Nasarudin
Author on Google+

Notice that when you write Itemscope in Blogspot, it should be add sign as follows to avoid error:

It will be error if you just type: itemscope without /=""

Herman Bin Nasarudin in Google+
Google+ Profile
Google+ Page

Newer Post Lihat Tips & Tutorial Sebelumnya
Back to Homepage

Popular Posts