When sharing content on social networks like Facebook, you want your posts to look polished and professional. Yet, many website owners face the frustrating dilemma of advertisements appearing as preview images for the shared links instead of the intended article visuals. This issue is widespread on sites that display ads alongside their content.
Such misplaced previews look unprofessional and distract from the article’s message. Readers may lose interest, and your click-through rate can drop significantly. For bloggers and businesses, this means losing potential traffic and engagement.
In this tutorial, I’ll show you how to ensure your articles always display the correct preview images on social media and no ads instead.
Table of Contents
Why ads do appear as preview images
The issue arises because social networks like Facebook, LinkedIn, or X (formerly Twitter) use “scrapers” to gather information from your website when someone shares a link. If your site doesn’t clearly specify which image to use, these scrapers just randomly pick one. This often leads to banner ads or irrelevant images being used as previews.
Without precise instructions, platforms may default to the first large image they find, often an ad banner. This misrepresentation reduces the visual appeal of your shared content, damages trust, and lowers click-through rates.
Fortunately, there’s a straightforward fix for this problem.
Setting the proper preview images
The best way to control how your content appears on social networks is by using Open Graph (OG) tags. These meta tags, placed in the HTML header of your webpage, provide clear instructions to platforms like Facebook about which image, title, and description to display.
Correctly implemented Open Graph tags allow you to fully control how your content looks when shared. This enhances the presentation and boosts your chances of engaging users and attracting clicks.
Open Graph tags explained
The most essential Open Graph tag for images is og:image, which specifies the URL of the desired preview image. Other essential tags include:
- og:title: The title of your content.
- og:description: A brief description of the article.
- og:url: The canonical URL of the page.
Follow these steps to implement OG tags manually:
- Add the Open Graph namespace to your HTML tag: <html prefix=”og: http://ogp.me/ns#”>
- Place the Open Graph tags within the <head> section of your HTML file like this: <meta property=”og:title” content=”The title of your content” />
- Use a unique og:image tag for each page and ensure the image meets Facebook’s recommended dimensions (1200✕630 pixels).
- Test your implementation using Facebook’s Sharing Debugger to ensure the tags are read correctly.
WordPress plugins for adding Open Graph tags
Manually adding Open Graph tags can be time-consuming. Several plugins simplify the process if you use WordPress.
SEO plugins for WordPress with Open Graph support
- Yoast SEO: Yoast is a comprehensive SEO plugin with Open Graph tag support, even in the free version. Its interface makes configuration straightforward for users at any skill level.
- SEOPress: Affordable and feature-rich, SEOPress provides excellent Open Graph tag options. It’s ideal for users who want to balance cost and functionality.
- The SEO Framework: This user-friendly plugin offers robust SEO tools, including Open Graph tag implementation, making it a solid choice for beginners and advanced users.
- RankMath SEO: A free yet powerful alternative with many features, including Open Graph tag support. Its intuitive interface makes it accessible for those handling complex SEO strategies.
Example of defining Open Graph tags with Yoast SEO
The Yoast SEO plugin makes it easy to add custom Open Graph tags, including a Facebook thumbnail, to any post or page. Here’s how you do it:
- Install and activate the Yoast SEO plugin. Once active, you’ll have access to advanced SEO tools for customizing your content’s social media appearance.
- While editing a post or page, scroll down to the Yoast SEO meta box below the content editor.
- Within the meta box, click on the Social tab. This section allows you to upload a specific thumbnail image for Facebook.
- Upload or select your desired image. Ensure it aligns with Facebook’s recommended dimensions for optimal display.
For instance, in our tutorial about affiliate marketing, we set a custom thumbnail using this method. The result ensures a professional and visually appealing preview on Facebook, drawing more clicks and engagement.
Dedicated Open Graph plugins for WordPress
Specialized Open Graph plugins can help if you don’t use an SEO plugin or your current plugin lacks Open Graph features.
- Facebook Open Graph, Google+ and Twitter Card Tags: A plugin for managing social media tags across platforms. It’s a great fit for users looking for precise control over their shared content.
- OG Plugin:This lightweight, focused option is explicitly designed for Open Graph tags. Its simplicity makes it perfect for those seeking a no-frills solution.
- Open Graph and Twitter Card Tags: This plugin manages Open Graph tags and Twitter Cards, ensuring your content looks great across both platforms. It’s straightforward to set up and use.
Conclusion
When ads replace article images as previews, they undermine the professionalism and effectiveness of your shared content. This can distract readers, lower engagement, and hurt your site’s traffic—a frustrating scenario for businesses and bloggers alike.
You can resolve this issue quickly and effectively by implementing Open Graph tags manually or through plugins. These tags give social networks clear instructions, ensuring your article links always look their best and garner the clicks they deserve.