Sie befinden sich hier:
» 
» 
22.11.2012

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
  • Sie muss abwärtskompatibel bis IE6 sein (im IE6 wird allerdings der Google Plus Button ausgeblendet, da Google+ den IE6 nicht unterstützt). Die Abwärtskompatibilität wurde durch den Einbau eines Fallbacks für ältere IE-Browser umgesetzt.
  • 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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

52