Metainformationen und Semantisches Web Technikwürze 187

Willkommen zur Technikwürze 187. Heut mit dem Thema Metainformationen und semantischem Web mit David Macievski.

Hallo.

Oh, zu schnell. Und mir, Matthias Pfefferle, dem Neuen. Herzlich willkommen zu Technikwürze, eurem Design- und Webstandards-Podcast.

Ja, herzlich willkommen, zur neuen Technikwürze. Wir reden heute über Metainformationen, semantisches Web, also wie man seine Webseite mit Informationen anreichern kann, um sie für die sozialen Netzwerke vorzubereiten wie Google+, Google, die Suchmaschine als solches, Twitter und Facebook. Und das klären wir heute 'n bisschen, was es da für Techniken gibt. Und da gab's ja auch mal, Instagram- und Twitter-Cards, in den Nachrichten.

Das klären wir gleich, aber, vorher sollten wir dich noch mal, Matthias, vorstellen. Du bist das erste Mal in der Technikwürze, aber nicht das erste Mal in einem Podcast, ne? Da bist du eigentlich 'n alter Bekannter.

Genau. Also wir haben selber, ich hab vorhin noch mal nachgeguckt, 2008 unseren Podcast gestartet, und zwar den Open Web Podcast. Damals, wo alles noch Open Web war und, OpenID hip war und Microformance noch in aller Munde. Und, über die Jahre, na ja, hat sich das immer mehr verflüchtigt. Meine zwei Mitstreiter sind jetzt, andersweitig beschäftigt und, da hatten wir vor Kurzem mal ein kleines Gespräch, dass, die Technikwürze auch immer mehr einschläft.

Und dann kamen wir auf die Idee, uns doch jetzt einfach zusammenzuschließen und das Ganze wieder bisschen anzutreiben.

Genau. Ja, also wir haben, auch 'n auf Google+, auf unserer Google+-Seite, 'n Hangout gestartet und haben einfach mal geschaut, besteht übrigens noch Interesse, Technikwürze zu machen? Und da gibt es ja zwei Fraktionen. Einerseits die Fraktion der Hörer, das seid ihr. Ihr habt immer geschrieben, mich haben immer E-Mails erreicht oder bei Google+ oder bei Twitter: „Macht doch mal 'ne Technikwürze." Und, „Du blöder Sack, mach mal wieder 'ne Technikwürze." So ungefähr.

Und, das wollen wir wieder aufführen. Und dann gab es die Fraktion der potenziellen Moderatoren und auch da herrschte Einigkeit in unserem, Chat, den wir da gemacht haben in diesem Hangout, dass wir das machen wollen. Nicht mehr jede Woche, aber doch, ab und zu wollen wir auf jeden Fall 'ne Folge machen und deswegen heute diese über Metainformationen. Bevor wir so richtig durchstarten, möchte ich noch mal 'n großes Dankeschön sagen an unseren, Premiumsponsor nenn ich ihn ganz gerne, Mittwald.

Die haben uns nämlich, obwohl wir mit Ausnahme der letzten Folge, die wir jetzt gelauncht haben, unsere ursprünglich letzte Folge lief ja so im Februar und die haben uns die ganze Zeit unterstützt und, haben uns beim Hosting geholfen. Und, ich glaub, wir sind, trotz dessen, dass wie gesagt keine aktuelle Folge dabei war, eins der trafficreichsten, Seiten bei denen gewesen, weil ihr gigabyteweise Traffic jeden Monat runtergeladen habt von Technikwürze. Dafür 'n herzliches Dankeschön.

Und das ist auch der Hauptmotor, warum zum Beispiel ich absolut noch Lust habe, Technik, Würze zu machen, auch nach dieser langen Zeit. Und, ich steh sozusagen in der Verpflichtung, das mal weiter zu forcieren. Also vielen Dank an Mittwald und wenn ihr übrigens, 'ne Agentur seid oder ihr seid selbstständig, dann kann euch Mittwald definitiv auch weiterhelfen, denn die haben, geschnürte Pakete für Typo3, für WordPress und so weiter. Da werdet ihr auf jeden Fall glücklich.

Also mittwald.de, da mal vorbeisurfen und Hallo sagen. Ja, wollen wir noch mal durchstarten, würd ich sagen, ne. Also vielleicht werden wir noch mal ein Wort los, zu GitHub. Da haben wir ja was Nerdiges online gestellt, ne?

Ach ja, genau. Wir haben natürlich als, Geeks müssen wir natürlich auch den Podcast, geekig managen. Und deswegen haben wir jetzt mal den Versuch gestartet, die neuen Folgen oder potenzielle Themen für neue Folgen auf GitHub zu stellen und, die dann praktisch auch euch zugänglich zu machen. Das heißt, falls ihr Ideen habt, könnt ihr, eure Dokumente da reinpushen oder falls ihr Änderungsvorschläge habt, könnt ihr das genauso machen. Und, ja, schauen wir mal, wie's funktioniert.

Genau, das ist das eine Repository und das andere Repository sind wirklich unsere Behind-the-Scenes-Notizen, die wir gemacht haben. Das ist im Grunde genommen, im Prinzip das, was wir später auf, technikwürze.de in den Show Notes auch hinterlassen. Doch die Show Notes sind 'n bisschen aufgeräumter, würd ich, doch mal behaupten. Aber, das bei dem GitHub, das zweite Repository, das nennt sich Folgen. Da sind wirklich alle Sachen drin, die wir in der Sendung auch besprechen wollen.

