HTML5 Grundgerüst - mit Anbindung an soziale Netzwerke (W3C-valide)
HTML5 ist zwar noch kein offizieller Standard, doch moderne Browser verstehen i.d.R. die wesentlichen Tags. Die HTML5-Vorteile, z.B. die bessere semantische Auszeichnung der Inhalte, liegen auch klar auf der Hand. Insofern ist es naheliegend, eine entsprechende Vorlage als Grundgerüst hier bereit zu stellen.
HTML5-Grundgerüste gibt es sicherlich schon viele im Web. Ich wollte aber, dass die Vorlage einige Zusatzbedingungen erfüllt:
- Sie muss die Button der verbreitesten sozialen Netzwerke enthalten (Tweet-Button, Facebook - „gefällt mir“-Button und Google Plus Button)
- Sie muss die OpenGraph-Tags unterstützen
- Der Code muss W3C valide sein.
Einbindung der social Button in die HTML5-Vorlage
Das eigentlich Interessante war die Einbindung der Open-Graph Meta-Tags für die Anbindung der sozialen Netzwerke. Die dazugehörigen Namespaces:
- xmlns:og="http://opengraphprotocol.org/schema/
- xmlns:fb=http://www.facebook.com/2008/fbml
werden in HTML5 nicht als valide eingestuft. Wenn man aber die Namespaces einfach nicht einbindet und die Open-Graph Meta-Tags trotzdem verwendet, findet dies der Validator in Ordnung. Das klingt für mich nicht unbedingt logisch – funktioniert aber. Vielleicht sollte man einem Tool doch nicht zu viel Glauben schenken...
Erkennung der Open-Graph Meta-Tags in HTML5
Die Open-Graph Meta-Tags werden korrekt vom Facebook-Debugger erkannt und die dazugehörige Open-Graph Struktur wird korrekt angelegt. Das Rich-Snippet Test-Tool von Google erkennt die Tags ebenfalls korrekt als RDFa Nodes. Für beide Anwendungsfälle gilt, dass sowohl in Facebook, als auch bei Google+ (sofern man den entsprechenden Button klickt) die entsprechenden Tags korrekt ausgelesen und in den Newsfeed übernommen werden (getestet in verschiedensten Browsern). Insofern bin ich mit dem Resultat zufrieden.
Hier ist das HTML5-Grundgerüst:
Die Vorlage ist noch nicht für mobile Webseiten optimiert. Dieser Schritt wird aber sicherlich demnächst folgen.