In May 2009, Google introduced fatty Snippets, a tiny try out of in rank showed in Google’s search engine consequences to make it simpler for users to influence which pages are relevant to their search. In June 2011, Google announced the foundation of Schema.org, a new initiative from Google, Bing and Yahoo! with the intention of aims to improve the web by making structured figures markup schema.

This tutorial demonstrates how to make an online resume with the intention of incorporates Schema.org Microdata. The tutorial also includes directions on how to use Authorship Markup!

---

Bonus Bits and pieces Included!

The tutorial sample is a one leaf site template with the intention of you are free to use for your online resume. As a bonus, several affect versions are included in the source files zip; dark green, set alight green, dark desolate and set alight desolate.

Please annotation with the intention of this is not a web design or CSS tutorial, so release the HTML5 and Schema.org Microdata markup will be roofed.

Now, let’s start!

---

Step 1: The CSS

Make a CSS style sheet called “style.css” and contain the following code. Don’t agonize; it’s positively simple, and understanding it isn’t necessary for this tutorial.

/* Default Styles
--------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
	social class: url("../images/bg_dark_green.png");
	social class-affect: inherit;
	font-size: 16px;
	font-family: "Trebuchet MS", Helvetica, without-serif;
	affect: #000;
}

a:link {
	copy-decoration: underline;
	affect: #000;
	font-weight: bold;
}

a:visited {
	copy-decoration: underline;
	affect: #000;
	font-weight: bold;
}

a:hover {
	copy-decoration: underline;
	affect: #669933;
	font-weight: bold;
}

a:active {
	copy-decoration: underline;
	affect: #000;
	font-weight: bold;
}

#wrapper	{
	width: 965px;
	margin: 0 auto;
}

#content {
	social class-affect: #eee;
	width: 960px;
	copy-align: missing;
	overflow: auto;
	spot: relative;
	margin: 25px 0px 25px 0px;
	border: #fff levelheaded 2px;
}

.apparent	{
	float: not any;
	apparent: in cooperation;
	margin: 20px 0px 20px 0px;
}

/* Header
--------------------------------------------------- */

#contact-details .header_1 {
	float: missing;
	width: 350px;
	copy-align: center;
	margin: 40px 0px 0px 20px;
}

#contact-details .header_1 img {
	border: #fff levelheaded 4px;
	social class: url("../images/bg_img_dark_green.png");
	padding: 16px;
	margin: 10px 0px 0px 0px;
}

#contact-details .header_2 {
	float: missing;
	width: 570px;
	margin: 40px 0px 0px 10px;
}

#contact-details .header_2 a {
	font-weight: normal;
}

#contact-details  h1	{
	margin: 0px 0px 0px 20px;
	font-size: 52px;
	font-weight: bold;
}

#contact-details  h3	{
	margin: 0px 0px 32px 20px;
	font-size: 30px;
	font-weight: bold;
	font-style: italic;
}

#contact-details ul.info_1	{
	catalog-style: not any;
	margin: 0px 0px 0px -12px;
	font-size: 18px;
}

#contact-details ul.info_2	{
	catalog-style: not any;
	margin: 0px 0px 15px -12px;
	font-size: 18px;
}

#contact-details li.take up	{
    social class: url("../images/family.png") no-do again;
	social class-spot: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.buzz	{
    social class: url("../images/buzz.png") no-do again;
	social class-spot: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.hurl by e-mail	{
    social class: url("../images/mail.png") no-do again;
	social class-spot: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.site_url	{
    social class: url("../images/computer.png") no-do again;
	social class-spot: 0px 2px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.twitter	{
    social class: url("../images/twitter_sm.png") no-do again;
	social class-spot: 0px 0px;
    padding: 0px 0px 12px 40px;
}

/* Foremost Content
--------------------------------------------------- */

h2.top	{
	margin: 0px;
	font-size: 22px;
	font-weight: bold;
}

h2	{
	margin: 40px 0px 0px 0px;
	font-size: 22px;
	font-weight: bold;
}

dl	{
	margin: 0px 50px 0px 0px;
}

dt	{
	float: missing;
	width: 200px;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	copy-align: right;
}

dd	{
	width: 620px;
	float: right;
	margin-right: 20px;
}

dl#contact 	{
	margin: 0px;
}

dt#contact 	{
	margin: 0px;
}

dd#contact 	{
	margin: 0px;
}

