T3SEO

TYPO3 and SEO since 2011

Control the Facebook Preview Image Set

When facebook users want to post a link on their wall, they get a convenient list of images from which they can choose one as a teaser image for their post. But when your website doesn't provide or provides bad images to facebook this can result in a real loss of traffic. However a good teaser image is important for at least two good reasons.

Shareability and Click Through Rate

While composing a post, one purpose is especially important to the user: Their posting should make them look good to their contacts. That means they will probably care about an appealing appearance of the post. If there are no or no good preview images to choose from, they might reconsider their action and not post the link. Therefore good preview images contribute to the so called shareability.

After the link is posted and appears in the streams of other users, an interesting look conduces to a higher Click Through Rate (CTR).

What images will facebook display?

By default facebook reads all the <img> tags on the given page and offers them to the user (layout images included via CSS are ignored). But reading all images also means that it probably will include lots of ads, icons and teaser image unrelated to the actual content.

But how can we gain control over the selection of images?

Open Graph is an open standard to add special meta data to a web page, which is mostly developed by facebook. In this case the og:image tag is interesting to us. As soon as there is at least one og:image tag set on a page, facebook will ignore all the other images occuring on the page. The number of images injected this way is not limited, so the website operator can set the preview images completely free.

Two solutions for TYPO3

I will provide two examples how the og:image tags can be controlled from TYPO3.

Collect images from content elements

Selecting the "Text & Images" and "Images" content elements used on the page and using their images as open graph images is a quite convenient option.

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
      }
    }
  }
}

One thing that is great about this solution is that there is no extra effort for your editors. Nothing changes with creating and editing the page content and only the images from the content area will be provided to facebook.

However the image collection is bound to the page content: If it happens that a page doesn't have any images or again the content area includes teaser images unrelated to the main content, the image set can be unsatisfying again.

Use the media field

If your pages' media field isn't in use yet you can utilize it as a dedicated source for the facebook preview images.

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
    }
  }
}

By the way, you can easily combine these two solutions:

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/
}

This way, both the images from the main content column (colPos = 0) and the images from the media field of the page will appear on facebook to choose from.

tt_news

This is what it could look like using tt_news images:

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
      }
    }
  }
}

To make this snippet work, the tt_news constants pid_list and recursive have to be configured correctly (you can find them in the Constant Editor). Otherwise you can also directly put your news folder ids into the snippet, of course.

I hope this examples can be an inspiration to you to dynamically build up your custom Open Graph Image collections.

Control the Facebook Preview Image Set

    Related Topics

  • Open Graph