Also so quasi die Notizen. Also könnt ihr da noch mal nachgucken und, schauen: „Was, was haben die denn da so gemacht?" Und das bleibt auch online, haben wir zumindest geplant, ne? Und dann wollen wir mal gucken, wie das so anläuft.

Genau. Die Links packen wir dann eben auch in die Show Notes.

Mhm. Jo. Dann go. Metainformationen, semantisches Web. Was ist 'n das?

Also erstens mal ist es natürlich 'n super Thema, um die zwei Podcasts zu vereinigen, weil das ist natürlich, riesen Open-Web-mäßig und, es passt auch zur Technikwürze. Und zusätzlich, haben wir eben das Instagram, die Twitter-Cards entfernt. Das jetzt auch noch mal so 'n bisschen zum Anlass genommen. Genau.

Ja, kurz zur Information vielleicht für euch, die ihr noch nicht gehört habt, was Twitter-Cards sind. Das sind im Grunde genommen Metainformationen, die noch nicht für jeden öffentlich zugänglich sind. Das ist erst mal nur für Entwickler, die das einrichten können und, bei, bei Twitter autorisieren lassen können.

Es geht eigentlich darum, dass ihr eure Webseite so mit Informationen, Metainformationen im Head aufpumpt, sodass, Twitter genau weiß, welches jetzt die Überschrift ist, welches Bild es ist und so weiter. Und, Twitter stellt das in all ihren Clients, das heißt im Web und, auf den mobilen Plattformen, entsprechend dar. Das heißt, poste ich ein Bild, wird das Bild groß angezeigt. Also nicht nur der Text mit 'm Link, sondern wirklich das Bild. Poste ich, jetzt eine Seite vom Typ, Video.

Genau, Video. Dann zeigt es direkt den Videoplayer an, wenn das jetzt zum Beispiel YouTube sein sollte in groß. Oder poste ich jetzt 'n ganz normal, sag ich mal, 'n Blogartikel, dann ist es, der Teaser, der Titel, dann steht, der Absender, also ihr mit euerm, mit eurer Webseite da, ein kleines Bildchen und ganz neu der Autor. Und, Instagram hat das eigentlich mal unterstützt und inzwischen wieder entfernt. Weil Hintergrund?

Ja, die, die, also begründet wurde es, dass die User, also dass, Instagram denkt, dass die User Experience auf ihrer Seite besser ist. Was jetzt wirklich dahinter steckt, keine Ahnung.

Genau. Also die User sollen halt in der Lage sein, nicht nur einfach das Bild zu gucken, sondern sie sollen natürlich gleich kommentieren und liken und das geht natürlich nur drüben bei Instagram. Ob das so wirklich zielführend ist, weiß ich auch nicht, aber die bekriegen sich ja sowieso ganz gern inzwischen. Inzwischen gibt's ja auch bei Twitter die Instagram-Filter. Die da nicht wirklich reinpassen, aber es sei mal dahingestellt. Ja, Metainformation, man könnte auch sagen Meta Tags.

Also Meta Tags ist es ja nicht richtig.

Jetzt kannst du's ja noch mal erklären. Du hast mir das schon vor der Sendung erklärt, weil ich bin auch Meta Tag, Sager.

Als Meta Tag, kennt man's eigentlich, aber, das, was man im HTML reinschreibt, nämlich Meta Name gleich oder Meta was auch immer Value, dieses ganze Ding, das ist 'n Meta Element., 'n HTML-Element ist das und kein Tag. Tag geht eher so Richtung Attribut und, deswegen, heißt es umgangssprachlich Meta Tag, ist aber in Sachen HTML grundsätzlich total falsch. Deswegen einigen wir uns heute drauf, dass wir beides sagen und ihr wisst, worum es geht.

Ich danke dir, dass du so viel Rücksicht auf mich nimmst.

Ja, wollen wir vielleicht mal eingangs erklären, was es überhaupt für Verfahren gibt, seine Webseite aufzupimpen?

Genau, weil die Twitter Cards, das hört sich ja eben an, also d-das Prinzip von den Twitter Cards ist ja nix Neues, sondern, es gibt ja 'ne ganze Reihe an Geschichten. Es gibt eben, wie du gemeint hast, die klassischen Meta-Elemente, die es schon seit Ewigkeiten gibt, wo man ja praktisch auch schon 'ne, 'ne kurze Beschreibung geben kann, Keywords geben kann, den Autor nennen kann. Was sind denn noch klassische Dinge? Gibt's was fürs Bild? Fürs Bild gibt's, glaub ich, nix.

Mhm. Ja, da gab das Image Source, das ist auch schon 'n bisschen was älter, ja.

Auch von Facebook, genau. Und jetzt ist eben der, der Erste, der hergegangen ist und, sein eigenes Format geschrieben hat, war eben Facebook mit dem Open Graph Format. Das heißt, sie sind einfach hergegangen und haben für sich eigene Meta-Elemente definiert.

Und, ja genau, in erster Linie deshalb, dass eben Seiten, die man über Facebook shared, dass dieses Vorschau-Kästchen unten drunter schöner aussieht, dass eben nicht nur der Link in, in dem gesharten Kommentar oder Statusmeldung drinsteht, sondern dass man eben noch so 'ne kleine Vorschau, so 'n kleinen Appetizer unten drunter anzeigen kann.

Mhm. Die haben das, da hak ich mal ganz kurz ein, die haben das, ihrerseits, geschrieben oder selbst, 'n neues Format gemacht. Das hattest du nämlich in der, in der Technik-Bürze, gesagt, die wir im Vorfeld aufgenommen hatten und die nicht geklappt hat. Das ist ja die zweite Aufnahme.