p.bus1	{
	margin: 0px;
	font-weight: bold;
	affect: #669933;
}

p.edu-info	{
	margin: 10px 0px 0px 0px;
	font-weight: bold;
	affect: #669933;
}

p.edu-info a	{
	affect: #000;
}

p.edu-info a:hover	{
	affect: #669933;
}

p.time	{
	margin: 0px;
}

p.summary	{
	margin: 10px 0px 0px 0px;
}

#skills ul.list1	{
	float: missing;
	catalog-style: not any;
	margin: 0px 0px 0px -40px;
	width: 220px;
}

#skills ul.list2	{
	float: missing;
	catalog-style: not any;
	margin: 0px 0px 0px 0px;
	width: 220px;
}

#skills li {
    social class: url("../images/bullet_green.png") no-do again;
	social class-spot: 0px 2px;
    padding: 0px 0px 0px 25px;
}

abbr	{
	border-width: 0px;
}

/* Footer
--------------------------------------------------- */

#footer	{
	margin: 60px 40px 0px 40px;
}

#footer	img {
	border: 0px;
}

#footer .footer_content	{
	width: 700px;
	overflow: auto;
	margin: auto;
	border: #fff levelheaded 2px;
	social class-affect: #dcdcdc;
}

#footer ul.icons_1	{
	float: missing;
	width: 525px;
	margin: 15px 10px 10px 15px;
	padding: 0px;
}

#footer ul.icons_2	{
	float: right;
	width: 100px;
	margin: 10px 20px 10px 10px;
	padding: 0px;
}

#footer .icons_1 li, #footer .icons_2 li {
	margin: 0px 0px 0px 7px;
	padding: 0px;
	catalog-style-category: not any;
	show: inline;
}

#footer a	{
	affect: #000;
}

#footer a:hover	{
	affect: #669933;
}

#footer	.credits {
	float: not any;
	apparent: in cooperation;
	margin: 10px 0px 20px 0px;
	font-size: 12px;
	copy-align: center;
}

#footer	.credits a	{
	font-weight: normal;
}

---

Step 2: The Markup (Without Schema.org Microdata Included)

Next, we call for an .html. This is a vital describe with the intention of we’re all liable habitual with.

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<meta charset="utf-8">

<title>Online Resume of Your First name</title>

<!-- Meta -->
<meta first name="description" content="A few lines about physically">
<meta first name="keywords" content="web,developer,designer,resume" />
<meta first name="author" content="Your First name">

<!-- CSS Stylesheet -->
<link rel="stylesheet" category="copy/css" href=http://net.tutsplus.com/"css/
style.css" />

<!--[if lt IE 9]>
<speech src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></speech>
<![endif]-->

</head>
<body>

<!-- Start Wrapper -->
<div id="wrapper">

<!-- Start Content Area -->
<div id="content">

<!-- Start Header -->
<header>

<!-- Start Contact Section -->
<section id="contact-details">

<!-- Start Profile Image Section -->
<div>
<img src=http://net.tutsplus.com/"images/profile.jpg" width="250"
height="250" alt="Your First name" />
</div>
<!-- End Profile Image Section -->

<!-- Start Profile In rank Section -->
<div>

<h1><span>Your First name</span></h1>
<h3>Web Developer / Designer</h3>

<ul>
<li>555 Street Take up, Toledo, Ohio, 43606  U.S.A.</li>
</ul>

<ul>
<li>(000) 000-0000</li>
<li><a href="mailto:your-hurl by e-mail@gmail.com">your-hurl by e-mail@gmail.com</a></li>
<li><a href="http://www.webcodepro.net/about.php" title="www.your-website.com">
www.your-website.com</a></li>
<li><a href="http://twitter.com/twitter-cover-first name" title="Follow Me on Twitter">
@twitter-cover-first name</a></li>
</ul>

</div>
<!-- End Profile In rank Section -->

</section>
<!-- End Contact Section -->

</header>
<!-- End Header -->

<div>&nbsp;</div>

