Bilder-SEO – Tipps für gerechte Bilder-Optimierung

Gastartikel Michael Tietz von twago

Das sich die Suchmaschinenoptimierung nicht nur um den Content und der Offpage-Optimierung (Generierung von Links) dreht, dürfte vielen klar sein. Das aber auch verschiedene Medienelemente wie Videos oder Bilder auf der jeweiligen Webseite einer genauen Optimierung unterliegen bleibt aus meiner Erfahrung, viel zu oft ein unangetastetes Feld.
Da die Suchmaschinen an sich, frei nach dem Motto Seo is now, Bilder auf der Webseite gerne sieht, sollten diese ihnen auch weiter schmackhaft gemacht werden. Was dabei zu beachten ist, soll hier zum Thema gemacht werden.

Als erstes soll hier der sogenannte Alt-Text oder lang: alternative text ins Auge gefasst werden. Dabei wird das Bild beschrieben was zum einen gut für die Suchmaschine ist, da diese die Daten aus‑ und bewertet. Zum anderen ist es natürlich für die Besucher von Vorteil die aus den verschiedensten Gründen das Bild nicht angezeigt bekommen, hier wird an Stelle des Bildes nämlich dieser alt-text angezeigt. Die Wichtigkeit des alt-text soll hier noch einmal hervorgehoben werden, eine gut optimierter Text mit den relevanten Keywords ist unbedingt zu beachten da diese Informationen direkt von der Suchmaschine bearbeitet werden.

Als zweites sollte der Dateiname beachtet werden, da hier wieder Daten direkt von der Suchmaschine oder anderen Diensten aufgegriffen werden, sollte der Dateiname auch einen kurzen beschreibenden Charakter besitzen.

Die Dateigröße stellt den dritten wichtigen Punkt dar. Klar ist das Google irrwitzig große Bilder höchstwahrscheinlich nicht indexieren wird, es sei denn diese sind sehr gut verlinkt, jedoch komprimieren die meisten Bilder-Softwares, Bilder per Knopfdruck auf die für Webseiten gebräuchlichen Größen. Hier sollte besonders an die User gedacht werden die eine geringe Bandbreite haben und die stets auf ärgerlicher Weise beim laden bestimmter Bilder daran erinnert werden. Der Dateityp spielt hier eher eine untergeordnete Rolle, solange gängige Typen gewählt werden wie beispielsweise JPEG, GIF oder PNG.

Als vierten Punkt soll hier zudem aufgeführt werden das Suchmaschinen den Text um das Bild analysieren und anhand dessen Rückschlüsse auf die Beschreibung des Bildes ziehen. Was auch Sinn macht, denn in der Regel passt das Bild auch zum Text.
Wie auch im SEO sollte für Webseiten dafür gesorgt werden, dass Externe Links entweder auf die URL des Bildes oder die Seite führen, welches den Wert des Bildes dementsprechend anhebt.

Sie merken selbst bei der Optimierung von Bildern muss auf einige Punkt Acht gegeben werden. Bei genauerer Betrachtung jedoch macht jeder Punkt Sinn und sollte nicht in erster Linie der Suchmaschine dienen sondern letztendlich dem User, was eigentlich das gängige Credo in der Suchmaschinenoptimierung und im SEM sein sollte.

WebFonts – eine Übersicht

Schriftarten im Web – was ist bereits heute möglich und wo sind die Unterschiede?

Inzwischen gibt es viele Dienste, die auf einfache Weise verschiedenste Schriftarten sogar im Browser darstellen lassen. Ein Feature, das man sich lange Zeit gewünscht hatte, denn bisher konnte man nur einige Standardschriften (Arial, Verdana, Courier, etc.) einsetzen. Und nicht einmal dann konnte man sicher sein, welche Schriftart der Besucher der Seite angezeigt bekommen würde. Mittlerweile ist es kein Problem mehr, die ausgefallensten Schriftarten im Web darzustellen. Die Frage ist nur wie, womit und wie es dann weitergeht.

