Open Graph – Sebastians Blog https://sgaul.de Neues aus den Softwareminen Thu, 13 Mar 2014 20:34:48 +0000 de-DE hourly 1 https://wordpress.org/?v=6.1.7 https://sgaul.de/wp-content/uploads/2019/02/cropped-sgaul-2-1-32x32.jpg Open Graph – Sebastians Blog https://sgaul.de 32 32 Optimiert für Internet Explorer und Facebook https://sgaul.de/2012/06/21/optimiert-fur-internet-explorer-und-facebook/ https://sgaul.de/2012/06/21/optimiert-fur-internet-explorer-und-facebook/#comments Thu, 21 Jun 2012 12:15:36 +0000 https://sgaul.de/?p=1228 Es gibt sie immer noch: Websites, optimiert für Internet Explorer 6, 1024×768 und „16bit Color“. Doch das Verständnis für das Web und seine Freiheiten hat sich weiterentwickelt. Obige Raritäten sind kein Ärgernis mehr, sondern eine Erinnerung an „gute“, alte Zeiten. Das Web ist frei, standardisiert und zugänglich für jedermann. Selbst Fortschrittsbremsen wie Adobe (Flash) oder Microsoft (IE6, IE7, IE8, Silverlight) scheinen dem Trend zu folgen. Doch sieht die Zukunft wirklich so rosig aus?

HTML-5-Boilerplate und die „Spezialfälle“

Betrachtet man die Websitevorlage HTML 5 Boilerplate kann es einem schon etwas mulmig werden. Allein die Datei index.html, also die Datei, in die die eigentlichen Inhalte gehören, hat vor allem Ergänzungen für Spezialfälle.

Das Starttag <html> wird ersetzt durch:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <!--<![endif]-->

Aus 6 mach 363 Zeichen. Und es folgen weitere kleine Tweaks:

  • Internet Explorer mit Chrome-Frame laden
  • Icons für Apple-Geräte einbinden
  • Viewport für Mobilgeräte einstellen
  • JS-Modernizr laden

Dies ist ein Auszug aus der index.html. Von der CSS-Vorlage möchte ich gar nicht anfangen: Dort bekommt so ziemlich jeder bekannte Browser sein eigenes Layout-Reset.

Facebook Open Graph

Und der Trend geht weiter. Bei Linux und ich ist zu lesen, wie Christoph folgendes Problem löst:
Google Plus und Facebook das richtige Thumbnail zu euren Artikeln verpassen. Der Grund für das falsche Thumbnail ist einfach und schnell zu beheben: Das Theme fügt den Banner als Img-Element ein. Eine klare Verletzung der Trennung von Inhalt und Layout. Facebook und Google verhalten sich durchaus korrekt, wenn sie ein solch prominentes Bild als Artikelbild ansehen.

Die vorgeschlagene Lösung ist in meinen Augen bedenklich: Christoph beschreibt einen Ansatz mit Facebook Open Graph, einem Protokoll, dass auch den Rest des Webs mit Facebook verknüpfen soll. So kann man auch Facebook mitteilen, welches denn das Artikelbild ist. Und nicht nur das: Auch der Titel des Artikels, seine URL, Sprache und Beschreibung können so notiert werden. Nach Standard- und Dublin-Core-Metaelementen also eine weitere Variante, die eigene Website mit redundanten Daten zu befüllen. Anders als vorher aber nicht einem sinnvollen Standard folgend, sondern den Bedürfnissen eines großen Unternehmens. Und da ist es wieder: „Diese Seite ist optimiert für Facebook.“

Web der Standards? Der Kampf geht weiter…

Schon diese zwei Beispiele zeigen, dass Browser- und Dienstspezialisierung heute wie damals ein großes Thema ist. Wirkte das Web in Zeiten von HTML 4 für Jahre gefestigt, kommen seit Version 5 ständig neue Anforderungen und Wünsche hinzu. Diese werden gern mit proprietären Erweiterungen realisiert. Das muss auch nicht immer schlecht sein. Es sind positive Schübe in richtige Richtungen dabei.

Als Webdesigner muss man sich dieser Trends aber bewusst sein. Es sind Workarounds, keine Lösungen. Und die werden teuer erkauft. Schnell machen ein paar Ausnahmebehandlungen mehr als die Hälfte einer HTML-Vorlage aus. Oder man behebt einen Theme-Fehler mit zwölf Metaelementen und durchschnittlich 1000 Zeichen redundanter Information. Solange es bei „allen“ läuft, mag das für die meisten akzeptabel sein.

Es ist wichtig, dass Standards neuen Anforderungen nachkommen und Notlösungen ersetzen. Dass Suchmaschinenoptimierung bisher Google-Optimierung war, wurde stets stillschweigend hingenommen. Kommen jetzt noch Facebook-, Twitter und Pinterestoptimierung hinzu, wird es problematisch. Lassen sich die Webdesigner darauf ein, werden solche Firmen das auch ausnutzen. Es ist wichtig Grenzen zu ziehen. HTML-Elemente wie <link rel="apple-touch-icon"> oder Facebooks Open-Graph-Metaelemente brechen mit Standards, statt sie zu erweitern. Dies ist der falsche Weg.

Diese Grenzen dürfen nicht überschritten werden. Andernfalls sind am Ende diejenigen, die sich für ein Internet der Standards und der Vielfalt einsetzen, die Verlierer. Und schlussendlich auch alle Nutzer des Webs.

]]> https://sgaul.de/2012/06/21/optimiert-fur-internet-explorer-und-facebook/feed/ 13