T3SEO

TYPO3 and SEO since 2011

Artikelvorschaubilder für Facebook festlegen

Wenn ein Facebooknutzer einen Link zu einer Website postet, wird ihm in der Regel praktischerweise gleich eine Liste von Bildern angezeigt, von denen er eines als Vorschaubild auswählen kann. Wenn die eigene Website hier aber Probleme macht und Facebook keine und schlechte Bilder liefert, kann das zu einem echten Trafficverlust führen - denn ein gutes Vorschaubild ist aus mindestens zwei Gründen wichtig.

Shareability und Click-Through-Rate

Wenn der Nutzer seinen Beitrag verfasst ist ihm vor allem eines wichtig: Was er postet soll ihn vor seinen Kontakten gut aussehen lassen. Das bedeutet, dass er möglicherweise wert auf ein ansprechendes Erscheinungsbild des Posts legt. Hat er kein oder nur unpassende Vorschaubilder zur Auswahl, könnte er es sich anders überlegen und den Link nicht posten. Gute Vorschaubilder tragen somit zur sogenannten Shareability bei.

Ist der Beitrag verfasst und erscheint im Stream von anderen Nutzern, trägt ein interessantes Erscheinungsbild natürlich dazu bei, dass die Click-Trough-Rate (also die Anzahl der Klicks pro Einblendung) steigt.

Welche Bilder zeigt Facebook an?

Standardmäßig versucht Facebook alle <img>-Tags der Website auszulesen und diese als Vorschaubildchen anzubieten (per CSS eingebundene Layoutgrafiken werden richtigerweise ignoriert). Alle Bilder bedeutet häufig aber auch eine Menge an Werbebannern, Icons und Teaserbildern, die mit dem eigentlichen Inhalt nichts zu tun haben.

Wie aber können wir die Kontrolle über die Bilderauswahl bekommen?

Open Graph ist ein, vor allen Dingen von Facebook entwickelter, offener Standard um Webdokumente mit speziellen Meta-Informationen anzureichern. In diesem Fall ist das og:image-Tag interessant für uns. Sobald eine Seite ein og:image-Tag gesetzt hat, ignoriert Facebook alle anderen Bilder auf der Seite. Die Anzahl der so eingeschleusten Bilder ist nicht begrenzt, so dass es dem Seitenbetreiber möglich ist die Vorschaubilderauswahl komplett frei zu bestimmen.

Lösungswege für TYPO3

Ich zeige beispielhaft Wege mit denen die og:image-Tags von TYPO3 aus gesteuert werden können.

Bilder aus Inhaltselementen auslesen

Eine bequeme Variante ist es, einfach die verwendeten Bild- und Bild-mit-Text-Elemente auszulesen und die Bilder als og:image-Tags zu verwenden.

page.headerData.848 = CONTENT
page.headerData.848 {
  table = tt_content
  select {
    where = (CType = "image" OR CType = "textpic") AND colPos = 0 AND CHAR_LENGTH(image) > 0
  }
  renderObj = TEXT
  renderObj {
    field = image
    split {
      token = ,
      cObjNum = 1
      1.cObject = IMG_RESOURCE
      1.cObject {
        file {
          import = uploads/pics/
          import.current = 1
          width = 200m
          height = 200m
        }
        stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
        stdWrap.insertData = 1
      }
    }
  }
}

Das Tolle an dieser Variante ist, dass kein Zusatzaufwand für Redakteure entsteht. An der Pflege des Contents ändert sich nichts, aber nur die relevanten Bilder aus dem Inhaltsbereich werden Facebook angeboten.

Wiederum ist man aber mit der Bildauswahl an den Seiteninhalt gebunden: Gibt es im Content-Bereich mal kein Bild oder gibt es dort wieder Teaserbilder, die nicht zum Hauptcontent gehören, kann die Auswahl wieder unbefriedigend sein.

Das Media-Feld nutzen

Hat man das Media-Feld in den Seiteneigenschaften noch nicht in Verwendung, kann man es als dedizierte Quelle für die Facebook-Vorschaubilder verwenden.

page.headerData.849 = TEXT
page.headerData.849 {
  field = media
  if.isTrue.field = media
  split {
    token = ,
    cObjNum = 1
    1.cObject = IMG_RESOURCE
    1.cObject {
      file {
        import = uploads/media/
        import.current = 1
        width = 200m
        height = 200m
      }
      stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
      stdWrap.insertData = 1
    }
  }
}

Die beiden Varianten kann man übrigens problemlos auch kombiniert verwenden:

page.headerData {
  848 = CONTENT
  848 {
    table = tt_content
    select {
      where = (CType = "image" OR CType = "textpic") AND colPos = 0 AND CHAR_LENGTH(image) > 0
    }
    renderObj = TEXT
    renderObj {
      field = image
      split {
        token = ,
        cObjNum = 1
        1.cObject = IMG_RESOURCE
        1.cObject {
          file {
            import = uploads/pics/
            import.current = 1
            width = 200m
            height = 200m
          }
          stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
          stdWrap.insertData = 1
        }
      }
    }
  }
  849 < page.headerData.848.renderObj
  849.field = media
  849.if.isTrue.field = media
  849.split.1.cObject.file.import = uploads/media/
}

So würden jetzt sowohl die Bilder aus der Hauptinhaltsspalte (colPos = 0), als auch die Bilder aus dem media-Feld der Seite bei Facebook zur Auswahl stehen.

tt_news

Und so könnte das Ganze mit tt_news aussehen:

page.headerData.850 = CONTENT
page.headerData.850 {
  stdWrap.if.isTrue.data = GPVar:tx_ttnews|tt_news
  table = tt_news
  select {
    pidInList = {$plugin.tt_news.pid_list}
    recursive = {$plugin.tt_news.recursive}
    where = CHAR_LENGTH(image) > 0
    andWhere.cObject = TEXT
    andWhere.cObject {
      data = GPVar:tx_ttnews|tt_news
      intval = 1
      wrap = uid = |
    }
  }
  renderObj = TEXT
  renderObj {
    field = image
    split {
      token = ,
      cObjNum = 1
      1.cObject = IMG_RESOURCE
      1.cObject {
        file {
          import = uploads/pics/
          import.current = 1
          width = 200m
          height = 200m
        }
        stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
        stdWrap.insertData = 1
      }
    }
  }
}

Damit das Snippet so läuft, müssen die tt_news-Konstanten pid_list und recursive (im Constant Editor zu finden) richtig konfiguriert sein. Ist das nicht gewünscht, können die IDs der Newsfolder natürlich auch direkt in das TS-Snippet eingetragen werden.

Ich hoffe diese Beispiele können einen kleinen Denkanstoß für weitere kreative Zusammenstellungen der Open-Graph-Bilder geben.

Artikelvorschaubilder für Facebook festlegen

Short URL

t3seo.de/27.l

    Related Topics

  • Open Graph