fbpx

25% OFF ALL PLANS FROM NOW UNTIL JANUARY 15 – USE CODE NYEDGAR25 IN CHECKOUT

Facebook’s Link Previews: What You Need to Know About Creating Your Own

Don’t you hate it when you try to post a link in a Facebook post, and the image in the preview ends up looking like this:

B-o-o-o-o-ring.

Where’s the image, right?

It’s supposed to be there automatically!

This all comes down to metadata.

Which, admittedly, doesn’t sound like a very exciting topic.

It affects everyone, though – including you!

Think of metadata like your website’s DNA – coded information that determines how a network like Facebook sees the pages on your site. And just like DNA, if you change the information in that code, Facebook will see those pages in different ways!

If you want your Facebook links to look as good as possible, then you’ve gotta know how certain parts of your metadata work.

We’re gonna cut through all the technical details and give you the short version of what matters in your metadata, so you can make sure your Facebook link previews generate those beautiful images you’re looking for every time!

Which means the part of your website’s metadata that we’re focusing on is Open Graph meta tags.

(Not into coding? Don’t worry – we’ve got some easy plug-and-play shortcuts we’ll share, too.)

Here’s how it all works!

What are Open Graph meta tags, exactly?

By definition, Open Graph “enables any web page to become a rich object in a social graph.”

Which is really just a fancy way of saying it turns this

…into this:

OG tags are what allow Facebook to take a boring ol’ URL and transform it into a beautiful link preview.

Link previews are more eye-catching and clickable than plain URLs – by giving your link an image, title, description, and more, you’re providing people with the contextual information that’ll make them want to click.

(Because these days, link trust is one of the most important factors when you’re trying to get traffic from social media.)

OG tags live in the code for every page and post on your website. Here’s what they look like for that update above (we highlighted the text that corresponds to different parts of the link preview):

In the past, this has been about as complicated as it got – but in 2017 and 2018, Facebook has made changes to how to share a link on Facebook, including how link previews and tags work.

(Long story short, it’s mostly related to fighting the spread of fake news – which is a pretty good priority, even when it makes things like this slightly more involved.)

Facebook wants to make sure that it only pulls the most accurate information when generating link previews and an image preview, which is why it generates the previews it displays in the News Feed using information it gathers from your site’s metadata.

In their own words:

“When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won’t see a rendered image.”

Translation: when you add a link in a Facebook post for the first time, Facebook hasn’t yet cached all the information it needs to generate a preview – therefore, Facebook can’t create the image preview you expect until someone shares your link a second time.

Fortunately, there are two ways you can get around that.

Here’s what you need to know:

How to share a link on Facebook

The first method is to add an additional piece of information to your OG tags: the height and width of the image preview you want in the link preview.

When you add og:image:width and og:image:height to your existing Open Graph tags, it gives Facebook just enough information to generate the image preview you want, even the very first time a link is shared.

Not into coding? Not a problem – there’s another option.

The second method for making sure your link previews work is to use Facebook’s Sharing Debugger.

The Facebook debugger is a very handy tool. When you plug a URL into this tool, it pre-loads all the information Facebook needs in order to generate a link preview in the future. Facebook stores that info, and then when you get around to actually sharing the link, they’re able to generate the preview – even the very first time you share it.

Here’s what that looks like in action.

Earlier in this post, we showed you an example of a Facebook update that couldn’t properly generate a link preview with an image:

The reason it didn’t generate an image preview is because that link had never been shared on Facebook before.

If we wanted, we could dive into that page’s metadata and add the og:image:width and og:image:height tags to our Open Graph tags.

The simple alternative, though, is to use the Facebook debugger. Just pop the URL for that page into Facebook’s Sharing Debugger. When we do, Facebook shows us the link preview that they’re now able to generate:

And when we try to share that URL on Facebook again after using the Facebook debugger, we can see that they’re now able to generate a preview that includes an image:

Ta-daa!

So bada-bing, bada-boom – we have one little extra step to our social sharing workflow.

Now, whenever we publish a new blog post, we just plug the URL into Facebook’s Sharing Debugger as soon as it’s live, and we know that the link preview will generate an image preview without a hitch when anyone (including us!) shares that URL on Facebook.