Da hast du nämlich gesagt, die haben das ursprünglich gemacht, da, die ganzen Metainformationen oder die Meta Tags, von SEO-Autoren und, SEM und was weiß ich, durchseucht waren, sodass die auf jeden Fall 'ne genauere Information haben wollten. Deswegen haben sie was eigenes gemacht und das nannte, und irgendwann haben sie's dann halt freigegeben und nannte sich dann das Open Graph Protokoll, was, inzwischen so der De-facto-Standard ist, ne.

Genau, weil ihn einfach alle großen Netzwerke unterstützen. Also alle großen Netzwerke heißt noch Twitter und, Google+.

Mhm. Ich kann ja mal kurz erklären, wie das grundsätzlich aussieht. Die, Informationen auf diesem Open Graph Protokoll, OGP in der Kurzform, unterstützen wie gesagt alle Netzwerke, hast du gerade gesagt. Und das sieht im, Head genauso aus, dass man ein Meta-Element aufmacht. Dann gibt es die Property. In der Property gibt es immer OG für Open Graph, Doppelpunkt und dann das, was ich definieren möchte.

Zum Beispiel OG Title ist für 'n Titel, OG Type ist, dass ich sage, was für 'n Typ ist das jetzt? Ist das 'n Video, was ich hier zeige? Ist es 'n normaler Blog, also Startseite des Blog? Ist es 'n Artikel? Ist es 'n Bild? Was auch immer. Dann gibt es, OG URL für die URL, die Unique. Es gibt 'n Image, was man da angeben kann und viele, viele Sachen kann man da definieren.

Nicht alles und deswegen gibt es noch weitere Möglichkeiten, die du gleich mal, erklären wirst, weil du es ei gut, ganz gut kannst. Aber das ist so 'n Basis-Hand auf, Basis-Set, auf die sich irgendwie alle verständigt haben, ne.

Genau und, gerade für, also gerade die Entwicklungsgeschichte von Open Graph zeigt eben, dass das Format notwendig war, weil gerade Facebook hat ja früher eben nur die Meta, die alten Meta-Elemente benutzt.

Daher kommt eben auch dieses Meta Name, Image Source und sind dann irgendwann davon weggegangen, weil eben, Wenn man den normalen Titel einer Seite nimmt, steht immer noch der, der, die URL mit drin und, irgendwelche Keywords oder so was, dass sie bei der Suchmaschine gut, gut gelistet werden. Und es sieht halt einfach idiotisch aus, in diesem Vorschau-Dingens. Jetzt bleibt die Frage, warum denn dann überhaupt noch Twitter Cards?

Ja, das ist die gute Frage. Also es gibt bei, bei Twitter 'ne Erweiterung, um den Autor noch extra mit anzugeben. Jetzt könnte man argumentieren, gut, den Autor gibt es auch als HTML-Element, aber irgendwie, wollen alle irgendwie ihr eigenes Format durchdrücken. Und Twitter sagt in ihren Twitter Cards auch, ist übrigens, glaub ich, Meta Name gleich Twitter Doppelpunkt. Das ist nicht Property, ne?

Genau. Also ein Argument wäre eben, dass, die Twitter Cards im Gegensatz zu dem OpenGraph HTML-valide sind, bis runter zu was weiß ich. Und eben dass OpenGraph auf, dem RDFa-Standard basiert, der noch nicht verabschiedet ist und in den meisten Validatoren auch eben noch fehlschlägt.

Glück haben wir aber, dass, Twitter selbst sagt, wir unterstützen als Fallback das OpenGraph-Protokoll.

Was es noch, was es aber irgendwie auch noch überflüssiger macht, find ich. Ja, weil also eigentlich, wie du sagst, es, es würde vollkommen reichen, hätten sie einfach, das, das OpenGraph um zwei, drei Felder erweitert, weil letztendlich macht, Facebook ja genau das Gleiche. Also es gibt diesen, diesen allgemeinen Standard mit OG Doppelpunkt und dann eben diese ganzen Attribute.

Und es gibt ja dann eben noch dieses, diese facebook-spezifischen Elemente, die dann mit FB Doppelpunkt definiert werden. Das ist dann irgendwie FB App ID oder keine Ahnung, was die da noch alles mit reinnehmen.

Genau, mhm. Zur Verknüpfung der eigenen Seite mit, dem Blog.

Genau. Und, letztendlich hätte das vollkommen ausgereicht zu sagen, man macht jetzt eben noch mal TW dann eben für Twitter Doppelpunkt und dann den, den Autor oder die, die, Autor-ID oder was sie da noch alles, extra definieren.

Genau. Auch Google, die suchen, also wir müssen ja unterscheiden zwischen Google der Suchmaschine und Google Plus, dem sozialen Netzwerk. Beide kann man aber ähnlich abspeisen, sage ich jetzt mal. Google empfiehlt auch,, sein, seine eigenen Geschichte. Die, die haben jetzt, Schema.org, was sie da, forcieren. Haben aber als, er-erklären wir auch gleich noch mal, was das ist.

Haben aber als Fallback auch, das OpenGraph-Protokoll und siehe da, schwupsdiwups, haben wir quasi für alle sozialen Netzwerke und dem, der Google-Suchmaschine eine einheitliche Basis. Und, wenn wir uns darauf konzentrieren und nur noch die ein, zwei Sachen machen, die quasi die anderen Netzwerke dringend brauchen, die sie nicht abdecken, dann voilà, haben wir's doch schon.

