Back to “Technical SEO basics”
Technical SEO basics4 min read

Open Graph tags

How to control your page's preview on social media and in AI chats: the og:title, og:description, and og:image tags explained.

Open Graph tags control the preview of your page when it's shared on social media, in a messaging app, or cited in a conversation with a generative AI capable of showing a rich preview.

What Open Graph tags are for

Without Open Graph markup, a platform displaying a link preview (social network, messaging app, some AI assistants) has to guess which title, image, and description to use — often awkwardly pulling from the page's content: a random first image found in the HTML unrelated to the topic, a title truncated mid-sentence, or a missing description. Open Graph tags take back control of that preview and guarantee a consistent presentation, no matter where the link gets shared.

This standard, originally designed by Facebook, has since been adopted as the de facto reference by nearly every platform that displays link previews, which makes it a low-effort, high-benefit piece of markup — a handful of tags cover most use cases.

The essential tags

<head>
  <meta property="og:title" content="Complete Guide to E-Invoicing">
  <meta property="og:description" content="Everything you need to know about formats, obligations, and e-invoicing platforms in 2026.">
  <meta property="og:image" content="https://example.com/images/invoicing-guide-og.jpg">
  <meta property="og:url" content="https://example.com/e-invoicing-guide">
  <meta property="og:type" content="article">
</head>
  • og:title: the preview's title, often close to the <title> but can be reworded for a social-sharing context.
  • og:description: summary shown under the title in the preview.
  • og:image: the preview card's image — the element that most influences click-through on a share.
  • og:url: the canonical URL of the shared page.
  • og:type: the nature of the content (article, website, product...).

These five tags cover the vast majority of use cases. Other properties exist for more specific needs (og:site_name for the site's name, article:author or article:published_time for editorial content), but they remain secondary compared to the core foundation formed by the title, description, and image.

Best practices for the Open Graph image

An incorrectly sized or missing image results in an empty or poorly cropped preview, which sharply reduces engagement on a share. The most common recommendations:

  • recommended size around 1200 x 630 pixels (1.91:1 ratio);
  • reasonable file size for a fast preview load;
  • readable text even at small size if the image contains overlaid text;
  • a centered main subject, since some platforms crop the image differently depending on the display format (wide preview, square thumbnail);
  • a site-wide default image for pages that don't have a specific one, rather than leaving the field empty.

An impact beyond social media

Some generative AI interfaces that display search results or source citations also use these metadata fields to build a visual preview of the cited source. Complete Open Graph markup consistent with the page's actual content therefore indirectly contributes to how your brand is presented in these contexts.

Common mistakes

  • Missing Open Graph tags, leaving each platform to guess a preview inconsistently.
  • og:image pointing to a relative URL instead of an absolute one, which breaks the display on most platforms.
  • og:description different enough to contradict the page's actual content.
  • Forgetting to update these tags after a visual redesign or a major content change.

Twitter Cards, and testing your markup before publishing

Some platforms use their own standard alongside Open Graph. X (formerly Twitter), for instance, reads its twitter:card, twitter:title, and twitter:image tags first if present, and falls back to Open Graph tags in their absence:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Complete Guide to E-Invoicing">
<meta name="twitter:image" content="https://example.com/images/invoicing-guide-twitter.jpg">

In most cases, faithfully duplicating the Open Graph values into these complementary tags is enough; there's no need to write entirely distinct content for each platform, unless you're specifically targeting a different audience on one of them.

A misconfigured Open Graph preview usually isn't visible while browsing the site itself — the error only shows up at the moment of sharing, often after the link has already circulated. Debugging tools provided by the major social platforms let you simulate the preview before publishing and force a cache refresh if an image or title was changed after a first share: these platforms cache the generated preview and don't automatically regenerate it on every visit.

Open Graph tags naturally complement the title tag and the meta description: together, the three define how your page presents itself, whether in a search engine or on a share. To go further on structured markup, the logical next lesson is on implementing Schema.org structured data.