<!-- Start Profile Section -->
<dl>
<dt>Profile:</dt>
<dd>

<section>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
</section>

</dd>
</dl>
<!-- End Profile Section -->

<div>&nbsp;</div>

<!-- Start Skills Section -->

<dl>
<dt>Skills:</dt>
<dd>

<section id="skills">
<ul>
<li>XHTML</li>
<li>HTML5</li>
<li>PHP</li>
<li>JavaScript</li>
<li>Magento</li>
<li>WordPress</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>MySQL</li>
<li>jQuery</li>
<li>CMS Made Simple</li>
<li>Photoshop</li>
</ul>
</section>

</dd>
</dl>

<!-- End Skills Section -->

<div>&nbsp;</div>

<!-- Start Experience Section -->
<dl>
<dt>Experience:</dt>

<dd>

<section id="experience">

<!-- Spot #1 -->

<h2>Web Developer / Designer</h2>
<p>Companionship First name 1</p>
<p>February 2009 &#45; Present</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim
justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
eu pede mollis pretium.
</p>

<!-- Spot #2 -->

<h2>Web Developer / Programmer</h2>
<p>Companionship First name 2</p>
<p>November 2007 &#45; February 2009</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium.
</p>

<!-- Spot #3 -->

<h2>Web Developer / Programmer</h2>
<p>Companionship First name 3</p>
<p>March 2006 &#45; November 2007</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium.
</p>

</section>

</dd>
</dl>
<!-- End Experience Section -->

<div>&nbsp;</div>

<!-- Start Publications Section -->
<dl>
<dt>Publications:</dt>

<dd>

<section id="publications">

<a href="http://net.tutsplus.com/tutorials/php/how-to-make-an-advanced-
twitter-widget/" butt="_blank" title="How to Make an Advanced Twitter
Widget">"How to Make an Advanced Twitter Widget"</a>,
<a href="http://net.tutsplus.com/" butt="_blank" title="Nettuts+">Nettuts+
</a>, 8/25/11

</section>

</dd>
</dl>
<!-- End Publications Section -->

<div>&nbsp;</div>

<!-- Start Education Section -->
<dl>
<dt>Education:</dt>
<dd>

<section id="education">

<p>Academe of Toledo</p>

2801 Bancroft Street
<br />
Toledo, Ohio, 43606  U.S.A.

<p>Web Design</p>
<p>2003 &#45; 2005</p>

<p>
<a href="http://www.utoledo.edu/" butt="_blank" title="Academe of Toledo">
www.utoledo.edu</a>
</p>

</section>

</dd>
</dl>
<!-- End Education Section -->

<div>&nbsp;</div>

<!-- Start Footer -->
<footer id="footer">

<!-- Start Footer Content -->
<div>

<!-- Start Schema Self -->

<ul>
<li><a href="https://profiles.google.com/jwagner719" title="Google Profile">
<img src="http://www.google.com/images/icons/ui/gprofile_button-32.png"
width="32" height="32" alt="Google Profile"></a></li>
<li><a href="http://dribbble.com/" title="Dribbble"><img src=http://net.
tutsplus.com/"images/dribbble.png" width="32" height="32" alt="Dribbble" />
</a></li>
<li><a href="http://www.linkedin.com/" title="LinkedIn"><img src=http://net.
tutsplus.com/"images/linkedin.png" width="32" height="32" alt="LinkedIn" />
</a></li>
<li><a href="http://www.facebook.com/" title="Facebook"><img src=http://net.
tutsplus.com/"images/facebook.png" width="32" height="32" alt="Facebook" />
</a></li>
<li><a href="http://www.flickr.com/" title="Flickr">
<img src=http://net.tutsplus.com/"images/flickr.png" width="32"
height="32" alt="Flickr" /></a></li>
<li><a href="http://twitter.com/" title="Follow Me on Twitter!">
<img src=http://net.tutsplus.com/"images/twitter.png" width="32" height="32"
alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul>
<li><a href=http://net.tutsplus.com/"resume.pdf" title="Download Resume PDF">
<img src=http://net.tutsplus.com/"images/download.png" width="48" height="48"
alt="Download Resume PDF" /></a></li>
</ul>

<!-- End Schema Self -->

