schema.org und Google+. Bedeutung und Implementierung für Weblogs – Teil 2

von Henry Zeitler

Nachdem ich im ersten Teil die Hintergründe zu und die Zusammenhänge von Google+, Search, plus Your World und schema.org angeschnitten habe, möchte ich den zweiten Teil der praktischen Arbeit – der Implementierung – widmen. Ich stelle hier eine Möglichkeit der Anwendung von schema.org-Annotationen, des Author- und Publisher-Tags und (später) der Google+-Authentication am Beispiel eines Weblogs vor.

Bereit? Beginnen wir ganz oben, im…

Header


<html itemscope itemtype="http://schema.org/Blog"> 
  <head> 
  . 
  . 
  . 
    <meta itemprop="name" content="[Voller Name der Seite]"> 
    <meta itemprop="description" content="[Kurze Beschreibung der Seite]"> 
    <meta itemprop="image" content="[Absoluter Pfad zum Bild oder Logo]">  
    <link href="https://plus.google.com/[Google+ Page ID]" rel="author" /> 
    <link href="https://plus.google.com/[Google+ Account ID]" rel="publisher" /> 
  . 
  . 
  . 
  </head>

Um genau zu sein bereits im html-Tag. Dort deklarieren wir die Komplette Seite erstmal als Blog. Somit kann der Robot die darauf folgenden Informationen unter diesem Schema einordnen. Eine Alternative hierzu wäre an dieser Stelle übrigens WebPage.

Viele Wege führen nach Rom. Die oben aufgeführten Informationen in den meta-Tags müssen nicht zwingend im Header abgegriffen werden. Z. B. können Bild bzw. Logo, Blogname und dessen Beschreibung an bereits vorhandenen Stellen irgendwo im Quelltext bestimmt werden. Wer aber die Kontrolle über die auszuliefernden Informationen haben will, sollte sie im Header festlegen und die Inhalte selbst definieren.

Um die authentication zum Google-Account zu ermöglichen muss der Author-Link in das Blog eingebunden werden. Auch dieser kann theoretisch an einer anderen Stelle abgegriffen werden (z. B. bei Links und Buttons, die auf die Google Page verweisen), aber im Header kann das Link-Tag immer problemlos untergebracht werden. Eine Unbekannte stellt hier der publisher-Link dar. Er kann zwar in Verbindung mit dem author-Tag eine Fehlermeldung in den Rich Snippet Testing Tool erzeugen, diese sollte aber laut Google getrost ignoriert werden. In meinem Blog habe ich den author mit meiner Google+ Page verlinkt und den publisher mit meinem eigentlichen Google+ Account. Das Test-Tool findet das nicht schlimm.

 

Viele wichtige Infos befinden sich natürlich auch im…

Body


<section role="main" itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">

	<time itemprop="dateCreated" datetime="2012-03-01">01 Mrz 2012</time> 

	<h2 itemprop="headline"> 
		<a title="[Titel des Links]" href="[Link zum Blogpost]" rel="bookmark">[Überschrift des Blogposts]</a> 
	</h2>  

	<div> 
		<span itemprop="author">[Autor]</span> <span itemprop="articleSection">
			<a href="[Link zur Kategorie]" title="[Titel]" rel="category tag">[Kategorie]</a>
		</span> 
	</div>  

	<div> 
		<a href="[Link zum Artikel]" rel="bookmark" title="[Titel des Artikels]"> 
			<img itemprop="thumbnailUrl" src="[Link zum Thumbnail]" alt="[Alternativtext Thumbnail]" /> 
		</a> 
	</div>  

	<div itemprop="articleBody"> [Der Inhalt des Artikels] </div>  

</section>

Das Element, welches den kompletten Blogpost umschließt bekommt auch das entsprechende itemprop Attribut, nämlich blogPosts. Damit die Informationen innerhalb dieses Elements noch genauer spezifiziert werden können, beginnt hier die nächste Verschachtelung mit itemscope itemtype und dem zugehörigen BlogPosting. Jetzt werden alle folgenden Annotationen innerhalb des Elements dem BlogPosting zugeordnet und nicht mehr dem Blog.

