Usually, when we share links from our blogs or websites to Twitter, we don't want just a bunch of texts, hash tags and the URL but we expect some image to show up on our posts. But I found out the images does not show up on Twitter. Since, you are here, I am sure you have found out and looking for ways to let image appear on Twitter. So, let's get on with it.
Images on Twitter tweets are what Twitter calls "cards". There are four types of Twitter cards:
- 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.
In this post, we will be checking out the "Summary Card" and the "Summary Card with Large Image".
Sample code given on Twitter for Summary Card is as: (don't use as is)
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
The above code is just an example and is to be added in the META section of your blog or website so that the images appear on Twitter tweets.
Sample code given on Twitter for Summary Card with Large Image is as:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">
As stated, the above codes are just for example. Looking at the code, we can make out that the URL pertains to a single post. Usually, an admin or a visitor will be using Social Media sharing tools to share links to Blogger or compose a new tweet on Twitter and paste the URL there. So, the above sample codes won't work for every post. So we need to automate, so that the post's URL, Title, Image etc. appears appropriately for any post shared.
How to configure Twitter Cards on Blogger Blog (An Example)
Watch the video tutorial below to see how to configure Twitter Cards on Blogger Blog to display images on Twitter when sharing links from Blogger Blog. Modified Twitter code for Blogger Blog is provided below.
To show images on Twitter shared from Blogger or Blogspot blogs, use the code given below.
- Login to Blogger
- Go to Dashboard > Template >Edit HTML
- Find <head>
- Copy the code below and paste it right after <head> tag
- Use summary or summary with large image code. The only difference between the two is the text - "summary" and "summary_large_image" in the code.
<!-- twitter summary card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tiyiworo" />
<meta name="twitter:creator" content="@tiyiworo" />
<meta property="og:url" expr:content='data:blog.url' />
<meta property="og:title" expr:content='data:blog.pageName' />
<meta property="og:description" expr:content='data:blog.metaDescription' />
<meta property="og:image" expr:content='data:blog.firstImageUrl' />
<!-- twitter summary card -->
OR
<!-- twitter summary card with large image details -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tiyiworo" />
<meta name="twitter:creator" content="@tiyiworo" />
<meta property="og:url" expr:content='data:blog.url' />
<meta property="og:title" expr:content='data:blog.pageName' />
<meta property="og:description" expr:content='data:blog.metaDescription' />
<meta property="og:image" expr:content='data:blog.firstImageUrl' />
<!-- twitter summary card-->
- Save the template
- Go to Twitter Card Validation Tool: https://cards-dev.twitter.com/validator
- Copy and paste the URL of any blog post from the Blogger blog just edited.
- Click "Preview Card"
 |
| Twitter Card Validation Tool |
An image should appear on the Twitter validation page.
Test Twitter Cards:
1) Login to your Twitter account
2) Copy the URL of a blog post from your Blogger Blog and paste it in a new Twitter Tweet
3) Check if image appears
Note: Twitter Cards that is, images from your Blog posts shared to Twitter might not appear immediately. Keep testing by sharing links from your blog after some time if it does not appear now.
How to show images on Twitter Tweets from other website / blogging platforms?
Apply the same code as given above but change the data provider for "content". For example, in the above code for Blogger, we had changed:
content = 'data:blog.url'
because, that is how Blogger provides the URL of the blog post page. You can find out the code for the blogging platform or the website and replace in the same manner.
For WordPress, the following are the standard function / code for getting Site URL, Blog Post URL, etc.
//Get the URL of the site
<?php echo get_site_url(); ?>
//Get the URL of the blog post
<?php the_permalink(); ?>
//get the title of the blog post
<?php the_title(); ?>
<!-- twitter summary card for Wordpress -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tiyiworo" />
<meta name="twitter:creator" content="@tiyiworo" />
<meta property="og:url" content="<?php get_the_permalink(); ?>" />
<meta property="og:title" content="<?php get_the_title(); ?>" />
<meta property="og:description" content=<?php get_the_excerpt(); ?>" />
<meta property="og:image" content=<?phpwp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );?> " />
<!-- twitter summary card -->
So by replacing the text after "content=" in the Twitter code with appropriate WordPress functions to get the title, url etc.we can show Twitter Cards from WordPress blogs as well. But don't sweat! There are plugins for WordPress. Check out the Twitter Cards Meta WordPress plugin.
References:
Twitter Card Types: https://dev.twitter.com/cards/types
Troubleshooting: https://dev.twitter.com/cards/troubleshooting
Twitter Cards and Open Graph: https://dev.twitter.com/cards/getting-started#attribution