[How-to] Choose the Image, Title & Description When Posting Unbounce Pages to Social Media


#1

For the most part, your landing pages will get the majority of their traffic from targeted ads and marketing campaigns that allow you to have complete control over the traffic quality. But what if you wanted to share your pages on social media?

By default, each social network will attempt to guess which content to grab from your landing pages, which is obviously not ideal as it often scrapes the wrong information.

Luckily, there’s a simple way to override which content is scraped from your landing pages and optimize your pages for sharing by utilizing something called the Open Graph Protocol.

Facebook-2014-03-03

This can be particularly handy for campaigns that involve a contest, or an event where you specifically want others to share the page with their respective networks on Facebook, Google+ or LinkedIn.


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Instructions

To set this up on your Unbounce landing pages, just follow this simple step-by-step guide from our documentation and press publish. It’s that easy!

:link: Optimize Your Landing Pages for Social Sharing (ex. Facebook Images)

Bonus Tips :bulb:

Want to see how your links will look when shared across various networks? Try these third-party preview tools:

  • iFramely Debug your URLs against oEmbed, Twitter Cards, Open Graph and Iframely specs
  • OpenGraph Check Check your tags and see the results immediately.

If you followed the steps above but still see the old image/copy being shared, it’s likely because the information is cached on the social network. Here are a few quick fixes for some of the more popular networks:

  • For Facebook, simply use their Sharing Link Debugger
  • For Twitter, their process is a bit more complicated. See their Refreshing your Image Card docs.
  • For LinkedIn, the only way to “clear” the sharing preview cache is to trick LinkedIn into thinking your page is a different (and new) page. Basically you just have to add a made-up parameter to the end of the link. Luckily, this doesn’t affect your link in any way, but it does force the metadata to be re-fetched.

Example:
Original link: http://yourlandingpage.com/awesome-contest
"New" link: http://yourlandingpage.com/awesome-contest?1


Can’t see the instructions? Log-in or Join the Community to get access immediately. :rocket:


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


Facebook OG tags
Facebook OG Tags Not Working :(
Open graph 'image' tag not working for Facebook sharing
Image Thumbnail/Preview on Landing Page
When my page is liked how do I control the image posted?
How to add google plus OG tags
How to add og: tags to landing pages?
Open Graph :: Rich Images, Descriptions, Social Sharing, Etc
The Ultimate List of Unbounce Tips, Scripts & Hacks
Trying to share a landing page on Facebook but the title & description is all wrong
The Ultimate List of Unbounce Tips, Scripts & Hacks
Help Background Image
#2

I follow all this steps, but nothing happened.
The image appears like that for me, I left even with the information of the tutorial but even so it does not appear anything.

image


#3

Hey Rafael!

A good place to start would be to paste your page into this Facebook debugger.

It might give you a bit more insight into why you’re not seeing what you want. Let me know how it goes!


#4

Great tips above. Wanted to share a tool that might be helpful to others in the community. Unfurls is a platform to preview and optimize your website meta tags. There’s a meta tag builder and a tool to preview how your website will look on 12 platforms. Links below

https://unfurls.co/lookout/ - run a test on your page
https://unfurls.co/lookout/website-preview-builder-meta-tag-generator/ - build previews for your landing page

Feel free to send me a message if you need a hand! =)


#5

Same here, how didi you solve that Rafarquim?


#6

Hey Jess, I have the sam Problme as Rafurquim has had. We defined everything properly and it works on all other medias like twitter, whatsapp, etc. just not on facebook. why is that?


#8

I’m having some troubles with mine too. I uploaded my image to Amazon Web as suggested: Working here: https://s3-ap-southeast-2.amazonaws.com/breastfeedingimages/guide2.jpg But then I get an error in FB. The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.

This is the script i’m using.

Any ideas?


#9

Hey @James3333,

Your issue is most probably related to the policy/security/authorization of that S3 bucket.

Of course, try to re-scrape the page a few times because some times the FB Debuger might be a bit buggy.

Best,
Hristian


#10

Thanks so much Hristian, that was the problem indeed! All fixed now :slight_smile:
Thanks again!
J