Im Nachgang zum gestrigen Artikel SEO: Microformats vs RDF vs Mikrodata – Microformats oder RDF oder Mikrodata verwenden? möchte ich heute auf die sich zwangsweise ergebende Frage Auszeichnung nach „data-vocabulary.org oder  schema.org?“ eingehen.

Die Antwort ist einfach, wenn bekannt ist wofür RDF steht bzw. das RDF-Schema (RDF Vocabulary Description Language).
Daher, data-vocabulary.org ist für RDF zu verwenden, schema.org eher für mikrodata.

Weitere führende Infos bei wikipedia

Manch einer nennt Microformats und RDFa die stille Revolution bzgl. semantic web.

Aber was ist am besten? RDFa oder microformats? Wer sich mit der Implementation des semantischen Webs beschäftigt, und z.B. die Umsetzungsempfehlungen aus den Google Webmaster Richtlinien liest, merkt schnell das es verschiedene Wege zur Umsetzung gibt. Aber was ist der besser Weg?

Die Antwort ist nicht so einfach.

Microformats

Gegründet wurde die ursprüngliche Bewegung unter dem Namen microformats.org und der zugehörigen Website im Juni 2005. Die Gründer waren Dan Cederholm und Tantex Çelik. Letzterer ist bei vielen Webentwicklern für seine teilweise hochkomplexen Internet-Explorer-Hacks bekannt, die mit den diversen Kommentarmöglichkeiten spielen. Tantek Çelik hat allerdings auch für Microsoft und Technorati gearbeitet.

Das Besondere an den Microformats von microformats.org ist, dass sie keine neuen Technologien und Standards benötigen. Sie verwenden vollständig die Funktionalität von XHTML. Während die Microformats also quasi jederzeit eingeführt werden konnten, schlug sich das eigentliche semantische Web mit komplexeren Problemen herum. Schon seit vielen Jahren gab es Bemühungen, Bedeutung in Tag-basierte Sprachen zu mischen.

Microformats (oder zu deutsch “Mikroformate”) verwenden bekannte HTML Attribute wie “class” und Hierarchien, um Auszeichnungen aus einer fest definierten Auswahl vor zu nehmen.

Vorteile

• Einfach
• Führt keine neuen HTML-Attribute ein, gültiges HTML4.

Nachteile

• Nur eine fest definierte Auswahl an Formaten, nicht erweiterbar.
• Keine definierte API zur Extraktion der Daten.
• Keine definierte Internationalisierungs-Unterstützung.
• Die Verwendung von “class” kann zu Konflikten mit CSS-Definitionen führen.

Microformats Beispiel

<p class="vcard">
<a class="fn email" href="mailto:mail@fly2mars-media.de">Vorname Name</a> arbeitet als
<span class="role">SEO-Berater</span> für
<span class="org">Fly2Mars-Media.de</a>.
</p>

RDF

RDFa erweitert den HTML-Standard um RDF-Daten in (X)HTML-Dokumente einzubetten.

Der vielleicht wichtigste Ansatz ist RDF, das Ressource Description Framework. Dabei handelt es sich nicht um einen Standard, sondern um eine ganze Standard- Familie. Verwaltet wird sie – wie HTML und XHTML – vom W3C. RDF bietet im Grunde eine Beschreibung von Objekten.

Ursprünglich hauptsächlich für Metadaten gedacht, wurde der Ansatz bald auf alle Arten von Daten ausgeweitet. Da RDF selbst allerdings recht umfangreich ist und nicht direkt mit Websites interagiert, hat das W3C den Microformats-Gedanken aufgegriffen und mit RDFa eine einfache RDF-Variante für die Integration in XHTML geschaffen.

Vorteile

• Maximale Flexibilität, umfangreich erweiterbar, um eigene Vokabularien zu definieren.
• Erlaubt Mashups verschiedener Vokabularien.
• Prefixe erlauben kompakteren Code da URLs nicht immer voll ausgeschrieben werden müssen.
• Erlaubt die beliebige Verkettung von Elementen.
• RDFa Dom API

Nachteile

• Hohe Komplexität.
• Auf XML und XHTML ausgerichtet, wenn auch mittlerweile in HTML5 einbettbar.
• Führt 8 neue HTML-Attribute ein.

RDF Beispiel

<p xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<a href="mailto:mail@fly2mars-media.de" rel="v:url" property="v:name">Vorname Name</a> arbeitet als
<span property="v:role">SEO-Berater</span> für
<span property="v:affiliation">Fly2Mars-Media</span>.
</p>

