Dragan Atanasov

Posted on Aug 1

We built a free tool that generates an Open Graph image from your page

#showdev #seo #productivity #opengraph

Open Graph images are one of those things that are easy to forget until you share a link and notice that the preview looks wrong.

Maybe the image is missing, the title is cut off, or the preview uses something generic that does not really explain the page.

I’ve worked in e-commerce for more than 15 years, and social sharing previews are still one of the most commonly neglected parts of a website.

Teams usually spend a lot of time improving product pages, SEO, performance, and checkout flows, while the image shown when someone shares a link is often missing, outdated, or reused across the entire website.

On a few projects where we implemented even a relatively simple Open Graph image, we observed an increase in conversion from shared traffic.

It was not a complicated redesign. The preview simply communicated the product or page more clearly before the visitor clicked.

That experience is one of the reasons we added two free tools to Mosaicora: an Open Graph Checker and an Open Graph Image Designer.

What makes a useful Open Graph preview?

A social preview should quickly tell someone:

What the page is about
Why it may be relevant to them
Which website or brand it belongs to

For an e-commerce product page, that might mean showing the product image, product name, brand, price, or a short benefit.

For an article, it might include the title, category, author, and a relevant visual.

A basic Open Graph setup usually includes:

<meta property="og:title" content="A clear title for the page">
<meta property="og:description" content="A short description of the page">
<meta property="og:image" content="https://example.com/social-preview.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

A commonly used image size is 1200 × 630 pixels, with an aspect ratio of approximately 1.91:1.

It is also a good idea to keep important text, logos, and subjects away from the outer edges because different platforms may crop or resize the preview.

Check your page first

Before creating a new image, it helps to see what is already configured.

Paste a public URL into the free Mosaicora Open Graph Checker, and it will show you the metadata found on the page and how the social preview is configured.

It checks information such as:

Open Graph title and description
The current social image
Image dimensions and metadata
X/Twitter Card tags
Duplicate or conflicting declarations
Other metadata that may affect the preview

The checker can also use the content found on the page to create a proposed Open Graph image, so you do not have to start with a blank canvas.

You can check any public page and generate an image proposal here.

Why a social preview can still be wrong

Even when a page contains an og:image tag, the image displayed by a platform may be missing or unexpected.

Some common causes are:

The page contains multiple og:image tags.
The image URL redirects or returns an error.
The image requires authentication.
The image is generated too slowly.
The social platform has cached an older version.
The image dimensions or format are unsupported.
The metadata is added only after client-side JavaScript runs.
Open Graph and X/Twitter tags contain conflicting values.
A firewall or bot-protection rule blocks social crawlers.

For JavaScript applications, it is especially important that crawlers can find the metadata in the initial HTML response.

This is safer:

<head>
  <meta property="og:title" content="Example page">
  <meta
    property="og:image"
    content="https://example.com/og/example.png"
  >
</head>

than adding the tags later using browser-side JavaScript.

Many social crawlers do not render a page in the same way as a normal browser.

Customize the generated image

When the checker generates a proposal, you can open it in the Open Graph Image Designer and adjust it before downloading.

You can:

Change the title and supporting text
Choose another template
Update the colors
Add your branding
Add or replace an image
Preview the result immediately
Export a 1200 × 630 PNG

The designer can also be used independently as a free Open Graph image generator when you already know what you want to create.

Both tools are free and do not require an account.

Images added manually to the designer stay in the browser and are not uploaded to Mosaicora.

A practical workflow

The complete workflow looks like this:

Enter a public URL into the Open Graph Checker.
Review the current Open Graph and X/Twitter metadata.
Confirm which image is currently being used.
Generate an image proposal from the page content.
Open the proposal in the Open Graph Image Designer.
Customize and export the final image.
Upload the image to a stable public URL.
Add or update the page metadata.
Check the page again.
Refresh the cached preview on the platforms where the page will be shared.

A more complete implementation might look like this:

<meta property="og:title" content="Your page title">
<meta
  property="og:description"
  content="A short explanation of the page"
>
<meta
  property="og:image"
  content="https://example.com/images/page-preview.png"
>
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your page title">
<meta
  name="twitter:description"
  content="A short explanation of the page"
>
<meta
  name="twitter:image"
  content="https://example.com/images/page-preview.png"
>

Quick checklist before sharing

Before publishing or sharing a page, verify that:

The title makes sense without additional context.
The description does not simply repeat the title.
The image clearly represents the page.
Text remains readable in a small preview.
The image URL returns a successful response.
The URL does not require cookies or authentication.
The metadata exists in the initial HTML response.
The image is not blocked by robots.txt, a firewall, or bot protection.
The canonical URL and og:url point to the intended page.
Old platform previews have been refreshed after an update.

We built these tools mainly for developers, website owners, and content teams who need a quick way to inspect and improve social previews without opening a larger design application.

You can start by checking one of your existing pages, or go directly to the Open Graph Image Designer if you already know what you want to create.

I would be interested to hear how well the generated proposals work for your pages, especially for product pages and articles.

Suggestions for additional checks, templates, or customization options are also welcome.

DEV Community