facebook-preview

Facebook Preview Image, Title, and Description

In this post, I’m going to teach you how to make a few small changes to your website that will help you share your website content on Facebook in a beautiful format. If you link to articles published on bigger websites (that have people who are on top of this sort of thing already), you may take for granted having the correct image thumbnail, page title, meta description, and some other things we’ll address below.

If you’re still reading this, you may be in the category of “small(er) blog owner/operator who is just trying to keep up with the bigger websites but doesn’t want to get lost reading through Facebook documentation, and just wants an easier way to get this done”. When you post your content on Facebook, you don’t get the pretty picture and nice layout. No, instead, you get something like this:

facebooknoog

Introducing Facebook’s Open Graph

Maybe you have heard of Facebook’s open graph. Maybe you haven’t. The point is this: when you share content from your site on Facebook, their “crawler” will scrape the HTML of the URL that you are sharing. On a regular HTML page this content may be incorrect or incomplete, and because of this, the scraper might get (or miss altogether) your image thumbnail, page title, or meta description.

Because I write about WordPress, the examples I give later in this post will take advantage of PHP to generate dynamic content. However, if you do not have a WordPress website (or any CMS website — come on people, it’s 2015), you can still get these same results on a regular HTML page.

Facebook Documentation & Resources

Let me get this out of the way now. I’m not a huge fan of Facebook’s developer documentation, so I will not be simply copying and pasting their content on this blog. That said, I will provide links to the official documentation so should you choose, you can go and read that on top of this tutorial. Additionally, I will provide a link to a tool that we will be using later in this tutorial to make sure that our changes actually took on Facebook’s site.

We Start At The Head(er.php file)

Because what we are really talking about doing is adding meta data that Facebook pulls to generate link previews, we need to start where other meta data goes, which is generally at the head of your website. For WordPress users, this means opening your header.php file. If you are not using WordPress, open the file and navigate to the section where the <head> tag begins.

Inserting Open Graph Meta Tags

We’re going to start with the most popular tags (image, title, description). While there are other open graph meta tags that you can add, we won’t be covering those in detail today, although I will publish E-Socialite’s setup, and if you are able to follow this tutorial, you should be able to figure out how to add the other tags.

Adding the og:image tag

Copy and paste the following content after the opening <head> tag:

Interestingly, the code that came from Facebook didn’t work right out of the box (developer’s documentation). In order to get the image to take, I had to add additional properties, including link rel, type, and href.

You can go ahead and read through the image documentation I posted above, but I’ll summarize anyways:

  • There are two types of image previews: large images and small images.
  • LARGE IMAGES: Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
  • SMALL IMAGES: If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller (what I assume to be about 40% of the larger image).
  • The aspect ratio for images is the same across desktop and mobile news feed. Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in news feed without any cropping.
  • The minimum image size is 200px by 200px. If you attempt to use an image smaller than that, Facebook’s debugger tool will call you out on it (and then make you fix it).

I wish I didn’t have to say this but… make sure you change the content property’s value to wherever your image is located.

Now, if you desire to use your blog post’s featured image, you can do that with just a little PHP. Just remember, if your featured images are not at Facebook’s ideal ratio (1.91:1), your image may be cropped, and you will not be able to control that from your site. If you do want your blog post’s featured image to be the preview image on Facebook, enter the following for the content value of the <og:image> tag (don’t forget to mirror it in the href property).

If you want to give users the choice between a default image and a featured image (this is how E-Socialite is set up), you would make two versions of the <og:image> tag. The reason E-Socialite has it this way is because we can control the default images for pages (where there are not featured images), but give users the option to use a post-specific image when it’s appropriate (on a blog post). You’ll notice (at the end of this blog post) that in the E-Socialite example, we used a conditional statement to first determine whether or not there was a featured image. This is because if your post does not have a featured image, it will cause an error with Facebook.

Adding the og:title tag

Copy and paste the following content after the opening <head> tag:

This one should be pretty self-explanatory. Facebook doesn’t want you to add branding or extraneous information to the post title. Keep it clean (no counters, session info, etc) and you shouldn’t have an issue. What I did is provide an example where the title tag value will be whatever the title of the page is. Again, if you do not have a CMS such as WordPress, this can be whatever you want to manually type in.

Adding the og:description tag

Copy and paste the following content after the opening <head> tag:

The <og:description> tag is very similar to the title tag. You can either manually enter your content values, or you can use PHP to dynamically insert WordPress content like I did in the example (using the_excerpt function).

Making Sure It All Works

Remember that nifty debugger tool I talked about earlier in this post? Yeah, go there, and paste a URL of yours in there. Use this tool to see if anything needs to be tweaked. I actually think this tool by Facebook was pretty helpful. If you have issues, post them below in the comments. Either myself or another reader will probably jump in to help you figure it out.

E-Socialite’s Code

I did say that I would provide you with the code that we use. Take a look at the code below. To see it in action, pop an E-Socialite URL into the debugger, or try sharing a link on Facebook. You will see the image, title, and description generation that all stems from the open graph code below. You will notice that I put an If/Else statement in there to insert the featured image into the image open graph tag only if there is a featured image in the first place. I found that I was receiving errors if I just assumed it was there.

Conclusion

It’s not difficult to give your social media followers the best experience with your brand. It just takes a little customization and attention to detail on your part. By automating the open graph tag generation like we did in this tutorial, you’ll save time without looking like you took shortcuts. Thanks for reading.

E-Socialite Facebook Open Graph Tags

Comments