Die Vorgeschichte

Anfangs behalf man sich mit Bild-Replacement Methoden, die mehr oder minder zu einem riesen Usabilityproblem wurden. Einige Softwares wie sIFRcufón und andere Konsorten. Die erstgenannten Methoden erhielten großen Zulauf und verbreiteten sich schnell. Doch keine der Lösungen war wirklich schön umsetzbar oder gar bedienbar für den User, weshalb viele doch wieder darauf verzichteten.

Dank CSS3 Entwürfen mit neuen Schriftart Einbindungsmöglichkeiten via @font-face Regelung wurde die Diskussion neu genährt. Und prompt interessierten sich die Browserhersteller dafür. Mozilla Firefox sowie die Safari und Chrome Mutter WebKit lernten diese neue CSS3 Möglichkeit schnell, wenn auch mit diversen Kinderkrankheiten. Wie immer spielten einige Hersteller wie Microsoft (Internet Explorer) nicht mit (nur MS-eigenes Format) und nach wie vor gibt es ein Problem mit den Schriftdateien, deren Lizensierung und einem gemeinsamen Standard. Hierzu verweise ich auf einen Vortrag von Gerit van Aaken, der sich gesondert damit beschäftigt hat.

Das Problem der Vielfalt

Im letzten Jahr vermehrten sich die Services rasant. Die großen 4 stelle ich anschließend vor und vergleiche ein wenig miteinander.

typekit.com

Typekit ist der wohl populärste Dienst mit einer umfangreichen Schriftsammlung und extrem vielen Möglichkeiten. Er ist allerdings nicht wirklich kostenlos, ab 24,95$/Jahr ist der Service nutzbar. Zwar gibt es einen Free-Account, der jedoch ein Branding und sehr große Einschränkungen aufweist. Die Low-Level Pläne sind knapp bemessen, es sind nur 1–2 Domains und ⅖ Schriften einsetzbar. Der Traffic wird nicht in Speicher sondern in Besucherzahlen abgerechnet und bietet auch im Einsteigeraccount genug Platz. Der »Portfolio« Plan lässt kaum Wünsche offen, hat als einzige Einschränkung 500.000Pageviews/Monat und kostet 49.99$/Jahr.

Es werden über 500 Schriftfamilien angeboten, die im Backend durchstöbert und getestet werden können. Um besser vergleichen zu können, kann man mehrere Schriftarten untereinander stellen. Je nachdem, wie man gerne den Code schreibt, kann man direkt im Backend die CSS Klassen zuweisen und gestalten oder wie bisher dies direkt in der CSS Datei tun. Für jede Schriftart wird jeweils nur der eingestellte Schriftschnitt ausgegeben, was Traffic spart und die Ladezeit verkürzt. Zudem kann man Fallbacks mit einbauen für Browser, die die @font-face Regel nicht beherrschen.

Typekit verwendet Javascript, um die Daten zu laden.

Google Font Directory/API

Google bietet seit geraumer Zeit einen kostenfreien Dienst an, über den man Schriftarten via CSS oder Javascript auf der eigenen Webseite einbinden kann.

Die Auswahl der Schriftarten ist zu Zeit noch sehr begrenzt (Stand: 9⁄2010) und bietet derzeit 19 Schriftarten an, einige davon mit verschiedenen Schnitten. Die einfache Struktur, die keinerlei Anmeldung benötigt, stellt eine Vorschau bereit, die verschiedenen Schriftschnitte und einen Code, der schnell und mit einfacher Auswahl die Schriftart einbetten lässt. Die nötigen Schriftschnitte können an‑ und abgewählt werden. Standardmäßig wird ein HTML-CSS Code ausgeliefert, es kann allerdings eine Technik für „Fortgeschrittene“ eingeblendet werden, die dann Variationen via Javascript und dem sog. »WebFont Loader« zulässt. Außerdem kann die Schriftart auch heruntergeladen werden.