Genau. Also zumindest für die sozialen Netzwerke, würde ich sagen, führt kein Weg an OpenGraph vorbei. Also es ist ein, ein relativ einfaches Format. Man kann innerhalb von wenigen Minuten seine Seite eben OpenGraph-fähig machen. Es gibt diverse Plugins. Möchtest du dazu noch was sagen? Plugin-technisch?

Ja, es, ich, es gibt ein Plugin zum Beispiel für Web, das hab zufälligerweise ich geschrieben. Das Plugin nennt sich Social Media Enhancer, genau. Und, ist eigentlich dafür da, damit es, euer WordPress-Blog entsprechend mit den Basisinformationen, ausstraffiert und, bindet auch, die ganzen Buttons ein ohne diese, Java-Script-Lösung. Das heißt, Heise hat ja die, da so 'n Ding mal rausgebracht, dass man das, Doppelklick machen muss. Einmal klickt man drauf, erst dann werden sie aktiviert.

Den ganzen Kram brauchen wir nicht, weil es werden nur Links eingebunden, die entsprechend grafisch gut aussehen und damit ist es wie ein externer Link auf einer Webseite. Da ist das ganze Gedönse rechtlicherweise nicht nötig. Aber, im Grunde genommen sorgt das auch dafür, dass, alle Informationen, wie viel Counts auf der Seite aufliegen bei den sozialen Netzwerken, das wird lokal gespeichert, sodass das nicht immer abgerufen werden muss.

Und, wie gesagt, das Plugin kümmert sich da darum, das entsprechend einzurichten, dass alle sozialen Netzwerke zufrieden sind. So, da geht's darum. Es gibt natürlich auch diverse andere Sachen, grade in Richtung WordPress. Da gibt es ja, SEO-Plugins, die unter anderem auch diesen Teil abdecken. Da wird auf jeden Fall der eine oder andere glücklich werden.

Genau. Also zusammenfassend würde ich sagen, die klassischen Meta-Tags für die Suchmaschine eben weiter drinlassen, weiter SEO-mäßig verseuchen. Und, für die ganzen sozialen Netzwerke reicht das OpenGraph-Protokoll völlig aus. Wer dann eben die, die Spezialfälle noch haben will, der sollte dann eben bei Facebook gucken, was diese FB, Präfixes, wie die genau aussehen und, für Twitter reicht dann eben auch die, die Autor-Geschichten.

Ja, das Schöne ist, das mal zwischenhaken: Mir als Webentwickler hat der Kram übrigens richtig Spaß gemacht, denn, Twitter hat ein Testtool, womit man schauen kann, ob die Informationen, die man da reingebracht hat, wie die ausgewertet werden und was wirklich die, ich sag mal, dieser blöde Dienst da wirklich draus lesen kann. Also wie wir das semantisch gemacht haben, das Ganze. Google bietet auch 'n Testtool, also die Links gibt es in den Show-Notes später.

Und, Facebook bietet auch noch, seinerseits 'n Testtool an, womit man dann eben nachschauen kann. Das Beste ist tatsächlich das von den Google Webmaster Tools. Die zeigen grundsätzlich alles an. Alles, was sie auslesen können, egal ob sie's jetzt verwerten oder nicht. Das, ist bei Bei Google ja auch immer noch so eine Geschichte. Was verwerten sie wirklich?

Und, das macht wirklich Spaß zu sehen, wie die Webseite logischer wird, wie das semantischer aufgebaut wird und, hat also nix mit SEO zu tun, weil das ist für mich 'n rotes Tuch. Aber, wirklich zu sehen, wie die Webseite wirklich lebt oder der Inhalt begreiflicher gemacht werden kann, ist toll. Würd ich euch nur empfehlen.

Wo wir jetzt bei Google sind und bevor wir zu Mikroformaten kommen, die wir auch noch erwähnen müssen, was es damit auf sich hat, würd ich dich mal bitten, noch mal Schema.org zu erklären, was das ist. Weil das ist 'n bisschen komplizierter als die Meta-Informationen oder Meta-Elemente.

Genau. Im Gegensatz zu, Twitter und Facebook kommt, Google halt aus der Suchmaschinenecke. Das heißt, sie haben ihr eigenes Format auch eher suchmaschinenlastiger aussehen lassen. Das heißt, Schema.org, bietet kein Set an, an Meta-Informationen wie OpenGraph oder Twitter Cards, sondern es bietet einfach 'ne Erweiterung, um seinen ganzen HTML-Code noch mal semantisch anzureichern.

Also zusätzlich zu den ganze, ganzen semantischen HTML-Elementen, die mit, HTML5 kommen, wie zum Beispiel Artikel oder Aside und so weiter, kann man dann eben noch viel granularer sagen, es geht nicht nur um 'n Artikel, sondern es geht um Blogpost oder es geht um 'ne Webseite oder es ist 'nen Event. Oder es geht hauptsächlich um 'nen Bild und da ist die Bildbeschreibung und ist die Lizenz zu dem Bild und so weiter.

Genau, ganz wichtig, wo, wo du grade gesagt hast, das Ganze ist ein Event. Wenn ihr zum Beispiel irgendwelche Veranstaltungskalender habt und, wollt, dass die als Veranstaltung in den Google-Suchergebnissen auch auftauchen oder ihr vertickt Tickets für irgendwelche Musikveranstaltungen, dann wär's natürlich toll, wenn die in den Suchmaschinen von Google auch direkt angezeigt werden. Und das tun sie ja auch.