</div>
<!-- End Footer Content -->

<div>
Social Icons by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons"
butt="_blank" title="Paul Robert Lloyd">Paul Robert Lloyd</a>, Profile &amp;
Download Icons by <a href="http://dryicons.com/" butt="_blank" title="DryIcons">
DryIcons</a>, Buzz Icon by
<a href="http://www.comfi.com/telecom-icons/" butt="_blank" title="ComFi Telecom">
ComFi Telecom</a>, Profile Image Addict Character by <a href="http://thenounproject.com/" butt="_blank" title="The Noun Project">The Noun Project</a>.
<br />
All used under a Creative Commons Attribution-ShareAlike license:
<a href="http://creativecommons.org/licenses/by-sa/3.0/" butt="_blank" title="Creative Commons Attribution-ShareAlike license">http://creativecommons.org/licenses/by-sa/3.0/</a>
</div>

</footer>
<!-- End Footer -->

</div>
<!-- End Content -->

</div>
<!-- End Wrapper -->

</body>
</html>

---

A Few Notes About the Markup

HTML5 Shiv

Since Schema.org Microdata is based on the HTML5 microdata specification, HTML5 markup is being used to make the one leaf resume site template. Sorry to say, older web browsers like IE7 and IE8 do not admit fastidious HTML5 elements. Pages written using HTML5 will not render accurately in these older browsers.

Here is a screenshot of the online resume sample when viewed in (IE8 Click on image to see full image):

To solve the problem with these older IE browser versions, the below code has been added between tags (just below the CSS Stylesheet):

<!--[if lt IE 9]>
<speech src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></speech>
<![endif]-->

This code is an HTML5 JavaScript shim for IE to recognise and style the HTML5 elements.

Annotation: An HTML5 JavaScript shim is not vital in IE9+ and other modern browsers with the intention of support HTML5.

Classification Catalog

Classification lists, <dd></dd> were used in the markup instead of unordered lists. THis is due to the fact with the intention of it makes extra sense, when considering how all piece has a title and a description.

Section vs Article

There seems to be some confusion a propos HTML5 section and article elements. The section element was used in the markup since not any of the sections of the resume are considered to be standalone content.
The HTML5 article element is used for standalone content with the intention of would most liable be syndicated like a blog placement or news article. This article does a really excellent job amplification the difference between HTML5 article and section elements.

---

Step 3: Add Schema.org Microdata – Self and PostalAddress

The initially types of schemas with the intention of we are vacant to add to the markup is Self and PostalAddress.

Itemscope Element and Itemtype Attribute

An itemscope element is added to <div></div>tags with the intention of are placed around the content with the intention of contains the in rank related to the Schema, like this:

<div itemscope itemtype="http://schema.org/Self">

Content with the intention of contains in rank about a Self

</div>

The itemscope element and itemtype attribute for the Self Schema will be placed in in cooperation the Contact and Social Media Links sections of the resume web leaf, like so:

<!-- Start Contact Section -->
<section id="contact-details">
<div itemscope itemtype="http://schema.org/Self">

Rest of Code Try out Here

</div>
</section>
<!-- End Contact Section -->

<!-- Start Social Media and Download Links -->
<div itemscope itemtype="http://schema.org/Self">

Rest of Code Try out Here

</div>
<!-- End Social Media and Download Links -->

The itemscope element and itemtype attribute for the PostalAddress Schema is nested within the Self Schema and is placed around the unordered catalog <ul></ul>containing the take up in rank like this:

<!-- Start PostalAddress Schema -->
<div itemprop="take up" itemscope itemtype="http://schema.org/PostalAddress">
<ul>
<li><span itemprop="streetAddress">555 Street Take up</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li>
</ul>
</div>
<!-- End PostalAddress Schema -->

Itemprop Attributes

Itemprop attributes call for to be added wherever appropriate using span tags so with the intention of additional in rank is provided to search engines about our web leaf. Below are the attributes we will be using from these schemas:

Self Schema

• itemprop="image"
• itemprop="first name"
• itemprop="jobTitle"
• itemprop="telephone"
• itemprop="hurl by e-mail"
• itemprop="url"

PostalAddress Schema

