Twitter Cards

[00:00:00]
>> Let's move on to the next social network, which is Twitter. So Twitter will, once we start doing a very similar exercise in the same folder, we're gonna build on the Open Graph folder again for the next exercise. You'll see that we have to do only a little bit of extra work to make things look great for Twitter.

[00:00:21]
For one, they are now officially honoring Open Graph tags. So for title and description, you can put that in there once, and you make both of these parties happy. There are a couple different tags that we do have to add, and there's a little bit different treatment of images, because they want a different size than what we give Facebook.

[00:00:46]
So we're gonna cover all of that ground that you need to layer on top of this thing that we've already built to make it show up on Twitter in as rich a way as possible. But first, let's talk about these three tags. So we've got card, site, and creator.

[00:01:02]
When we think about card, this is almost like the equivalent of the og:type meta tag that we use for Open Graph. And this really has a strong effect. It has a big effect on how your card is rendered. So this is what you get if you have a twitter:card of type summary.

[00:01:24]
You provide an image of the right size, right? You get something that looks like this. If we go with a summary_large_image card, you get a much larger image, like a more widescreen orientation, instead of a square. And the title and description are placed underneath it. So whenever possible, large images are gonna get way more engagement.

[00:01:47]
So you want to, unless you have some constraint where you've only got tiny little images, and they look like crap when you size them up, aim for this. People will want to click on it much more. In addition, so those two work on any site. We're gonna be able to get those working today.

[00:02:09]
There is another type that you have to ask for permission to be whitelisted for, and that is a player card. And so is one that I use for my talks, my conference talks that I put on my website, where you get a video player that's embedded right in the tile.

[00:02:27]
And you see you can click that Play button, and it will work. There are ways to get your keyframe to show up properly. So that's a good video tip here, by the way. Make sure that the keyframe of your video is, which is sort of like this, the image that is there before you start playing the video.

[00:02:45]
Oftentimes, you can upload an image that's not an actual frame of the video. And you can have the title across it, and a little picture of yourself, or whatever is appropriate there, but you can use it. Almost like the cover of a DVD, where it's an opportunity to sort of decorate things, and brand them a little bit.

[00:03:03]
In this case, I have screwed that up. It is still screwed up, right? I don't claim to be someone that practices what I preach, but all of these things I'm describing to you are on my to-do list. So it is nice though that I can share a conference talk, and then someone right within the Twitter app can start playing it, and it'll start playing.

[00:03:22]
I'm not hosting my own videos. So part of what you have to provide when you use the player card is the URL of a video, right, the actual source of the video file. And then you can say here is the URL of the webpage containing that video. So I found a middle ground here where I shared a YouTube video.

[00:03:45]
And I figured out from a YouTube video ID the form of that URL for the source video. So I'm pointing to YouTube for that. But I'm pointing to my own site for if you clicked on the body of this card, you would go there, not to YouTube. So you can find a nice little medium there where you sort of hedge between I don't wanna host my own video, cuz that's not my business.

[00:04:09]
Frontend Masters would certainly host our own video, right, yes?
>> If you were doing this kind of thing, would you have the impulse to put your video as a two minute preview thing? Or would you actually want the player to have your full however many hours video?
>> That is a great question.

[00:04:32]
So if we go back to being objective driven, sir, and I'm sorry, I'm not picking on you. I know it's the second time I've used that as the response here. You want people to eventually end up on your site, right? So maybe you've got intercom, or some embedded chat, and you wanna try to engage with them.

[00:04:53]
Maybe you have a call to action that you're ultimately trying to get people to sign up. Oftentimes, it's useful to have a public video that's available that you're sharing. And then at the end, you can have some of these little hot zones where you can click right within the video surface where they can pick up from there, and see the full thing.

[00:05:11]
But that'll be a link to your site where you might have if you're using YouTube, you'd have a an unlisted video that's embedded in your site. So people couldn't come across that via organic search, but they will be able to see the whole thing on your site. The downside there is that's two videos with two sets of ratings.

[00:05:32]
And so if someone shares this, or they like it, you don't know if they're gonna like it in the preview, or like both of them. And so it's sort of a judgment call. This would be a good thing to split test, for sure. I think if your primary product is videos, I wouldn't hesitate to show the whole thing.

[00:05:56]
If your primary product is videos, I would do a teaser, and then the full thing on your site. In my case, my primary thing is training people. And so if I give a talk fluent about web security, I'm fine with that being public. I've already given it out in a public setting.

[00:06:16]
And in fact, the conference has probably already published it. So at least here though, I will tend to, sorry conference organizers, I will tend to post it on my own site and share that, rather than sharing it from their site, because I want the traffic to come into me.

