A Practical Open Graph Workflow for Developers

When a page is shared, its preview becomes part of the product. It may appear in a social feed, a team chat, a direct message, or an email before the recipient has any other context.

Adding Open Graph tags is straightforward. Keeping them correct as content and templates change is the part that deserves a workflow.

Define the Page Clearly

The Open Graph protocol defines four basic properties: og:title, og:type, og:image, and og:url. Most shared pages also benefit from an og:description, and many sites provide equivalent card metadata for platforms that use it.

Before publishing, check that:

• the title identifies this specific page.
• the description is useful outside the site.
• the canonical and og:url values agree.
• the image URL is absolute and publicly reachable.
• the image represents the current content.
• the declared content type is appropriate.

Avoid using the same generic title, description, and image across the whole site. A valid tag is not necessarily a useful tag.

Inspect What a Crawler Receives

Metadata needs to be present in the HTML response available to the crawler. A tag that appears only after client-side JavaScript runs may be invisible to sharing services that do not execute that JavaScript.

For a server-rendered or statically generated page, inspect the returned HTML and confirm the values are already in the document head. Do not rely only on the browser’s live DOM inspector, which shows the page after scripts may have changed it.

Also request the image URL directly. It should return successfully without authentication, cookies, or browser-only headers. Check the content type, dimensions, file size, and final URL after redirects.

Use a Complete Metadata Example

This is a reasonable starting point for an article page:

<link rel=="canonical" href=="https://datanasov.com/blog/example-post"/>

<meta property=="og:type" content=="article"/>
<meta property=="og:url" content=="https://datanasov.com/blog/example-post"/>
<meta property=="og:title" content=="A Practical Open Graph Workflow for Developers"/>
<meta
  property=="og:description"
  content=="A practical checklist for shipping reliable Open Graph metadata and catching broken share previews."/>
<meta property=="og:image" content=="https://datanasov.com/images/og/example-post.png"/>
<meta property=="og:image:width" content=="1200"/>
<meta property=="og:image:height" content=="630"/>
<meta property=="og:image:alt" content=="Open Graph metadata shown beside a link preview"/>

<meta name=="twitter:card" content=="summary_large_image"/>
<meta name=="twitter:title" content=="A Practical Open Graph Workflow for Developers"/>
<meta
  name=="twitter:description"
  content=="A practical checklist for shipping reliable Open Graph metadata and catching broken share previews."/>
<meta name=="twitter:image" content=="https://datanasov.com/images/og/example-post.png"/>
<meta name=="twitter:image:alt" content=="Open Graph metadata shown beside a link preview"/>

The exact image requirements vary by platform, and platforms can change how they crop or display cards. A 1200 × 630 image is a common baseline, not a guarantee that every service will render the preview identically.

Keep important text away from the edges and make it readable at a small size. A full-size image can look excellent while becoming illegible in a compact message preview.

Check Again After Publishing

A useful release loop is:

1. Inspect the generated HTML.
2. Request the image as an unauthenticated client.
3. Preview the card at realistic sizes.
4. Publish the page.
5. Validate the production URL.

Repeat the check after changing a shared layout, metadata helper, routing rule, CDN configuration, or image template. Those changes can affect many pages at once.

Remember that sharing platforms often cache preview data. If a corrected page still shows an old card, the metadata may be fixed while the platform continues to display its cached copy. Use the platform’s refresh or debugging tool where one is available.

I built the Mosaicora Open Graph Checker for this inspection step. It provides a quick way to review a URL’s metadata and image before a broken preview becomes the first impression of the page.