News feed link previews: How to make them display correctly
Have you tried to post a news feed link to your website on your Facebook page, and no matter what you do an image won’t show up? Or almost as frustrating, the image displays but is cropped terribly, or a seemingly unrelated image shows up? This is because Facebook is pulling the meta data from the website URL. This metadata tells Facebook whether or not to show an image, what the image should look like, what the heading is and what the description is. It is crucial that your link displays correctly on Facebook in an optimised way as people will be much more likely to click on the link. Fortunately there are a few things you can do to ensure your website link previews on Facebook are displaying exactly as you like.
Changes to news feed link posts on Facebook – As of July 2017
Prior to July this year, Facebook gave everyone the ability to edit the headline and description of news feed link previews. They also allowed users to upload a custom image to replace the automatically generated one when you copied a link into your Facebook status.
This editing feature was removed as of July 2017 to combat the rise of “fake news”. Whilst disabling modification of news feed links prevents fake news distributors from using bait and switch strategies, this also prevents legitimate users in updating links as stories evolve, and removes the ability to provide A/B testing based on link preview content. Luckily the latter two points can be achieved through Facebook’s power editor and editing is still enabled on the caption of the links providing a space for updates. Now you know why you have lost the ability to edit your newsfeed link previews I’ll tell you how to control how they display on Facebook.
Your website’s metadata controls your News Feed Preview Link
Your website needs to be marked up with what developers call open graph tags. These tags take control over how your content appears on Facebook. These tags explicitly give the Facebook crawler the information it needs to display the title, preview image and description you want. Without the tags the Facebook crawler is forced to make a best guess about what these elements should be. This usually results in a less than ideal link display as shown below. You can find out more about open graph tags for Facebook previews here.
Introducing Facebook’s Sharing Debugger
Facebook has an awesome online tool called the Sharing Debugger. This tool shows you exactly how a URL will display on Facebook when it is shared. The crawler does this by reading the specified meta data and will even show you which metadata elements it is reading and if it finds any errors. The debugger also triggers a scrape of your page. This means if you have errors in your HTML you can use the debugger to update your content for Facebook once you have fixed the errors. See the example below of a link from my website.
Changing your Metadata to optimise your News Feed Link Preview
Facebook rewards optimised posts. It want’s it’s users to provide quality content to Facebook users. In line with this Facebook recommends users adhere to the following:
- Headline titles should be clear and do not include branding or mention the domain
- URL should not include extraneous information e.g session data that changes user to user
- Description should be clear and approx. two sentences long
- Images should be at least 1200 x 630 pixels to display correctly on high resolution devices
Note: If you are using an image smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller. If your image is smaller than 200 x 200 px it will cause an error in the sharing debugger and will not display.
How to Change your Website Metadata
Changing your metadata will be a different process depending on what website platform you use. If you have a website developer they will be able to do this for you. Other platforms such as Wix or SquareSpace usually have built in processes through which it produces the metadata. I personally use wordpress.org which is great as it works seamlessly with the Yoast SEO plug in (shown below). This plug in has a really useful social feature. It lets you manually write what you would like the title and description to preview as on Facebook. It also allows you to upload a custom photo which will override the default set preview image for your website pages.
Now you know how Facebook reads and develops a news feed link preview for your website links. If you have any additional questions feel free to reach out in the comments below! Good luck in optimising your content for Facebook!