• itemprop="streetAddress"
• itemprop="addressLocality"
• itemprop="addressRegion"
• itemprop="postalCode"
• itemprop="addressCountry"

Closing Markup for the Contact and Social Media Links Sections

<!-- Start Contact Section -->
<section id="contact-details">
<div itemscope itemtype="http://schema.org/Self">

<!-- Start Profile Image Section -->
<div>
<img src=http://net.tutsplus.com/"images/profile.jpg" itemprop="image" width="250" height="250" alt="Your First name" />
</div>
<!-- End Profile Image Section -->

<!-- Start Profile In rank Section -->
<div>

<h1><span itemprop="first name">Your First name</span></h1>
<h3><span itemprop="jobTitle">Web Developer / Designer</span></h3>

<!-- Start PostalAddress Schema -->
<div itemprop="take up" itemscope itemtype="http://schema.org/PostalAddress">
<ul>
<li><span itemprop="streetAddress">555 Street Take up</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li>
</ul>
</div>
<!-- End PostalAddress Schema -->

<ul>
<li><span itemprop="telephone">(000) 000-0000</span></li>
<li><a href="mailto:your-hurl by e-mail@gmail.com" itemprop="hurl by e-mail">your-hurl by e-mail@gmail.com</a></li>
<li><a rel="me" itemprop="url" href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li>
<li><a rel="me" itemprop="url" href="http://twitter.com/twitter-cover-first name" title="Follow Me on Twitter">@twitter-cover-first name</a></li>
</ul>

</div>
<!-- End Profile In rank Section -->

</div>
</section>
<!-- End Contact Section -->

<!-- Start Social Media and Download Links -->
<div itemscope itemtype="http://schema.org/Self">

<ul>
<li><a rel="author" itemprop="url" href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li>
<li><a rel="me" itemprop="url" href="http://dribbble.com/" title="Dribbble"><img src=http://net.tutsplus.com/"images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.linkedin.com/" title="LinkedIn"><img src=http://net.tutsplus.com/"images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.facebook.com/" title="Facebook"><img src=http://net.tutsplus.com/"images/facebook.png" width="32" height="32" alt="Facebook" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.flickr.com/" title="Flickr"><img src=http://net.tutsplus.com/"images/flickr.png" width="32" height="32" alt="Flickr" /></a></li>
<li><a rel="me" itemprop="url" href="http://twitter.com/" title="Follow Me on Twitter!"><img src=http://net.tutsplus.com/"images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul>
<li><a href=http://net.tutsplus.com/"resume.pdf" title="Download Resume PDF"><img src=http://net.tutsplus.com/"images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>

</div>
<!-- End Social Media and Download Links -->

---

Step 4: Add Schema.org Microdata – Piece Catalog

The next schema we are vacant to add to the markup is ItemList.

Itemscope Element and Itemtype Attribute

The itemscope element and itemtype attribute for the ItemList Schema will be placed in the Skills Section like this:

<!-- Start Skills Section -->
<div itemscope itemtype="http://schema.org/ItemList">

Rest of Code Try out Here

</div>
<!-- End Skills Section -->

Itemprop Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:

ItemList Schema

• itemprop="itemListElement"

Closing Markup for the Skills Section

<!-- Start Skills Section -->
<div itemscope itemtype="http://schema.org/ItemList">

<dl>
<dt itemprop="first name">Skills:</dt>
<dd>

<section id="skills">
<ul>
<li itemprop="itemListElement">XHTML</li>
<li itemprop="itemListElement">HTML5</li>
<li itemprop="itemListElement">PHP</li>
<li itemprop="itemListElement">JavaScript</li>
<li itemprop="itemListElement">Magento</li>
<li itemprop="itemListElement">WordPress</li>
</ul>
<ul>
<li itemprop="itemListElement">HTML</li>
<li itemprop="itemListElement">CSS</li>
<li itemprop="itemListElement">MySQL</li>
<li itemprop="itemListElement">jQuery</li>
<li itemprop="itemListElement">CMS Made Simple</li>
<li itemprop="itemListElement">Photoshop</li>
</ul>
</section>

</dd>
</dl>

</div>
<!-- End Skills Section -->

---

Step 5: Add Schema.org Microdata – Organization

