Here are the slides to my talk at BrightonSEO on 12th April 2013. Please find the transcript below the slides.

Transcript

Today I'm going to talk to you about structure data, specifically for Facebook, Google+ and Twitter. But first I want to tell you why you should be doing it.

Firstly it improves your click-through rate. By saying that I want to talk more about a presentation I made at [intlink id="2809" type="post"]SMX Israel[/intlink] about how rich snippets can be integrated into Google's organic SERPS, and by implementing them using things like rel="author" and review snippets, you can actually get a high click-through rate. And it's all trackable via Google Webmaster Tools alongside using your own analytics tool.

It's exactly the same thing on your news feed. If you have better media and better content, then it's definitely going to work better for you in terms of CTR. Another cool thing about it is that you can actually tailor that content specifically to that social network. So you can have a different title, image, and description for Facebook, and you can have another one for Twitter, and another one for Google+. And you might have a different audience in each of those social networks, so it's up to you to find out that audience and then tailor that content specific to that social network.

The other cool thing is it actually gains a bit more exposure. The fact that you're sharing something that's a bit more media rich makes it more attractive for it to be shared amongst other people. So I see a lot of Facebook pages, for example -t hey use a lot of images which are much more sharable than some random post update, and it's just showing the brand is ticking along rather than sharing something interacting with people.

Lastly it can look messy. If you don't have a description this is a great example... if you don't have a Facebook Open Graph description,  a META description or a Twitter card description, it decides what it thinks is the best content to produce. Sometimes that can just be the first 200 characters of page content. But if you were writing a blog post that might be "By Alex Moss" on today's date. It's not the best content to give people when you're trying to describe what the whole post is about. Also if you're not doing it I would class it as a form of automation - in a way like laziness. If you're not implementing it then you're just making another process think of what it needs to do to produce it on that news feed.

Google+

So first I'm going to talk about the simplest of the three. Google+ (bless them). I've used three examples here so the first one just has a title and content. It has no META description and what it's done is just taken the first 200 characters. It doesn't care where it's from it just takes them. The second image has the title and I've also added a META description and an image in the contents itself. It's cropped it and that's all great. The third example is using the Google+ META text. Here I have used a specific image thumbnail, a specific title and a specific description. Tags usually default to articles but you can have things like apps, books, authors, products and so on but I don't want to talk about that today - I just want to talk about sharing a normal URL. As well as this you also have the title, image, and description. The description's up to 200 characters so if you've got a meta description you're not going to be within that 150 character limit. So you've got an extra 50-odd characters so why not use them?

One prediction I want to make is that Google+ I think will be expanding their meta data. Facebook Open Graph is massive and I want to talk about that today. You could probably talk about that for a whole day. Twitter card's just evolved their ability to share more media-rich URLs. My predictions is that Google+ will actually evolve it. Don't know when, but I think they'll either evolve their own data set or they'll actually pull in the rich snippets that are on the URLs. If you have a review snippet, it'll actually pull in to the post update.

Facebook Open Graph

The next social network to cover is Facebook's Open Graph. So, my example uses three URLs and it produces three different results. The interesting one is the first example. In the content in the URL that I actually shared on here I had the first paragraph just have five words in it. Facebook has decided that that paragraph is too short and it skipped it. It went on to the second paragraph and output that - which is something I like a lot.

The second example is kind of the same but the image didn't crop proportionally so people now think that I work for "3 Do Digi" which isn't the best thing that you want, for branding at least. The third example shows where I've used the title specific to Facebook and an image specifically for it as well.

There are more available tags than Google+. The only other things you really need to add are the URL and the site name. Again, the type would either be article or on the homepage it would be website or on the product page it would be product and so on. When you do use products you have to use a whole other beast of Open Graph data which I don't want to get into today but you can read a lot more about it here. The great thing about Open Graph is that you can use verbs as well as actions which they just implemented last year. So instead of liking or recommending something you can read something or rate something or you can listen to something. So all the information is on that.

Twitter Cards

Lastly are Twitter Cards. So here are two tweets. The first one is just a normal tweet. I shared some slides from SMX Sydney by Paddy Moogan (which was really good so take a look). Below that is another tweet. It's exactly the same for me to tweet but if you click expand on the news feed, then it'll it'll show you who wrote the post, a little description of the post, and a bit of the title. It has actually got a deep link underneath saying "view on the web", and if you want to see an example of it there's a link to the actual tweet again that you can get from the slides later on.

