Customize your Social Media Post with Titles, Photos, and Descriptions

Follow

Do you want to share your Unbounce page on Facebook, Twitter, or LinkedIn? You’ll likely want to make your landing page look as great as possible - including a unique title, photo, and description. You can specify the content of your shared landing page by using some custom code called Open Graph Tags.

To see what this looks like in action, take a look at the two posts below. Both posts share the same Unbounce URL; one is optimized for social sharing, while the other is not.

FB OG Tags Before and After.jpg

Adding Open Graph Tags

To ensure your page has the correct content when shared across social media channels, follow the steps below.

  1. Find an image that you’d like to use for your share post. You’ll want to upload the image to a free external image hosting service, such as Amazon Web Services (AWS). See our article for more details about image hosting
  2. Take note and save the image URL from whichever hosting service you use, as well as the image dimensions (width and height in pixels). 

    Note:

    Your image should be at least 600 x 315 pixels – but if you can, try to use images that are 1200 x 630 pixels for the best display across most social networks on high-resolution devices.

  3. Click the Javascripts javascriptsbutton.png button in the bottom left of the Unbounce builder, and click +Add new Javascript to create an empty dialog box.
  4. Use our nifty Open Graph generator to quickly generate your open graph tags and paste the script within the dialog box.
    • Copy the code provided by the generator & paste it into your Manage Scripts dialog box.
  5. Or, copy & paste the following HTML code into the dialog box, and update the bolded values in the code with your Open Graph tag details: 

    <meta property="og:title" content="The name of your page goes here." />
    <meta property="og:url" content="The url of your page goes here (for instance: http://go.unbounce.com/openhouse/"/>
    <meta property="og:type" content="website" />
    <meta property="og:image" content="The url where you’re hosting the image you want to use goes here (For instance: http://yourimagehost.com/yourimage.jpg)" />
    <meta property="og:image:width" content="400 (add the width dimension of your image here)" />
    <meta property="og:image:height" content="300 (add the height dimension of your image here)" />
    <meta property="og:description" content="Your social media message goes here. (For instance: Check out my awesome Unbounce landing page!)" />

  6. Name your script and set the placement to the Head.
  7. Click the Done button to save your Open Graph tag script.
  8. Save and Republish your page.

You're all set; you can now share your fully customized social media post to the platform of your choice!

Note:

Though you must add this code within the Javascript section of the Unbounce builder, avoid wrapping the code with script tags (<script> or </script>). This can affect how social media sites crawl your page & search for these Open Graph tags.  

Refreshing your Open Graph Cache

If you've already shared your page on Facebook, for example, before implementing Open Graph tags, you'll most likely need to have Facebook update its cache by using Facebook's Open Graph Debugging Tool. Input the URL of your published page into the debugger and choose Fetch New Scrape Information. If the new information doesn't display in Facebook's debugger right away, wait 20-30 minutes and try again.

The same applies to LinkedIn and Twitter. Please use the following tools respectively: