Nach den aktuellen Bilderklau-Artikeln vom Martin, hab ich mich inspiriert gefühlt, auch mal wieder etwas zum Thema “Bilder und SEO” zu schreiben. Bei mir geht es heute aber weniger um den Diebstahl von Bildern, als viel mehr darum, wie Bilder auch außerhalb der beliebten Suchmaschinen-Bildersuche für Suchmaschinenoptimierung genutzt werden können – auch wenn man ja eigentlich eher die klassischen Textlinks bevorzugt. Wie soll das gehen? Ganz einfach, indem man sich z.B. den in der Suchmaschinenoptimierung eigentlich nicht ganz sooo beliebten Werbebanner bedient und dabei etwas trickst.

Butter bei die Fische…

Banner bzw. Grafiken als Werbeform können zwei Zwecke verfolgen: a) Sie sollen zum Klicken anregen oder b) sie sollen einfach nur als Branding-Instrument für ein neues Produkt, eine Website oder Dienstleistung herhalten. Der Zweck ist hier aber eher nebensächlich – wichtig ist die Form als Grafik. Die Frage ist nun, wie man Grafiken für die Suchmaschinenoptimierung nutzen kann.

Variante 1

Wer schon einmal ein Bannerwerbung auf einer anderen Website geschaltet hat, kennt das Spiel: Man schickt dem betreffenden Webmaster seinen Werbebanner und dieser wird dann entsprechend mit der Zielseite verlinkt. Wenn man dann noch etwas rummosert, ist der betreffende Webmaster oft auch noch so freundlich und baut in den Code noch die gewünschten alt-Tag und title-Tag Daten ein, die dann zusätzlich noch etwas zur SEO eures Banners beitragen. Soweit, sogut – nun hat man einen Banner inklusive Titel und Link. Aber es geht besser…

Variante 2

Zunächst einmal ist es zwar sehr schön, daß der o.g. Webmaster euch die Arbeit abnimmt und den in seine Website integriert hat. Dadurch, daß der Banner nun auf seinem Server liegt, wird euch auch der Traffic für das Laden des Banners erspart – aber mal ehrlich… Forget the Traffic! Wesentlich besser ist es, den Banner auf eurem Webspace zu hinterlegen und dem Webmaster lediglich die URL für den Banner mitzuteilen. So schlagt ihr zwei Fliegen mit einer Klappe: a) Mit einem entsprechenden Analysetool könnt ihr sehen, wie oft der Banner geladen wurde und somit feststellen wie viele Besucher die Seite hatte und b) könnt ihr den Banner jeder Zeit wieder durch einen anderen austauschen.

Ok, und jetzt kommen wir zum wirklich spannenden Teil: Mehrere Backlinks aus einem Bannern!

Dazu kramen wir mal ganz Tief in der Trickkiste und greifen auf die gute alte ImageMap zurück. Für diejenigen, die noch nicht wissen was eine ImageMap ist, hier eine Kurzerklärung: Mit Hilfe einer ImageMap kann man Bereiche (einen oder mehrere) auf einer Grafik definieren, denen verschiedenen Links zugewiesen werden – sprich man kann einer Grafik mehrere Links einpflanzen! Die Anzahl der möglichen Links entspricht der Bildergröße bzw. der Pixelanzahl einer Grafik. Nutz man beispielsweise einen klassischen Banner im Format 468×60, so könnte man auf dieser Grafik theoretisch(!) 28.080 ausgehende Links unterbringen. Das wird natürlich niemand machen ;)

Wie funktieren ImageMaps?

Hier ein kleines Beispiel mit 3 Links in einem 468×60-Werbebanner:

Grün Main Orange

So erkennt man, daß der Banner in drei Bereich eingeteilt ist:

- Grüner Bereich
- Hauptbereich (grau)
- Oranger Bereich

Wenn ihr jetzt mal mit der Maus über den Banner fahrt, werdet ihr sehen, daß ich mit einer einzigen Grafik drei verschiedene Seiten verlinkt habe. Prima, oder? Aus einem einzigen Banner könntet ihr auf diese Weise also direkt (fast) beliebig viele Websites verlinken. Klärt aber mit eurem Partner unbedingt vorher ab, ob dies für ihn ok wenn ihr mehr als eine Seite verlinkt – sonst gibt es womöglich Ärger und euer Banner fliegt von seiner Seite! Im Zweifel wird er es aber eh am Code erkennen den ihr ihm schickt wenn er zumindest etwas Ahnung hat – außer ihr schickt ihm ein kleines Codesnippet, welches den kompletten Code wie oben beschrieben von eurem eigenen Server läd. Der entsprechende ImageMap-Code für den obigen Demo-Banner sieht folgendermaßen aus (feel free to copy it!)…

<p>
<img src=”imagemap-banner.gif” border=”0″ width=”468″ height=”60″
usemap=”#imagemap”>

<map name=”imagemap”>
<area shape=”rect” coords=”0,0,10,60″ href=”http://www.seo-handbuch.de/feed”
alt=”Grün” title=”Grüner Bereich”>

<area shape=”rect” coords=”11,0,447,60″ href=”http://www.seo-handbuch.de/”
alt=”Main” title=”Hauptbereich”>

<area shape=”rect” coords=”448,15,459,26″ href=”http://twitter.com/seohandbuchde”
alt=”Orange” title=”Oranger Bereich”>
</map>
</p>

Viel erklären braucht man hier eigentlich nicht, oder? Na gut…

Zunächst bindet ihr wie gewohnt ein Bild mittels dem img-Tag ein und fügt zusätzlich noch usemap=“#mapname“ ein, damit auch die richtige Map genutzt wird – im obigen Beispiel „imagemap“. In area-Bereich müßt ihr das Flächenformates auswählen, hier „rect“ (≠ Rektal, sondern Rectangle bzw. Rechteck). Alternativ gibt es auch noch „circle“ (Kreis) und „poly“ (Vieleck, hätte ich hier eigentlich nutzen müssen, aber ich war zu faul – deswegen sind auch einige graue Bereich rechts nicht verlinkt).

Coords steht für die Koordinaten, wobei diese wie folgt (in Pixel) definiert sind:

1. Wert = linke obere Ecke (von links)
2. Wert = linke obere Ecke (von oben)
3. Wert = rechte untere Ecke (von links)
4. Wert = rechte untere Eckte (von oben)

Ihr sehr also: Es kann mit unter durchaus sehr kompliziert bzw. unübersichtlich werden.

Ist das nicht Blackhat ??!11elf 8O

Natürlich ist diese Frage durchaus berechtigt und ich muß zugeben… 100%iges Whitehat SEO ist es natürlich nicht – außer, es ist mit eurem Werbepartner abgesprochen. Blackhat wird es IMHO erst dann, wenn man sowas heimlich implementiert,und der Werbepartner in Unkenntnis darüber bleibt. Also unbedingt vorher absprechen! Solltet ihr ImageMaps innerhalb eurer eigenen Projekte nutzt, ist natürlich absolut nichts verwerfliches daran. Fazit: ImageMaps als Linkquelle zu Nutzen würde ich jetzt einfach mal als Greyhat-Maßnahme einstufen… was meint ihr? :D