Challenge 3: Twitter Cards

[00:00:00]
>> So with that, let's build on the exact same example we were working on with Twitter. Except this time, sorry we were working on it for Facebook. Now we are going to add the extra Twitter metadata. Don't worry about adding it to the index at HBS page, you would add a bunch of the same stuff that that would pertain to, like it's not as interesting as the course page where we have the image and the name of the course and so on.

[00:00:25]
I wanna show you how you can validate it. Twitter has its own validator and we will take a look at it presently. So It's another link in that nice, big list of links. The list of, I think it was six links and we're going to look at five or it was five links and we're going to look at four.

[00:00:54]
But it's cards-dev.twitter.com/validator. And this is what it looks like. So, we give it a URL. And so if we give it our heroku URL, for example, we can see what it looks like as is. Might be smart enough to pluck some things out. Let's see. Interesting. So we only have one image on there, this is it trying to make reasonable assumptions.

[00:01:27]
I've done I've worked really hard to make my image thumbnails so that they're wide but also cropped down really well. It turns out that this is a square image, right? So it's like eliminating, it's basically finding this square here. I'm sure they have an algorithm in there that's figuring out that like, This is all colored background area.

[00:01:48]
So it looks pretty good but what I want is to have that nice wide image. I want something that looks like this. Here's where we find out if I did my SEO properly. So if I grab this, and pass it in. Better. So that's the summary large image so much better.

[00:02:17]
Like this is gone from like a little icon decorating your link to like the picture being the main thing. You're gonna see way more engagement for stuff like this when they get shared compared to the little cards. So what I want us to do is make it so that our app looks just like this using the summary large image card type.

[00:02:40]
Does that make sense? Here's an indication that I've been whitelisted on this page here. I can show you what the Player Card looks like, and it'll indicate that I have been whitelisted there as well, hopefully. See I am whitelisted for Player Card. It would just say I am not whitelisted and give you a link to a form you can fill in which just says why should we grant you access to Player Cards?

[00:03:08]
And then you just, because the whole world is concerned with bridging the [COUGH] gap between native apps, [LAUGH] you know, React Native and writing extensions and swift and connecting it to JavaScript. You see here I've done a much better job of my keyframe. This was the the first slide of a deck that I was going through in my talk and like this is how you can expect it will show up.

[00:03:32]
If I was really slick I would have made something that would get cropped nicely, even in this scenario, right. And I would have on YouTube said like, this is my cover slide.