Cara Membuat Resume yang Ditenagai HTML5 Microdata

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Pada bulan Mei 2009, Google memperkenalkan Rich Snippets, sebuah blok kecil informasi yang ditampilkan dalam hasil mesin pencari Google untuk mempermudah pengguna menentukan halaman mana yang relevan dengan pencarian mereka. Pada bulan Juni 2011, Google mengumumkan pembuatan Schema.org, sebuah inisiatif baru dari Google, Bing dan Yahoo!. yang bertujuan untuk memperbaiki web dengan membuat skema markup data terstruktur.

Tutorial ini menunjukkan cara membuat resume online yang menggabungkan Microdata Schema.org. Tutorial juga mencakup petunjuk bagaimana menggunakan Authorship Markup!

Item Bonus Termasuk!

Demo tutorial adalah template situs satu halaman yang bebas Anda gunakan untuk resume online Anda. Sebagai bonus, beberapa versi warna disertakan dalam file sumber zip; hijau tua, hijau muda, biru tua dan biru muda.

Harap dicatat bahwa ini bukan desain web atau tutorial CSS, jadi hanya markup HTML5 dan Microdata Schema.org yang akan dibahas.

Sekarang, mari kita mulai!

Langkah 1: CSS

Buat lembar gaya CSS yang disebut "style.css" dan sertakan kode berikut. Jangan khawatir; ini cukup sederhana, dan pemahaman itu tidak perlu untuk tutorial ini.



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

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

