Voonx / practical publishing guide

Open Graph Tags & Social Sharing Cards: An Editorial Guide

Learn how to prepare representative page titles, descriptions and images for link previews without relying on an exact platform simulation.

Sharing is often the first encounter someone has with an article. An informative title, representative image and concise description help readers decide whether the link deserves their attention. Open Graph metadata allows a publisher to provide those cues in the HTML source.

The essentials of a link card

og:title describes the page in words; og:description gives a short introduction; og:url identifies the preferred public URL; and og:image points to a publicly retrievable image. og:type can describe a content type such as article. Social services choose which of these values to show and may apply their own caching, cropping or truncation rules.

Example: For a guide about choosing article images, a useful title would be “Choose the Right Image Ratio for Your Article.” The description could explain that it covers crops, readability and practical dimensions. The preview image should illustrate the subject rather than display generic unrelated stock artwork.

Prepare the picture for a crop

A wide image near a 1.91:1 composition is often a convenient working preview, but no single size is guaranteed across all apps and cards. Keep the subject away from extreme edges, retain useful image resolution and make sure important meaning is present in the surrounding article text as well. When saving a new image, consider WebP or JPEG support in the systems that will fetch it; your publishing workflow determines actual compatibility.

Use a real public URL for the published image

An image selected on your computer can be previewed in a browser, but crawlers cannot retrieve a local file or blob URL. On the published page, og:image should use a publicly accessible absolute HTTPS URL for the uploaded image. Publishing on a simple static website is fine; it does not require an external API, database or JavaScript to generate Open Graph tags.

Write for humans, then inspect metadata

Check the page’s own canonical URL and the Open Graph URL for consistency. Escape quotation marks and special characters when embedding values in HTML attributes. Remember that a social service might prefer cached data, and changing metadata does not guarantee the next share updates immediately.

Before you share

  • Compare social title against the real article heading.
  • Verify that image subject and text describe the same story.
  • Check the public image is not blocked or private.
  • Confirm the destination URL resolves and is the intended canonical page.
  • Test at narrow widths and allow for differing platform treatments.
  • Do not promise a particular appearance or engagement result.

Build an illustrative social card → · Plan image aspect ratios → · More on responsive image ratios →


← All guides · Explore free tools