Have you ever written a blog post and then tried to post it to Facebook, only to have it format incorrectly or not display an image?
The Geek-Tips blog is powered by WordPress and leverages various plugins and customizations and, for the most part, functions without issue. When I finish writing a post, I like to post it to my Facebook page for my friends and family to read. Occasionally, when I try and post a new article, the results are not what I want. For me, the most common issue is that the image displays incorrectly, not at all or Facebook chooses an image that I don’t want to use and won’t allow me to modify its selection. So how does one go about addressing this issue?
A quick Google search reveals that Facebook uses Open Graph META Tags to identify key components of a post. Knowing this makes fixing the problem a cinch! I installed the “Add Meta Tags” WordPress plugin and then use the META tags outlined below to tell Facebook what information to use in my post:
The image META tag tells Facebook to use the specified image when the page is shared:
<meta property="og:image" content="http://geek-tipe.com/image.png"/>
The title META tag tells Facebook what title to accompany the URL:
<meta property="og:title" content="Facebook Open Graph META Tags"/>
The URL META tag tells Facebook what the proper URL is for the linked page:
<meta property="og:url" content="http://geek-tips.com/myurl"/>
The site_name META tag tells Facebook the name that you would like your website to be recognized by:
<meta property="og:site_name" content="Geek-Tips Blog"/>
Last but not least, the type META tag tells Facebook how you would like your site to be categorized:
<meta property="og:type" content="blog"/>
There you have it, now you know how to “force” Facebook to display your posts correctly.
Until next time – GEEK OUT!