Microdata

Microdata ist eine Erweiterung für HTML5, um semantische Annotationen einzubetten.

Vorteile

• Kompromiss zwischen Flexibilität+Erweiterbarkeit und moderater Komplexität.
• Näher am HTML5-Standard, z.B. mit Unterstützung des HTML5 time Elements.
• Nativer JSON-Export
• Microdata DOM API
• Bevorzugtes Format der Suchmaschinen-Riesen Google,  Microsoft und Yahoo! (siehe auch Schema.org).

Nachteile

• Erlaubt keine mehrfachen Eigenschaften für Elemente, wie z.B. Email und Name in einem einzigen Link-Element.
• Führt 5 neue HTML-Attribute ein.

Mikrodata Beispiel

<p itemscope itemtype="http://schema.org/Person">
<a itemprop="email" href="mailto:mail@fly2mars-media.de">
<span itemprop="name">Vorname Name</span>
</a> arbeitet als <span itemprop="jobTitle">SEO-Berater</span> für <span>fly2mars-media.de</a>.
</p>

Fazit

RDF wird gut von Google erkannt, bietet mehr Möglichkeiten als Microformats. Validiert werden können die Seiten mit dem Rich Snippets Testing Tool von Google. Google empfiehlt Mikrodata, wohl auch weil mehr HTML5.

Deshalb verwende ich jetzt RDF und Mikrodata.

Google unterstützt Rich Snippets in der Anzeige der Suchergebnisse (SERPs). Neben Microformats und RDFa wird auch Microdata unterstützt, letzteres ist dabei das bevorzugtes Format und von Google empfohlen. Auf  Schema.org befindet sich eine gute Dokumentation, diese sollte befolgt werden.

Eure Erfahrungen & Ergänzungen?

Her damit, aktuell spannendes Thema, neben Bewertungen, Autoren-Infos, Kontaktdaten, etc. lässt sich vieles damit so auszeichnen das die Daten richtig von den Suchmaschinen (oder anderen Maschinen lesbaren Geräten) richtig erkannt und verarbeitet werden können. Web 3.0 kann kommen! 🙂

Zur erstellung & Optimierung von Webpages empfehle ich folgende 2 Plugins für den Firefox:

Html Validator– w3c validation

Page Speed (benötigt firebug plugin)

Foxy SEO Tool – some SEO Features

CSS Reloader – CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself.

FireQuery – a Firebug extension for jQuery development

SenSEO – SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

Eventbug – diese Extension erweitert Firebug um ein „Events“-Tab und soll die Arbeit mit Event-Handlers erleichtern.

SeoQuake SEO– SeoQuake ist eine SEO-Extension für Webmasters, die mit Suchmaschinenoptimierung (SEO) und Internet-Promotion von Webseiten zu tun haben. SeoQuake ermöglicht die Erfassung und Analyse vieler wichtigen SEO-Parameter von einem Internet-Projekt

User Agent Switcher – Switch Agent to Mobile, GoogleBot, etc

Um ein Text kursiv zu formatieren gibt es die Tags <i> und <em>. Gerade für die für die Suchmaschinen-Optimierung gibt es hier ein signifikanten Unterschied.

Bei der rein grafischen Ausgabe unterscheiden sich die beiden Tags nicht. Wird die Webseite allerdings maschinell ausgelesen (z.B. Screenreader oder Google-Bot), so wird der Unterschied deutlich. Der Tag <i> formatiert eine Textpassage lediglich kursiv. Bei der Benutzung eines Screenreaders  wird das formatierte Wort normal ausgesprochen. Bei der Verwendung des <em> Tags wird das Wort nicht nur kursiv formatiert, sondern von einem Screenreader auch speziell ausgesprochen.

Vor allem bei der Erstellung barrierefreier Webanwendungen spielt das <em> Tag eine besondere Rolle. Google stuft das <em> Tag besser ein als das <i> Tag. Daher ist die Empfehlung nach Möglichkeit nur <em> Tags innerhalb der Website zu verwenden.

Als Webdesigner und -Entwickler stößt man häufig über die Problematik große CSS-Dateien ordentlich zu strukturieren und zu dokumentieren, ggf. diese sinnvoll auf mehrere Dateien aufzuteilen.

Ohne eine vernünftige Struktur und Dokumentation kommt spätestens bei der Anpassung das böse Erwachen.

