Facebook OpenGraph

[00:00:00]
>> So, the next thing we're gonna be talking about here is, social metadata. So we've got the very basic level of metadata. This is the same, this is not modern yet. These are the same practices you would have employed to boost your SEO in 2003, this is really, really old stuff.

[00:00:22]
And now we're gonna get into the newer stuff. So, these are some of my favorite tools. We're gonna be using at least four of the five today. The one we won't do an exercise with is Pinterest, because you need to ask for permission from Pinterest to be allowed to create rich Pinterest tiles, and we can't do that in the context of a workshop.

[00:00:52]
But we're gonna use all of the other four, we're gonna use Twitter, Facebook. I hope you have this SEO META Chrome extension installed, because it's a great way of, kind of, without having to view the source of your HTML, seeing what are your keywords, what's your description, what's your title.

[00:01:08]
It'll give you a little alerts if things are too short or too long, and so on. And then Google Structured Data Testing Tool, which we will use pretty extensively later on. So, we're just gonna go through some of the most important and popular social networks one by one, and talk about the kinds of structured data we can provide, and what that will do for the way your links show up.

[00:01:33]
The first one we're gonna talk about is, Facebook OpenGraph. So Facebook OpenGraph, it's a broad concept, and it has an even deeper meaning than we're gonna discuss today, in the context of building apps on the Facebook platform. We can use a limited subset of the same OpenGraph data, and the same concepts, when we are trying to give Facebook hints as to what our URL means.

[00:02:01]
So here are some of the meta tags we can put inside of our head in our HTML, that relate to Facebook. So you'll see, first off, that they all begin with og:, right? Og stands for OpenGraph. And, we've got property and content, a little bit different than the name and content, which is what we were using before for the description and the keyword.

[00:02:29]
So let's go through one by one and talk about what these mean. So first we've got this URL. So this is what's known as the canonical URL, we mentioned this earlier. The idea here is that, you might have a mobile specific URL that our users hit, and then share that link on Facebook.

[00:02:47]
You might have an English and Spanish version of your site, and the locale is a subdomain on your app, so you've got different URLs for different languages. But you want to pile all of your credibility, and all of that SEO goodness, and all of that activity in one place.

[00:03:04]
So you're gonna pick the one true URL for each piece of content. Oftentimes this is the desktop version of this content. And you want, regardless of language, or form factor, or variant of your app, for that canonical URL to be the same everywhere. That's what makes sure that, when you get likes, or when you get shares, all of that credit is in one pile.

[00:03:33]
So you want to strip any query params, any session variables. All of that stuff should be removed from the URL. And it should be built with the intent that it will never change. So here's an example from, I took a book from Amazon and figured out what the canonical URL would be for that.

[00:03:51]
You'll see that, they have a human readable URL for what you'd see in your address bar. The canonical URL is just like an ID. And the reasoning here might be that, they might revise the name of this book's title, or they might release a second or third edition.

[00:04:09]
And they want to make sure that, even if there is a need to change the human readable URL, the canonical URL remains constant. They're never going to have to change it. If it's like a unique ID, and it is immutable, we do not mess with it. They have an equal sign here in the URL, that is not a query param related thing, there is no question mark here, so that's all part of the path of the URL.

[00:04:39]
So that's the canonical URL. We've also got something called a type. And, by default, this will default to a website, but this helps inform Facebook as to what the concept is that this URL is about. And we've got lots of different types here. I scraped this off of Facebook's documentation here.

[00:05:02]
So we've got lots of different things we can use. If you don't provide this, of course, we default to a website. So in terms of how this might look a little bit different. If we go back here and we look at this New York Times card, I just want you to look to the right of the title and the description, there's nothing.

[00:05:20]
So we're gonna look at different types. This would be just an article. And if we look at a song that I shared from SoundCloud, you can see we've got a Save button here. So Facebook has, for media types like books, and movies, and songs, they kind of let you have collections of bookmark-like things, where someone shares a song and you wanna come back to it later.

[00:05:45]
You can save it, and then you can revisit your list of saved songs, which will basically just resurface this list of cards again, but you're sort of earmarking it as like, this is a song and I wanna come back to it later. It may seem like a subtle difference.

[00:06:01]
Over time, you should assume that everyone's going to enrich their social network UIs to make even better and better, and better use of this structured data. So, even if you think, well, that's not such a big deal. In the future it might be that, they expose a player directly in the card, instead of just a thumbnail here.