Und das kann man unter anderem durch Schema.org erreichen, indem man jetzt dem Element, wie zum Beispiel der Überschrift oder dem Ticket oder was auch immer, direkt, Metainformationen dran hängt. Also nicht im Kopf der Seite, im Head, sondern tatsächlich an den Elementen im Inhalt, wo das Ganze ist. Und da sagt man einfach, du bist vom Typ Schema.org, der grubbelt da drüber, sagt man das.

Und dann, du bist jetzt Typ, Titel, du bist Typ, was auch immer, Event, Datum und, Google sucht sich das entsprechend raus und zeigt das, bei der Suchmaschinen dann auch an, ne.

Eben. Also die, die Sachen, die, die einem am meisten auffallen, sind wahrscheinlich diese kleinen Sternchen auf Seiten, die irgendwelche Reviews anzeigen. Das wird zum Beispiel auch da drüber gemacht.

Also wer jetzt zum Beispiel Events anzeigen möchte oder ganz andere Sachen, der ist sogar auf, auf diese Art der Auszeichnung angewiesen. Denn, das OpenGraph-Protokoll ist wie gesagt, wie du's auch gesagt hast, nur ein kleines Set und, das reicht bei weitem nicht aus, um wirklich alle Sachen abzudecken, die eine Suchmaschine braucht. Und, deswegen gibt es wie gesagt auch Schema.org.

Genau. Also das eine ist eher, dazu gedacht, um so kleine Previews zu machen, die auch alle ungefähr gleich aussehen. Also es geht halt, um, um Medieninhalte und Titel und Beschreibung. Und bei Schema.org geht's halt wirklich darum, den Text maschinenlesbar zu machen, also das, was der User, natürlich versteht, alleine vom, vom Aufbau und vom Design der Seite, das eben noch mal für die Maschine verständlich zu machen.

Mhm. Jetzt fällt mir gerade ein, Google hat jetzt auch bei den Webmaster Tools ganz, ganz neu, so gestern erst vorgestellt oder vorgestern, ein neues Tool, visueller Art. Das heißt, ich kann meine Webseite kann ich da eintragen. Die wird dann aufgerufen und ich kann visuell sagen, das ist jetzt der Titel und kann sagen, du bist Titel. Dann kann ich den Vorspannen, den, den, den Text machen und sage, du bist, was auch immer Teaser-Text.

Und, der durchpflügt die ganze Webseite und, so kann man quasi mit Point-and-Click, seine Webseite semantischer machen, ohne dass man Ahnung von Metainformationen hat.

Das find ich auch nicht schlecht.

Ich hab's-

Musst du mal ausprobieren.

Ich hab's noch nicht ausprobiert. Ich hab bisher mir nur das Video angeschaut. Ich bin da doch eher der, der Meta-Element, selbst Reinschreiber. Aber es ist, auf jeden Fall 'n guter Start, um, ja seine Inhalte besser aufzubereiten für die Suchmaschine, ne?

Ja, definitiv.

Ja. Ja, Mikroformate hatte ich schon erwähnt. Du kommst da-

Ah, da halt noch, noch eins zu Schema.org. Da Google jetzt aber, eben Schema.org trotzdem genauso nutzen will wie Twitter die Twitter Cards und, Facebook das O-OpenGraph-Protokoll, wurde Schema.org so 'n bisschen zweckentfremdet und eben, hat... Oder wie, wie fasst man's am besten zusammen? Es gibt so 'ne Art Objekthierarchie, also d-d-das, das kleinste Objekt, was man mit Schema.org darstellen kann, ist ein Thing, also ein Ding.

Und, dieses Ding hat einen Titel, hat eine Beschreibung, hat ein Bild und ich glaub, es hat auch einen Autor, bin ich mir aber gerade nicht sicher. Und alles andere basiert eben auf diesem Ding. Das heißt, ob man jetzt ein Event macht, ob man eine Webseite, einen Artikel und so weiter, auszeichnet, hat alles eben diese, diese, Attribute von dem Grundelement. Der Vorteil für Google ist speziell bei Google+, dass man eben Schema.org genauso nutzen kann wie OpenGraph.

Weil ob's jetzt 'n Event ist oder irgendwas anderes, man kann eben immer den Titel draus extrahieren und immer die Beschreibung und kann dann, trotzdem im wesentlich umfangreicheren Format eben auch diese, diese kleine Vorschau-Snippets rausziehen. Muss aber eben aufpassen, weil Google nimmt immer das erste Objekt, was es auf der Seite findet.

Also sollte man eben auch seinen Quelltext immer so auszeichnen, dass das erste Objekt, was man auszeichnet, auch das ist, was man dann später bei Google+ sehen möchte.

Umso wichtiger denn die Testing Tools, grade das von Google, um mal nachzugucken, welche Informationen werden da extrahiert.

Und auch ganz wichtig:, jede Suchmaschine, oder nicht jede Suchmaschine, sondern jedes soziale Netzwerk geht zuerst her und nimmt sein eigenes Format und geht dann erst, auf das Fallback-Format Open Graph. Das heißt, wenn man jetzt Open Graph und Schema.org drin hat, nimmt Google+ natürlich Schema.org. Deswegen auch noch mal aufpassen.

Mhm. Nur damit ihr's mal gehört habt, du hast ja grade gesagt, das Objekt the thing. So, so 'ne ähnliche Sprachregelung gibt es auch beim Open Graph Protocol. Dort heißt es, soziales Objekt, Social Object.

Ah, okay.