Vor allem bei Projekten an denen mehrere Personen arbeiten ist eine sinnvolle Struktur & Dokumentation unerlässlich.

Dieser Artikel soll daher Möglichkeiten der Strukturierung und Dokumentation von CSS Dateien aufzeigen.

Struktur

Für die Strukturierung gibt es mehrere Vorgehensweise, ich selbst habe mich nach jahrelanger Entwicklung dazu entschieden im ersten Schritt die CSS-Datei wie folgt in folgende Bereich zu gliedern:

• #header
  • #header_logo
  • #header_navigation
• #banner
• #main
  • #main_navigation
  • #main _content
  • #main _sidebar
• #footer
  • #footer_navigation
  • #footer_notice

Dokumentation

Im zweiten Schritt erstelle ich zwei Stylesheet-Dateien, welche ich layout.css und content.css nenne. In der layout.css befinden sich alle Definitionen zur Positionierung der einzelnen Elemente. Die Datei content.css enthält alle Definitionen zum gestalten der einzelnen Elemente. Als nächstes lege ich die Grundstruktur der CSS Dateien fest. Dabei schreibe ich die einzelnen Bereiche, welche oben aufgeführt wurden, in die CSS Datei. Die CSS Datei sieht nun wie folgt aus:

/***************************************
Author : Daniel Briegert <info@fly2mars-media.de>
Date : 2010.06.04
File : css/content.css
***************************************/

/* GENERAL ****************************/
/* HEADER *****************************/
/* HEADER_LOGO ************************/
/* HEADER_NAVIGATION ******************/
/* BANNER *****************************/
/* MAIN *******************************/
/* MAIN_CONTENT ***********************/
/* MAIN_NAVIGATION ********************/
/* MAIN _SIDEBAR **********************/
/* FOOTER *****************************/
/* FOOTER_NAVIGATION ******************/
/* FOOTER_NOTICE **********************/

Anschließend werden die einzelnen Bereiche mit den einzelnen Elementen vervollständigt.
Z.B.  für #main_content einen H1-Tag wird wie folgt definiert:

/* MAIN_CONTENT ************************/

#main_content h1 {
border-bottom: 1px solid;
color: blue;
font: 1.4m Verdana, arial;
}

Sinnvoll ist es die Definitionen innerhalb einer Sektion alphabetisch zu sortieren. Das Beispiel oben veranschaulicht diese Vorgehensweise.

Weitere Informationen

Fertige CSS Frameworks erleichtern die Erstellung. Interessant  ist unter anderem das Framework Blueprint CSS, welches ihr unter dem folgenden Link findet.

Link:

• Blueprint CSS

Könnt ihr ganz einfach auf der Webseite html5test.com

Hier eine Liste der kompletten HTML 5 Tags.

• 4* Diese Elemente sind definiert unter 4+
• 5* Diese Elemente sind in HTML 5 definiert
  

