howto-microformat.md

Mikroformate & Schemata

Sind nichts anderes als eine Implementierung für das Semantische Web. Maschinen sollen Inhalte verstehen können, das heißt hier primär ein-/zuordnen. Z.B. eine Adresse auf einer Website zu einer Person, Firma oder Organisation.

Zuerst gab es Mikroformate, dann schema.org. Letztere werden von Google unterstützt und haben daher i.d.R. eine größere Bedeutung. Aber im Grunde ist das Prinzip sehr ähnlich.

HTML ist ziemlich einfaches XML. Die Namen sind leider nicht unbedingt sprechend. Unsere erweiterte Auszeichnung der Elemente (der eigentliche Inhalt, atomar) durch weitere Tags (das in den Spitzen Kalmmern; Bsp. Paragraphen (dt. Absätze, hat hier nichts mit Gesetzen zu tun) eines Textes werden <p>Paragrahpen-Text</p> ausgezeichnet), Attribute (Eigenschaften-Name gleich nach dem öffnenden Tag, vor dem =) und Attribut-Werte (Wert der Eigenschaft, nach dem =) machen das etwas besser.

JSON ist ein Standard der das ganze etwas kompakter als XML/HTML mit meist ganz genau der gleichen Struktur abbildet. Dadurch kann man z.B. eine Programmiersprache nehmen und automatisiert Daten auszeichnen/auslesen oder an eine API transportieren. Das machen dann z.B. Browsererweiterungen.

Erst gucken, nicht anfassen

Dazu ein Blick in den ausgelieferten Klartext deiner/eurer Website. Ich sehe mir das normalerweise mit dem "Inspektor" genannten Web-Entwickler-Werkzeug (Bei Mozilla Firefox/Iceweasel unter Extras) am Ziel an und spiele herum bis es so ist wie ich es brauche bevor ich etwas an den Quellen verändere. Damit hat man eine Live-Vorschau und macht vorsorglich erstmal nichts kaputt. Quellcode insgesamt lesen geht aber mit einem einfachen Rechtsklick / "Seitenquelltext anzeigen" viel besser. Dann kann man z.B. mal nach "Brühl" suchen und sehen wo das alles so auftaucht und wie eine (Such-)Maschine das "erlebt". Die "wissen" wahrscheinlich ziemlich genau wie man Straßennamen schreibt und erkennen auch Abweichungen von den Adressen die sie kennen. Aber sie erkennen eben nicht so schnell ob Brühl gerade eine Adresse ist oder eine Person. Das kann man aber "dranschreiben". Dazu gibt es mehrere Herangehensweisen. Ich habe mich bei der FSFW an die gehalten, die der Standard für vCards beschreibt. Das scheint aber nicht optimal für Google oder Chrome-Plugins zur Erkennung/Anzeige von Mikroformaten1 zu sein. Eventuell funktioniert die Browsererweiterung auch eher dürftig.

Daher mal ein anderes Beispiel. Beim c3d2 ist die Adresse auch nicht schön ausgezeichnet, und zwar unter http://c3d2.de/space.html steht <p class=""> Netzbiotop e.V., Briefkasten 75, robotron-Bürokomplex, Lingnerallee 3, 01069 Dresden </p> .

Das ist Menschenverständlich. Aber eben nicht für eine Maschine, z.B. das Browserplugin erkennt da nichts sauber gegliedert (nach Straße, Hausnummer, Postcode, Stadt, Kontaktadressen, Betreiber, ...) was es hypothetisch anbieten könnte in ein Adressbuch, einen Kalender oder irgendeine Datenbank (z.B. einer Suchmaschine) zu schieben. Eventuell kann Google das analysieren. Aber selbst dann gibt es bestimmt Abzüge in der B-Note. Andere Anwendungen haben keine Heuristik, wie z.B. das Plugin. Aber Google wünscht im Interesse der Nutzer leicht erkennbare Daten. Und ganz bestimmt kann man mit Mikroformaten steuern was Google anzeigt. Deshalb lesen wir mal wie es aussehen muss und lassen die Seite zum späteren nachschlagen geöffnet.

ein Tool am Testobjekt

Quelle:google-microformats-conversion-rate-optimization-serps

Ich nehme mal Google's Angebot: Strukturierte Daten: Markup-Hilfe. Dort wähle ich "Lokales Unternehmen" und gebe die URL "https://c3d2.de/space.html" ein.

Dann der Anleitung folgen. Und am Ende soll ich sowas machen wenn es nur um die Adresse geht:

<p itemscope itemtype="http://schema.org/LocalBusiness" class="">
    <span itemprop="name">Netzbiotop e.V.</span>, Briefkasten 75, robotron-Bürokomplex,
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">Lingnerallee 3</span>,
        <span itemprop="postalCode">01069</span>
        <span itemprop="addressLocality">Dresden</span>
    </span>
</p>

Das Tool empfiehlt auch gleich wie Telefon und andere Dinge eines Unternehmens sollen damit Google es erkennt. Das ist kompatibel mit anderen Auszeichnungen die man dann in class="" o.ä. rein wirft und hilft wenn man der Quelle (s.o.) glaubt schon einiges weiter.

mit Standard am Testobjekt