Next, the Organization schema is vacant to be added to the markup.

Itemscope Element and Itemtype Attribute

The itemscope element and itemtype attribute for the Organization Schema will be placed around all “Spot” listed in the “Experience” section, like so:

<!-- Spot #1 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Try out Here

</div>

<!-- Spot #2 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Try out Here

</div>

<!-- Spot #3 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Try out Here

</div>

Itemprop Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:

Organization Schema

• itemprop="jobTitle"
• itemprop="first name"
• itemprop="description"

Closing Markup for the Experience Section

<section id="experience">

<!-- Spot #1 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2><span itemprop="jobTitle">Web Developer / Designer</span></h2>
<p><span itemprop="first name">Companionship First name 1</span></p>
<p>February 2009 &#45; Present</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

</div>

<!-- Spot #2 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p><span itemprop="first name">Companionship First name 2</span></p>
<p>November 2007 &#45; February 2009</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

</div>

<!-- Spot #3 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p><span itemprop="first name">Companionship First name 3</span></p>
<p>March 2006 &#45; November 2007</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

</div>

</section>

---

Step 6: Add Schema.org Microdata – Article

Next the Article schema is vacant to be added to the markup.

Itemscope Element and Itemtype Attribute for Article

The itemscope element and itemtype attribute for the Article Schema will be placed in the “Article” listed in the Publications Section like this:

<section id="publications">
<div itemscope itemtype="http://schema.org/Article">

Rest of Code Try out Here

</div>
</section>

Itemprop Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:

Article Schema

• itemprop="first name"
• itemprop="url"

Closing Markup for the Publications Section

<section id="publications">
<div itemscope itemtype="http://schema.org/Article"><span itemprop="first name">
<a itemprop="url" href="http://net.tutsplus.com/tutorials/php/how-to-make-an-advanced-twitter-widget/" butt="_blank" title="How to Make an Advanced Twitter Widget">"How to Make an Advanced Twitter Widget"</a></span>, <a href="http://net.tutsplus.com/" butt="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11
</div>
</section>

---

Step 7: Add Schema.org Microdata – EducationalOrganization and PostalAddress

Next the EducationalOrganization and PostalAddress schemas are vacant to be added to the markup.

Itemscope Element and Itemtype Attribute for EducationalOrganization

The itemscope element and itemtype attribute for the EducationalOrganization Schema will be placed in the Education Section like this:

<section id="education">
<div itemscope itemtype="http://schema.org/EducationalOrganization">

Rest of Code Try out Here

</div>
</section>

Itemscope Element and Itemtype Attribute for PostalAddress

The itemscope element and itemtype attribute for the PostalAddress Schema is nested within the EducationalOrganization Schema and is placed around the code containing the take up in rank in the Education section like this:

<div itemprop="take up" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">2801 Bancroft Street</span>
<br />
<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
</div>

Itemprop Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from these schemas:

EducationalOrganization Schema

• itemprop="first name"
• itemprop="url"

PostalAddress Schema

• itemprop="streetAddress"
• itemprop="addressLocality"
• itemprop="addressRegion"
• itemprop="postalCode"
• itemprop="addressCountry"

Closing Markup for the Education Section

<section id="education">
<div itemscope itemtype="http://schema.org/EducationalOrganization">

<p><span itemprop="first name">Academe of Toledo</span></p>

<div itemprop="take up" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">2801 Bancroft Street</span>
<br />
<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
</div>

<p><span itemprop="first name">Web Design</span></p>
<p>2003 &#45; 2005</p>

<p>
<a itemprop="url" href="http://www.utoledo.edu/" butt="_blank" title="Academe of Toledo">www.utoledo.edu</a>
</p>

</div>
</section>

---

About Authorship Markup

Image shows Authorship Markup (John Resig) showed in Google search consequences.

In June 2011, Google started to support “Authorship Markup”. Owing to the use of markup, such as rel="author" and rel="me", search engines can identify content bent by the constant author across the web. Using Authorship Markup, a multi-authored website can link all articles and posts written by all author to their own specific “author leaf”.

Individual articles and posts of a multi-authored website call for to link to the appropriate author leaf using rel=”author” tag. If the author leaf also includes a link to the author’s Google Profile using the rel=”me” tag, at that time the author in rank may appear in search consequences.

