Docs
How to generate site preview as OpenGraph social sharing image for Yoast SEO

How to generate site preview as OpenGraph social sharing image for Yoast SEO

When you share a post or page from your WordPress site on social media, having a polished "link preview" image matters. Using your own image gives you control over branding, clarity and click-appeal. With our Full Page Website Screenshot tool at Watchero and the Yoast SEO plugin, you can streamline this process.

What the Watchero tool does

At Watchero's "Full Page Website Screenshot" tool you paste a publicly accessible URL and the tool captures the top 1200×630px portion of that page (desktop viewport) and produces an image you can plug into your og:image meta tag In other words: you get a ready-to-use, optimised snapshot of your page for use as the social-sharing image.

How Yoast SEO handles OpenGraph tags

By default, Yoast enables OpenGraph meta tags (for Facebook, LinkedIn, Twitter etc). (Yoast) Yoast outputs tags such as og:title, og:description, og:image, og:url, and others. (Yoast developer portal) Within a specific post or page, you can override the default social preview image (and title/description) via the Yoast Social tab. (Yoast)

Why combine the two?

Using Yoast alone is fine, but you might want to visually enhance your social shares by controlling exactly which image appears, and ensure it matches your brand/design. The workflow becomes:

  1. Use Watchero to generate a clean, sized image snapshot of your page.
  2. In WordPress (with Yoast enabled), set that image as the "Social image" for that post/page.
  3. When the link is shared, the og:image tag points to your tailored screenshot, so the social preview looks exactly how you intended.

Step-by-step: How to do it

Here’s how you can implement this on your WordPress site:

  1. In your browser, visit the Watchero's Full Page Website Screenshot tool.
  2. Paste the public URL of the post/page you want to generate a preview for. (Important: the URL must be accessible without login).
  3. Click Generate preview. The tool will capture the top 1200×630px of your page.
  4. Download the resulting image.
  5. In your WordPress admin, go to the post/page editor for that content.
  6. Scroll down to the Yoast SEO meta box. Click the Social tab (or the section labelled "Facebook / LinkedIn" etc).
  7. There, upload/select the image you downloaded from Watchero as the "Facebook share image" (Yoast may call it "Image for social media" or similar). Also check the title and description fields – you can override them here if needed. (Yoast)
  8. Update/publish the post.
  9. (Optional but recommended) Use a social-sharing debugger (for example Facebook’s Sharing Debugger to scrape the URL. That ensures the social networks fetch the latest meta tags and image.

Practical tips & caveats

  • Make sure the image from Watchero is accessible (i.e., once uploaded to WordPress/media library or hosted somewhere publicly reachable). If the image URL is blocked or redirects weirdly, social platforms might fall back to another image.
  • Social platforms cache previews. If you change the image after initial share, you’ll likely need to "refresh" via their debugger.
  • The 1200×630px size is a good guideline for high-quality preview images. If your image from Watchero looks blurry or cut off, consider adjusting the content on the page or using a dedicated image designed for social.
  • If you use a featured image (set via WordPress) that’s automatically pulled by Yoast, you might skip the Watchero step - but if you need to demonstrate something (e.g., product snapshot, screenshot of your page, branding overlay) then the generator adds value.
  • If you have caching or CDN layers, ensure the image’s URL is correctly referenced in the HTML og:image tag output by Yoast. Sometimes themes/plugins override or filter this; verifying the source via "View source" is useful.

Summary

Combining Watchero's Full Page Website Screenshot tool with the Yoast SEO plugin gives you both visual control (via custom screenshot image) and technical control (via meta tags) over how your content appears when shared. This is particularly useful when you want consistent branding or need a specific layout in the social preview. Try it the next time you publish a key article or page - it’s a small extra step for potentially higher engagement on social channels.


We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.