[00:06:22]
And, so the point is, take it seriously, don't fall back to website if a more appropriate option is available. Even if you don't see that it makes a difference, in the future it might make a difference. And then, all of Facebook's cached information about your URLs, you'll be able to position where you can take advantage of that new feature as soon as it's out.

[00:06:46]
We've also got another OpenGraph tag called the title, that's where that ends up. If you don't provide a title, we'll use what's in the title tag, the one we just filled in for our basic site. Keep in mind that, the length of a title, you can put a lot of information in your title to show up in search results.

[00:07:06]
Here, you may end up seeing that your default title gets truncated. That's the reason that you might want an alternate field to put stuff in. So you could tack your company's name onto your title, for the title tag that we've already filled in and pushed up to Heroku.

[00:07:22]
But for this OpenGraph tag, maybe you just want to. Your URL's already at the bottom here, it might be redundant for you to say, soundcloud.com, Wake Me Up remix. So that's why we have two separate places for this, one might be shorter and more abbreviated than the other.

[00:07:41]
Description goes here. Keep in mind that, usually this text is not enriched. So this whole thing is a clickable link, the whole tile. You'll see that here, SoundCloud, or I guess this artist, has put two URLs in his description. They're not underlined. It's just sort of adding noise to his description.

[00:08:02]
And what's more, it sort of interferes with your ability to read it nicely. So, that's missing an opportunity to put some really enticing first sentence that would get you to click on this link. Finally, we have an image, and you may also see it as og:image:url. So, images are interesting when it comes to Facebook, for the following reason.

[00:08:35]
So, once Facebook sees an image at a URL, it will never retrieve data for that URL again. So you need to make sure you get it the first time. And if you miss some secondary data that has to do with that image, you're gonna need a new image URL, you're gonna need to create a new picture for that piece of HTML, so that it will go and fetch that image again.

[00:09:02]
So, and I am providing a best practice here, not a must, but it's like a soft must. Facebook doesn't know the width and height of your image until it downloads the file, and so you may end up with a strange looking layout for the first time a link is shared.

[00:09:20]
The first time a link is shared, the image gets downloaded in. It will calculate the width and height, and it will know that moving on. But the best practice is, to specify it right in your HTML as, image:type, image:width, and then image:height, which unfortunately is cut off for people in the room.

[00:09:41]
But it looks just like image:width. So this ensures that the first time each image on your site is shared, it is formatted exactly as you intended, no part of it is clipped off, and so on. So Facebook would rather clip your image off than reflow the feed because your image is bigger than it assumed.

[00:10:03]
Yes?
>> A quick question. You're talking about Facebook OpenGraph. And OpenGraph is shared with LinkedIn, and Reddit, and that stuff too. Or is that different, are you getting to that, sorry?
>> So, they started the initiative, Facebook did. It is becoming more and more of a standard, and they've gotten buy-in from other social networks.

[00:10:27]
So this is why I'm starting with Facebook, because what we'll see is that, Twitter will honor certain OpenGraph tags. And, this is a great place to start with the baseline. Or if you get some OpenGraph tags in there, LinkedIn will start to read some of them. I don't know the other people who are buying into the standard, but, I know Pinterest reads a couple of them.

[00:10:51]
LinkedIn works slightly differently, they use a third party service to enrich their URLs. And, not all OpenGraph links will work on them currently, or at least very recently. I don't know if they've deployed something recently. A lot of changes going on there recently, they've totally redone their UI.

[00:11:14]
But good question. And it is becoming more and more of a standard, which is great because, when things were more fragmented, we had to kind of have tons and tons of redundant information. Every social network had their own little description tag, everyone had their own title, and there is no value in us defining that over and over again.

[00:11:38]
In terms of image sizes. So I've told you how to specify your image size. The size of your image will affect the way your tiles are rendered in someone's Facebook feed. And every social network gets to sort of decide how to handle this differently. But, if your image does not cover a 600 x 315 box, meaning both dimensions, meet or exceed that width and height, you'll get a worse tile here.

[00:12:14]
So you just should aim to have at least covering a 600 x 315 pixel box. It is advised that you double both of these dimensions, so that when this is shared on high resolution mobile devices, like any recent iPhone, when you think about like Retina Displays, or the high resolution Android displays.

[00:12:36]
You want the opportunity to render that at double the pixel ratio for that image content. But you'll still get the wide image as long as you break 600 x 315. With that, let's look at the Exercises OpenGraph folder. And I'd like everyone to open that up, and to look at a couple of the files in there.

[00:13:02]
So I'm gonna go look with you, and then we'll come back to the instructions. But, the main idea here is that, we want to add OpenGraph data to some pages on this site.