Twitter - Clickable Images?

[keyplyr]

Some tweeted images click-through to remote pages.
How is this done?

[bakedjake]

Do you mean image cards? See [dev.twitter.com...]

Cards Overview: [dev.twitter.com...]

[keyplyr]

Don't know what the term is. Thanks, I'll read those links.

[bakedjake]

You'll pick it right up - basically, it's just a bunch of special meta tags on the page you want to link to, then you just insert the link as a tweet and twitter's bot reads the tags from your page.

There's various types of "cards" too - I think you saw an image one, but there's also ones for app downloads and video.

[ken_b]

It seems like those could/should drive a lot more traffic than a plain link.

[keyplyr]

Too bad Twitter needs their own propriety tags and doesn't just use ogg tags for images like FB and Google+.

[keyplyr]

After adding the meta tags, I found I needed to bust the cache Twitter had of my page by using the Cad Validator [cards-dev.twitter.com...]

This is also true of Facebook's Open Graph Object Debugger [developers.facebook.com...]

[Robert Charlton]

Too bad Twitter needs their own propriety tags and doesn't just use ogg tags for images like FB and Google+.

I was thinking the same thing when I saw the proprietary twitter card markup. We're talking about Open Graph tags (abbrev OG or og). Apparently there's an overlap in some core og markup for title, description, image, etc... but Twitter, Facebook, Google+, Medium, Pinterest, LinkedIn, etc are all adding proprietary tags. It would be great to have one simplified standard... though perhaps that's no longer possible.

Here are some implementations related to this thread that I could find quickly...

The Open Graph Protocol
http://ogp.me/ [ogp.me]

Cards Markup Tag Reference
https://dev.twitter.com/cards/markup [dev.twitter.com]

The table in this section explains the OpenGraph fallback behavior for each Twitter tag.

The most complete systematic overview I came across in my relatively short research period came up with Cyrus Shepard's 2013 compilation in MOZ....

Must-Have Social Meta Tags for Twitter, Google+, Facebook and More
By: Cyrus Shepard
November 7, 2013
https://moz.com/blog/meta-data-templates-123 [moz.com]

IMO, well selected optimized images are one of the key factors for successful social sharing. Square images often suck, so I'd go against the grain and try to find dimensions that will work visually on whatever platform. I don't know whether it's possible to set up multiple image choices for each platform, but it's a nice feature. I remember that there was a way to give users a choice of sharing one among several images for Facebook, but have lost track of the code for that. I'd be happy to see an example if someone has it. Similar flexibility would of course be great for Twitter.

[keyplyr]

I've found it best to create different sized images for each Google+ (link_rel), Twitter (twitter tags) and Facebook (og tags.)

Those FB image choices are just the largest succesive images on the page if there is no properly sized og image set.

[Robert Charlton]

keyplyr... understood.

I'm not just talking about image sizes, though. I'm talking about different image choices. Sometimes, I find, the preselected image is exactly wrong for what I decide I want to post.

[keyplyr]

Yes, that too. I use different social media differently.

Also, the sites I have coded in HTML5.0 can validate using OG tags, but not the older sites where I used 4.1 transitional so I use the link_rel meta tags instead. Works well enough and I get both Google+ and FB.