Twitter Card Overhaul

Are the images in your Twitter links broken?

By Kevin RR Williams

SOCIAL MEDIA Tweets with images attract more attention than 140-character text. One of the most common problems reported to Twitter by website administrators is the lack of images showing up within their Tweets. When backend site coding is maintained by WordPress, SquareSpace, Etsy, Adobe or a similar service, this is likely something handled in your behalf through a simple interface or with the addition of a plugin without fussing with HTML. If your site-building service lacks adequate social media hooks or you are a hand-coding website developer, a few lines of code is required.

Twitter Card Overhaul

Twitter Card Validator

Let’s first assume you have visited the Twitter Card Validator and everything checks out fine but image links still appear broken on Twitter. If this is the case then you may have recently corrected issues and the old code is still in Twitter server cache. Twitter Robots (Bots, Crawlers, or Spiders) crawl Web pages every seven days so it takes a while for updates to be reflected. Try validating a new page.

User-agent: Twitterbot
Disallow:

Another common reason for lack of tweet imagery when a page passes validation involves an improperly configured robot.txt file. This is an optional (recommended) simple text document in the root directory of your domain. It basically includes relative paths to files and documents that Robots should ignore. Sometimes an overabundance of caution leads some developers to block their image folder. When this happens, the Twitter robot is unable to display images because your robot.txt is disallowing it. Remove the restriction and the next time Twitter crawls your directory, prior tweets with links to your site will display properly configured images.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />>
<meta name="twitter:title" content="My Summary Web Page" />
<meta name="twitter:description" content="View the photo album." />
<meta name="twitter:image" content="https://link_to_my_broken_photo.jpg" />

If malformed robot.txt is not causing the issue, Twitter Card Validator identifies the content attribution that should be in the header section of your Web page. An image link may be missing or the path might be incorrect. A minimal amount of information is required for a Summary Card (cart type, description, image). More attributions (alternate card type, author’s Twitter account, image dimensions, etc.) can be added to enhance the card’s appearance.

To fix broken images with Twitter Card images from encrypted pages, try using a non-secure (http instead of https) full path rather than a relative path for default image specified within the page header. Changes take a week to 10 days to refresh across the Twitter platform.

Occasionally the Amazon web server that hosts images for most social media sites and some site administrators has issues. Though this is rare, it can temporarily break links to images.

Types of Twitter Cards

Some former Twitter Card types have been depreciated. They are automatically migrated to a different card. If you prefer another type, you will need to alter the appropriate attribution. These are the Twitter Cards currently supported:

  • Summary Card: Title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
  • App Card: A Card to detail a mobile app with direct download.
  • Player Card: A Card to provide video/audio/media.

Related: Pinterest Recipe for Success

Absent from the list are Photo Cards (mapped to Summary Card with Large Image on January 15, 2014), Gallery Cards (mapped to Summary Card with Large Image on July 3, 2015), and Product Cards (mapped to Summary Card on July 3, 2015). You can leave existing code alone and allow Twitter to remap them. Pinterest support of Product Pins (since May 21, 2013) utilizes similar attributes as the defunct Product Card but require OpenGraph or oEmbed descriptions.

Protected by Copyscape

Tags: fixing tweets displaying generic photos, programming, website maintenance