Do I need separate Twitter tags too?

What Is Open Graph Tags? Definition and Examples

The Open Graph protocol, created by Facebook, defines meta tags that describe a page for link previews. When someone pastes your URL into LinkedIn, Slack, Facebook, iMessage or many other apps, those platforms read the og: tags to build the preview card. Without them, platforms guess, often picking the wrong image or a truncated title.

The core tags

The protocol lists four basic properties: og:title, og:type, og:image and og:url. og:description is optional but nearly always worth adding. Tags go in the page head.

<meta property="og:title" content="Invoice templates for agencies" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/templates/agency-invoice" />
<meta property="og:image" content="https://example.com/og/agency-invoice.png" />
<meta property="og:description" content="Free invoice templates built for agencies." />

Images

The image drives most of the preview's impact. Use an absolute URL, a landscape image that still reads when cropped, and text large enough to read on a phone. Platforms have their own size recommendations and cropping behavior, so check their current documentation and test with their preview tools.

Open Graph and SEO

Open Graph tags do not affect rankings in Google. Google's documentation lists og:title as one of the sources it may use when generating title links, though the title element remains primary. The value of OG tags is in distribution: better previews in social feeds, sales emails and team chats lead to more clicks from shared links.

Example

Generated preview images for templates

Hypothetical document tool Vellumtide's template pages all shared one generic logo image when posted in Slack or LinkedIn. It started generating an og:image for each template showing its name and a thumbnail, and added template-specific og:title and og:description values.

Common mistakes

Relative image URLs

og:image needs a full absolute URL, including the protocol, or many platforms will ignore it.

Forgetting caches

Platforms cache previews. After changing tags, use the platform's debugging or inspector tool to refresh the cached version.

Questions

X reads Open Graph tags as a fallback for title, description and image, but needs twitter:card to choose the card type.

Sources

Open Graph Tags