Open Graph markup: a complete guide for all social networks

Open Graph (OG) is a markup protocol that determines how a page appears when shared on social media. Without OG tags, platforms choose the title, description, and image themselves, often with poor results. This article provides a complete guide to configuring Open Graph for all popular social networks.

What is Open Graph

Open Graph was created by Facebook in 2010. Tags og:* are placed in the page's <head> and specify:

• Card title
• Description
• Preview image
• URL and content type

Today, OG is supported by Facebook, VK, Telegram, LinkedIn, WhatsApp, and many other platforms. Twitter uses its own twitter:* tags, but falls back to OG if they are not present.

Required OG tags

The minimum set for correct display:

<meta property="og:title" content="Заголовок страницы для соцсетей">
<meta property="og:description" content="Краткое описание, 1-2 предложения">
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

og:title

The card title. It can differ from the page's <title> — longer and more expressive wording is acceptable on social networks.

Recommendations: up to 60 characters for Facebook and up to 70 for VK. Longer text is truncated.

og:description

The description below the title. It should complement the title and encourage people to click.

Recommendations: 150–200 characters. Avoid duplicating the title.

og:image

The preview image. This is a critical element — whether a post gets noticed depends on it.

Platform requirements:

The universal size 1200×630 px works for all platforms. Use JPG or PNG, up to 8 MB (Facebook) and up to 5 MB (VK).

og:url

The page's canonical URL. It must be absolute and include the protocol.

<meta property="og:url" content="https://example.com/article/">

og:type

The content type. It affects how the page is displayed and which additional fields are available.

Additional OG tags

For articles (article)

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-03-07T10:00:00+03:00">
<meta property="article:modified_time" content="2026-03-07T12:00:00+03:00">
<meta property="article:author" content="https://example.com/author/oleg/">
<meta property="article:section" content="Технологии">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Open Graph">

For products (product)

<meta property="og:type" content="product">
<meta property="product:price:amount" content="29990">
<meta property="product:price:currency" content="RUB">
<meta property="product:availability" content="in stock">

Localization

<meta property="og:locale" content="ru_RU">
<meta property="og:locale:alternate" content="en_US">

Site and social networks

<meta property="og:site_name" content="Название сайта">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Описание изображения для доступности">

Platform-specific settings

Twitter Cards

If twitter:* is absent, Twitter uses OG. For better control, add:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="Описание">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:site" content="@username">

VK

VK uses OG. You can also specify vk:image to override it, but og:image is usually sufficient.

Telegram

Telegram uses OG. Important: the image must be available over HTTPS without redirects. Telegram caches previews for a long time, so an image change may take some time to appear.

Testing and troubleshooting

After configuring the tags, check how they appear:

1. Open Graph Preview on reChecker — preview a card on different platforms
2. Meta tag checker — analyze all og and meta tags on a page
3. Facebook Sharing Debugger — https://developers.facebook.com/tools/debug/
4. Twitter Card Validator — https://cards-dev.twitter.com/validator

Common errors

Dynamic OG generation

For CMSs and static websites, OG tags are generated dynamically:

// PHP пример
<meta property="og:title" content="<?= htmlspecialchars($page->title) ?>">
<meta property="og:description" content="<?= htmlspecialchars($page->description) ?>">
<meta property="og:image" content="<?= htmlspecialchars($page->absoluteUrl . $page->image) ?>">
<meta property="og:url" content="<?= htmlspecialchars($page->absoluteUrl) ?>">

// Next.js пример
export const metadata = {
  openGraph: {
    title: 'Заголовок',
    description: 'Описание',
    images: ['/og-image.jpg'],
    url: 'https://example.com/page',
  },
}

Multiple images

Some platforms support multiple images through og:image:

<meta property="og:image" content="https://example.com/image1.jpg">
<meta property="og:image" content="https://example.com/image2.jpg">
<meta property="og:image" content="https://example.com/image3.jpg">

The platform will choose one. Usually, one 1200×630 image is enough.

Specifics of Russian platforms

VK

VK fully uses OG. You can also specify vk:image to override it. The recommended size is 1200×630. The feed displays a 537×240 crop.

Telegram

Telegram caches previews for a long time. When changing the image, add a query parameter to the URL: ?v=2. The image must be available over HTTPS without redirects.

Odnoklassniki

Odnoklassniki supports OG. Its requirements are similar to VK's.

Dzen

Dzen uses OG for previews when links to articles are shared.

Conclusion

Open Graph is the essential minimum for controlling how links appear on social networks. The universal image size is 1200×630; the required tags are title, description, image, url, and type. Check the result with OG Preview and the meta tag checker. For more information, see the guide to meta tags and how to configure sharing previews.