Changing the image that shows up when you share a link on Facebook is a great way to catch more attention and clicks. Those preview images are often the first thing people see before deciding whether or not to click through, so having an eye-catching and relevant image can make a big difference in engagement.
How Does Facebook Generate Link Previews?
When you share a link on Facebook, whether through a post, comment, messenger, or anywhere else, Facebook's crawler will scan the destination web page to pull content for the preview. This content includes the page title, a description excerpt, and an image.
Facebook looks for special Open Graph metadata tags in the page code to determine what to display in the preview. For example, the
og:title tag defines the title,
og:description provides the description text, and
og:image specifies the image to show.
If these Open Graph tags are not present, Facebook will try to pull a title from the
<title> tag, a description from page text, and images from the content. However, it's best to explicitly define the preview content with Open Graph tags.
Once Facebook scrapes this data from a page, it caches the information to show the same preview in the future. It doesn't re-scrape the page every time the URL is shared to conserve resources. This means that if you update the metadata tags, the preview won't change until Facebook reindexes that page.
Customizing Previews for Your Own Website
When you share links from your own website on Facebook, you have full control over the preview content. Here's how to optimize your website for great link previews:
Add Open Graph Meta Tags
Include Open Graph meta tags in the
<head> of your pages to specify exactly what you want shown in the previews:
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description shows up here in preview" />
<meta property="og:image" content="URL of image to show in preview" />
You can use the Facebook Sharing Debugger to test how your pages will look when shared.
Make sure to define OG meta tags on every page you want to have a custom preview.
Optimize OG Image Tags
When you specify
og:image, also include
og:image:height so Facebook can render the image immediately without having to asynchronously download and process it.
Use images that are at least 1200 x 630 pixels for optimal display on high resolution devices, but 600 x 314 pixels is the minimum size. Larger images will be scaled down.
JPEGs and GIFs work best. Facebook compresses and converts images to JPEGs so sticking with that format avoids double compression.
Update Tags to Change Previews
When you update the Open Graph meta tags on your pages, Facebook will eventually pick up those changes and update the cached preview data.
However, it usually takes a while for Facebook to re-scrape and reindex pages. You can force Facebook to re-scrape immediately using the Sharing Debugger by clicking "Fetch new scrape information".
So when you change preview images or metadata, go to the debugger, enter the URL, and fetch new data. You'll then see updated previews.
Use WordPress Plugins
If you use WordPress, plugins like Yoast SEO make it easy to set up Open Graph metadata for all your site pages automatically.
The Yoast plugin has settings for defining a default preview image, customizing titles and descriptions, and outputting the proper OG meta tags in your site.
Modifying Previews for Existing Facebook Posts
For links that have already been shared on Facebook, you won't be able to update the previews by changing metadata since those posts are already cached. However, there are a couple ways to override the existing previews:
Verify Domain Ownership
Facebook allows you to claim ownership of your website domain in Facebook Business Manager. Once verified, you can access options for editing link preview information from previously shared posts.
To verify, go to Business Settings and choose "Add Property". Select "Website" and enter your domain name.
After following the verification steps, you'll be able to edit cached link data and see the changes reflected in old posts.
Share New Post with Image
Whenever you share a link on Facebook yourself, you can choose the image that will show up in the preview.
Upload or select a new image when creating your post, and that will override the default preview pulled from the page metadata or content. Other users will now see your custom image when they view the post.
This only affects that specific post - all other shares of the URL will still show the default preview unless you edit it through domain verification or change the actual metadata.
Best Practices for Optimized Link Previews
Here are some top tips to ensure your link previews look great every time:
- Put important text, headlines, and keywords near the top of your content since descriptions may be truncated.
- Craft titles and descriptions that grab attention and summarize the essence of the content.
- Use consistent OG data across your domain to avoid unexpected previews. Follow Facebook's Open Graph guidelines.
- When possible, provide images at least 1200 x 630 pixels for optimal quality. The minimum is 600 x 314.
- Test all your pages with the Sharing Debugger and validate they pass Facebook's scraper.
- For WordPress sites, use a well-configured SEO plugin to auto-generate preview metadata.
- Periodically fetch new scrapes on important pages so previews update after changes.
- Stick with JPEGs and GIFs since Facebook compresses to JPEG format anyway.
- If previews look wrong, upload your own image when sharing the link or verify domain ownership.
With the right preparation, you can ensure your Facebook link previews make that vital first impression count, capture attention, and drive clicks to your site. Follow this guide and you'll be leveraging the power of compelling Open Graph images in no time!
Customizing Your Own Link Previews
One easy way to customize preview images for your website is by using our service at OG Image. They will design attractive Open Graph meta images for your pages and handle all the technical implementation.
With OG Image, you provide your site URL and they'll set up optimized OG tags and hosting for every page. You can pick a template or have custom images designed. This saves a ton of time compared to manually creating images yourself.
We offer unlimited images, dynamic URLs, hosting options, and more. It's ideal for Shopify stores, WordPress sites, Webflow pages, and any website seeking better social sharing.
Right now, we have a special offer for new users with 40% off the first month and other perks. Learn more at our site if you want professionally designed custom link preview images that require zero effort on your end.