Challenge 3: Solution

[00:00:00]
>> All right, welcome back, so we're going to go over adding Twitter meta tags to the same app that we've been working with today. So I'm just gonna kinda close out everything so you get a fresh starting point here. We're looking at localhost again instead of looking at our Heroku version of the solution.

[00:00:19]
Let me clear it out so people in the room can see. And I'm just gonna go back into our Open Graph exercise here. And we're gonna just focus on the course HBS file today. I can actually get rid of this here. So I'll begin by going to my little cheat sheet here.

[00:00:42]
Let me maximize this. And pulling off some of the metatags we need to worry about, we'll do these first. So begin Twitter. End twitter, I just like to keep things nice and separated so that you don't end up with this huge stack of things that you have difficulty sorting through.

[00:01:12]
So, this example used summary as the type of card here. One thing that got me that it was like, I swear it was a bug in Twitter, just because of the response that I got was if you misspell the card type, you will get a notice that involves requesting approval.

[00:01:38]
So some view if you misspelled the card type this content attribute here. You could have said, this is not whitelisted, your domain is not whitelisted. And please click here to request access. Everyone has access to the large image card type, right? But the response you'll get from the validator, it acts like it is something you have to seek approval from.

[00:02:03]
So just be aware of the only thing you need approval for is the player card type. That's the only legitimate needs approval thing that's left. At one time, large image of something that you also needed to be whitelisted for but they've since opened it up to everyone. So here we had one person here that did something like this summary large card, and something was wrong and you think it's a bug.

[00:02:28]
There's an open item in the developer forms, from me, saying, I swear look at this metadata, it's supposed to work, and it's just a misspelling on my part. So, here I'm just gonna use, I'll keep these as the site and creator just for fun. And then we need to worry about our image.

[00:02:49]
So, for images with Twitter the large image, that's where I have this thumb size in my JSON. If we go back and look, you'll notice that the thumb 2x is 560 by 300. It's no coincidence that it's that size. That is the size that I need for this image on this social media platform, right?

[00:03:15]
So, just to double check with my slides here, cuz I can't keep all of this in my brain, sorry, it's Twitter image. That's what we want Twitter image. And then here, I'm going to use handlebars to find an appropriate value here. So we're gonna just use a very similar trick that we used for Facebook except here, it's going to be thumb 2x.

[00:03:43]
Now, if you ended up using square here, you would default to a really nice, appropriately cropped square image for the smaller card cuz that's a 250 by 250 pixel square. So if you're going to, I would at least say get the aspect ratio correctly cuz Twitter will try to do its best with the appropriate aspect ratio.

[00:04:04]
All right, so now we've got our image and we can actually leave it there. We don't have to provide it a width and a height. Because Twitter images are, they're the same aspect ratio, it differs on device exactly how big it is, right? But it will scale that thing up and down as appropriate.

[00:04:23]
So you'll notice like if you use the iOS app for Twitter and you rotate your device and think there was at least at some point, it worked in landscape mode. I'm not sure it does anymore. You can see that the images get wider and smaller but you don't need to tell it like you need to tell Facebook because Facebook supports a varying size.

[00:04:43]
And with that, I'm just gonna go ahead and deploy this. The way we add this, the way we deployed this first we go git add- A. That says, take off the changed files, stage them so that the next time I make a commit, which is like a code change across a collection of files, we're going to include everything that we've changed so far.

[00:05:09]
Now we're gonna make the change, And give it a name so that if we look back later in the history, we'll see that this is the one where we added Twitter metadata. And then finally, send that new change up to Heroku. And I have to do something slightly different here because I'm a non master branch.

[00:05:33]
You would have just done git push Heroku master. My different syntax there had to do with solution being my local branch, but I still want it to end up on master in Heroku, cuz that's what it solves off of. I'm so used to type in Heroku master though, cuz that's more often than not what you're going to use.

[00:05:56]
And here's our Heroku app. So if I do a hard refresh here to make sure everything is loaded and go to the Twitter validator, let's see if I did everything the way I was supposed to. So we may run into a caching issue here. We do not, there it is.

[00:06:15]
And it's telling me with no warnings down here it got 15 meta tags card was loaded successfully. So this is a great time, let me pop this out so that people in the room can see a little bit more easily. This is a great time to start looking at this SEO Chrome extension I had you install.

[00:06:33]
So if we open that up, you can see the description is missing. Remember, we only added that meta description tag to our first exercise the deploy one. We never ended up adding that to these URLs here. Here is, I'm looking at Twitter's app there. They don't have a description either, interesting.

[00:06:55]
So here's my canonical URL, where it says it's not defined. So there's probably a meta tag I'm missing that is a generic way of specifying a canonical URL. So this is telling me, it's giving me a Google URL to read. So we may get into that as we look at the web app manifest stuff.

[00:07:20]
But in the social tab, we can see that all of my metadata is showing up really nicely. There's my Facebook canonical URL, the Open Graph type, the title I'm using for Open Graph, here's my description. Here's a nice image and I could right click and download that if I wanted to.

[00:07:36]
The width and the height, and then here's all my stuff for Twitter as well. So, I like using this cuz it is easier to look through this than to skim through a bunch of almost identical meta tags to try to scan through and find what's going wrong. And as you see here, it will highlight problems that you run into.

[00:07:56]
So here I haven't specified a title attribute, this image to the left. So it gives you, you basically swat at it until the red goes away. And that gives you a baseline for making sure there is machine-readable metadata available for all of your images and all of your videos and all of your meta-tags.

[00:08:19]
So, and hitting most titles on links, right, give you even more hints to feed the indexers.