Summer of Love This Week: Facebook Open Graph Integration

We love you. Really, we do. And this summer, we're expressing our love by rolling out hot new LightCMS features week after week. Can you feel it? I hope so because today we've got another great feature to announce. This is one I've been looking forward to for a long time.

What is Open Graph?

If you spend time with blogging and social media like I do, you likely know the significance of Open Graph tags. These are meta tags that can be added to the header of any web page to define certain things about the page such as its title, description, associated image ... etc. In theory, this data will then be consumed by any outside services utilizing the Open Graph protocol. In practice, the only reason anyone cares about this is because the Open Graph protocol is used by a little piece of software known as Facebook.

When someone shares or likes a web page, Facebook gathers information about that page by looking for Open Graph tags. It uses the information specified by these tags to determine how the Facebook story shows up on a Facebook timeline or elsewhere across the Facebook platform. Therefore, providing information about your page through Open Graph tags improves the way your page shows up inside Facebook.

Automatic, Out-of-the-Box Integration

LightCMS has always allowed you to specify Open Graph tags. You can do this by adding the code directly into your HTML templates or into the additional header field on any page's settings. Of course, this is a manual process and it also has limits when it comes to dynamic pages such as blog posts, calendar events, and product details. We also know that most users don't have time or desire to even think about these types of things. So, we wanted to create a solution that would provide automatic, out-of-the-box support for Open Graph across every page of a site.

Always On Unless You Override It

LightCMS now automatically generates Open Graph tags in the header of every page of your website (including dynamic pages) unless you manually override our tags. To override, you simply need to add an Open Graph tag of your own. You can add your tags in your templates or in your additional header fields. Either way, our system checks first to see if a particular Open Graph tag exists and, if not, fills in the holes with our own automatically-generated tags.

How We Handle Images

By far, the most common use of Open Graph tags is to specify the image used in a Facebook post when a webpage is shared or liked. Without Open Graph tags, Facebook tries to determine on its own which image to use, and the results are not always desirable. We set out to create a system that would automatically specify an image, or a set of images, that were likely to be your desired choices, while still providing you a way to dictate the image you want used.

It's important to note that if a page specifies multiple Open Graph images, Facebook gives the user the opportunity to choose the image they want but defaults to the first image listed. So, in our solution, we often provide multiple Open Graph image tags, with the first tag representing the image we feel is most likely to be desired. Here's how it works:

  • If you have uploaded a website logo on your Website Settings page, we always output that logo as one of the Open Graph images (unless you override with your own tags as described above). On the home page, the logo will be the first (default) image. On all other pages, the logo will be the last image in the list.
  • We also include additional images that we pull from certain elements on the page itself. We include one image per element (if the element has an image) as defined below:
    • The first image in any text element
    • The first image in any photo gallery or slideshow
    • The first image in any blog post
    • The first image in any calendar event
    • The main image for any product
    • For elements containing multiple blog posts, calendar events, or products, we will pull the image as defined above from the first post, event, or product in the list.
    • Images pulled from elements in the main content region will be prioritized over images pulled from other regions.

How Do I Make Sense of all this Image Business?

The bottom line is this — we will automatically select images for you, but if you want to ensure a particular image is used by Facebook, make sure it is the first image in the top element in the main region of your page. Also, upload a website logo if you want to ensure every page has at least one image.

Please note: at this time, Facebook does appear to require that images have dimensions of at least 50x50 and maximum aspect ratios of 3:1 in order to be included in Facebook stories. If your images don't meet these requirements, they will still be included as Open Graph tags (as described above) but they may not show up when shared on Facebook.

Other Tags We Support

In addition to the Open Graph image tag, we also automatically output the following Open Graph tags: Title, URL, Type, Site Name and, in some cases, Description. Here's a run down of these additional tags.

  • Title uses the Page Title, Blog Post Title, Calendar Event Title, or Product Title as defined in your settings.
  • URL uses the URL of the page removing any query strings that may exist.
  • Type uses "website" for the home page and "article" for all other pages.
  • Site Name uses the Website Name as defined in Website Settings.
  • Description uses the meta description content specified on the advanced tab of a page's settings. If this setting does not exist or is not specified, no description tag is output.

How to Test Your Pages

If you'd like to see how the new Open Graph tags make your pages look in Facebook, follow the instructions below.

First, pull up the Facebook debugger tool, enter your URL in the box and click "Debug." Facebook will show you all of the data it is pulling from your webpage. It will also show you the images it is pulling and list them in order (remember, the first image is the default).

Next, go to Facebook and paste your URL into the box as if you were going to share it with your fans or friends (you don't actually have to share it, just act like you are going to). Give it a second and Facebook will create a story out of the link. This story should use your title, description and images. If you have multiple images, you'll see a little tool enabling you to flip through and select the image you want to use.

If you want to change something, you can edit your LightCMS site to make the appropriate changes or even override the automatic tags with your own tags in the header. Then, be sure to run your URL through the debugger tool again before you try adding it to Facebook. The debugger forces Facebook to reset the cache for that particular URL so any time you change your Open Graph tags you'll want to run the debugger to be sure Facebook caches the updates.


We hope you enjoy the new Open Graph integration tools. If you have any further questions, please let us know in the comments below or you can also discuss on the LightCMS Forum as well.