thumbnail image

  • Using Facebook Open Graph META Tags

    When someone likes a page on your website or shares your site in a post, Facebook automatically includes a thumbnail image, title and description for the page. This is great, until Facebook finds that one unsightly image from the bowels of your site and decides to use that as your organization's social media banner.

    That being said, how do you control which image Facebook uses when your site is shared? How about the title and description? Read on.

    Facebook and Open Graph

    Open Graph is an API that allows developers to work with Facebook's platform in a structured manner. That is, it gives you a way to communicate with Facebook through the use of metadata, API calls, and other developer tools.

    When someone shares your page, Facebook looks for Open Graph metadata in your site's HTML that will help it describe your content – the thumbnail image being one of those pieces of information. Below are some basic instructions for defining the metadata necessary to specify the thumbnail image, title and description Facebook should use for your page.

    Specifying your Page's Thumbnail Image, Title and Description

    Step 1)

    Use the Open Graph debugger to see Facebook's recommendations for your specific page. This is a great tool for gaining insight into how Facebook sees your content. To use the tool, simply type in your page's full URL and hit the debug button.

    On the next page, you'll likely see some warnings like these:

    opengraph_errors

    Step 2)

    Now, open up your favorite HTML code editor and insert the following code between the <head> and </head> tags on your page. Replace the content sections with your own content, of course.

    <meta property="og:title" content="Awesome, Inc. – We're even more awesome.">
    <meta property="og:description" content="Awesome's mission is to take cool to a whole new level.">
    <meta property="og:image" content="http://YOURWEBSITE.com/YOURIMAGE.png">
    <meta property="og:image:secure_url" content="https://YOURWEBSITE.com/YOURIMAGE.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1500">
    <meta property="og:image:height" content="1500">
    You'll notice that the image width and height are 1500x1500 pixels, which is what Facebook recommends. The minimum image dimensions you can use are 200x200 pixels. If you go any smaller, Facebook will ignore your recommendation and use a different image from your page.

    Also, specifying the og:image:secure_url meta property is optional. If you don't have an SSL certificate installed on your site, simply skip this step.

    Step 3)

    Run the Open Graph debugger on your page one more time. This will force Facebook to scrape your page's content and update their database with your updated metadata!

    That's it for now. You can find more information on Open Graph and images here.

1 Item(s)