So erstellen Sie einen HTML5-Mikrodaten-basierten Lebenslauf

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Im Mai 2009 führte Google Rich Snippets ein, einen kleinen Informationsblock, der in den Suchmaschinenergebnissen von Google angezeigt wird, um Nutzern die Entscheidung zu erleichtern, welche Seiten für ihre Suche relevant sind. Im Juni 2011 gab Google die Gründung von Schema.org bekannt, einer neuen Initiative von Google, Bing und Yahoo! das darauf abzielt, das Web zu verbessern, indem ein strukturiertes Daten-Markup-Schema erstellt wird.

Dieses Tutorial zeigt, wie Sie einen Online-Lebenslauf erstellen, der Schema.org-Mikrodaten enthält. Das Tutorial enthält auch Anweisungen zur Verwendung von Authorship Markup!

Bonusartikel inklusive!

Die Tutorial-Demo ist eine einseitige Website-Vorlage, die Sie für Ihren Online-Lebenslauf verwenden können. Als Bonus sind mehrere Farbversionen in der Quelldatei zip enthalten; dunkelgrün, hellgrün, dunkelblau und hellblau.

Bitte beachten Sie, dass dies kein Webdesign- oder CSS-Tutorial ist, daher wird nur das HTML5- und Schema.org-Mikrodaten-Markup behandelt.

Jetzt fangen wir an!

Schritt 1: Das CSS

Erstellen Sie ein CSS-Stylesheet namens "style.css" und fügen Sie den folgenden Code ein. Mach dir keine Sorgen; Es ist ziemlich einfach und für dieses Tutorial ist es nicht erforderlich, es zu verstehen.