To aid users learn quality content, Google is piloting the show of author in rank in search engine consequences. This feature is being rolled out gradually and may become a very vital part of search engine consequences and rankings.

---

Rel Tags

In cooperation the Contact and Social Media Links sections of the one leaf resume site template contain URLs linking to a primary website and social media pages. The “rel” attribute needs to be added to the links of these sections so with the intention of Authorship Markup can be implemented. Authorship Markup allows search engines to identify content bent by the constant author across the web.

There are two specific rel tags used for Authorship markup:

• rel="me"
• rel="author"

Most of the links included in the resume web leaf point to sites with the intention of are about the constant self. So the rel=”me” tag has been added. For the Google Profile link, the rel=”author” tag has been added. Depending on where you placement your online resume, you may call for to use the rel=”me” tag for the Google Profile link instead.

---

Step 8: Make a Google Profile

If you aspire to start identifying your first content across the web using Authorship Markup, you initially call for to make a Google Profile.

If you by now have a Google Profile leaf, at that time you should update your profile in rank accordingly (add a picture of physically, in rank about physically, occupation, etc.)

You also call for to make guaranteed there is a +1 tab showed on the leaf.

If your Google profile includes a excellent, apparent head shot of physically, it will be eligible to appear as a thumbnail in search consequences.

---

Step 9: Link Web Leaf(s) to Your Google Profile

According to Google, to establish authorship of a web leaf, you call for to do two things:

• Link with the intention of web leaf to your Google Profile
• Update your Google Profile with a link back to the family leaf of the site the web leaf is on.

You can link your content to your Google Profile using a copy link:

<a href="[https://plus.google.com/your_profile]?rel=me">Google+</a>

or by using the Google Profile Button code:

<a rel="me" href="https://profiles.google.com/your_profile">
  <img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32">
</a>

Google recently made changes to their authorship markup directions which change the use of rel="author" and rel="me" tags. The new directions say to use rel="author" for in cooperation the copy and profile button links. But, the rel="me" tag needs to be used instead of rel="author". See screenshot below.

Screenshot of “Miscalculation: Author profile leaf does not have a rel=me link to a Google Profile”

Using John Resig as an example:

• On the About Leaf of John Resig’s primary website he linked to his Google Profile using rel=”me”
• In John Resig’s Google Plus Profile he linked to the Family Leaf and About Leaf of his primary website

---

Step 10: Complete Google Authorship Affect (Vital!)

One you have added the Schema.org microdata and completed steps 8 and 9, Complete and submit the Google Authorship Question for Affect.

Your Authorship Markup may not bring about accurately until the Google Authorship Affect is completed and submitted.

---

Step 11: Ordeal Microdata Markup Using fatty Snippets Hard Tool

Click on image to see complete hard consequences

You can make guaranteed with the intention of Google can accurately parse and show your microdata markup in search consequences by scan-owing to your web leaf using the Google fatty Snippets Hard Tool. This Hard Tool can try out several types of structured figures markup counting Microdata, Micro formats and RDFa.

Annotation: The Google fatty Snippets Hard Tool is in Beta and can have unexpected consequences. The consequences publicized in the full size screenshot contain an miscalculation “Warning: Missing vital field fn.” Schema.org does not use the “fn” tag, but the tag is used with Microformats. This is most liable a hitch.

Similar Articles

• Web Designs Layout in Photoshop | VapvaruN
  How to create a trendy/colorful wordpress layout in Photoshop today I will create a trendy and color...
• WDL Premium: Victorian Ornaments | VapvaruN
  Here’s a high-quality vector pack for our WDL Premium Members. This victorian ornaments pack is fro...
• Outstandingly Creative Poster Designs | VapvaruN
  Posters are an incredibly common form of advertising.  Whether they giant posters mounted to the sid...
• 3D Studio Max Tutorials Part 2 | VapvaruN
  There are many reasons why you should visit these tutorials. For simple explanations, 3ds Max has st...
• Focusing on Good Design | VapvaruN
  Time and time again, we mistake good decoration for good design. When we are looking for inspiration...

Comments are closed.