(And if it means less fake news and inaccurate link previews in the News Feed, it’s a step we’re pretty glad to take.)

Now, let’s say you plug your link in the Facebook Debugger, but the image preview doesn’t look the way you want.

There’s a way to fix that, too!

Customizing your link previews with plugins

If you want to customize the different elements of your link previews, like the image or the meta description, you can do that by hand by editing your OG tags.

If the thought of going elbows-deep into your site’s metadata makes you feel squeamish, though, we’ll make one thing nice and clear:

You do NOT need to know how to code to customize your link previews.

You just need the right plugin!

Adding a plugin to your WordPress site makes customizing this stuff ridiculously simple. Here at MeetEdgar, for example, we use the Yoast SEO plugin. It even gives you a little preview of what your text will look like!

Seriously – so much easier than dealing with metadata.

As for the image preview that shows up in your link preview, WordPress gives you the option to add a Featured Image to your post. The image you choose is the one that Facebook should pull for your link preview!

(Note: The location of the Featured Image you choose for a post depends on your blog’s layout. For example, when we choose a Featured Image, it appears in the header of that post. Here’s the post we’ve been using as an example if you want to see for yourself!)

Keeping up with Facebook’s changes

So there you have it – an easy-as-pie primer on Open Graph meta tags and how to get a link to a Facebook post.

Whether you use the sharing debugger or manually adjust the code when you you put a link in a Facebook post, it’s still pretty easy to point Facebook in the right direction regarding what you want, whether or not you have a ton of technical know-how – so make sure you’re adjusting your workflow accordingly!

Social Share
Categories

Get Actionable Social Media Advice (And Not Too Much of It!)
Get EdgarNews, your monthly social media to-do list, delivered straight to your inbox.

Never Run Out
of Stuff to
Post on Social

MeetEdgar scheduling software automatically pulls posts from your content library to keep your social fresh everyday, on repeat.

