Any time you publish a blog post and go to share it on a social network like Facebook or Google+, the post preview box should come up and display the image that the network has found and chosen for your post. Sometimes it’s the image you wanted and sometimes it’s not. Hopefully, if it’s not the right image, the network has found several options for you to choose from and you can cycle through them to get to the right one. Unfortunately, not only do you waste a little time trying to select the right image, but there are often times when Facebook or Google+ fails to grab the image you actually wanted to share. Fortunately, there’s a way to force the networks to choose the image you want by default.
I had been having an issue for several days where, when sharing blog posts to Facebook and Google+ in particular, the networks simply refused to grab the default image for each post. I have a field specifically for blog images so that every blog post as least one image, and up until last week, I rarely had issues. Recently though, nothing I did would get the right image pulled in – not even as a choice among images. This results in social media posts that aren’t as interesting visually and potentially lost opportunities. I was not able to determine what changed within my site, but I was able to find and implement a protocol that specifically tells Facebook and Google+ what image to use. It’s called Open Graph.
Open Graph
Open Graph is a Facebook Protocol that links objects with Facebook and allows objects to interact with Facebook in dynamic ways. It was launched in 2007 as a standard for application development, but has since evolved into a format for integration across websites and devices. Open Graph implementation on a website involves the use of Meta Tags that look somewhat like this:
<meta property=”og:site_name” content = “The Social Media Hat” />
<meta property=”og:title” content = “Designating Images for Social Media Posts” />
<meta property=”og:image” content = “https://www.thesocialmediahat.com/sites/default/files/Social-Media-Post-Image.png” />
There are quite a few more Open Graph (og) tags that can be applied, but you can see in this example the key tag for this issue: og:image. By setting the og:image tag to be an absolute URL for your article image, you will dicate to Facebook what the post image is supposed to be.
Google+ supports the og protocol and will recognize this tag, so it will work for both social networks. This protocol, incidentally, is why the new Facebook search is called “Graph Search.”
Open Graph Implementation
Fortunately, implementing Open Graph is fairly easy if you have a Drupal site – even easier if I built it for you. You need to have the Nodewords (Drupal 6.x) or Meta Tags (Drupal 7.x) module installed, and that comes installed on every site I implement. Once enabled, you’ll need to go to Modules and enable the Open Graph sub-module.
Before your site will begin outputting OG tags, there’s one change you need to make to your theme’s page.tpl.php file. Insert this line of code into your <HTML> tag:
prefix=”og: http://ogp.me/ns#”
That is a variable and your HTML tag will include that variable along with several others, in order to validate your website.
You can now go into your Meta Tags settings and determine which tags you want to appear on node edit forms, and set default values for any of the new tags.
Open Graph Use
Once you’re set up, start a new blog post or article. Do everything that you normally would, and then open your Meta Tags settings section. You’ll now have a series of new fields correlating to each available Open Graph tag, including special Title, Description and Image fields. You can use the same Title and Description content you’re using for the article and other Meta Tags, but this also presents an opportunity for you to specify a unique description and title specifically for Facebook and Google+. If your site, like mine, automatically places the name of the site along with the article title as the Page Title, (like “Designating Images for Social Media Posts | The Social Media Hat”) you can set the og:title tag and when you post to social networks, your site name will no longer appear.
In the image field, paste in the complete URL for the image you want to use to represent this article. If you’ve uploaded or embedded an image into the article, you can save the post as a draft, and then right mouse click on the image and choose Copy Link to get the URL. Because you can put in any image from any URL, this also gives you a degree of flexibility. If you have an image for your blog post and want to use a different version on Facebook and Google+, just use the link for the alternate version. This can be particularly useful if you’re using an image in your blog that’s an extreme landscape format. Rather than let Facebook and Google+ incorrectly crop and scale your image to fit their square display format, you can edit your image yourself and provide the edited version to the networks.
If you have WordPress or another platform for your site, you’ll want to talk to your web developer about the best way to implement this tagging scheme.
I know this post has gone into a lot of technical details, and is Drupal-specific. Feel free to post your questions and issues and I’ll help as best I can.