Nicht nur die menschlichen Besucher eines Blogs, sondern auch Suchmaschinen legen großen Wert auf Aktualität der Inhalte. Um anzuzeigen wann der Post erstellt wurde liefern Blogsysteme das Datum eines Artikels mit aus. Ein Datum auf einer Internetseite sollte dabei immer in einer maschinenlesbaren Form dargestellt werden. Deswegen wurde an dieser Stelle das <time> Element eingefügt. Auch wenn <time> nirgends verfügbar sein sollte wird das Datum in seinem gegebenen Format immer mit dateCreated gekennzeichnet.

Die nächsten Informationen werden einfach der Reihenfolge nach ausgezeichnet. Der hier aufgeführte author kommt dem im Header nicht in die Quere, weil die Verlinkung zum Google-Account nicht mitgeliefert wird. Es handelt sich hierbei tatsächlich um den Autor des Artikels.
Wenn vorhanden, sollte auch direkt das Thumbnail zum Blogpost ausgeliefert werden.
Der eigentliche Inhalt des Artikels wird mit dem Attribut articleBody versehen.

 

Die wichtigen Infos zur Person befinden sich (zum Beispiel) im…

Sidebar


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

	<a href="[Link]" title="[Titel des Links]"><img src="[Pfad zum Bild]" alt="[mein Bild]" itemprop="image" /></a> 

	<p> 
		<strong itemprop="url">[Link zum Blog]</strong> 
		<span itemprop="name">[Name des Bloggers]</span> 
		<abbr title="[Beschreibung des Berufs]" itemprop="jobTitle">[Beruf]</abbr> 
		<span itemprop="address" itemscope itemtype="http://schema.org/Address"> 
			<span itemprop="locality">Region D&uuml;sseldorf</span> 
		</span> 
	</p>   

	<p>
		&#9993; Kontakt: <a href="mailto:[Emailadresse]" title="[Email an Emailadresse]"> <span itemprop="email">[Emailadresse]</span> </a> 
	</p>  

</div>  

<p> 
	<a rel="author" href="https://plus.google.com/114945019104499996712" title="[Beschreibung des Links]"> 
		<img src="http://ssl.gstatic.com/images/icons/gplus-32.png" width="32" height="32"> 
	</a> 
</p>

Die aufgeführten Angaben bilden die Visitenkarte des Bloggers bzw. Webseitenbetreibers. Der Informationsblock, der unter der Verwendung von Microformats als vCard oder hCard bekannt ist, sieht mit schema.org wie oben dargestellt aus.

Da in diesem Beispiel die Person als Verantwortliche/r für die Seite aufgeführt werden soll, läuft der Block unter accountablePerson. Das kommt dann dem Impressum oder Disclaimer gleich. Um auch hier genauer zu spezifizieren wird für die Verschachtelung das Schema Person verwendet. Neben den üblichen Infos macht es Sinn ein Bild (evtl. einen Avatar) auszuliefern, damit dieses z. B. in den SERPs angezeigt werden kann sowie den Backlink zum Blog. Das sorgt für mehr Traffic.

Im unteren Bereich des Codeblocks ist die von Google empfohlene Verlinkung zum Account bzw. der Page aufgeführt. Auch hier ist noch einmal der Link mit rel="author" ausgezeichnet. Das Attribut rel="author" darf ruhig an mehreren Stellen im Sourcecode existieren. Bei dem Bild innerhalb der a-Tags handelt es sich übrigens um das Original-Icon von Google+.

 

Und nicht den…

Footer

…vergessen


© <span itemprop="copyrightYear">[Jahreszahl]</span> | <span itemprop="copyrightHolder">[Urheber]</span>

comments powered by Disqus