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

Follow

Do you want to share your Unbounce page on Facebook, Google+, 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 are sharing the same Unbounce URL; one is optimized for social sharing, while the other is not.

FB OG Tags Before and After.jpg

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). Make sure to 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.

  2. Click the Javascripts javascriptsbutton.png icon in the bottom left of the editor. A new dialog box will appear.
  3. Copy the code below and paste it into your Manage Scripts dialog box and set the placement to HEAD.
  4. Edit the values in the HTML code, replacing the existing values your own personal link and image values. You’ll want to edit the portions in the code that are bolded here.  Remove the bolded portions and replace them with your own information: 


    <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!)" />

  5. Click the Save Code button.
  6. Save and Republish your page.

You should be ready to go to share your fully customized social media post to the platform of your choice!

Note:

If you've already shared your page on Facebook before implementing Open Graph tags, you'll most likely need to have Facebook update their cache by using Facebook's Open Graph Debugging Tool. Just put 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.


Was this article helpful?
4 out of 10 found this helpful