Wichtig! Teaserbild in jedem Blogartikel

Wichtig! Teaserbild in jedem Blogartikel

Teaserbild im Blogartikel - wichtig!
Teaserbild im Blogartikel – wichtig!

Es ist eigentlich eine Grundregel, die allerdings von vielen nicht beachtet wird: in jedem Blogartikel sollte es wenigstens ein aussagekräftiges Bild geben. Ich würde es auch Teaserbild nennen. Denn auch wenn es beim Lesen des Artikels selber eventuell überhaupt nicht erforderlich ist, so ist es doch im Social-Media-Kontext unumgänglich. Sogar große Newsseiten machen immer noch den Fehler, kein solches Bild anzubieten. Im Folgenden ein paar Hinweise dazu…

Ich vermute, jeder kennt das Problem: Man teilt einen Artikel bei Facebook oder Google+. Standardmäßig wird dann eine Liste der Bilder des Artikels als Teaserbild angeboten. Dieses Bild wird bevorzugt aus den Microformat Angaben oder, falls nicht vorhanden, aus dem Quellcode der Website gezogen. Sind mehrere Bilder vorhanden, kann man eines auswählen:

Teaserbild auswählen - aber wie viele kennen oder nutzen das?
Teaserbild auswählen – aber wie viele kennen oder nutzen das?

Wenn man aber kein Bild im Content integriert, werden andere <image-tags> von der Seite herangezogen. In der Regel sind das dann Designelemente oder Werbebanner. Insbesondere letztere können doch sehr störend oder verwirrend wirken. Jüngstes Beispiel ist der Artikel von Peer Wandiger, in dem 5 Experten sich über die Zukunft im Online-Marketing und Seo äußern. Top-Artikel finde (obwohl ich selber auch dabei bin ;-) ), aber als ich ihn bei facebook geteilt habe, bekam ich einen der Werbebanner zur Auswahl. Natürlich hätte ich ihn wegklicken können, aber: das Sharing ohne Teaserbild im Social-Media-Stream ist wie Suppe ohne Salz.

Suboptimal: Werbebanner als Teaserbild
Suboptimal: Werbebanner als Teaserbild

Besser wäre gewesen, ein attraktives, aussagekräftiges Bild am Anfang oder Ende des Artikels einzubinden. Peer macht das meist und hat es in diesem Fall wahrscheinlich nur vergessen. Aber auch bei anderen fehlt das sehr häufig. Daher ein paar Empfehlungen:

Bildgröße mind. 400 Pixel an einer Seite

Ich habe keine Hinweise, wie klein ein Bild sein darf, damit es noch als Social-Media-Teaserbild benutzt wird. Wenn sie zu klein sind, werden sie nicht angezeigt. Als Faustregel gilt, dass das größte Bild bevorzugt wird. Wenn man mehrere Bilder auf der Seite hat, kann derjenige, der es teilt, zwar die Bilder durchgehen und eines aussuchen. aber wer weiß schon, wie viele die kleinen Pfeile überhaupt kennen. Ich würde empfehlen, stets ein Bild zu haben, dessen eine Kante mehr als 400 Pixel hat. Das klappt in der Regel immer.

Opengraph:image

Man kann mit der Meta-Property Opengraph ein Bild definieren. Das Bild muss noch nicht mal auf der Seite zu sehen sein (theoretisch zumindest). Dafür muss dann folgendes im Header einer Seite stehen:

<meta property="og:image" content="http://domain.tld/bild.jpg" />

Die Phrase „http://domain.tld/bild.jpg“ muss natürlich die URL des eigenen Bildes enthalten. Wenn man zum Beispiel weiß, dass man nur selten eigene Bilder in Artikel hat, dann kann man dieses Methode nutzen, um eine Art „Default-Teaserbild“ anzubieten, zum Beispiel mit dem Website-Logo. Auf Dauer kann das aber natürlich nerven, besser, man hat ein individuelles Bild. Mehr dazu siehe Opengraph.

Diese Methode ist allerdings nicht zwingend erforderlich.

Im Zweifelsfall: Text-Teaser

Ich würde empfehlen,  eine Art „Text-Teaser-Style“ zu entwickeln. Dafür sollte man sich für einen bestimmten Style entscheiden. Entweder immer die gleiche Hintergrundfarbe, oder eine bestimmte Schriftype, oder irgendwas individuelles. Im Zweifelsfall kann man dann so ein Bild erstellen, mit ein paar Stichwörtern aus dem Artikeltitel. Man muss dafür kein Kreativdirektor sein – Hauptsache, der Style ist nicht allzu abstoßend … und man hält es durch.

Bilder werden oft etwas beschnitten

Man sollte im Hinterkopf haben, dass die Bilder häufig bei facebook etwas beschnitten werden. Das kann in manchen Fällen sogar ganz interessant sein und sogar zum Klicken animieren. Aber wenn es etwas wichtiges gibt, dass man transportieren möchte, sollte es sich in der Bildmitte befinden.

Gut für Seo und die Bildersuche

Solche Bilder sind übrigens nicht nur im Social-Media-Zusammenhang sehr sinnvoll. Denn damit hat man natürlich auch die Chance, in der Google-Bildersuche mitzumischen. Und Keyword-Relevante Bilder sind auch ein nicht zu unterschätzender Onpage-Faktor für „guten Content“ und damit für das organische Ranking des Artikels.

Übrigens: wenn man ein neues Bild nach dem Teilen hinzufügt, wird es in aller Regel bei facebook nicht zur Auswahl gestellt. Man muss dann bis zu 12 Stunden warten. Fragt mich nicht, warum. Also: erst Teaserbild einbinden, dann veröffentlichen.

Der Traffic über Google+ oder facebook lässt sich mit den richtigen Teaserbildern deutlich steigern. Außerdem trägt es zur Imagepflege bei und ist ein nicht zu unterschätzendes Werbemedium, der Teaser an sich, mein ich. Wenn man schon Werbung mit dem Teaserbild macht, dann doch wenigstens in eigener Sache :-)

Hier mal ein simples Beispiel:

Teaserbild im Blogartikel
Teaserbild im Blogartikel – wichtig fürs Teilen bei Google+ und facebook.

Weiterlesen

38 Gedanken zu „Wichtig! Teaserbild in jedem Blogartikel

  1. Ja, Facebook speichert die externen Seiten zwischen, um sie nicht jedesmal neu Aufrufen zu müssen. Man kann aber den Neuabruf erzwingen, in dem man die Seite durch die Developer-Tools schickt: http://goo.gl/ZssXch

    Dann sieht man auch gleich, was Facebook für Objekte erkannt hat.

  2. Hi Martin,
    ich achte bei meinen Blogartikeln auch darauf, dass ich im Content ein passendes Bildchen parat habe und so sehen auch die Beschreibungen für die Social Networks passabel aus. Es liegt mir auch am Herzen, dass meine Updates in den eigenen Social Media Kanälen attraktiv aussehen. Das ist doch schon sehr wichtig. Was denken die anderen Leser darüber??

    Schade, dass man deine Kommentare hier nicht per eMail abonnieren kann. So wäre man doch über die nachfolgenden Kommentare informiert :).

  3. Achso, noch ein Hinweis. Es funktioniert auch mit diesem Code im Header:

    Das verwende ich seit einiger Zeit. Funktioniert bei Facebook und Google+.

    1. Da war wohl ein Code drin, der aber leider herausgefiltert wurde. Kannst Du das bitte noch mal posten, ev. mit Leerzeichen?

  4. Gute Hinweis!

    Ich bin nicht sicher, aber wie siehts mit gekauften Fotos aus. Da gibts dann rechtliche Probleme, wenn diese als Teaser geteilt werden bei Facebook oder g+?

  5. Ich würde eigentlich behaupten, das fast jeder mittlerweile so ein Teaser-Bild verwendet. Für die Quelltext-Ausweisung dürfte es für jedes CMS\Blogsystem genügend Plugins geben – wie zum Beispiel WordPress SEO von Yoast. Spätestens dann sollte man auch mit kleineren Teaser-Bildern keine Probleme haben.

    1. Also, ich sehe oder teile ständig Beiträge, wo das noch nicht der Fall ist. Ich glaube übrigens (bin aber nicht sicher, ob das immer noch so ist), dass die Mindestgröße erforderlich ist. Wenn das Bild zu klein ist, reicht auch nicht die OG-Angabe.

      1. 200 x 200 Pixel ist wohl die zu empfehlende Mindestgröße. Andernfalls meckert der „Open Graph Object Debugger“ über ein zu kleines og:image.

  6. Danke, wieder einmal ein toller und hilfreicher Artikel. Der Hinweis mit der Kantenlänge ist mir neu und wird natürlich ausprobiert.

    Doch noch eine Frage zu (Zitat „Das kann in manchen Fällen sogar ganz interessant sein und sogar zum Klicken animieren.“). Hast du dazu eins, zwei Beispiele?

    1. Nein, ein konkretes Beispiel habe ich jetzt nicht – aber schau in Deine timeline. Da gibt es immer Beiträge, die ins Auge springen. Und die Ursache ist immer ein gutes Teaserbild (wage ich mal zu behaupten :-)

  7. Hallo Martin, schön ausführlicher Beitrag und von vielen Seiten betrachtet. Bei einigem stimme ich Dir zu, bei einigem nicht.

    Der Aufwand für gute, aussagekräftige Illustrationen ist gegeben. Für mich mindestens so hoch, wie der eigentliche Text.
    Ich denke, wenn jemand einen Artikel teilt von Peer, dann würde mir ein Avatar genügen. Stolpere ich öfter drüber, beachte ich neue Artikel von dem mir gekannten Avatar eher, als ein Bild, das sich mir vielleicht nicht gleich erschließt.

    Bei Zeitungen bin ich eher froh, wenn sie kein Bild mitliefern. Denn manchmal spinnt Facebook. Dann kann man beim Teilen ein Bild nicht mal weg-kreuzen. Auch da wäre ein Logo für meinen Bedarf wünschenswerter. Das ist mir aber wichtig, wenn ich etwas auf einer Page teile, dann bin ich nicht privat und könnte unvermittelt mal ein Problem bekommen. Vielleicht nicht heute, aber irgendwann. Und da ja alle Aktivitäten gespeichert werden … ;-)
    Ich selbst stelle meine Webseite (Drupal) immer mal wieder so ein, dass keine Bilder mit geteilt werden können, sondern ein hinterlegtes Bild von Gravatar mit auf die Reise geht.

    1. Ok, stimmt, wenn man kein Bild haben möchte, dann ist das ein anderer Fall. Aber die von Dir genannten Beispiel, wo unpassende Bilder angezeigt werden, bestätigen ja, dass man sich damit beschäftigen sollte :-) Ein Avatar des Teilenden wird ja sowieso immer angezeigt. Klar ist das für viele auch eine Faktor. Aber eben ein anderer. Oder habe ich Dich falsch verstanden?

      1. Ja, ich hätte besser schreiben sollen „Avatar oder Logo“.

        Beispiel: Im Internet stolpere ich über einen Artikel, der speziell für User meiner Nische interessant sein könnte. Dann würde ich das gerne auf der Page auf FB und/oder G+ mitteilen.

        Aber ausgerechnet so ist das Teilen nicht vorgesehen. Kommt ja nicht von ungefähr, dass ich beim Teilen per Button (auf dem gefundenen Artikel irgendwo im WWW) vom Page- und den Usermodus wechseln soll.

        Veröffentliche ich ich also auf der FB- oder G+Page den Link, dann erscheint Schlagzeile, Teaser und Illustration des Artikels aus dem WWW. Und bei der Illustration habe ich dann kein gutes Gefühl. Da wäre mir das Logo der Plattform lieber, auf die ich verlinken will.

  8. Hi Martin,

    das mit den Bildern und Facebook und Google+ ist echt so eine Sache. Ich habe bislang noch nicht herausgefunden, wie man es perfekt lösen kann. Mal zieht sich Facebook das Default-Bild, mal nicht, und bei Google+ das Gleiche.

    Könnte echt sein, dass die Größe der Bilder eine Rolle spielt. Dämlich auch, dass die ganzen bannertypischen Quadratformate wie 125×125 bei Facebook gezogen werden. Ist doch klar eigentlich, dass das zu 90% Banner sind!?

    Grüße

    Gretus

  9. Guter Artikel! Hab ich bisher noch nie wirklich dran gedacht, dass die Bilder so gewählt werden sollten, dass sie Social-Media-tauglich sind! Vielen Dank fuer diese Tipps!

  10. Ein sehr wertvoller Artikel! Danke! Genau diese Erfahrung habe ich auch mit Facebook auch gemacht. Du hast absolut recht, Bilder auf einem Blog Artikel sind Pflicht. Am besten sollten die Bilder zum contex passen.

  11. Du schreibst: „Ich habe keine Hinweise, wie klein ein Bild sein darf, damit es noch als Social-Media-Teaserbild benutzt wird. Wenn sie zu klein sind, werden sie nicht angezeigt.“

    Dazu kann ich etwas sagen. Ich hatte nämlich bis vor kurzem ein Bild in der Größe 1px x 1px auf meiner Seite versteckt, weil Facebook nicht immer die Artikelbilder erkannte. Dieses Bild wurde anstandslos „gezogen“.

  12. Hallo Martin,

    meines Wissens sollen Artikelbilder mind. eine Größe von 200 px * 200 px betragen. Die auf meinen Blogs sind zwar nur 200 px * 150 px groß, das funktioniert mittlerweile aber auch relativ problemlos – zumindest beim automatischen Teilen.

    Das Plugin „All in One SEO“ hat seit Kurzem die Funktion „Social Meta“ hinzugefügt. Darin ist es möglich, ein Standardbild (z. B. das Logo einer Seite) festzulegen. Dank AiOS zeigt der von Schnurpsel erwähnte Debugger auch keine Fehler mehr bei mir an.

    Gruß Sylvi

  13. … im Übrigen können auch mehrere Ressourcen als „og:image“ ausgezeichnet werden – so erhält der User die Möglichkeit sich ein passendes Bild zum Teilen der URL aussuchen zu können. Generell würde ich für jede Domain einfach Defaultbild definieren auf welches ggf. zurückgegriffen werden kann.

    Facebook sagt bezüglich der Größe: mindestens 200x200px, vorzugsweise jedoch 1500x1500px – Maximum 5MB. Der Crawler verwendet als User Agent [facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)] – so lassen sich die initialen Zugriffe leicht in den Logs erkennnen. Da wie von @Schnurpsel richtig angemerkt Facebook zum mindestens die Meta Informationen der Seiten cacht, empfehle ich zum Testen einfach irgendeinen Parameter (?blabla_usw) an die Query zu hängen.

    Hier mal ein Beispiel (von mir) mit mehreren „Vorschaubildern“ http://www.pinkbigmac.com/P178010/alte-nationalgalerie.de.html (einfach mal in den Quelltext gucken)

    Gruß,

    Mathias

    Ach, fast vergessen… mit og:title könnt ihr auch einen alternativen Seitentitel für FB & Co. angeben – macht conversion-technisch manchmal mehr Sinn als der „suchmaschinen-überoptimierte“-Seitentitel ;)

  14. Dann aber bitte auch ein eigenes Bild, am besten das Logo oder ein Bildschirmfoto der Website. Ich riskiere ganz sicher keine teure Abmahnung, weil ich ein Foto illegal verbreitet habe, nur weil ich kostenlose „Werbung“ beim Teilen einer Site in den sozi. Netzwerke gemacht habe.

  15. Hallo,

    mir war bis jetzt gar nicht bewußt das solche Bilder ganz wichtig sein könnten. Ich selbst arbeite noch gänzlich ohne und bin nach der Lektüre deines Artikels nun am überlegen dies umzustellen.

    Auch dank an Sylvi mit dem Tip bzgl. All in One Seo. Habe mich nämlich bis heute noch nicht auf ein SEO Plugin einigen können. Stand zwichen Yoost, AllinOne und WPSeo. Da ich dafür aber kein Geld ausgeben möchte, wird es jetzt wohl All in One sein. Nicht zuletzt auch weil ich damit vielleicht auch gleich zusätzlich das Problem mit den Bildern angenehm regeln kann.

    Gruß

    David

  16. Das Thema finde ich spannend. Jedoch gewinnt dieses Thema wegen der rechtlichen Restriktionen an großer negativer Brisanz. Am besten ist aus juristischer Sicht nur eigenes Bildmaterial zu verwenden. Fehlt einem die kreative Ader für einzigartige Titelbilder, beauftragt man einen Grafiker/in. Will man über Social Media für seine Blogartikel Aufmerksamkeit wecken, kann das Dilemma aus juristischer Sicht beginnen. Hat man eine fehlerhafte oder gar keine rechtliche Einwilligung der Person mit den Urheberrechten getroffen, droht Abmahnung. Schreibt man viele Blogartikel, entsteht dadurch ein sehr großer Aufwand. Ihn zu vernachlässigen, kann sich später als Eigentor heraus stellen. Ein interessantes Thema, aber sehr komplex.

    Beste Grüße, Ralph

  17. Hallo! Ich habe erst seit wenigen Tagen einen eigenen Blog, kann aber bereits jetzt ein Lied von dem Problem singen. Mein Problem ist: Ich habe null Ahnung vom Programmieren. Ich habe bisher alles gut einrichten können, Helpseiten sei Dank. Aber jetzt bin ich echt überfordert. Das habe ich verstanden:

    – man muss das Teaserbild herstellen (mache ich immer)
    – Design sollte stimmig sein (yes!)
    – dann muss man im HTML auf der Höhe des Headers einen Code eingeben

    So weit so gut. 1. Frage: Wo beginnt und wo endet der Header in diesem Code? Ist es wurscht, wo es steht? Oder muss es an einer exakten Stelle eingebunden werden?)
    2. Wo bekomme ich die URL des Teaserbildes her? Wenn ich es anklicke (also im normalen Ansichtsmodus, spuckt mir der Mac immer nur die Anfangsadresse des Blogs aus. Steckt die URL des Bildes schon im Header? Falls ja, wo beginnt sie, wo endet sie?

    Das ist echt frustrierend, wenn man einen coolen Blogpost gemacht hat – und dann zieht sich FB in das falsche Bild. Dabei ist es bei mir schon bewusst so, dass ich mit Canva das Bild aufmotze, dass schon alle Infos draufstehen..

    Argh. Kannst du mir bitte helfen? Wäre sehr nett.

    1. Hallo Bettina,

      die Frage kann man so leider nicht beantworten. Es hängt von dem gewählten Design-Theme des Blogs ab, wo das Teaserbild eingefügt werden muss. Viele Themes haben das schon integriert, bei anderen muss man es von Hand nachbasteln.

      Aber um zu wissen, wo genau, braucht man erst einmal Grundkenntnisse in HTML und PHP. Und das kann ich Dir hier leider nicht vermitteln – dafür gibt es andere Seiten. Mein Tipp: lade Dir Dein aktuelles Theme herunter und gehe die PHP-Anweisungen Zeile für Zeile durch. Immer, wenn Du auf ein Wort (eine Anweisung) stößt, was Du nicht verstehst, googelst Du das einfach. So habe ich das auch gelernt. Ist am Anfang mühsam, aber Pi mal Daumen sind es nur 10 – 15 Anweisungen, die Du verinnerlichen musst. Den Rest kannst Du dann beim Programmieren nachschlagen.
      Viel Erfolg :-)

Kommentare sind geschlossen.

Kommentare sind geschlossen.