I just did a little freelance work for an old client yesterday. He had a squeeze page that had a YouTube video embedded into it. He wanted it so that when the URL to the landing page was shared/liked on Facebook, the image thumbnail would allow the playing of the video when clicked. That is normal behaviour for when we put a YouTube watch page URL into Facebook, but there are a couple extra steps to make it happen from our own site. It’s key that the URL linked to from the “share” on Facebook be the landing page URL and not the YouTube video URL.

In this article I will share a quick and dirty way to make this happen. I’ll explain how to do it in WordPress without a plugin, but the method can also be applied to any web page at all, even a static page.

You Need to Insert the Proper Open Graph Tags Into the Head of the Document

All it really is is a series of tags in the “head” section of the HTML. They aren’t visible during normal browsing, but when viewing the source code they will be there. The good thing is that once they are in place, Twitter and Google+ will pick up on them too. With that said, there are different tags that Twitter and Google+ default to and if you want a post to be shown differently on those two social sites, you have that opportunity.

This post is just about using open graph tags and more specifically having an embedded YouTube video playable when a link on your own site is shared to Facebook.

The tags to use in the head section of the document include:

  • og:title
  • og:url
  • og:description
  • og:type
  • og:image
  • og:video
  • og:video:type
  • og:video:width
  • og:video:height

Title, URL, Description, Type, and Image are the most commonly used Open Graph tags for almost any document type. For a standard blog post, the type is usually “article.” For videos, it is “video.” Simple.

Adding the Custom Open Graph Tags For Each Post or Page in WordPress

There may be other plugins, or even the theme that is attempting to include some of these tags for you. Verify if that is the case. They usually fall under the “SEO” or “Social” realm so look in those areas. For example, Yoast’s free SEO plugin includes some of these tags. His premium video SEO plugin is required to utilize this appropriately for videos though.

His free plugin will just create tags that make Facebook think the page is just an “article” even if a video exists. For this reason I say to disable Open Graph stuff from Yoast’s plugin if wanting to have a playable YouTube video inside of Facebook. Either that or buy his premium plugin, because it will take video SEO steps further than just Facebook.

Now, have a look at a post or page on your WordPress site then view the HTML source code. Do a “find” (usually Ctrl+F) for “og:” as this will let you know if there are any existing open graph tags in play. You may leave them as is or remove or disable them. Just try not to duplicate any of the tags (when placing the code below) or the results might not be as desired.

In the next part we will look at the code for a custom function in WordPress.