Die Performance ist mit Typekit (mit dem eine Kooperation mit Google Fonts besteht) eine der besten unter den angebotenen Lösungen, was durch die bestehende Google Code Infrastruktur nicht sonderlich verwundert. Die Lösung ist ab Internet Explorer 6, Firefox 3.5, Opera 10.5 und Safari 3.1 sowie Chrome 4.25 gängig, leider jedoch nicht unter iPhone, iPad und Adroid. Dank OpenSource Lizenzen seitens Google braucht man sich hier absolut keine Sorgen um Rechte zu machen.

Wem die wenigen Schriftarten reichen, die Google bei seiner Lösung bietet, dem sei diese Lösung dank simpler und ultra-flexibler Struktur ans Herz gelegt.

WebINK.com

WebINK steht noch in den Kinderschuhen und ist erst im August 2010 an den Start gegangen. Die Firma Extensis, die das Produkt betreibt ist bekannt für seine Schriftverwaltung Suitcase. Der Service ist etwas günstiger und startet ab 0.99$/Monat (~12$/Jahr). Dafür gibt es überhaupt keinen Free-Plan. Jeder Plan hat jedoch eine Begrenzung auf 4 Domains (inkl. beliebig vielen Subdomains). Eine meiner Meinung nach sehr starke Restriktion, die bei Preisen bis 19.99$/Monat nicht bestehen sollte. Hier ist man scheinbar noch ein bisschen unflexibel oder überängstlich dem Web gegenüber.

Die angebotenen Schriftarten sind allesamt nur sehr gute, überprüfte Schriften, die keine Mängel aufweisen. Dennoch ist die Auswahl mit über tausend Schriften sehr vielfältig und lässt kaum Wünsche offen. Die Auswahl wird jedoch je nach bezahltem Plan eingeschränkt. Ebenso die Bandbreite, die jedoch großzügig bemessen wird.

Im Backend der Software durchsucht man die Library, wählt eine Schriftart aus und kann diese dann der Webseite hinzufügen. Ein simples System, das Spaß macht.

Eingebunden wird jede Schrift über die @font-face Regel. Hier verlinkt man als Quelle auf den WebINK Server mit einem speziell generierten Authentifizierungscode. Den Rest, wie z.B. das Schriftformat, erledigt deren Server. Ungünstig bei dieser Methode ist der verschachtelte DNS Aufruf. Ansonsten bietet sich die Lösung durchaus als praktikabel an. Die Kompatibilität besteht ab InternetExplorer 4.0, Firefox 3.5(!), Chrome 4.0, über Opera wird nichts geschrieben, aber es sollte wohl ab Version 9.5 kompatibel sein. Die Lizensierung der Schriften und sämtliche rechtlichen Angelegenheiten übernimmt der Anbieter selbstverständlich selbst.

Technisch liegen die Schriften auf Amazon S3 Speicher, der bekanntlich sehr gute Performance und Sicherheit bietet. Dank Komprimierung wird sogar noch Bandbreite gespart, der Ladevorgang verkürzt sich deutlich. Schließlich kann eine Schriftart normalerweise durchaus einige Megabyte groß sein.

Monotype/Linotype WebFonts

Ganz frisch auf dem Markt präsentiert sich die Lösung von Monotype Imaging. Nach einer relativ kurzen, geschlossenen Betaphase mit enormen Entwicklungen, stellt die Lösung eine der umfangreichsten dar. Mit über 7.500 Schriftarten und vor allem bekannten Schriftfamilien wie die Helvetica, Frutiger oder ähnliche Größen, ist das Portal sehr interessant. Auch sind mehr als 40 Sprachen verfügbar. Da hier jedoch große Datenmengen entstehen würden zum Download (z.B. Chinesisch ca. 10MB), verwendet man hier ein patentiertes Ladesystem, das nur die jeweils benötigten Charaktere herunterlädt und so sehr effizient ist.