a:link { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

a:visited { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

a:hover { 
	text-decoration: underline;
	color: #669933;
	font-weight: bold;
}

a:active { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

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

#content {
	background-color: #eee;
	width: 960px;
	text-align: left;
	overflow: auto;
	position: relative;
	margin: 25px 0px 25px 0px;
	border: #fff solid 2px;
}

.clear	{
	float: none;
	clear: both;
	margin: 20px 0px 20px 0px;
}


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


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

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

#contact-details .header_2 {
	float: left;
	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	{
	list-style: none;
	margin: 0px 0px 0px -12px;
	font-size: 18px;
}

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

#contact-details li.address	{
    background: url("../images/home.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.phone	{
    background: url("../images/phone.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.email	{
    background: url("../images/mail.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.site_url	{
    background: url("../images/computer.png") no-repeat;
	background-position: 0px 2px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.twitter	{
    background: url("../images/twitter_sm.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}



/* Main 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: left;
	width: 200px;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	text-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;
	color: #669933;
}

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

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

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

p.time	{
	margin: 0px;
}

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


#skills ul.list1	{	
	float: left;
	list-style: none;
	margin: 0px 0px 0px -40px;
	width: 220px;
}

#skills ul.list2	{	
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	width: 220px;
}

#skills li {
    background: url("../images/bullet_green.png") no-repeat;
	background-position: 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 solid 2px;
	background-color: #dcdcdc;
}

#footer ul.icons_1	{
	float: left;
	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; 
	list-style-type: none; 
	display: inline; 
}

#footer a	{
	color: #000;
}

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

#footer	.credits {
	float: none;
	clear: both;
	margin: 10px 0px 20px 0px;
	font-size: 12px;
	text-align: center;
}

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

Langkah 2: Markup (Tanpa Termasuk Microdata Schema.org)

Selanjutnya, kita membutuhkan sebuah .html. Ini adalah tata letak dasar yang mungkin kita kenal.



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

<title>Online Resume of Your Name</title>

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

<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css" />

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

</head>
<body>

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

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

<!-- Begin Header -->
<header>

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

<!-- Begin Profile Image Section -->
<div class="header_1">
<img src="images/profile.jpg" width="250" height="250" alt="Your Name" />
</div>
<!-- End Profile Image Section -->

<!-- Begin Profile Information Section -->
<div class="header_2">

<h1><span>Your Name</span></h1>
<h3>Web Developer / Designer</h3>

<ul class="info_1">
<li class="address">555 Street Address, Toledo, Ohio, 43606  U.S.A.</li>
</ul>

<ul class="info_2">
<li class="phone">(000) 000-0000</li>
<li class="email"><a href="mailto:your-email@gmail.com">your-email@gmail.com</a></li>
<li class="site_url"><a href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li>
<li class="twitter"><a href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li>
</ul>

</div>
<!-- End Profile Information Section -->

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

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

<div class="clear">&nbsp;</div>

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

<section class="summary">
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 class="clear">&nbsp;</div>

<!-- Begin Skills Section -->

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

<section id="skills">
<ul class="list1">
<li>XHTML</li>
<li>HTML5</li>
<li>PHP</li>
<li>JavaScript</li>
<li>Magento</li>
<li>WordPress</li>
</ul>
<ul class="list2">
<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 class="clear">&nbsp;</div>

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

<dd>

<section id="experience">

<!-- Position #1 -->

<h2 class="top">Web Developer / Designer</h2>
<p class="bus1">Company Name 1</p>
<p class="time">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>


<!-- Position #2 -->

<h2>Web Developer / Programmer</h2>
<p class="bus1">Company Name 2</p>
<p class="time">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>


<!-- Position #3 -->

<h2>Web Developer / Programmer</h2>
<p class="bus1">Company Name 3</p>
<p class="time">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 class="clear">&nbsp;</div>

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

<dd>

<section id="publications">

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

</section>

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

<div class="clear">&nbsp;</div>

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

<section id="education">

<p class="bus1">University of Toledo</p>

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

<p class="summary">Web Design</p>
<p class="time">2003 &#45; 2005</p>

<p class="edu-info">
<a href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a>
</p>

</section>

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

<div class="clear">&nbsp;</div>

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

<!-- Begin Footer Content -->
<div class="footer_content">

<!-- Begin Schema Person -->

<ul class="icons_1">
<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="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li>
<li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li>
<li><a href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li>
<li><a href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li>
<li><a href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul class="icons_2">
<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>

<!-- End Schema Person -->

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

<div class="credits">
Social Icons by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons" target="_blank" title="Paul Robert Lloyd">Paul Robert Lloyd</a>, Profile &amp; Download Icons by <a href="http://dryicons.com/" target="_blank" title="DryIcons">DryIcons</a>, Phone Icon by <a href="http://www.comfi.com/telecom-icons/" target="_blank" title="ComFi Telecom">ComFi Telecom</a>, Profile Image User Symbol by <a href="http://thenounproject.com/" target="_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/" target="_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>

Sebuah Catatan Sedikit Tentang Markup

HTML5 Shiv

Karena Microdata Schema.org didasarkan pada spesifikasi microdata HTML5, markup HTML5 digunakan untuk membuat template situs resume satu halaman. Sayangnya, browser web lama seperti IE7 dan IE8 tidak mengenali elemen HTML5 tertentu. Halaman yang ditulis menggunakan HTML5 tidak akan ditampilkan dengan benar di browser-browser lawas ini.

Berikut adalah screenshot demo resume online jika dilihat (IE8 Klik pada gambar untuk melihat gambar penuh):

Untuk mengatasi masalah dengan versi browser IE yang lebih tua ini, kode di bawah ini telah ditambahkan di antara tag

(tepat di bawah Stylesheet CSS):

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

Kode ini adalah shim JavaScript HTML5 untuk IE agar mengenali dan memberi gaya pada elemen HTML5.

Catatan: JavaScript HTML5 shim tidak diperlukan di IE9+ dan browser modern lainnya yang mendukung HTML5.

Daftar Definisi

Daftar definisi, <dd></dd> digunakan di markup dan bukannya unordered lists. Hal ini disebabkan oleh kenyataan bahwa ini lebih masuk akal, saat mempertimbangkan bagaimana setiap item memiliki judul dan deskripsi.

Section vs Article

Tampaknya ada beberapa kebingungan mengenai section HTML5 dan elemen article. Elemen section digunakan dalam markup karena tidak ada bagian dari resume yang dianggap sebagai konten mandiri.
Elemen article HTML5 digunakan untuk konten mandiri yang kemungkinan besar akan disindikasi seperti posting blog atau artikel berita. Artikel ini melakukan pekerjaan yang sangat bagus untuk menjelaskan perbedaan antara elemen HTML5 article dan section.

Langkah 3: Menambahkan Microdata Schema.org - Person dan PostalAddress

Jenis skema pertama yang akan kita tambahkan ke markup adalah Person dan PostalAddress.

Elemen `Itemscope` dan Atribut `Itemtype`

Elemen itemscope ditambahkan ke tag <div></div> yang ditempatkan di sekitar konten yang berisi informasi yang berkaitan dengan Schema, seperti ini:


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

Content that contains information about a Person

</div>

Elemen itemscope dan atribut itemtype untuk Person Schema akan ditempatkan di bagian Contact and Social Media Links dari halaman web resume, seperti:


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

Rest of Code Block Here

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


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

Rest of Code Block Here

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

Elemen itemscope dan atribut itemtype untuk PostalAddress Schema disarangkan di dalam Person Schema dan ditempatkan di sekitar daftar unordered list <ul></ul> yang berisi informasi alamat seperti ini:


<!-- Begin PostalAddress Schema -->
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<ul class="info_1">
<li class="address"><span itemprop="streetAddress">555 Street Address</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 -->

Atribut `Itemprop`

Atribut itemprop perlu ditambahkan sedapat mungkin menggunakan tag span sehingga informasi tambahan diberikan ke mesin pencari tentang halaman web kita. Berikut adalah atribut yang akan kita gunakan dari skema-skema ini:

Person Schema

itemprop="image"
itemprop="name"
itemprop="jobTitle"
itemprop="telephone"
itemprop="email"
itemprop="url"

PostalAddress Schema

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

Markup Akhir untuk Bagian Contact and Social Media Links


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

<!-- Begin Profile Image Section -->
<div class="header_1">
<img src="images/profile.jpg" itemprop="image" width="250" height="250" alt="Your Name" />
</div>
<!-- End Profile Image Section -->

<!-- Begin Profile Information Section -->
<div class="header_2">

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

<!-- Begin PostalAddress Schema -->
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<ul class="info_1">
<li class="address"><span itemprop="streetAddress">555 Street Address</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 class="info_2">
<li class="phone"><span itemprop="telephone">(000) 000-0000</span></li>
<li class="email"><a href="mailto:your-email@gmail.com" itemprop="email">your-email@gmail.com</a></li>
<li class="site_url"><a rel="me" itemprop="url" href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li>
<li class="twitter"><a rel="me" itemprop="url" href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li>
</ul>

</div>
<!-- End Profile Information Section -->

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


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

<ul class="icons_1">
<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="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="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="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="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="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul class="icons_2">
<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>

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

Langkah 4: Menambahkan Microdata Schema.org - Daftar Item

Skema berikutnya yang akan kita tambahkan ke markup adalah ItemList.

Elemen `Itemscope` dan Atribut `Itemtype`

Elemen itemscope dan atribut itemtype untuk ItemList Schema akan ditempatkan di Bagian Skills seperti ini:


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

Rest of Code Block Here

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

Atribut `Itemprop`

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

Skema `ItemList`

itemprop="itemListElement"

Markup Akhir untuk Bagian Skills


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

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

<section id="skills">
<ul class="list1">
<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 class="list2">
<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 -->

Langkah 5: Menambahkan Microdata Schema.org - Organization

Selanjutnya, skema Organization akan ditambahkan ke markup.

Elemen `Itemscope` dan Atribut `Itemtype`

Elemen itemscope dan atribut itemtype untuk Organization Schema akan ditempatkan di sekitar setiap "Position" yang tercantum di bagian "Experience", seperti:


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

Rest of Code Block Here

</div>

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

Rest of Code Block Here

</div>

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

Rest of Code Block Here

</div>

Atribut `Itemprop`

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

Organization Schema

itemprop="jobTitle"
itemprop="name"
itemprop="description"

Markup Akhir untuk Bagian Experience


<section id="experience">

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

<h2 class="top"><span itemprop="jobTitle">Web Developer / Designer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 1</span></p>
<p class="time">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>

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

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 2</span></p>
<p class="time">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>

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

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 3</span></p>
<p class="time">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>

Langkah 6: Menambahkan Microdata Schema.org - Article

Selanjutnya skema Article akan ditambahkan ke markup.

Elemen `Itemscope` dan Atribut `Itemtype` untuk Article

Elemen itemscope dan atribut itemtype untuk Article Schema akan ditempatkan di "Article" yang tercantum di Bagian Publications seperti ini:


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

Rest of Code Block Here

</div>
</section>

Atribut `Itemprop`

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

Article Schema

itemprop="name"
itemprop="url"

Markup Akhir untuk Bagian Publications


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

Langkah 7: Menambahkan Microdata Schema.org - EducationalOrganization and PostalAddress

Selanjutnya skema EducationalOrganization dan PostalAddress akan ditambahkan ke markup.

Elemen `Itemscope` dan Atribut `Itemtype` untuk EducationalOrganization

Elemen itemscope dan atribut itemtype untuk skema EducationalOrganization akan ditempatkan di Education Section seperti ini:


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

Rest of Code Block Here

</div>
</section>

Elemen `Itemscope` dan Atribut `Itemtype` untuk PostalAddress

Elemen itemscope dan atribut itemtype untuk Skema PostalAddress bersarang di dalam EducationalOrganization Schema dan ditempatkan di sekitar kode yang berisi informasi alamat di bagian Education seperti ini:


<div itemprop="address" 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>

Atribut `Itemprop`

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

EducationalOrganization Schema

itemprop="name"
itemprop="url"

PostalAddress Schema

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

Markup Akhir untuk Bagian Education


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

<p class="bus1"><span itemprop="name">University of Toledo</span></p>

<div itemprop="address" 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 class="summary"><span itemprop="name">Web Design</span></p>
<p class="time">2003 &#45; 2005</p>

<p class="edu-info">
<a itemprop="url" href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a>
</p>

</div>
</section>

Tentang Markup Authorship

Gambar menunjukkan Markup Authorship (John Resig) yang ditampilkan di hasil pencarian Google.

Pada bulan Juni 2011, Google mulai mendukung "Authorship Markup". Melalui penggunaan markup, seperti rel="author" dan rel= "me", mesin pencari dapat mengidentifikasi konten yang dibuat oleh penulis yang sama di seluruh web. Menggunakan Markup Authorship, situs web multi-pengarang dapat menghubungkan semua artikel dan tulisan yang ditulis oleh masing-masing pengarang ke "halaman pengarang" mereka yang spesifik.

Artikel dan posting individual dari situs web multi-pengarang harus dihubungkan ke halaman penulis yang sesuai dengan menggunakan tag rel="author". Jika halaman penulis juga menyertakan tautan ke Google Profile penulis menggunakan tag rel="me", informasi pengarang dapat muncul di hasil pencarian.

Untuk membantu pengguna menemukan konten berkualitas, Google menguji coba tampilan informasi penulis di hasil mesin pencarian. Fitur ini diluncurkan secara bertahap dan mungkin menjadi bagian yang sangat penting dari hasil dan peringkat mesin telusur.

Tag Rel

Bagian Contact and Social Media Links dari template situs resume satu halaman berisi URL yang terhubung ke halaman utama situs web dan media sosial. Atribut "rel" perlu ditambahkan pada tautan dari bagian ini sehingga Markup Authorship dapat diimplementasikan. Markup Authorship memungkinkan mesin pencari untuk mengidentifikasi konten yang dibuat oleh penulis yang sama di seluruh web.

Ada dua tag rel khusus yang digunakan untuk markup Authorship:

rel="me"
rel="author"

Sebagian besar tautan disertakan dalam laman web resume mengarah ke situs yang berisi orang yang sama. Jadi tag rel="me" telah ditambahkan. Untuk tautan Google Profile, tag rel="author" telah ditambahkan. Bergantung pada tempat Anda memposting resume online Anda, mungkin Anda perlu menggunakan tag rel="me" untuk tautan Google Profile.

Langkah 8: Membuat Google Profile

Jika Anda ingin mulai mengidentifikasi konten asli Anda di seluruh web menggunakan Markup Authorship, pertama Anda perlu membuat Google Profile.

Jika Anda sudah memiliki halaman Google Profile, maka Anda harus memperbarui informasi profil Anda sesuai dengan itu (tambahkan foto diri Anda, informasi tentang diri Anda, pekerjaan, dll.)

Anda juga perlu memastikan bahwa ada tab +1 sedang ditampilkan di halaman.

Jika profil Google Anda menyertakan tangkapan diri yang bagus dan jernih dari diri Anda, foto tersebut layak tampil sebagai thumbnail di hasil penelusuran.

Langkah 9: Menautkan Halaman Web ke Google Profile Anda

Menurut Google, untuk membuat kepengarangan sebuah halaman web, Anda perlu melakukan dua hal:

Tautkan halaman web itu ke Google Profile Anda
Perbarui Google Profile Anda dengan menautkan kembali ke beranda situs yang ada di halaman web.

Anda dapat menautkan konten ke Google Profile menggunakan tautan teks:

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

atau dengan menggunakan kode Tombol Google Profile:

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

Google baru-baru ini membuat perubahan pada instruksi markup authorship mereka yang mempengaruhi penggunaan tag rel="author" dan rel="me". Instruksi baru mengatakan untuk menggunakan rel="author" untuk kedua link teks dan tombol profil. Namun, tag rel="me" perlu digunakan, bukan rel="author". Lihat gambar di bawah ini.

Tangkapan layar "Error: Author profile page does not have a rel=me link to a Google Profile"

Menggunakan John Resig sebagai contoh:

Di situs utama Halaman About John Resig yang dikaitkan dengan Google Profile-nya dengan menggunakan rel="me"
Dalam Google Plus Profile dari John Resig dia menghubungkan ke Halaman Utama dan Halaman About dari situs web utamanya

Langkah 10: Melengkapi Formulir Google Authorship (Penting!)

Setelah Anda menambahkan microdata Schema.org dan menyelesaikan langkah 8 dan 9, Lengkapi dan kirimkan Formulir Permintaan Google Authorship.

Markup Authorship Anda mungkin tidak bekerja dengan benar sampai Formulir Google Authorship selesai dan diserahkan.

Langkah 11: Menguji Markup Microdata Menggunakan Rich Snippets Testing Tool

Klik gambar untuk melihat hasil pengujian yang lengkap

Anda dapat memastikan bahwa Google dapat mengurai dan menampilkan markup microdata Anda dengan benar di hasil pencarian dengan memeriksa halaman web Anda menggunakan Google Rich Snippets Testing Tool. Alat Pengujian ini dapat memeriksa beberapa jenis markup data terstruktur termasuk Microdata, Micro formats dan RDFa.

Catatan: Google Rich Snippets Testing Tool berada di Beta dan dapat memiliki hasil yang tidak diharapkan. Hasil yang ditunjukkan pada tangkapan layar ukuran penuh mencakup kesalahan "Warning: Missing required field fn." dari Schema.org tidak menggunakan tag "fn", namun tag-nya digunakan dengan Microformats. Ini kemungkinan besar sebuah kesalahan.

Semua Sudah Selesai!

Anda sekarang telah membuat resume online yang bagus dengan menggunakan HTML5 dan Microdata Schema.org, yang memberikan informasi tentang Anda yang mungkin ditampilkan dalam hasil mesin pencari. Selain itu, dengan menggunakan Authorship Markup, Anda dapat membantu mesin pencari mengidentifikasi semua konten asli Anda di seluruh web!

Ada pertanyaan? Beritahu kami di komentar dan terima kasih banyak telah membaca!

Cara Membuat Resume yang Ditenagai HTML5 Microdata

Item Bonus Termasuk!

Langkah 1: CSS

Langkah 2: Markup (Tanpa Termasuk Microdata Schema.org)

Sebuah Catatan Sedikit Tentang Markup

HTML5 Shiv

Daftar Definisi

Section vs Article

Langkah 3: Menambahkan Microdata Schema.org - Person dan PostalAddress

Elemen Itemscope dan Atribut Itemtype

Atribut Itemprop

Person Schema

PostalAddress Schema

Markup Akhir untuk Bagian Contact and Social Media Links

Langkah 4: Menambahkan Microdata Schema.org - Daftar Item

Elemen Itemscope dan Atribut Itemtype

Atribut Itemprop

Skema ItemList

Markup Akhir untuk Bagian Skills

Langkah 5: Menambahkan Microdata Schema.org - Organization

Elemen Itemscope dan Atribut Itemtype

Atribut Itemprop

Organization Schema

Markup Akhir untuk Bagian Experience

Langkah 6: Menambahkan Microdata Schema.org - Article

Elemen Itemscope dan Atribut Itemtype untuk Article

Atribut Itemprop

Article Schema

Markup Akhir untuk Bagian Publications

Langkah 7: Menambahkan Microdata Schema.org - EducationalOrganization and PostalAddress

Elemen Itemscope dan Atribut Itemtype untuk EducationalOrganization

Elemen Itemscope dan Atribut Itemtype untuk PostalAddress

Atribut Itemprop

EducationalOrganization Schema

PostalAddress Schema

Markup Akhir untuk Bagian Education

Tentang Markup Authorship

Tag Rel

Langkah 8: Membuat Google Profile

Langkah 9: Menautkan Halaman Web ke Google Profile Anda

Langkah 10: Melengkapi Formulir Google Authorship (Penting!)

Langkah 11: Menguji Markup Microdata Menggunakan Rich Snippets Testing Tool

Semua Sudah Selesai!

Elemen `Itemscope` dan Atribut `Itemtype`

Atribut `Itemprop`

Elemen `Itemscope` dan Atribut `Itemtype`

Atribut `Itemprop`

Skema `ItemList`

Elemen `Itemscope` dan Atribut `Itemtype`

Atribut `Itemprop`

Elemen `Itemscope` dan Atribut `Itemtype` untuk Article

Atribut `Itemprop`

Elemen `Itemscope` dan Atribut `Itemtype` untuk EducationalOrganization

Elemen `Itemscope` dan Atribut `Itemtype` untuk PostalAddress

Atribut `Itemprop`