Yoast WordPress SEO: Open Graph Tags and Twitter Cards [Video]

My recent blog post about setting social sharing image thumbnails with Open Graph tags was perhaps not the most tech free and simple as it could be!  If you use WordPress, these Open Graph tags can be set really easily using the Yoast WordPress SEO plugin.

While I was in the Social section of Yoast WordPress SEO settings, I’ve also explained what a Twitter card is and how to get one.  Prepare for 9 minutes of learning and it’s a requirement to dance with the guinea pig at the end – clear your floor!

Yoast WordPress SEO Settings: Open Graph Tags and Twitter Cards

You can apply for your Twitter card at https://dev.twitter.com/form/participate-twitter-cards and install Yoast’s WordPress SEO plugin through your WordPress dashboard (it’s free).

The video transcription is below for those who prefer to read (or can’t understand my accent…)

 Over to you…

Will you be using Yoast WordPress SEO plugin to set your Open Graph tags?  Have you applied for a Twitter card yet?  I’d love to hear from you in the comments!

Transcription

Hi, it’s Jan at My Local Business Online and today I wanted to talk a little bit more about sharing your website or blog post, Open Graph tags, Twitter cards and the Yoast WordPress SEO plugin.  A little while back I did this blog post about Open Graph tags, how to define them and the minimum image sizes that are required for Facebook, LinkedIn and Google+.  Some of the feedback I got both in comments and in chat on Facebook was, “Jan, why is this so complicated?”

If you use WordPress for your website or blog, it doesn’t need to be complicated.  I personally use the Yoast WordPress SEO plugin and that covers a range of search optimisation tasks that many other SEO plugins don’t.  It basically means that instead of installing 5 or 6 plugins to cover a range of tasks, Yoast covers everything. 

So let me show you what I mean with the social sharing and the Open Graph tags.  If I pop over to Facebook and paste a link in.  Without actually sharing it, immediately what pops up is a preview image, title and description.  You can control each of these and what is shown here by using the Open Graph tags.  Open Graph was originally developed for Facebook, but it is also recognised by LinkedIn, Google+ and Twitter, which we’ll come to in a bit.

So now you know what Open Graph does, the question now is, “How the hell do you get this information into your blog posts and website?”

Like I said earlier, I use the Yoast WordPress SEO plugin.  Once you have installed it, pop to the SEO tab and then click Social.  You’re faced with Facebook Open Graph right at the top.  By default it is ticked and it adds the Open Graph meta data to the head of your site.  It allows you then to define your images and descriptions.

If I pop back over to this blog post and edit the post, what you will see is the Yoast plugin beneath the post.  You define your keyword, your title and meta description.  This title and description will be used as your Open Graph tags unless you say otherwise.  It will also use the featured image.  In this particular post I have 3 images and I have set the last one to be the featured image.  So it will use this image as the thumbnail image when the link is shared.  That’s this one here and obviously on Facebook you can flick through and choose other images too.

So for Yoast to define your Open Graph tags you need to set your SEO title, meta description and featured image.  The good thing with Yoast, for example, you’ll see another tab here called social.  Click on that tab and you can set different descriptions for Facebook and Google+ .  So if you don’t want the same description that shows up in search, which is this bit here,  you can have something totally different in that section too.

All that info is obtained simply by ticking the Add Open Graph meta data box in Yoast WordPress SEO social settings.  But it does a little bit more than that too, if that wasn’t wonderful enough, you can do all sorts of things with Yoast.

First of all you can connect your website with Facebook and it allows you access to your insights, which are these here.  And you can tell immediately, this is when I was blogging and sharing most days, and this is when I am not – if that’s not a lesson to blog regularly and share regularly, I don’t know what is!

If I pop over to a test site here,  you’ll see if you haven’t connected your website to Facebook you can add a Facebook admin.  Just click that button and follow the instructions, it’s quite simple.  You also want to set your front page settings, which is a default image url and a default description.  What the default image does is if you don’t have a set image on your page, if you haven’t used any images at all when you share on Facebook and Google+ etc, this default image will be used as the thumbnail.  In my case, I use my logo.

Now before you whizz off and go dancing in the street because that is how easy it is to add Open Graph tags using Yoast, at the bottom of the social page you’ll see this.  Add a Twitter card meta data.  Tick the box and put your Twitter name in there then click save settings, obviously.

It’s not quite that simple, let me show you first of all what a Twitter card is.  Whizz over to Twitter and scroll down.  You’ll see every now and then there’s a link from my blog.  Underneath there is a link to view summary.  When you click that view summary it shows you the Twitter card, which is a summary of the link.  In this case it’s a post on my blog, so if you click it goes to the blog.  It shows the Open Graph defined image and also a link back to me on Twitter.  So if this update was retweeted for whatever reason and it isn’t tagged with an @jankearney, all this information still goes with the Tweet.  It’s really quite handy, as well as giving you more information about what the link is. 

That’s on Twitter and it’s called Twitter cards.  However, you can’t just put your Twitter name in and tick the Twitter card box!  You do have to apply to Twitter to get the summary.  Apply at dev dot twitter dot com forward slash form forward slash participate dash twitter dash cards.  Sign in with your Twitter account, complete the form and wait for them to come back to you.  It takes a couple of days and once they do and if you’ve put the relevant code in your website header, which with Yoast is ticking a box and entering your Twitter name and clicking save then you’ll get the Twitter cards showing when you share content from your  website or blog on Twitter.

That’s it, I’m hoping you now see that Open Graph tags don’t need to be complicated, I recommend Yoast WordPress SEO to set them.  You can do it all on this page to set your defaults, and when you edit your posts, or write your posts, you can add extra information in the social section here.  You can define your image using the featured image setting that comes with most WordPress themes.