15

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

2 Answers 2

21

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.

3
  • 1
    Also, you can test / validate the preview at: cards-dev.twitter.com/validator
    – raddevus
    Jan 28, 2018 at 19:35
  • If I insert the following code in a web page, can the page code still be considered 100% free (as in speech)?
    – Lori
    Sep 4, 2021 at 18:49
  • @Lori All StackOverflow contributions are CC-BY-SA licensed, so yes, if that's what you mean. Jun 8, 2022 at 21:39
3

Also, I will point one important thing. For twitter:image meta its content parameter must be absolute path, not relative. Otherwise it will not work.

<meta name="twitter:image content="/resource/img.jpg"/> //will not work
<meta name="twitter:image content="https://yourdomain.com/resource/img.jpg"/> //will work

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.