Twitter card troubles

Hi Elizabeth!

We are passing twitter the full image which is in the og_image tag. Twitter says that they used to crop the images, but they no longer do: https://blog.twitter.com/2015/a-new-look-for-your-twittercom-photos

So, I'm not sure what's up. Can you submit a ticket to our Customer Support staff and reference this ticket. Ask them to talk to me as I've created an example. Thanks! =)

Christine

Christine,

I went through the ticket process and was told it's on the Twitter side. I was trying to figure out a solution in the meantime. There are other Twitter cards besides the large image summary card, but that's the only one in the meta tag for Blox sites. I asked if we could switch the meta tag to the summary card (which just has a thumbnail) for our opinion pages where this is the biggest issue. But that would take one of our macros off the update path. It's not clear to me how important than macro is, but I'm always hesitant when I hear that. Is it possible that support for the other Twitter cards would be added in the future?

I had actually missed this updated regarding changing the card to summary instead of large image. I know we did the large image card for IMAGE assets, but let me look if we can change this for stories. (Though, I'm not sure if we want image assets to be drastically cropped either. But it feels like if you share an image it should get the bigger treatment on Twitter).

We won't have control over how articles with a photo(s) display ("large" versus "simple") on Twitter?

Not at this time... We could put in a feature request to add some admin UI for that, but right now I can only hard code on the templates.

This would apply to every link to our site that's shared on Twitter? Or only those shared via the broadcast option?

Yes, every link on Twitter. It's part of the meta data for the page, and regardless of where the Tweet came from, it scrapes the page to get the meta data.

I have a few more updates on this as well....

1. We are able to send our own photo to Twitter using the twitter:image property rather than the og:image property. This way, we can crop it ourselves - since we do a center crop, and Twitter crops to the top. I think that will really improve the cropping.

2. I plan to use the 'photo' card for photos, and the 'summary' card for articles (rather than using the 'large_image_summary' on photos as I said before. The photo card is nice because it shouldn't crop at all.

Forcing us to use the small image cards is a problem. We intentionally use the large image summaries because they have large images and Twitter users are more likely to stop and open those stories. You're taking that away from us because there are problems with some photos on some posts.

My hope was that it could be controlled by section — so we'd use the story summary on our opinion section where we have primarily mugs and the large images on other sections.

Is there a way to use the simple summary card for article assets with photos that use the "mugshot" presentation and the large image summary for all other article assets? I think this might accomplish what everyone seems to be asking for.

We discussed this internally, but we felt it would be really confusing to change based on what could be seen as a random determining factor by editors who don't know the technical details. Mugshots are a problem here, but I've been getting complaints about basketball photos and other vertical photos that get cut off by Twitter's extreme cropping as well.

That's the problem. It was discussed and decided internally within Town News without talking to publishers. And before exploring alternatives, like sending the twitter:image property versus og:image.

Oh, sorry to create the wrong impression... we are definitely still discussing it, and we are discussing with many sites on this forum, as well as in tickets in the CRM system and via email. But, I'm just stating the reason why we didn't offer that solution (switching based on horizontal vs. vertical orientation, or based on mugshot mode) at the start.

Is this still under discussion or was it already decided internally?

"I plan to change this in the core templates (in the next open release) - an image asset will still use the large photo summary, but article assets will be simple summary assets."

Yes, that is the plan that I was putting forth. As some others on this board know, we are still going back and forth on ideas in CRM and email as well. There seems to be some people who want the "forehead problem" fixed as soon as possible because it looks unprofessional, and others who want flexibility. So, it looks like we don't have a consensus yet and we'll keep digging.

Please keep the conversation going and don't do anything drastic like change all Twitter cards to the simple summary assets. We would be extremely disappointed if you did this. Our work around is to crop the image as best we can in preview and hope for the best. I was hoping you would give us a cropping tool in preview that is the dimensions of Twitter's large photo summary so we can crop it as best as possible for Twitter.

Yes! Everything Rebecca said, times 2.

Done. Thanks Christine!

We are having the same problem with Twitter and mug shots as well.

Has there been any progess on this issue that you could share? We are running into this same problem and were hoping to find a solution.

I haven't heard anything. We ended up turning Twitter cards off partly for this reason, partly that we don't have an image with every story and followers were seeing our generic image a lot of in their feeds and pushed back.

Thanks Elizabeth, I wonder if we might need to got that route also. I appreciate the feedback.

Turning off Twitter cards is not a logical move for us, so I was hoping to see an update on this too.

After working with a few customers here and offline (customers who were really unhappy with the extreme cropping implemented by Twitter), we discussed the idea of moving to smaller Twitter cards (as proposed previously). I ran this by a few customers via email and here (which we typically do with changes that affect backwards compatibility), and it seems a lot of people would be upset by this change. So here is where I am now:

No-brainers

Twitter now has a twitter:image meta tag that we can use to give Twitter a specific file for their purposes. This means that we can create a specific image tailored to Twitter that uses BLOX center-cropping rather than Twitter top-cropping. All that means is that when we create the meta data for the page, we'll create a twitter:image that is specifically the size needed for the type of card that is recommended in the meta data.

This will definitely improve crops for mugshots and other vertical images that are forced into a square or very horizontal space, but you will have some problems with center crops. Sometimes a center crop will cut off the head and shoulders and the knees, and just leave you with a weird torso or podium, etc. So it isn't perfect, but I feel it is better than foreheads!

Long-term

As some as requested on this forum, I like the idea of having some kind of user interface in the BLOX admin that allows you to have greater control over social meta data. That is a software feature request which has a lot of competition with other high priority items, so it won't be a short term fix. I can and will submit a feature request for this, however.

Short-term

So, to me the question is what we do in the short term to address the awkward cropping issue. The way I see it, we have a few choices:

1. Do nothing. We could leave things how they are, maybe petition Twitter for more flexibility in their card styles or cropping functionality (like letterboxing). Then we wait for the long-term software UI fix to become available sometime in the future.

2. Change to small summary cards. This is was I proposed originally, and while it will help with awkward cropping, it sounds like the large cards are much preferred and get better engagement from end users. So it sounds like this is not the best choice.

3. Per-section setting. We could offer a custom property on the URL map which would allow the customer to choose the summary mode for the entire section. But, you wouldn't be able to control the card within the section (so Sports or News would still be a problem with basketball and crime mugshots, etc., but Opinion or Obits would be greatly improved.)

4. Auto-recommend card style. We can look at the first image child of an article and decide programmatically to serve a large_photo_summary or a regular summary card. So, as BTC suggested, if the first photo is either mugshot presentation or vertical (or both), we would use summary card, but otherwise we would use large card. We would still do the "no brainer" of using a twitter:image as recommended above. I think this may be confusing for some customers, but it sounds like the benefits may outweigh the confusion in terms of being a short-term solution.

The last one is my preference right now. Or maybe a combination of 3 and 4 where 4 is an option in a dropdown for that section (though I think if we have 4, we don't need 3).

Let me know your thoughts! If possible, I'd like to have this decided this week so we can hit our next open Flex release.

Does the long-term option include making the crop function on previews more ... useable? Preset dimension options, ability to see the whole image, those kinds of things?

For short-term, option 4 isn't really an auto-recommend unless I have an option to override or ignore that recommendation. We already crop images in previews to work with social media image sizes/styles. If the photo is vertical but the preview is horizontal or square, would it be a large summary or a short summary Twitter card?

Right now, my short-term preference would be No. 1: Leave it alone. We can use the clunky crop option on the preview images.

1. This would not necessarily include fixes for those preview issues. However, some of those are already in the backlog so we could look at their priority.

2. I meant as an auto-recommend to Twitter as the card that they should use, not to the publisher (since, as you point out, you can't change it at this point).

3. Yes, we would use the preview crop for determining if the card should be large or small (so, a horizontal preview would generate a large card even if the main photo was vertical).

As a side note, Twitter cards have a 7 day cache. As far as I can tell from this page (https://dev.twitter.com/cards/troubleshooting#refreshing) you can see a new card by using URL parameters and so forth, but you can't update previously-cached items. So, if you (or an end user) tweets something and it looks funky, and you go in to fix the crop, it won't fix the card. (If anyone knows a way to refresh cards retroactively, please let us know!)

Thanks, Christine. You're awesome! I like the twitter:image meta tag and your long-term solution sounds perfect. For short-term, I vote for 4. Keep us posted on any other feedback you need!

I agree with the change in cropping. And I think the auto recommend is the best option for the short-term.

Under auto recommend, what happens in cases of no image? Right now our og:image appears, and the repeat of that in users' feeds was another reason we backed off twitter cards.

What happens when there is no photo is a really good question. In fact, when reading some of the most recent Twitter card changes, I see that they actually recommend against using your logo as the fallback.

Unfortunately, if we don't provide the twitter:image, Twitter will fall back to the og:image. You could remove the og:image and not have a fallback, but then you don't get the image on Facebook either.

We could have a different fallback Twitter image than we do for Facebook... but I'm not sure what image would work

We have had ideas about having default stock photo images that could be auto applied on a per-topic basis (and could be used for this like this like this or Google AMP which requires a photo with each story), but that is just an idea at this point. Like you could have s picture of crime tape on a crime story.

Also, in a few weeks we are implementing a new feature call "teaser images" that allows you to upload a different preview image than on the article. It will also let you upload a preview on an article that has no photo. This teaser photo is also used in social meta data. This way you can feel more comfortable using s stock default image because it won't show up super big as soon as you click on the article.

Let me know if you guys have ideas! :)