Bezahlt man einen gewissen Standard für die Lösung, gibt es sogar Schriftdownloads dazu (bis zu 50, 1 Monat gültig), um Mockups oder ähnliches perfekt gestalten zu können. Beim Browsersupport ist man ab dem Firefox 3.5, Opera 10.10, Internet Explorer 4, Chrome 4 dabei. Es wird aber auch zusätzlich der Apple Mobile Safari ab 3.0 unterstützt, auf dem iPhone oder iPad sind die Schriften also auch darstellbar.

Für die Einbindung hat man sich ein kluges System ausgedacht. Über das Webinterface wählt man die Schriftart und fügt sie dem Projekt hinzu. Dann kann man ein Stylesheet erstellen (wie bei TypeKit) indem man CSS Selektoren mit der Schriftart versieht. Abschließend muss man nur noch einen JS/CSS Code mit einem Authentifizierungskey in die Webseite einbinden und schon sieht man die Webseite mit der neuen Schriftart.

Das schöne: auch beim Free-Plan sind beliebig viele Domains und Subdomains inklusive, zusätzlich kann der Code auch via SSL geliefert werden.

Der Free-Plan ist auf 2.200 Schriften und 25.000 Seitenaufrufe pro Monat beschränkt. Es können beliebig viele Schriften und beliebig viele Webseiten benutzt werden. Ab 2011 wird zusätzlich ein kleiner Badge in der rechten, unteren Ecke nötig, wie bei TypeKit bereits der Fall. Der „Standard-Plan“ für $10 (USD) bietet die volle Bibliothek und ist nach oben hin bzgl. Seitenaufrufe anpassbar, daher ist das System auch mitwachsend und ultra-flexibel. Der Desktop-Download wird beim „Professional-Plan“ ab $100 mitgeliefert, ist daher auch nur für große Agenturen relevant, die sich an Pitches mit Mockups u.ä. beteiligen.

Ein kleines Fazit

Natürlich – man muss abwägen, was man braucht. Dazu sollte man überlegen, welche Schriftarten man benötigt, ob eine kostenlose Lösung (z.B. Google Fonts) ausreichend ist und wie viel Traffic über die Webseite gelangen wird.

Dennoch gebe ich als Fazit Monotype WebFonts als eindeutigen Favorit an. Die Lösung leistet zu kleinem Preis am meisten. Eine riesen Bibliothek, kaum Einschränkungen außer Traffic und sehr gute CSS-Technik rennt TypeKit den ersten Platz ab. Letztere Lösung ist durch die Javascript-Methode und eine kleinere Bibliothek schlicht im Nachteil.

Das Problem der Technik

Technisch gibt es zwei Möglichkeiten, die heutzutage verwendet werden: die Einbindung der Schriftdaten über Javascript oder via CSS. Letztere Möglichkeit ist deutlich zu bevorzugen, da hier alle User bedient werden können und die Performance meist ebenfalls besser ist.

Beide Lösungen haben das Problem, dass die Daten nur verlinkt werden und selbst auf Servern der Anbieter (in der Cloud) liegen. Performanceprobleme tauchen immer wieder auf, der Entwickler und User ist Abhängig von den Serverleistungen anderer. Gerade bei kleineren Anbietern kommt es daher häufig zu Fehlern. Google legt zwar von der Serverleistung und seiner komplexen Infrastruktur eine sehr gute Performance vor, dennoch ist eine zusätzliche DNS Abfrage nötig, die die gesamte Performance der Webseite beeinträchtigt. Heutzutage kann sich das sogar auf das Google Suchranking auswirken. Eine Kontroverse, die nicht zu vermeiden ist.

In allen Fällen ist der Webentwickler abhängig von externen Firmen. Diese können über die Schriften bestimmen, wie sie möchten. Und sollte sich das angebotene Produkt nicht rentieren schaltet man den Service ab, der Entwickler und seine Website stehen hilflos da oder merken dies noch nicht einmal.