NOTE: Twitter Cards work with Twitter oEmbed for WordPress! Simply enter the tweet URL and it will output as an embedded tweet - for example...

https://twitter.com/FireCask/status/426690981006934016

The interesting thing about Twitter cards is that it can be integrated into other apps. This slide illustrates how this can be output - with Tweetdeck on the left and the Twitter Android app on the right. I really like the Mashable tweet here as it used the image pretty much the whole screen and clearly overtaken Huffington Post on real estate.

There are more available tags with Twitter Cards. The interesting one here is you can actually have a site and creator. So if I were writing a blog on the 3 Door Digital blog, the site would be @FireCask and the creator would be @alexmoss so it can actually connect to the author as well as who you're writing for... and again you've got title, image, and description.

[On 2nd April 2013] Twitter released another three Twitter cards for you to use. What you've been seeing up to now is the summary card, which is what you just saw. The image card which is if you were to upload an image to Twitpic or Yfrog and the video one if you were sharing something on YouTube or Vimeo. I really like them because you don't have to go to YouTube to view what you want to view and it doesn't distract you. The additions are:

  • gallery card
  • app card
  • product card

So, you've already seen the summary card, here's the photo card. I have annoyingly decided to share a nice sandwich I had in New York last year and now I'm starving so that was quite a bad idea. But here you can actually define an image and a title for that image and you can view on your domain. The interesting thing is that that's a photo I uploaded to imgur. So it doesn't have to be hosted on the site itself, which you can abuse if you want to but it's nice to know that it doesn't all have to be in that one URL to share what you need to share.

The second one's a gallery. Again I've used something from Flickr. These are four photos from RIMC last month. Here you can choose the title - it says that it's by me. I've got to enter a description again and that can be linked to wherever it wants to be.

The next one's the video which is quite interesting. I quite like this as you can define an image that overlays on top of the player. Now, I don't usually like the image that YouTube uses as thumbnails. You never get the thumbnail that you want, so this is great for me. But on the other hand, you can have an totally unrelated picture such as a Pomeranian with sunglasses eating something out of a kitchen roll tube.

The product card's quite interesting because I used it to broaden the scope to my WordPress plugin for Facebook comments. It's not products per se, it's more of an app which I'll talk about in a sec. But it shows that you can define what you want. So I can define the word "price" and the word "downloads" and I put the variables that I wanted to. You can put up to two variables. If you're selling a t-shirt you can have the price as usual but you can have available sizes. And you can put in your unique description and you've got a deep link.

So why did I put an app in a product card. The last one is the app card but it's a bit odd because even though the app card's listed in the six available cards you can't actually use it. You can click into the landing page and it gives you sample code but it didn't validate for me in the validator and it's not even available in the generator itself. I'm not sure why, I don't know - maybe it's being abused, maybe they're rethinking it, but it's something to look out for.

One more thing about the Twitter cards is that you have to get your domain authorized. So if you're on the quiet fast task and you want to get this out as fast as possible my suggestion would be submit your domain and then keep sure that you get the cards done as quick as possible just to quicken things up.

So to finish up I just thought I'd share these six URLs:

  1. https://dev.twitter.com/docs/cards/markup-reference
  2. https://developers.facebook.com/docs/opengraph/creating-object-types/
  3. https://developers.google.com/+/web/snippet/
  4. https://dev.twitter.com/docs/cards/validation/validator
  5. https://developers.facebook.com/tools/debug
  6. https://www.google.com/webmasters/tools/richsnippets

The first three are just information about all the available cards and structure data that I've talked about today and the bottom three links are all the testing tools for respective social networks where you can either put in your own HTML, you can generate it, and then send it to a dev, or do whatever you want with it.

If you've got limited time or resources my suggestion would be to only use Facebook Open Graph. The cool thing about this is that if Google+ META is missing or if Twitter card data is missing they both seem to revert to the open graph for the meta data so if you can't be bothered, or you don't have the resources then just do that and use Facebook and it's much better.

Thank you :)