Da geht's einfach darum, dass man seine Webseite ein, zu einem sozialen Objekt auch ein the thing macht, sodass, wie gesagt, die Ent..., die, die, sozialen Netzwerke damit umgehen können und genau wissen, was sie darstellen. Ich hab da mal auf T3N an, im T3N-Magazin sogar 'n Artikel geschrieben, der dann, inzwischen auch online erschienen ist. Da ist noch mal alles erklärt, wie ihr mit den einfachsten Mitteln, HTML-Elemente hochschrauben könnt und, was das mit dem sozialen Objekt auf sich hat.

Das ist noch mal so 'ne kleine Einführung, die ihr auf jeden Fall mal euch durchlesen solltet, denn habt ihr innerhalb von kürzester Zeit drauf, worum es hier eigentlich in diesem Podcast geht, ne. Und wer Weiteres will, findet natürlich die Dokumentation bei Google, Facebook und, die ganzen Links, wie gesagt, in den Show Notes. Da wollen wir uns nicht lange mit aufhalten. So, dann kommen wir mal zu den Mikroformaten. Da bist du ja richtig stark, weil da gab's ja mal diesen Podcast.

Erklär doch mal, w-was, sind die, sind die noch da? Sind die tot? Gibt es 'ne neue Version? Was ist denn jetzt damit?

Also Microformats, war halt so mein Einstieg in diese, in diese ganze Open-Web-Geschichte, deswegen liegen oder lagen sie mir sehr am Herzen. Also ich bin der Meinung, dass die Microformats zumindest, d-d-dieses, das Ganze so ins Rollen gebracht haben, dass wir jetzt eben so, vom W3C verabschiedete Formate wie RDFa oder jetzt in HTML5 das Microdata, worauf Schema.org basiert, überhaupt haben.

Ist aber andererseits halt auch eine Not- oder Übergangslösung, weil Microformats, wer sie noch nicht kennt, benutzen eben die Class-Attribute, um das HTML semantisch zu gestalten. Und das Pr..., das Problem bei der ganzen Geschichte ist, dass die Class-Attribute eben hauptsächlich dazu gedacht sind, eben die Seite oder sie werden hauptsächlich, zum Gestalten der Seite benutzt mit CSS oder, JavaScript wird dran gebunden. Das heißt, da passiert ziemlich viel.

Der eine Designer braucht die, Class-Attribute eben, um, um, ja, sein, sein Design an, an den Elementen, festzumachen. Der andere braucht's, um, um seine Events an, an das Element zu packen und der nächste braucht's, um die Seite semantisch zu machen. Und, da gibt's, also das hat dazu geführt, dass es viele Überschneidungen gibt. Das heißt, irgendjemand hat, zufällig 'n Attribut benutzt, was auch das Microformat benutzt, ohne eben irgendwas semantisch auszeichnen zu wollen.

Das hat da dann eben zu etlichen Fehlern geführt. Außerdem sind viele Microformats wieder von der Seite verschwunden, weil irgend, 'ne andere Agentur hat das Redesign gemacht, keine Ahnung von Microformats geha..., gehabt und eben die ganzen Class-Attribute geändert. Von daher, ja, Übergangslösung.

Hat ja nichts mehr funktioniert.

Was schön an den Microformats war oder ist, ist, dass sie, hergegangen sind und bestehende Formate auf HTML abgebildet haben. Das heißt, sie sind nicht hergegangen und haben ihre Attribute neu definiert, sondern sie haben geguckt, wie ka..., was, was ist denn so State of the Art, wenn ich 'ne Person auszeichnen will. Deswegen haben sie die, die vCard benutzt, um eben Personen, semantisch darzustellen in HTML. Die, die, wie heißt es, iCalendar oder vCalendar?

Mhm, bin ich mir jetzt nicht sicher.

Um, um Kalenderdaten zu machen, Atom, um eben Artikel darzustellen und so weiter.

Personen und so weiter, mhm.

Genau. Und, ja, also d-das vermisse ich so bisschen bei den aktuellen Sachen. Bei Open Graph oder, Schema.org wird zwar öfters erwähnt, dass sie Microformats oder irgendwelche bestehenden Formate als Vorbild haben, aber es unterscheidet sich doch weitestgehend und man muss, a, halt immer mal wieder nachschauen, wie heißt jetzt der Autor in dem, wie heißt jetzt die URL in dem und so weiter. Bei Microformats war das eben ziemlich einfach.

Also wenn man sich mit vCard beschäftigt hat, war Microformats, einfach nur 'ne andere Syntax. Ja, und, um die Fehleranfälligkeit jetzt, so bisschen in den Griff zu bekommen, ist man hergegangen und hat gesagt: „Okay, wir müssen uns irgendwas überlegen, dass die Klassen sich nicht mehr ganz so überschneiden und, hat so Pseudopräfixe eingeführt. Das heißt, das ist jetzt immer ein Buchstabe Minus und dann der Name.

Das heißt irgendwie, a-alle, alle Container-Elemente heißen jetzt H Minus, also H Minus also zum Beispiel H minus Card für die Person, H minus Event für, 'n Event, H minus Atom für, ja, RSS-Feed, ähnliche Geschichten. Und die Attribute werden mit wahllosen Sachen beginnen, was, was sehr verwirrend ist. Also sie sind hergegangen und haben versucht, die, die Präfixe für die, für die einzelnen Attribute am Typen festzumachen. Also es gibt P für Property und E für Enriched oder so was.

