How to insure links support Twitter preview?

twitter preview
raddevus picture raddevus · Oct 23, 2014 · Viewed 14.8k times · Source

First of all, please note that I searched for a SocialMediaStackExchange to ask this question on, but there doesn't seem to be one.

Here's what I'm wondering. When posting a tweet to twitter, if it is a youtube link or specific web site's link, then twitter will show an Expand functionality which the user can click to preview the media content right in the Twitter interface.

Does anyone know if this is determined by Twitter or if there is some way I can alter my web site to enable the preview on twitter?

I'd like to make it so when I tweet a blog entry that people can preview the first bit of contents of the article. Here's an example: (simply adding the link, displays the preview content shown) In this case it is an article on InfoWorld.

Web link creates preview of content

There's a link on Twitter that explains Expanded Content, but not how to make it happen. https://blog.twitter.com/2012/experience-more-with-expanded-tweets

Answer

Terence Eden picture Terence Eden · Oct 23, 2014

You probably want to look at "Twitter Cards". They're really simple to set up. You add a few lines of code to your page's header, get your site validated (an automated process), and you're away.

Here, for example, is one of my tweets with "preview" content https://twitter.com/edent/status/516544061495193601

The extra HTML code is just:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@edent">
<meta name="twitter:site" content="@edent">
<meta name="twitter:title" content="Tim Berners-Lee and the Freedom of The City">
<meta name="twitter:description" content="Last week, I had the privilege of being invited into the Guildhall to watch Tim Berners-Lee receive the Honorary Freedom of the City.  I was one of a dozen bloggers and tweeters asked to live tweet th">
<meta name="twitter:image:src" content="https://shkspr.mobi/blog/wp-content/uploads/2014/09/TimBL-Least-Well-Dressed-435x375.jpg">
<meta name="twitter:image:width" content="280">
<meta name="twitter:image:height" content="150">

Different styles of cards have different sorts of previews - video, images, app installs, etc.

Related questions

Find objects between two dates MongoDB

I've been playing around storing tweets inside mongodb, each object looks like this: { "_id" : ObjectId("4c02c58de500fe1be1000005"), "contributors" : null, "text" : "Hello world", "user" : { "following" : null, "followers_count" : 5, "utc_offset" : null, "location" : "", "profile_text_color" : "000000", "friends_count" : 11, "profile_…

Read More
Simplest PHP example for retrieving user_timeline with Twitter API version 1.1

Because of the Twitter API 1.0 retirement as of June 11th 2013, the script below does not work anymore. // Create curl resource $ch = curl_init(); // Set url curl_setopt($ch, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/myscreenname.json?count=10"); // Return …

Read More
Sharing a URL with a query string on Twitter

I'm trying to put a Twitter share link in an email. Because this is in an email I can't rely on JavaScript, and have to use the "Build Your Own" Tweet button. For example, sharing a link to Google: <…

Read More