When you share a link on WhatsApp, X, or LinkedIn and it unfolds into a clean title, a short description, and a large cover image, that is no accident. It is produced by the Open Graph (OG) protocol: a small but powerful layer of metadata that lets you decide how your page looks when it travels across social platforms.
Related reading: Internet and networking basics · What is an IP address? · What are internet service providers?
What Is Open Graph?
Open Graph is an open protocol that defines the title, description, image, and content type a web page shows when it is shared on social media and messaging apps. It was originally introduced by Facebook and has since been adopted by LinkedIn, X (formerly Twitter), WhatsApp, Slack, Discord, and many other platforms.
Technically, OG is a set of <meta> tags placed in the page's <head>. What makes them different from ordinary meta tags is that they use the property attribute instead of name, and each one is prefixed with og:. When a platform processes your link, it fetches the page and reads these tags to build the preview card.
<meta property="og:title" content="What Is Open Graph?">
<meta property="og:description" content="The metadata layer that controls how your page looks when shared.">
<meta property="og:image" content="https://example.com/img/og-cover.jpg">
<meta property="og:url" content="https://example.com/blog/what-is-open-graph">
<meta property="og:type" content="article">Why Open Graph Matters
OG tags are not a direct search ranking factor, so adding them alone will not lift you in Google. Their impact is indirect but real: it works through the visibility and click-through rate of shared links.
- Click-through rate: a clear title and a striking image make a link less likely to be scrolled past in a busy feed.
- Control: without tags, a platform may pick an arbitrary image and snippet from the page, which rarely conveys the impression you want.
- Brand consistency: every share appears in the same layout, logo, and tone.
- Right context: you tell the platform explicitly whether it is an article, a product, or a video.
og:type and Content Types
The og:type tag tells the platform what the content is and unlocks a few extra tags. The most common value is website for ordinary pages and article for blog posts and news.
When the type is article, you can optionally add tags describing the publication and the content:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-09-28T09:00:00+03:00">
<meta property="article:author" content="https://example.com/authors/editor">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="open graph">Other types such as video, music, book, and profile exist as well, each offering its own additional fields. For most content sites, website and article are enough in practice.
Practical Advice for og:image
The image is the most eye-catching part of a preview, so investing in og:image gives the highest return. A widely recommended size is the large-card format at 1200 × 630 pixels (roughly a 1.91:1 ratio), which most platforms display large and uncropped.
- Use the full (absolute) URL of the image; relative paths fail to load on some platforms.
- Serve it over HTTPS where possible.
- Keep any text legible: large enough and sparse enough not to get lost in a small preview.
- Keep the file size reasonable; needlessly heavy images slow the preview from generating.
- Adding og:image:width, og:image:height, and og:image:alt eases processing and accessibility.
How It Relates to Twitter Cards
X (Twitter) uses its own card system and reads tags prefixed with twitter:. However, when many twitter: tags are missing, X can fall back to their Open Graph counterparts; for example, if twitter:title is absent, og:title may be used instead.
The practical approach: build a solid OG set first, then add a few Twitter-specific tags to pin down the card format.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="What Is Open Graph?">
<meta name="twitter:description" content="The metadata that governs social share previews.">
<meta name="twitter:image" content="https://example.com/img/og-cover.jpg">Testing and the Caching Problem
After adding the tags, see the result rather than guess it. Platforms cache the previews they fetch for a while, so when you make a change the old image can stubbornly linger. Most major platforms provide an official validation tool to refresh that cache.
- Make sure the tags live inside the
<head>and are present as soon as the page loads. - Preview and refresh the cache with the relevant platform's validator.
- If a share still looks old after an update, refresh the cache first.
- Double-check that the image is public and reachable at its full URL.
Common Mistakes
- Relative image path: using a path like
/image.jpgfor og:image instead of a full URL. - Missing one of the four basics: skipping og:title, og:type, og:image, or og:url.
- property/name mix-up: using name for OG or property for Twitter.
- Image too small or too busy: covers that are unreadable in the preview.
- Duplicate tags: defining the same property multiple times with different values.
- Gated image: using a cover that sits behind a login or an IP restriction.
Open Graph is one of those rare techniques that delivers tidy results for little effort. Setting up the four core tags correctly, choosing a good cover image, and testing the outcome with a validator is usually all it takes for your links to look polished everywhere they land.