32 Comments
  • Finntegral

    Thank you for this article. I have the Yoast SEO plugin installed and the correct image and the correct Facebook description are shown – but the problem is that even a short Fb description is not shown completely. The description is cut after only about 60 characters, followed by three dots to indicate that the entire description didn’t fit in. This problem didn’t occur earlier; only very long descriptions failed to be shown in full. Any ideas?

  • Grant Dahlke

    I was ready to give up on images and even using the Debugger. Why? Several warnings and errors popped up in it when I pasted the URL. BUT, I hit the “scrape again” button that’s kinda hidden and not explained and VIOLA….the blog post image appeared. I tried the URL again in a scheduled FB post and bam…there’s the image. THANKS for this awesome tip…my posts look great again!

  • kevanboone

    Hi. I have 80000 skus on my Shopify store. It would be nearly impossible to put each link in the debugger to ensure the proper image is shared, or any image at all for that matter:( Is there a way to bulk upload all of the potential links on my site to the debugger or alternative to ensure that its correct the first share? Its truly a chicken before the egg thing. If someone doesn’t share it for the first time because there is no images associated and this turns them off from sharing it, then it never gets shared, and then Facebook will never be able to populate this correctly. This is my Shopify store address if this helps to answer. Thanks for the blog! Best one I have read on the topic. https://believerworldwide.com/

  • Sarie Doty Beckett

    I put the og meta tags in with the absolute path to the image but when I click on the “Share” button for facebook the image that shows up is the website logo, not the product picture. Any ideas?

  • Tom VanBuren

    Good question – but not one we can answer with any authority! You might be better off going right to the source and checking with Hootsuite on that one.

  • Teresa Martin

    Why can’t you just click the + sign and add an image? Seems like that would be the easiest way. What would be the drawbacks to that?

    • Tom VanBuren

      You absolutely can, if you’re posting natively! That, however, is the drawback – if you’re posting using a scheduling tool, you may not have that option, which is where tags and the debugger come in. (Basically, it’s the difference between doing everything manually, and having certain things happen automatically.)

  • Wren

    I’ve tried the debugger and its not working. Other articles on my site have posted just fine, but this one is not working, please help!

  • Marc Thomas

    This is really well written and simple to understand, so thanks!
    I’m trying to find a preview solution for my WoltLab website/forum but a plugin doesn’t exist yet. How easy would it be for a dev to write one?
    Cheers.

  • Andrea Wilson Woods

    I read that Facebook is implementing this strategy with ads. Is it true? If so, advertisers will no longer have control over the headline, ad text or photo! It will all be dependent on the URL. What a nightmare. Please advise.

  • Tom VanBuren

    Hi Will! If you’ve added a Facebook link to the library, changed the title/description in the preview, and deleted the actual URL from the update, that update should still publish to Facebook with a link preview – it’ll just be with the default info that Facebook scrapes automatically, rather than the version you manually created inside Edgar.

  • Christina Meagher

    Hi, any recommendations for plugins that work with SharePoint? Or how to customize the OG tags on a SharePoint site (easily)?

    • Tom VanBuren

      Afraid we don’t use SharePoint ourselves, and can’t really claim much expertise with it – if any other readers do, though, feel free to jump in!

  • Tom VanBuren

    You’re completely right, and this is a perfect example of a legitimate use for this feature. It’ll be interesting moving forward to see if/how Facebook amends this policy to accommodate this sort of thing!

  • Isn’t the featured image set by the WordPress user? On the right hand side of
    the post editing (where you also add the category and tags for the
    post). That’s what I keep doing, and our featured image is not always
    the top one. So far it hasn’t failed me, neither on Facebook, nor on
    Google+ or Twitter.

    • Tom VanBuren

      Exactly! Where the featured image shows up on the actual page itself depends on your WP layout, but it should be the one that Facebook scrapes for your link preview regardless.

  • Rachel

    I am still able to customize my Facebook link previews directly in my scheduling tool AND directly on Facebook. Is this something that will be rolled out slowly in the coming months?

    • Tom VanBuren

      Hi Rachel! Facebook actually announced this back in April, with a 90-day deprecation on customizing link previews – which puts it right around mid-July. So even though it isn’t necessarily rolling out everywhere at the same exact time, you can definitely expect this feature to disappear from more and more places in the immediate future.

  • Tom VanBuren

    Hi Steve! Good question – here’s what to expect:

    1) If you added a link to a Facebook status update and didn’t manually change anything in the preview, it should continue to appear the same way it always has when posted.
    2) If you added a link to a Facebook status update and manually customized the title and/or description, the customized version(s) should be replaced by whatever Facebook scrapes (i.e. OG tags) when the update is posted.
    3) If you added a link to a Facebook status update and manually customized the image (i.e. uploaded your own), Facebook should post that update as an image post, with the update you wrote as the caption.

    We’ve recently added a new Preview feature to Edgar, so you can see what you should expect an update to look like when it’s posted. Here’s how that works: https://help.meetedgar.com/video-tutorials/preview-your-posts-before-they-publish

    And if you’d like some personalized assistance with the content saved in your own account, our team is here to help! You can shoot an email over to [email protected], and we’ll be able to sort through the changes with you.

    • Hey Tom, thanks for the reply as I had the exact same question. Anyway: We previously shared one article with up to 5 different Images/Previews. From my understanding this will not longer work as all of them will default to the values of the open graph tags on the actual article.

      Do you know if there is another way to share one article with several different images? I know that Facebook caches Open Graph Tags and they are not updated until you do so yourself with the Facebook Debugger. So creating a Plugin which randomly switches the value of the Open Graph Tags wouldn’t work. I feel that we are now loosing on a lot of potential as people previously might have clicked on one image but not another for the same article.

      • Tom VanBuren

        Really good question! You’re right – Facebook is going to default to the values of the open graph tags on the actual article. To alternate the images used in the link preview for a URL, you would have to change the tags, then use the debugger to clear the cache, just like you said. It’s possible, but it’s also a not-inconsiderable amount of manual upkeep.

        Basically, the short version is that there isn’t a legitimate shortcut for accomplishing what you want to do, because it’s a behavior Facebook is specifically trying to discourage. Their reasons for doing so are understandable, but in situations like yours – in which the reasons for wanting to customize the preview are perfectly legitimate – the new policy is rather hobbling. Hopefully in the future, they’ll develop some kind of middle ground that regulates this feature without completely eliminating it.

Leave a Reply