What is Open Graph?
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:
- Telegram
- 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:
<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:
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 API
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.