Jetzt nehme ich also den Inspektor her und schraube an meiner Offline-Ansicht der Website und prüfe im Browser.

Zunächst kommt class="vcard" zum Paragraph hinzu.

Jetzt taggen wir mal die Einzelelemente:

<span class="">Netzbiotop e.V.</span>,
Briefkasten <span class="">75</span>,
<span class="">robotron-Bürokomplex</span>,
<span class="">Lingnerallee</span> <span class="">3</span>,
<span class="">01069</span> <span class="">Dresden</span>

Damit sind die Bestandteile zerlegt, man sagt bei Datenbanken atomar. Sehen kann man davon im Browser nichts.

Als Nächstes ist die Frage wie muss das heißen, dafür schauen wir auf der Seite zum Microformat hcard (s.o.) einfach nach. Oder auch bei yoast, die beschreiben im Absatz davor auch Lösungen für einzelne CMS, gibt bestimmt auch etwas ähnliches für Typo3. Und für Fragen gibt es auch Antworten und ein paar Tools sind auch verlinkt.

Wenn man jetzt zuordnet, bekommt man langsam was zusammen. Da fallen uns ein paar Kleinigkeiten auf und wir machen uns eine ToDo:

1. Hausnummern werden nicht atomar abgespalten, schade, aber bis der Standard das will, lassen wir es an der Straße
2. Für Postkasten und Gebäudename wird keine Kennzeichnung unter required benannt, entweder erfinden wir eine naheliegende, lassen es weg (bis sich ein Standard findet der es abbildet) oder finden auf der hcard Beschreibung unter Optional die passende Lösung
3. Geo-Location fehlt, können wir "blind" mit dem Tag geo anfügen
4. Man kann Telefon etc. angeben; bei Postanschrift kann Telefon Sinn machen wenn der Bote nicht weiter weiß, weiter oben in der Seite wird auch das Telefon benannt, dort kann man es mit dem Attribut itemprop ausweisen wie im Vorabschnitt mit dem Tool von Google zu ermitteln.
5. Öffnungszeiten und anderes gehen auch, kannst du entsprechend als itemprop taggen

Die Adresse wird dann so ausgezeichnet:

<span class="fn org">Netzbiotop e.V.</span>,
Briefkasten <span class="post-office-box">75</span>,
<span class="extended-address">robotron-Bürokomplex</span>,
<span class="street-address">Lingnerallee 3</span>,
<span class="postal-code">01069</span> <span class="locality">Dresden</span>

Sieht für Menschen nicht anders aus als zuvor, aber für Maschinen hoffentlich schon. Und jetzt noch die itemprop vom Vorabschnitt mit einbauen.

Geo-Location hinzufügen

<span class="geo">
  <span class="latitude">
   <span class="value-title" title="51.04711"></span>
  </span>
  <span class="longitude">
   <span class="value-title" title="13.74683"></span>
  </span>
</span>

Das wird nicht angezeigt, aber eventuell hilft es auf eine Karte zu kommen. Koordinaten findet man ja über den Kartendienst seines Vertrauens heraus und verifiziert das ggf. nochmal vor praktischen Einsatz an der Konkurrenz.

Telefon anfügen

<span class="tel" itemprop="telephone">+49 351 48484999</span>

In die Quelle einbauen

Wir ich das jetzt in unser XML-Konstrukt einbaue muss ich auch noch herausfinden. Bei Typo3 kann ich dir garnicht helfen. Aber ich nehme an es wird eine Methode geben Quellcode direkt oder aber irgendwelche Vorlagen/Templates/Schablonen zu machen.

Erfolgsprüfung

mit Browsererweiterung

In Chom{e|ium} wird mit der oben erwähnten Erweiterung erst nach Anpasung der Einstellungen für lokale Dateien auch etwas angezeigt. Hier werden bereits folgende Angaben des Mikroformat (mit class-Attribut) erkannt:

Netzbiotop e.V.
Netzbiotop e.V.
Lingnerallee 3
Dresden, 01069

Auch ein Link zu Google Maps wird dann eingeblendet. Und das ohne die Geolocation-Deklaration. Es wird angeboten die Adresse in als Kontakt zu speichern oder herunterzuladen. Die Werte org und fn werden offenbar doppelt erkannt und andere Angaben werden ignoriert.

in the wild

Dauert eine Weile. Eventuell helfen Tools und natürlich Erfahrungwerte anderer. Oder man wartet ein paar Wochen und sieht nach. Dann probiert man was anderes und überprüft was besser war. Ich habe keinen Erfolgsdruck, deshalb würde ich es nach Standard machen und hoffen es ist gut genug. Man muss das ggf. immer wieder anpassen. Je nachdem was es gerade wieder neues gibt, veralten Standards und neue entstehen wie im microformats-Blog zu lesen.

XSLT auf c3d2-web anpassen (done)

1. xsl/common.xsl: commit: made class attribute for p elements optional
2. content/pages/space.xml: Inhalt auszeichnen und anpassen, weitere elemente und attribute in common.xsl ermöglichen
3. Mit Browser-Plugin testen
4. Über die Anzeige unter Hackerspace freuen :)

github flavored markdown or my typing skills broken -.-'