Was man sich aber nicht so einfach selber erschließen kann. Also es ist nicht so, dass man jetzt irgendwie 'n Attribut an-anguckt und dann, gleich sagt: „Ja klar, das ist jetzt 'n normales Property, da wollen wir kein HTML drin haben und das ist jetzt 'n Enriched, da wollen wir, Dings drin haben.“ Das heißt, das ist auch nicht fehlerunanfällig und man muss immer in der Spezifikation nachgucken. Es erschließt sich nicht von selbst und ist halt trotz allem nicht...

Also man ist dadurch jetzt nicht vor Fehlern gefeit, weil man halt eben immer noch, die Klassenattribute benutzt und's halt immer noch Überschneidungen geben kann.

Mhm. Jetzt gibt's noch 'ne andere Geschichte: Die großartige Unterstützung, der Browserhersteller war ja auch nie so, gegeben. Also der Idealfall ist ja, ich geh als unbedarfter User auf eine Webseite und da poppt 'ne Information auf in Form eines Reiters oder was auch immer. Du, ich habe auf dieser Webseite fünf Events gefunden, listet die mir auf. Oder ich hab auf dieser Webseite drei Personen angezeigt. Möchtest du die auf deinem, Adressbuch, haben und importieren?

Das haben bisher Plugins gemacht. Die Plugins sind einfach hergegangen, haben den, Code durchforstet und haben das entsprechend aufbereitet und dargestellt. Muss man sich aber wie gesagt manuell installieren und das war immer so der große Hemmschuh für die Microformats, warum die irgendwie nie so wirklich aus 'm Quark gekommen sind.

Weil einige Webentwickler sich auch eben gedacht haben: „Ja, wenn das beim normalen User nicht ankommt, sondern nur bei meinesgleichen, warum sollte ich mich dann, darum kümmern, ne?“

Ja, und vor allem hat halt, früher auch die, Unterstützung von den Suchmaschinen gefehlt. Also d..., man hätte ja sagen können, ja, selbst wenn's für den User nicht funktioniert, dann zumindest eben, zumindest eben, um, um für die Suchmaschine, das Ganze schön aufzubereiten, aber das gab's ja damals auch noch nicht. Das heißt, der Anwendungsfall für die Microformats hat einfach durchweg gefehlt.

Und jetzt erst über die Zeit hinweg hat, Google das immer massiver oder Yahoo hat, damals sogar damit angefangen mit dem Search Monkey. Das war eben so 'n Projekt, um, Sucheinträge semantisch zu gestalten und das konnte man auch selbst. Also man konnte eben selbst auch neue Designs einreichen.

Das heißt, man, hat zum Beispiel, wenn seine Seite irgendwelche, semantischen Inhalte hat, hat man so 'n kleines Snippet schreiben können, was die Inhalte von der Seite dann eben zieht und in der, in dem Google, in den Google-Suchtreffern dann einfach schöner darstellt. Aber das hat halt damals alles gefehlt. Und wie du schon gesagt hast, diese ganzen Plugins, die man sich installieren musste, die waren dann aber auch immer mit Microformats betitelt.

Es hieß dann, hatte immer irgendwelche kryptischen Entwicklernamen und da stand halt nicht Personen im Adressbuch speich-, speichern, sondern hCard im Adressbuch speichern. Das heißt, es war nie irgendwie massentauglich.

Nicht, ja, genau. Eine Sache müssen wir noch erwähnen, die wir, vielleicht auch absichtlich unterschlagen haben, und zwar ist es Dublin Core. Das wird dem einen oder anderen, älteren Datums vielleicht noch was sagen. Dublin Core war 'ne auch Metainformation, war dann immer DC Doppelpunkt und dann irgendwas dahinter in den Metainformationen und Dublin Core, ich kann mich dran erinnern, ich hab mich auch mal versucht. Da gab's Webseiten, die wurden überschwemmt mit Metainformationen.

Da gab's so viel, ich sag mal jetzt, Bullshit, davon. Und das war richtig SEO-verseucht. Im Grunde genommen hat sich Facebook beim OpenGraph-Protokoll, als sie das dann eben geschrieben haben, doch an Dublin Core orientiert. Also Dublin Core ist sozusagen der Grundstein gewesen für das OpenGraph-Protokoll und mehr muss man zu Dublin Core eigentlich nicht mehr sagen.

Also heutzutage findet das eigentlich auf, in, bei modernen Webseiten gar keine Anwendung mehr, weil's eben auch nicht mehr unterstützt wird großartig.

Genau. Und halt auch immer mehr in diese SEO-Richtung ging. Also ich, irgendwelche SEO-Tools, man konnt..., also es gibt ja zig SEO-Tools, die dann eben einem sagen, welche Metainformation jetzt fehlt und ich mein, DC Punkt Author musste man 'ne Zeit lang unbedingt drin haben.

Mhm. Ja, SEO-Tools, ja.

Sind wir beide große Freunde von.

Ganz große, ja. So, dann haben wir grundsätzlich mal alles zusammen, aufgeführt, was es so gript, gript, gibt natürlich. Schema.org, also Schema.org, Microformats haben wir angesprochen, OpenGraph-Protokoll, Dublin Core, Metainformation, Metatext, Metaelemente, ADFA. Was ist denn unsere Empfehlung?

Ja, was sind unsere Empfehlungen? Also für, für Social Networks, würd ich sagen, reicht OpenGraph völlig aus.

Ja. Auch zum Teil mit der Basis für die Google-Suchmaschine. Und wenn man dann noch seine Webseite auszeichnen möchte mit irgendwelchen Events oder Tickets oder was auch immer es da noch für spannende Geschichten gibt, dann, noch mal Schema.org oben drüberknallen für die Elemente, die der OpenGraph, die das OpenGraph-Protokoll nicht abdecken kann, würd ich sagen, ne.