Was bringt die Zukunft?

Na gut, was die Zukunft bringen wird, das weiß keiner. Zu hoffen ist, dass die Browserhersteller bald eine Möglichkeit finden, mit Schriftrendering besser und einheitlicher zu verfahren. Hoffen wir ebenfalls, dass sich noch einiges bei den oben genannten Anbietern tut, so dass wir in den nächsten Jahren tatsächlich konkurrierende Produkte haben, die qualitativ gute Lösungen für Webmaster bieten und vielleicht auch andere Anwender bringen.

Monotype Imaging bereitet als erster schon ein tolles Konzept mit dem bezahlten „Desktop-Download“ System vor, das die rechtlichen Aspekte und auch finanzielle Aspekte für eine Agentur deutlich vereinfacht und reduziert. Das ist sehr begrüßenswert, allerdings ist die Lösung natürlich immer noch vollkommen unpraktikabel für Normalanwender, da der horrende Preis nicht für jeden aufbringbar ist. Schade, hätte man doch einfach in der Anzahl der downloadbaren Schriften pro Monat preislich variieren können. Hoffen wir, dass sich hier noch etwas tut, schließlich besteht das Problem der vollkommen überteuerten Schriften auf Grund eines unzureichenden Konzeptes der Vermarktung/Anwendung/Flexibilität, noch immer.

Für Interessierte gibt es am 13. November 2010 in München den „WebFont Day“ mit vielen interessanten Vorträgen zum Thema und auch Stellvertretern der namhaftesten Schrifthändler…

Generator für Platzhaltergrafiken

Wer auf die Schnelle Platzhalter für noch nicht vorliegende/erstellte Grafiken in bestimmter Pixelgröße benötigt, braucht nicht unbedingt immer Photoshop zu bemühen.

Ein einfaches Script generiert in sekundenschnelle beliebig viele Grafiken in jeder gewünschten Größe (Pixel einfach an die URL anhängen, z. B. http://dummyimage.com/640 × 480), die man entwender speichern oder auch direkt vom Server einbinden kann. Alternativ kann man das Script auf seinem eigenen Webspace einsetzen.

Der Dynamic Dummy Image Generator ist eine nette Sache für Webdesigner.

Browsernews: Opera 10.5 pre-alpha/Firefox verschiebt sich

Kurz vor Weihnachten hat Opera eine neue Vorabversion ihres Browsers zum Testen bereitgestellt. Die wesentlichen Veränderungen sind unter anderem eine neue, vielfach schnellere Javascriptengine, deutlich bessere CSS3 und HTML5 Unterstützung, sowie einige nette User-Interface Neuerungen, die die Bedienung einfacher und angenehmer machen. Dazu gehört eine neue Bedienleiste, die sich deutlich besser in das jeweilige Betriebssystem integriert, eine neu aufgearbeitete Adressleistenansicht und –funktion, sowie ein deutlich verbessertes Suchfeld. Hier kann direkt bei der Suche die Suchmaschine noch gewählt werden und es gibt auch einen Verlauf, der individuell gelöscht werden kann (jeder Begriff einzeln kann entfernt werden).

Ein ausführlicher Artikel ist hier verfügbar…

UPDATE: Mozilla schreibt in den Developer Notes, dass die kommenden Firefox Versionen noch etwas länger brauchen, bis sie auf den Markt kommen. Version 3.6, welche deutlich schneller starten soll und einige Benutzerpersonalisierungsfunktionen sowie eigene Themes mitbringen soll, kommt erst 2010 gegen Ende des 1. Quartals. Denn zuerst erscheint am 5. Januar die Version 3.5.7 und am 2. Februar dann das 3.5.8 Release. Die nächste Major-Release-Version, Firefox 4, wird vom Mozilla-Team erst für Ende 2010/Anfang 2011 als Startdatum beschrieben.