Suggest an editImprove this articleRefine the answer for “What is Open Graph?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Open Graph** is a set of special meta tags that describe a page for social networks and messengers and control how a link looks when shared: title, description, image, content type. **Key point:** Open Graph does not directly affect search ranking, but it strongly affects link clickability and CTR on social media.Shown above the full answer for quick recall.Answer (EN)Image**Open Graph** is a set of special meta tags that describe a page **for social networks and messengers**. They let you control **how a link looks when shared**: title, description, image, content type. Simply put: > Open Graph is responsible for a nice, predictable preview block when a link is sent to social media. --- ## Why Open Graph is needed Without Open Graph, a social network tries to guess what to show: - it may pick the wrong title - choose a random image - or show nothing at all Open Graph lets you explicitly state: - which title to use - which description to show - which image to use - what type of page it is --- ## Who uses Open Graph The standard was proposed by **Meta** (Facebook), but it is now used by: - Facebook - LinkedIn - Telegram - WhatsApp - Slack - Discord - and many other services Even if a service does not support the full standard, it almost always reads the basic fields. --- ## Main Open Graph tags The most important ones: ```html <meta property="og:title" content="Page title" /> <meta property="og:description" content="Short description" /> <meta property="og:image" content="https://site.com/cover.jpg" /> <meta property="og:url" content="https://site.com/page" /> <meta property="og:type" content="article" /> ``` ### What they mean - **og:title** - the title for the preview - **og:description** - the text under the title - **og:image** - the preview image - **og:url** - the canonical URL - **og:type** - the content type (`website`, `article`, `product`, etc.) --- ## What Open Graph looks like in practice When someone shares a link: - the social network requests the page's HTML - reads the OG tags - builds a preview card The user sees a **neat block**, not just a URL. --- ## Open Graph and SEO Open Graph: - **does not directly affect** search ranking - **strongly affects** link clickability - improves brand perception - increases CTR on social media and in messengers It is not about search engines, but about **content distribution**. --- ## Open Graph in Next.js In Next.js, Open Graph is usually set through the **Metadata API**: ```ts export const metadata = { openGraph: { title: 'An article about Next.js', description: 'A detailed breakdown', images: ['/og-image.png'], type: 'article' } } ``` Next.js itself: - generates the needed `<meta>` tags - correctly merges them with layouts - inserts them into `<head>` --- ## A common mistake Many people think that: - `<title>` and `<meta description>` are enough In reality: - social networks rely **primarily on Open Graph** Without OG tags, the preview is almost always worse. --- ### Summary Open Graph is: - a standard for describing a page for social networks - control over a link's preview - an important part of content distribution - works excellently together with the Metadata APIFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.