Vincent Webb

Not Your Average Blogger

How To Set og:image and og:title Meta Tags For Attention Grabbing Social Media Posts

One of the best sources of traffic is social media... facebook. twitter. pinterest. g+

The best way to get your website links clicked on social media is to have a great thumbnail image.

When you post a link on Facebook, it goes to your webpage and tries to find an image. There are things you can do to your website code to make it so that it finds the perfect image every time.

The tag we are talking about is in the header and it's called og:image. This only applies to posts on your personal fb page and in groups, on a fb fanpage, they let you upload the image seperately now. To make it work everywhere else you actually need a few different pieces of info, and this post will discuss what's required.


Creating Thumbnails

First, let's talk about actually creating the thumbnail image.

Personally I use photoshop. I own a license to the Adobe Creative Cloud which gets me access to this software, but I use Adobe products every day and it is well worth it for me.

If you are just blogging part time, you may not be able to afford an Adobe Photoshop license key. In that case you are in luck because there is a website that does 99% of what you usually need to do in photoshop, and you don't even have to leave your browser.

The site is: https://pixlr.com/editor/

Go there, select 'Create New Image' and enter in the following:

width: 1200
height: 627

Grab the paint bucket tool and fill the canvas with a bright color, or find some royalty free images that you can incorporate which illustrate your blog post.

Don't worry too much about making it perfect or the quality of the image you import. It's OK to make things bigger and lose a little quality, because it's going to get resized once it displays on facebook anyway..

Facebook has a rule about having only 20% of the image containing text. If you are planning on running any kind of facebook advertising, keep this in mind.

Images that look like they have a PLAY button appear to get the most response from the newsfeed, but again check Facebook's constantly changing advertising rules to see if you are still allowed to do that.


Example Social Sharing Meta Tags

Here is what the meta tags on one of my pages looks like:

<meta property="og:title" content="This 1 line of PHP code could be your key to building a huge team in any biz" />

<meta property="og:type" content="article" />

<meta property="og:description" content="What this line of code allows you to achieve is DUPLICATION."/>

<meta property="og:url" content="http://vincentwebb.com/this-1-line-of-php-code-could-be-your-key-to-building-a-huge-team-in-any-biz/" />

<meta property="og:image" content="http://vincentwebb.com/content/images/2014/Aug/yourkey.jpg"/>

Here is what each of these can do:

og:title- Yup, you guessed it, the title of your article/webpage.

og:type- I usually set to 'article' or 'website' does not seem to matter for this.

og:description- a nice short 2 line description of the content on the page.

og:url- the exact url (including any querystring parameters) that you will post to fb.

og:image- a url to your thumbnail image. to get the maximum area for your image, make it exactly: 1200 x 627.


Testing Everything

With those elements in place in the <head> of your html code, facebook, google+, and pinterest will be able to display awesome looking previews for your links every time.

To be sure everything is working correctly you can put your url into the Facebook Debug Tool:

https://developers.facebook.com/tools/debug

This tool is also useful if you update the meta tags and are still seeing the old tags. Putting the url into this facebook debugger form will clear Facebook's cache of the old data.


If You Are Not Able To Edit HTML

In some cases, you may be promoting an affiliate site url where you can't make modifications to the coding.

Not a problem, I've got you covered!

You can use this link shortner tool to set any image as your default thumnail image:

http://simple2post.com/

The tool is super simple and should be self-explanitory, just put in your url, info, and upload a picture. Then take the new url it gives you and use that as your fb post.

Please leave a comment below if this was helpful.

comments powered by Disqus