Categories
Virtual Log

HTML-Trick: Meta-Description und og:description in einem Tag zusammenfassen

Bei den HTML-Meta-Tags gibt es seit eh und je einen Wildwuchs. Facebook, Google und Twitter setzen jeweils auf einen eigenen Standard, um so einfache Dinge wie den Titel oder die Beschreibung einer Webseite anzugeben. Mit dem folgenden coolen Trick lassen sich die Open-Graph- und die Meta-Description in einem Element zusammenfassen.

Auf den meisten modernen Webseiten findet man heutzutage zwei fast idente Meta-Tags, die eine kurze Beschreibung der HTML-Seite beinhalten:

<meta name="description" content="Meine idente Beschreibung.">
<meta property="og:description" content="Meine idente Beschreibung.">

Im Prinzip gibt man mit diesen Tags zwei mal das gleiche an ;)

Während die Meta-Description historisch von Suchmaschinen wie Google und Bing verwendet wird, um auf der Suchergebnisseite eine kurze Zusammenfassung der Webseite zu generieren (das sogenannte Snippet), wird die Open-Graph-Description von Facebook verwendet, um einen kurzen Text anzuzeigen, wenn man die Seite auf dem sozialen Netzwerk teilt.

Obwohl man theoretisch für jedes soziale Netzwerk eine eigene Seiten-Beschreibung definieren könnte (Google+ verwendet schema.org und Twitter Twitter Cards, beide verstehen aber auch Open Graph), macht das in der Praxis meistens wenig Sinn und man wird normalerweise ein und dieselbe Beschreibung für alle Dienste verwenden, was zu redundanten Meta-Tags führt.

Ich habe jetzt auf Stackoverflow folgenden coolen Trick gefunden, mit dem man die Meta-Description und die og:description in einem Element zusammenfassen kann, indem man die Meta-Description einfach mit dem RDFa property-Attribut wie folgt anreichert:

<meta name="description" content="Meine optimierte Seitenbeschreibung." property="og:description">

Ich habe diese Technik auch hier auf Virtual Net getestet und der Trick wird auch vom Facebook Debugger und W3C Validator akzeptiert. Allerdings wird diese Technik vom Twitter Card Validator im Moment leider noch nicht unterstützt, d.h. man müsste für Twitter entweder die og:description separat angeben oder eine eigene Twitter Card Description hinzufügen.

Wie gefällt dir dieser Trick? Verwendest du unterschiedliche Seitenbeschreibungen für Bing, Facebook, Google und Twitter oder den identen Text? Würdest du die redundanten Meta-Tags auch gerne zusammenfassen?

Weitere Ressourcen

14.10.2013 Virtual Net

Kommentieren

Name
E-Mail (wird nicht veröffentlicht)
Homepage (optional)