Sharing your website on social media platforms like Facebook is a great way to increase engagement and visibility. However, one common problem that website owners face is ensuring the correct image displays when the website is shared. Facebook uses Open Graph (OG) tags to determine which image to display, and if these tags aren’t properly set, the wrong image (or no image at all) may appear.
In this blog post, I’ll explain how to ensure that your website displays the correct image when shared on Facebook, with a focus on websites built in WordPress, Wix, and Shopify. We’ll also explore how to use Facebook’s Sharing Debugger tool to troubleshoot and optimize your sharing setup.
Understanding Open Graph Tags
Facebook uses metadata from the Open Graph protocol to determine what to display when someone shares a link to your website. The essential tag for controlling the image is the og:image tag.
Here’s an example of how an Open Graph tag for an image looks:
<meta property="og:image" content="https://example.com/path-to-your-image.jpg" />When Facebook crawls your page, it looks for this tag to pull the image from your website.
How to Set Open Graph Tags in WordPress
WordPress is flexible, and there are multiple ways to control Open Graph tags.
1. Using SEO Plugins
SEO plugins like Yoast SEO or Rank Math simplify adding Open Graph tags, including the image. After installing one of these plugins, follow these steps:
• Go to the post or page you want to optimize.
• Scroll to the SEO section.
• In Yoast SEO, go to the Social tab, where you can upload the image specifically for Facebook.
• Ensure the image you select is at least 1200×630 pixels for the best results on Facebook.
2. Manually Adding Open Graph Tags
If you prefer to handle things manually, you can insert the necessary Open Graph tags directly into your theme’s header file.
To do this:
• Go to Appearance > Theme Editor in the WordPress dashboard.
• Edit the header.php file and add the following tags within the <head> section:
<meta property="og:image" content="https://yourwebsite.com/path-to-image.jpg" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Brief description of your page" />
<meta property="og:url" content="https://yourwebsite.com/page-url" />Save the changes, and these Open Graph tags will be included when someone shares your link on Facebook.
How to Set Open Graph Tags in Wix
Wix has its own process for setting up Open Graph tags.
1. Wix Page Settings
To ensure that the correct image appears when sharing a page, you need to:
• In the Wix Editor, go to the page you want to edit.
• Click on Page Settings.
• Under Social Share, you’ll find the option to upload an image for social media platforms.
• Select an image that meets Facebook’s recommended size of 1200×630 pixels.
Wix automatically creates Open Graph tags based on the image and details you set here.
2. Wix SEO Settings
You can also control the page title and description that appear when sharing through the SEO (Google) section in Page Settings.
How to Set Open Graph Tags in Shopify
Shopify users can also control the images displayed when sharing their products or pages on Facebook.
1. Product and Page Images
• Go to the Products or Pages section of your Shopify admin.
• For a product, scroll to the Media section and ensure you’ve uploaded a high-quality image that matches Facebook’s size requirements.
• For pages, you can use the Social Sharing Image feature found under Online Store > Preferences to upload an image.
2. Custom Open Graph Tags in Shopify
If you want more control or need to manually insert Open Graph tags, you can do so by editing the theme.liquid file:
• Go to Online Store > Themes, and click Actions > Edit Code.
• Find and open the theme.liquid file.
• Insert the following Open Graph tags into the <head> section:
<meta property="og:image" content="{{ product.featured_image.src }}" />
<meta property="og:title" content="{{ product.title }}" />
<meta property="og:description" content="{{ product.description | strip_html }}" />
<meta property="og:url" content="{{ product.url }}" />These tags will dynamically pull the appropriate product information when sharing on Facebook.
Advanced: Using Facebook’s Sharing Debugger
After adding the Open Graph tags, it’s important to test how Facebook reads your page. This is where Facebook’s Sharing Debugger comes in handy. The Sharing Debugger allows you to:
• See what Facebook pulls from your site.
• Identify and fix any errors with your Open Graph tags.
• Force Facebook to re-scrape your page after you’ve made changes.
How to Use the Sharing Debugger
1. Visit Facebook’s Sharing Debugger.
2. Enter the URL of the page you want to check.
3. Click Debug.
The Sharing Debugger will show you what Facebook sees when someone shares your URL, including the og:image, og:title, and og:description tags. It also lists any issues, such as missing tags or improper image sizes.
Force Facebook to Re-Scrape Your Page
If you’ve made changes to your Open Graph tags and want Facebook to update its cached information, click the Scrape Again button in the Debugger. This forces Facebook to refresh the image, title, and description.
Common Debugging Issues
• Image Too Small: Facebook requires the image to be at least 200×200 pixels. Ideally, the image should be 1200×630 pixels for the best display on both desktop and mobile.
• Missing OG Tags: If the Debugger doesn’t find the Open Graph tags, ensure that they are properly added to your site’s header and that there are no conflicting tags.
• Cached Data: If Facebook continues showing an old image, force a re-scrape to clear the cache.
Conclusion
Ensuring that the correct image appears when sharing your website on Facebook involves properly setting Open Graph tags. Whether you use WordPress, Wix, or Shopify, each platform offers built-in or customizable ways to manage this. After adding the necessary tags, always test your page with Facebook’s Sharing Debugger to confirm everything is working as expected.
By following these steps, you can make sure your website’s shareable content looks professional and appealing, which can improve engagement and click-through rates from social media.
Happy sharing!
Leave a Comment