[00:06:30]
>> So it'd be the question between if it's more interesting to the objective to get people into your actual website, versus I want a view on this video.
>> If you wanna view on the video, put the video out there. If you want people to come to your website, give them a delicious little breadcrumb.

[00:06:53]
And then they'll follow you into their site, but then carefully craft that thing to where that video is wrapping up with more available. Here are the things we're gonna cover. And make it a proper call to action at the end, rather than just for more, click here. Make it enticing, and put that in the video, right?

[00:07:12]
Make the pitch to them with a person, right? But a great card here, it's not hard. There are no qualifications to having to put the player card in here, except that you must have already put the metadata in place. And then submit it to Twitter, and they just wanna see that you have set your stuff up properly.

[00:07:36]
My suspicion is it may be just a bandwidth concern on their end, where they don't want tons of people putting themselves forward as we have these player cards, and here are tons of videos. And it's just an attempt to get people to engage more. But really, it's not real content, if that makes sense, cuz it's a heavier file to download than an image, yeah?

[00:08:00]
>> When you say you're asking for permission, are you asking for permission per page-
>> Per domain.
>> Per source?
>> Per domain.
>> Per domain.
>> So your domain has to be whitelisted.
>> Okay.
>> So I'll show you an example of the rejection notice we get from the Heroku URLs.

[00:08:15]
They probably want it to be like, it's nice for it to be an HTTPS domain, cuz then they can see this person bought an SSL certificate. Maybe they're an extended validation thing that I don't know what the verification process is. All I know is I haven't really heard of people getting rejected from it.

[00:08:32]
And it took me about two days for them to come back, right? And I just have conference talks on there. I'm not a huge moneymaker, in terms of people watching these things. There's another kind of Twitter card called an app card, and this links to an app store of some sorts.

[00:08:53]
If you look closely at this, you can see that we see a rating at the bottom of the description that tells us how many reviews there are, and what the average review was. In this, you'll want to use one of these services that will, based on user agent, send people to the appropriate app store link.

[00:09:13]
You get one URL to use here as what you're sharing. And obviously, some people need the iPhone app. Some people need the Android app, and there are plenty of services. And people sometimes build their own services where you hit them. And then if it looks like an Android device, you go here, and iOS goes there.

[00:09:34]
So there were two meta tags that I showed you when we first started doing, going through Twitter, and they were site and creator. These are not visible currently, but I wanted to show you the 2013 API. The look and feel of Twitter, because at any time, Twitter could change their UI.

[00:09:53]
And you want your metadata to be in place, so that if they start to resurface some of these things, which by the way, these are things they still ask people to do. They still recommend that you place these meta tags in your HTML. They may elect to surface these again.

[00:10:09]
So what we're seeing here is it is a tweet, or a link that was shared that is associated with a Twitter account called the WebMate. So that would be the site. That's the site, the WebMate, right? And you can see they get a link and their Twitter avatar next to that, because we basically say this is the site's Twitter account.

[00:10:34]
This corresponds with this Twitter account. Below that, the second arrow points to the actual author who has their own Twitter account. So they get credit for writing this article as well, so that is the disambiguation between a creator and a site. Usually it will be a business, and then an individual person that is the author.

[00:10:53]
And again, you will not see these pieces of data showing up in April 2017 Twitter UI that I can tell. And I've only checked Windows and web, or I've checked the Windows native app, the OSX native app, and the web experience and the iOS app. So maybe it's on Android.

[00:11:17]
But at some point, it looked like this. And at any time, it could go back. So strongly advise you put it in there if it's pertinent. This would be for The New York Times Fine Arts page, and here's the author. That's the appropriate context for this.
>> As a note on that, for a while, they were actually using that as a permission into Twitter analytics.

[00:11:39]
>> Yes, so this is still definitely used in Twitter analytics. It's just not surface to users. So that's a good benchmarking tool, right, for which of my authors are writing about the hottest things that are getting the most engagement? But it's not visible in user land, as far as I know.

[00:11:59]
So the image requirements for Twitter are a little different than Facebook. So for the summary image, right, that was the first card that I showed you with the small square image to the left of the textual part of the little rich card. So that's 150 by 150 pixels square.

[00:12:19]
And then you need 560 by 300 to use summary large image you need to cover that area, exceed both dimensions, right? If you provide an insufficiently large image for summary_large_image, you'll fall back to the summary card style. And you may note that one is a square image, and one is almost a two to one aspect ratio.

[00:12:45]
So the crop job, it looks awful. I mean, it's just gonna take the middle. It's gonna turn into a durance course on social optimum, which is now what I'm teaching here. We're not learning about durance here.