Tag	Description	4	5
<comment>	Defines a comment	4	5
<DOCTYPE>	Defines the document type	4	5
<a>	Defines a hyperlink	4	5
<abbr>	Defines an abbreviation	4	5
<acronym>	Not supported. Defines an acronym	4
<address>	Defines an address element	4	5
<applet>	Not supported. Defines an applet	4
<area>	Defines an area inside an image map	4	5
<article>	Defines an article		5
<aside>	Defines content aside from the page content		5
<audio>	Defines sound content		5
<b>	Defines bold text	4	5
<base>	Defines a base URL for all the links in a page	4	5
<basefont>	Not supported. Use CSS instead	4
<bdo>	Defines the direction of text display	4	5
<big>	Not supported. Defines big text	4
<blockquote>	Defines a long quotation	4	5
<body>	Defines the body element	4	5
<br>	Inserts a single line break	4	5
<button>	Defines a push button	4	5
<canvas>	Defines graphics		5
<caption>	Defines a table caption	4	5
<center>	Not supported. Defines centered text	4
<cite>	Defines a citation	4	5
<code>	Defines computer code text	4	5
<col>	Defines attributes for table columns	4	5
<colgroup>	Defines groups of table columns	4	5
<command>	Defines a command button		5
<datagrid>	Defines data in a tree-list		5
<datalist>	Defines a dropdown list		5
<datatemplate>	Defines a data template		5
<dd>	Defines a definition description	4	5
<del>	Defines deleted text	4	5
<details>	Defines details of an element		5
<dialog>	Defines a dialog (conversation)		5
<dir>	Not supported. Defines a directory list	4
<div>	Defines a section in a document	4	5
<dfn>	Defines a definition term	4	5
<dl>	Defines a definition list	4	5
<dt>	Defines a definition term	4	5
<em>	Defines emphasized text	4	5
<embed>	Defines external interactive content or plugin		5
<eventsource>	Defines a target for events sent by a server		5
<fieldset>	Defines a fieldset	4	5
<figure>	Defines a group of media content, and their caption		5
<font>	Deprecated. Defines text font, size, and color	4
<footer>	Defines a footer for a section or page		5
<form>	Defines a form	4	5
<frame>	Not supported. Defines a sub window (a frame)	4
<frameset>	Not supported. Defines a set of frames	4
<h1> to <h6>	Defines header 1 to header 6	4	5
<head>	Defines information about the document	4	5
<header>	Defines a header for a section or page		5
<hr>	Defines a horizontal rule	4	5
<html>	Defines an html document	4	5
<i>	Defines italic text	4	5
<iframe>	Defines an inline sub window (frame)	4	5
<img>	Defines an image	4	5
<input>	Defines an input field	4	5
<ins>	Defines inserted text	4	5
<isindex>	Not supported. Defines a single-line input field	4
<kbd>	Defines keyboard text	4	5
<label>	Defines a label for a form control	4	5
<legend>	Defines a title in a fieldset	4	5
<li>	Defines a list item	4	5
<link>	Defines a resource reference	4	5
<mark>	Defines marked text		5
<map>	Defines an image map	4	5
<menu>	Defines a menu list	4	5
<meta>	Defines meta information	4	5
<meter>	Defines measurement within a predefined range		5
<nav>	Defines navigation links		5
<nest>	Defines a nestingpoint in a datatemplate		5
<noframes>	Not supported. Defines a noframe section	4
<noscript>	Defines a noscript section	4	5
<object>	Defines an embedded object	4	5
<ol>	Defines an ordered list	4	5
<optgroup>	Defines an option group	4	5
<option>	Defines an option in a drop-down list	4	5
<output>	Defines some types of output		5
<p>	Defines a paragraph	4	5
<param>	Defines a parameter for an object	4	5
<pre>	Defines preformatted text	4	5
<progress>	Defines progress of a task of any kind		5
<q>	Defines a short quotation	4	5
<rule>	Defines the rules for updating a template		5
<s>	Not supported. Defines strikethrough text	4
<samp>	Defines sample computer code	4	5
<script>	Defines a script	4	5
<section>	Defines a section		5
<select>	Defines a selectable list	4	5
<small>	Defines small text	4	5
<source>	Defines media resources		5
<span>	Defines a section in a document	4	5
<strike>	Not supported. Defines strikethrough text	4
<strong>	Defines strong text	4	5
<style>	Defines a style definition	4	5
<sub>	Defines subscripted text	4	5
<sup>	Defines superscripted text	4	5
<table>	Defines a table	4	5
<tbody>	Defines a table body	4	5
<td>	Defines a table cell	4	5
<textarea>	Defines a text area	4	5
<tfoot>	Defines a table footer	4	5
<th>	Defines a table header	4	5
<thead>	Defines a table header	4	5
<time>	Defines a date/time		5
<title>	Defines the document title	4	5
<tr>	Defines a table row	4	5
<tt>	Not supported. Defines teletype text	4
<u>	Not supported. Defines underlined text	4
<ul>	Defines an unordered list	4	5
<var>	Defines a variable	4	5
<video>	Defines a video		5
<xmp>	Not supported. Defines preformatted text	4

Ihr kennt sicher das Problem bei zu langen URLs oder Kommentaren welche bei Tabellen freien CSS-Layouts ggf. über den Rand hinaus gehen. Die Lösung ist folgender CSS-Code:

.break-word {
  word-wrap: break-word;
}

35 wirklich hilfreiche PHP Tutorials and Techniken für Entwickler. Themen sind neben PHP auch JQuery, MySQL, CSS und alles was das Web-Entwickler-Herz begehrt. Hier geht es zum Link.

Bestimmt für den ein oder anderen Einsteiger nützlich, deshalb wollen wir euch die Links nicht vorenthalten.

jQuery Tutorial für Anfänger

22 Handy HTML5 & CSS3 Tools, Resources And Guides