/* 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;
}

Schritt 2: Das Markup (ohne Schema.org-Mikrodaten enthalten)

Als nächstes brauchen wir eine .html. Dies ist ein grundlegendes Layout, mit dem wir alle wahrscheinlich vertraut sind.

<!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>

Ein paar Anmerkungen zum Markup

HTML5-Scheibe

Da Schema.org-Mikrodaten auf der HTML5-Mikrodatenspezifikation basieren, wird HTML5-Markup verwendet, um die Website-Vorlage für den Lebenslauf für eine Seite zu erstellen. Leider erkennen ältere Webbrowser wie IE7 und IE8 bestimmte HTML5-Elemente nicht. Mit HTML5 geschriebene Seiten werden in diesen älteren Browsern nicht korrekt gerendert.

Hier ist ein Screenshot der Online-Lebenslauf-Demo in (IE8 Klicken Sie auf das Bild, um das ganze Bild zu sehen):

Um das Problem mit diesen älteren IE-Browserversionen zu lösen, wurde der folgende Code hinzugefügt zwischen

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

Dieser Code ist ein HTML5-JavaScript-Shim für IE, um die HTML5-Elemente zu erkennen und zu gestalten.

Hinweis: In IE9+ und anderen modernen Browsern, die HTML5 unterstützen, ist kein HTML5-JavaScript-Shim erforderlich.

Definitionsliste

Definitionslisten, <dd></dd> wurden im Markup anstelle von ungeordneten Listen verwendet. Dies liegt daran, dass es sinnvoller ist, wenn man bedenkt, wie jeder Artikel einen Titel und eine Beschreibung hat.

Abschnitt vs. Artikel

Es scheint einige Verwirrung bezüglich HTML5-Abschnitts- und Artikelelementen zu geben. Das Abschnittselement wurde im Markup verwendet, da keiner der Abschnitte des Lebenslaufs als eigenständiger Inhalt betrachtet wird. Das HTML5-Artikelelement wird für eigenständige Inhalte verwendet, die höchstwahrscheinlich wie ein Blog- oder Nachrichtenartikel syndiziert werden. Dieser Artikel leistet wirklich gute Arbeit, um den Unterschied zwischen HTML5-Artikeln und Abschnittselementen zu erklären.

Schritt 3: Schema.org-Mikrodaten hinzufügen - Person und Postadresse

Die ersten Schematypen, die wir dem Markup hinzufügen werden, sind Person und PostalAddress.

`Itemscope`-Element und `Itemtype`-Attribut

Ein itemscope-Element wird <div></div>-Tags hinzugefügt, die um den Inhalt herum platziert werden, der die Informationen zum Schema enthält, wie folgt:

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

Content that contains information about a Person

</div>

Das itemscope-Element und das itemtype-Attribut für das Person-Schema werden sowohl im Kontakt- als auch im Social-Media-Link-Abschnitt der Lebenslauf-Webseite wie folgt platziert:

<!-- 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 -->

Das itemscope-Element und das itemtype-Attribut für das PostalAddress-Schema sind im Person-Schema verschachtelt und werden um die ungeordnete Liste <ul></ul> mit den Adressinformationen wie folgt platziert:

<!-- 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 -->

`Itemprop`-Attribute

Itemprop-Attribute müssen gegebenenfalls mithilfe von span-Tags hinzugefügt werden, damit Suchmaschinen zusätzliche Informationen über unsere Webseite bereitgestellt werden. Im Folgenden sind die Attribute aufgeführt, die wir aus diesen Schemas verwenden werden:

Personenschema

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

PostalAddress Schema

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

Endgültiges Markup für die Bereiche Kontakt und 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 -->

Schritt 4: Schema.org-Mikrodaten hinzufügen - Artikelliste

Das nächste Schema, das wir dem Markup hinzufügen werden, ist ItemList.

`Itemscope`-Element und `Itemtype`-Attribut

Das itemscope-Element und das itemtype-Attribut für das ItemList-Schema werden wie folgt im Skills-Abschnitt platziert:

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

Rest of Code Block Here

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

`Itemprop`-Attribute

Fügen Sie das Attribut "itemprop" an geeigneten Stellen mit <span></span>-Tags hinzu. Unten sind die Attribute, die wir aus diesem Schema verwenden werden:

`ItemList`-Schema

itemprop="itemListElement"

Endgültiges Markup für den Skills-Bereich

<!-- 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 -->

Schritt 5: Schema.org-Mikrodaten hinzufügen - Organisation

Als Nächstes wird das Organization-Schema zum Markup hinzugefügt.

`Itemscope`-Element und `Itemtype`-Attribut

Das itemscope-Element und das itemtype-Attribut für das Organization-Schema werden um jede im Abschnitt "Erfahrung" aufgeführte "Position" platziert, wie folgt:

<!-- 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>

`Itemprop`-Attribute

Fügen Sie das Attribut "itemprop" an geeigneten Stellen mit <span></span>-Tags hinzu. Im Folgenden sind die Attribute aufgeführt, die wir aus diesem Schema verwenden werden:

Organisationsschema

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

Endgültiges Markup für den Erfahrungsbereich

<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>

Schritt 6: Schema.org-Mikrodaten hinzufügen - Artikel

Als nächstes wird das Article-Schema zum Markup hinzugefügt.

`Itemscope`-Element und `Itemtype`-Attribut für Artikel

Das itemscope-Element und das itemtype-Attribut für das Article-Schema werden wie folgt in den im Abschnitt "Veröffentlichungen" aufgelisteten "Artikel" platziert:

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

Rest of Code Block Here

</div>
</section>

`Itemprop`-Attribute

Fügen Sie das Attribut "itemprop" an geeigneten Stellen mit <span></span>-Tags hinzu. Im Folgenden sind die Attribute aufgeführt, die wir aus diesem Schema verwenden werden:

Artikelschema

itemprop="name"
itemprop="url"

Endgültiger Aufschlag für den Abschnitt Veröffentlichungen

<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>

Schritt 7: Schema.org-Mikrodaten hinzufügen - EducationalOrganization and PostalAddress

Als nächstes werden die Schemas EducationalOrganization und PostalAddress zum Markup hinzugefügt.

`Itemscope`-Element und `Itemtype`-Attribut für EducationalOrganization

Das itemscope-Element und das itemtype-Attribut für das EducationalOrganization-Schema werden wie folgt im Education-Abschnitt platziert:

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

Rest of Code Block Here

</div>
</section>

`Itemscope`-Element und `Itemtype`-Attribut für PostalAddress

Das itemscope-Element und das itemtype-Attribut für das PostalAddress-Schema sind im EducationalOrganization-Schema verschachtelt und werden wie folgt um den Code mit den Adressinformationen im Education-Abschnitt platziert:

<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>

`Itemprop`-Attribute

Fügen Sie das Attribut "itemprop" gegebenenfalls mit <span></span>-Tags hinzu. Im Folgenden sind die Attribute aufgeführt, die wir aus diesen Schemas verwenden werden:

Bildungsorganisationsschema

itemprop="name"
itemprop="url"

PostalAddress Schema

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

Endgültiger Aufschlag für den Bildungsabschnitt

<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>

Über das Autorenschafts-Markup

Das Bild zeigt das Authorship Markup (John Resig), das in den Google-Suchergebnissen angezeigt wird.

Im Juni 2011 begann Google mit der Unterstützung von "Authorship Markup". Durch die Verwendung von Markups wie rel="author" und rel="me" können Suchmaschinen Inhalte erkennen, die von demselben Autor im gesamten Web erstellt wurden. Mithilfe von Authorship Markup kann eine Website mit mehreren Autoren alle Artikel und Beiträge jedes Autors mit seiner eigenen spezifischen "Autorenseite" verlinken.

Einzelne Artikel und Beiträge einer Website mit mehreren Autoren müssen mit dem Tag rel="author" auf die entsprechende Autorenseite verlinken. Wenn die Autorenseite auch einen Link zum Google-Profil des Autors mit dem Tag rel="me" enthält, können die Autoreninformationen in den Suchergebnissen erscheinen.

Um Nutzern dabei zu helfen, qualitativ hochwertige Inhalte zu entdecken, führt Google die Anzeige von Autoreninformationen in den Suchmaschinenergebnissen durch. Diese Funktion wird nach und nach eingeführt und kann ein sehr wichtiger Bestandteil von Suchmaschinenergebnissen und -rankings werden.

Rel-Tags

Sowohl der Kontakt- als auch der Social-Media-Links-Abschnitt der einseitigen Lebenslauf-Site-Vorlage enthalten URLs, die auf eine primäre Website und Social-Media-Seiten verweisen. Das Attribut "rel" muss den Links dieser Abschnitte hinzugefügt werden, damit das Authorship Markup implementiert werden kann. Mit dem Autorenschafts-Markup können Suchmaschinen Inhalte identifizieren, die von demselben Autor im gesamten Web erstellt wurden.

Es gibt zwei spezifische rel-Tags, die für das Markup der Autorschaft verwendet werden:

rel="me"
rel="author"

Die meisten Links auf der Lebenslauf-Webseite verweisen auf Websites, bei denen es um dieselbe Person geht. Also wurde das rel="me"-Tag hinzugefügt. Für den Link zum Google-Profil wurde das Tag rel="author" hinzugefügt. Je nachdem, wo Sie Ihren Online-Lebenslauf veröffentlichen, müssen Sie möglicherweise stattdessen das rel="me"-Tag für den Google-Profillink verwenden.

Schritt 8: Erstellen Sie ein Google-Profil

Wenn Sie Ihre Originalinhalte mithilfe des Autorenschafts-Markups im gesamten Web identifizieren möchten, müssen Sie zunächst ein Google-Profil erstellen.

Wenn Sie bereits eine Google-Profilseite haben, sollten Sie Ihre Profilinformationen entsprechend aktualisieren (ein Bild von sich, Angaben zu Ihrer Person, Beruf etc.)

Sie müssen auch sicherstellen, dass auf der Seite ein +1-Tab angezeigt wird.

Wenn Ihr Google-Profil eine gute, klare Kopfaufnahme von sich enthält, kann es als Miniaturansicht in den Suchergebnissen angezeigt werden.

Schritt 9: Webseite(n) mit Ihrem Google-Profil verknüpfen

Laut Google müssen Sie zwei Dinge tun, um die Urheberschaft einer Webseite festzulegen:

Verknüpfen Sie diese Webseite mit Ihrem Google-Profil
Aktualisieren Sie Ihr Google-Profil mit einem Link zurück zur Startseite der Website, auf der sich die Webseite befindet.

Sie können Ihre Inhalte über einen Textlink mit Ihrem Google-Profil verknüpfen:

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

oder indem Sie den Code der Google Profile-Schaltfläche verwenden:

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

Google hat vor Kurzem Änderungen an den Markup-Anweisungen für Autoren vorgenommen, die sich auf die Verwendung der Tags rel="author" und rel="me" auswirken. Die neuen Anweisungen besagen, rel="author" sowohl für die Text- als auch für die Profilschaltflächen-Links zu verwenden. Anstelle von rel="author" muss jedoch das Tag rel="me" verwendet werden. Siehe Screenshot unten.

Screenshot von "Fehler: Autorenprofilseite hat keinen rel=me-Link zu einem Google-Profil"

Am Beispiel von John Resig:

Auf der About-Seite der primären Website von John Resig hat er mit rel="me" auf sein Google-Profil verlinkt.
In John Resigs Google Plus-Profil verlinkte er auf die Startseite und die About-Seite seiner Hauptwebsite

Schritt 10: Ausfüllen des Google-Autorenschaftsformulars (Wichtig!)

Sie haben die Schema.org-Mikrodaten hinzugefügt und die Schritte 8 und 9 ausgeführt. Füllen Sie das Google Authorship Request-Formular aus und senden Sie es ab.

Ihr Autorenschafts-Markup funktioniert möglicherweise nicht richtig, bis das Google-Autorenschaftsformular ausgefüllt und übermittelt wurde.

Schritt 11: Mikrodaten-Markup mit dem Rich Snippets Testing Tool testen

Klicken Sie auf das Bild, um die vollständigen Testergebnisse anzuzeigen

Sie können sicherstellen, dass Google Ihr Mikrodaten-Markup korrekt analysieren und in den Suchergebnissen anzeigen kann, indem Sie Ihre Webseite mit dem Google Rich Snippets Testing Tool überprüfen. Dieses Testtool kann verschiedene Arten von strukturierten Datenauszeichnungen überprüfen, einschließlich Mikrodaten, Mikroformate und RDFa.

Hinweis: Das Google Rich Snippets Testing Tool befindet sich in der Betaphase und kann zu unerwarteten Ergebnissen führen. Die im Screenshot in voller Größe angezeigten Ergebnisse enthalten einen Fehler "Warnung: Fehlendes erforderliches Feld fn." Schema.org verwendet das "fn"-Tag nicht, jedoch wird das Tag mit Mikroformaten verwendet. Dies ist höchstwahrscheinlich ein Fehler.

Alles erledigt!

Sie haben jetzt einen gut aussehenden Online-Lebenslauf mit HTML5 und Schema.org-Mikrodaten erstellt, der Informationen über Sie enthält, die in den Suchmaschinenergebnissen angezeigt werden können. Darüber hinaus können Sie durch die Verwendung von Authorship Markup Suchmaschinen dabei helfen, alle Ihre Originalinhalte im Web zu identifizieren!

Haben Sie Fragen? Lass es uns in den Kommentaren wissen und vielen Dank fürs Lesen!

So erstellen Sie einen HTML5-Mikrodaten-basierten Lebenslauf

Bonusartikel inklusive!

Schritt 1: Das CSS

Schritt 2: Das Markup (ohne Schema.org-Mikrodaten enthalten)

Ein paar Anmerkungen zum Markup

HTML5-Scheibe

Definitionsliste

Abschnitt vs. Artikel

Schritt 3: Schema.org-Mikrodaten hinzufügen - Person und Postadresse

Itemscope-Element und Itemtype-Attribut

Itemprop-Attribute

Personenschema

PostalAddress Schema

Endgültiges Markup für die Bereiche Kontakt und Social Media Links

Schritt 4: Schema.org-Mikrodaten hinzufügen - Artikelliste

Itemscope-Element und Itemtype-Attribut

Itemprop-Attribute

ItemList-Schema

Endgültiges Markup für den Skills-Bereich

Schritt 5: Schema.org-Mikrodaten hinzufügen - Organisation

Itemscope-Element und Itemtype-Attribut

Itemprop-Attribute

Organisationsschema

Endgültiges Markup für den Erfahrungsbereich

Schritt 6: Schema.org-Mikrodaten hinzufügen - Artikel

Itemscope-Element und Itemtype-Attribut für Artikel

Itemprop-Attribute

Artikelschema

Endgültiger Aufschlag für den Abschnitt Veröffentlichungen

Schritt 7: Schema.org-Mikrodaten hinzufügen - EducationalOrganization and PostalAddress

Itemscope-Element und Itemtype-Attribut für EducationalOrganization

Itemscope-Element und Itemtype-Attribut für PostalAddress

Itemprop-Attribute

Bildungsorganisationsschema

PostalAddress Schema

Endgültiger Aufschlag für den Bildungsabschnitt

Über das Autorenschafts-Markup

Rel-Tags

Schritt 8: Erstellen Sie ein Google-Profil

Schritt 9: Webseite(n) mit Ihrem Google-Profil verknüpfen

Schritt 10: Ausfüllen des Google-Autorenschaftsformulars (Wichtig!)

Schritt 11: Mikrodaten-Markup mit dem Rich Snippets Testing Tool testen

Alles erledigt!

`Itemscope`-Element und `Itemtype`-Attribut

`Itemprop`-Attribute

`Itemscope`-Element und `Itemtype`-Attribut

`Itemprop`-Attribute

`ItemList`-Schema

`Itemscope`-Element und `Itemtype`-Attribut

`Itemprop`-Attribute

`Itemscope`-Element und `Itemtype`-Attribut für Artikel

`Itemprop`-Attribute

`Itemscope`-Element und `Itemtype`-Attribut für EducationalOrganization

`Itemscope`-Element und `Itemtype`-Attribut für PostalAddress

`Itemprop`-Attribute