0800 234 374
Contact ›
0800 234 374
Contact ›
‹ View all blog articles

How To Change Website Thumbnail in Facebook Post

Updated: Feb 11, 2019

Author:

When someone makes a post on Facebook that includes a link to your website, you may have noticed that Facebook will replace the URL with a thumbnail image, a title, and a description. These are called Open Graph Objects and they appear on several social media, not just Facebook. It's even been shown that open graph objects have a big affect on click-through-rates and conversions. So, let's explain how to change how your website link appears when it is shared on social media.

A unique open graph object can be set for each page of your website. Let's start with your homepage. Check how your website thumbnail appears when it is linked to on social media by entering your homepage URL into Facebook's Sharing Debugger tool. Alternatively, you can simply send a link to your website to anyone on Facebook Messenger. Don't like what you see? Ask your web developer to follow the instructions below to change your website's open graph objects:

  1. Choose the image you would like to appear as your website thumbnail and upload it to you website server. This image should be 1200x627 pixels and no more than 5MB.
  2. Add <meta property="og:image" content="X" /> to the <head> section of your webpage's HTML. Replace X with the URL of the image you just uploaded.
  3. Add <meta property="og:type" content="X" /> to the <head> section of your webpage's HTML. You need to replace X with a specified 'type' for your webpage (see the Full List of Open Graph Object Types). In most cases, this will be 'website' for general webpages or 'article' for blog articles.
  4. Add <meta property="og:url" content="X" /> to the <head> section of your webpage's HTML. Replace X with the URL of the webpage being shared on Facebook (this will not appear anywhere on Facebook, this is simply the link users will be sent).
  5. Add <meta property="og:title" content="X" /> to the <head> section of your webpage's HTML. Replace X with a relevant title that is less than 88 characters (including spaces). This title will appear bolded alongside your image.
  6. Add <meta property="og:description" content="X" /> to the <head> section of your webpage's HTML. Replace X with a description that is less than 200 characters (including spaces). Spend time writing your description as it has a significant affect on click-through-rates and conversions.

That's it! You can now use Facebook's Sharing Debugger again to see how it looks when your website is linked to or shared on Facebook. We recommend repeating for process for your homepage, and popular webpages and blog articles that are likely to be shared online.

Link Thumbnails for Wordpress Websites

If you manage a Wordpress site, then you can manage your open graph object using the Wordpress SEO Plugin by Yoast. If you're unfamiliar with installing plugins for Wordpress websites, follow this guide on How To Install and Set Up the WordPress SEO by Yoast Plugin.

Fully certified, year after year.

Our reputation goes hand-in-hand with our team’s dedication to best practice. As a registered Premier Google Partner, our team refreshes our certifications every 12 months — A tradition we started over a decade ago. To stay ahead, we are always looking forward to upcoming certifications for online advertising, website development and search engine optimisation.

Didn't find what you're looking for?

More

Ask our friendly experts a question:

We'll answer your question within 24 hours.

Blog  •  Terms  •  Privacy  •  110 Mount Eden Rd, Mount Eden, Auckland 1024  •  Mon–Fri 8:30am–5pm

© 2007-2020 Adhesion