Genau, genau. Aber wie gesagt, aufpassen, dass man eben bei Google+ da nach der Umstellung auf Schema.org, auch immer noch gut aussieht. Gut immer die Testtools benutzen, ganz wichtig.

Genau, definitiv, ja. Und, wie wir auch festgestellt haben, macht das Ganze Spaß.

Genau, genau.

Sich darum zu kümmern.

Ja, und bei RDFA und Microformats, pff, also Microformats wirklich nur für die, die Spaß an semantischen Klassennamen haben und RDFA ist halt, RDFA ist irgendwie nix fürs Web.

Mhm. Ja, und dann noch mal zusammenfassend vielleicht: Warum sollte man überhaupt Metainformationen in seine Webseite packen? Also ich meine, um, um das Web wirklich semantischer zu machen, und zwar in der Form, dass wir jetzt nicht semantische Elemente von HTML5 reinbauen. Das natürlich auch.

Aber es ist jetzt, in der Übergangsphase, wo HTML5 das Zepter übernommen hat in Sachen, semantisches Web, 'ne, 'ne schöne, gute Gelegenheit, den sozialen Netzwerken und der Google-Suchmaschine wirklich Elemente aufzuzeigen: „Bitte stelle meine Sachen so dar. Das ist wirklich der Titel, den ich für dich extra so formatiert habe. Das ist das Bild.“ Und es tut keinem weh.

Es ist nicht viel, diese Sachen reinzuschreiben und wenn ihr, wie gesagt, den einen oder anderen Artikel, den wir verlinkt haben, euch durchlest, dann habt ihr das innerhalb von einem Tag auch wirklich umgesetzt auf eurer Webseite. Das ist nicht die Schwierigkeit und es macht einfach Spaß zu sehen, welche Informationen man in eine Webseite packen kann und wie die am anderen Ende mit diesen Testtools wirklich ankommen, ne.

Genau. Bei Schema.org, wär es halt wichtig noch zu sagen, man soll, man sollte klein anfangen, man sollte sich vorher überlegen, was man auszeichnen möchte und dann auch nur das auszeichnen, weil von der Schema.org-Webseite wird man leicht erschlagen. Ich weiß nicht, wie viele hundert-

Das stimmt, ja.

-mögliche Formate es dort gibt.

Genau. Man kann sich da richtig austoben.

Genau, genau. Und das, also was noch zu Schema.org zu sagen wäre: Also das Schöne an dem ist eben, die, die großen drei Suchmaschinen haben sich da drauf committet. Das heißt, mit Schema.org ist man auf, auf der richtigen Seite, wenn's um semantische Auszeichnung geht. Das finden nicht nur wir gut, sondern das ist halt auch wirklich das, worauf Google, Yahoo und, Microsoft bauen.

Mhm. Ja, dann sind wir am Ende der Sendung angekommen. Also ich sage, erst mal herzliches Dankeschön, Matthias Pfefferle, dass du auf jeden Fall dabei gewesen bist.

Gerne, gerne.

Und, wir werden ja noch einige Folgen in Zukunft zusammen machen. Nicht mehr dieses Jahr, aber dann 2013. Und, falls ihr Feedback für uns habt, würden wir uns freuen, wenn ihr uns eine E-Mail zum Beispiel schickt. echo@technikwürze.de mit O-E geschrieben. Wenn ihr Git mächtig seid, dann dürft ihr euch gerne in unsere GitHub-Repositories einhacken und, euren Senf dazu schreiben. Wir haben auch eine Webseite, nennt sich technikwürze.de, die inzwischen ein bisschen alt ist.

Da ist noch 'n Flashplayer drauf, ist ganz fürchterlich. Bauen wir auch neu. In einer Basisversion, denk ich mal, wird, auch Anfang nächsten Jahres dann online gehen. Unser Facebook-Konto, das hab ich letztens geschlossen und auf private gestellt, weil ich Facebook, richtig blöd finde. Dann haben wir noch 'ne Google+-Seite.

Da kann es sein, dass wir ab und zu noch mal einen Hangout veranstalten mit euch und, einfach mal fragen, was so abgeht, wie zum Beispiel, was wir letztens gemacht haben, um zu überlegen, ob Technikwürze weitergehen soll, wo wir schlu..., beschlossen haben, dass es weitergeht. Ansonsten kennt ihr ja, könnt ihr auch uns folgen, dem Matthias zum Beispiel. Wo bist du hauptsächlich so aktiv? Bei Twitter?

Ich glaub bei Twitter, ja. @Pfefferle.

Mhm. Ich bin hauptsächlich,, bei Google+ unterwegs. Das ist mein deutscher Kanal und, in Englisch twittere ich nicht ganz so häufig, aber, doch schon wieder vermehrt in Englisch dann auf Twitter. Und, ja, in diesem Sinne möchte ich noch mal ein herzliches Dankeschön sagen an unseren Sponsor Mittwald, mittwald.de, der, die Hosting-Queen sozusagen.

Nein, wir sind wirklich sehr dankbar und, dass die Folgen so schnell bei euch auf den Endgeräten runtergeladen werden, sei es jetzt das iPhone, sei es ein Android-Phone oder iTunes oder was auch immer, liegt eben daran, dass die uns, eine richtig schnelle Verbindung gezaubert haben und dafür ein herzliches Dankeschön. Und, ja, in diesem Sinne danke fürs Zuhören. Bis zum nächsten Mal.

Bis zum nächsten Mal.

Tschau.

Tschau.