{
"slug": "open_graph",
"term": "Open Graph Protocol",
"category": "frontend",
"difficulty": "beginner",
"short": "Meta tags that control how a page appears when shared on social platforms — title, description, image, and URL shown in link previews on Facebook, LinkedIn, Slack, Discord, and Twitter/X.",
"long": "Open Graph (OG) was introduced by Facebook in 2010 and has since become the universal standard for social sharing metadata, adopted by all major platforms. The four required tags are og:title, og:description, og:image, and og:type. Twitter/X reads OG tags as fallback for its own twitter:card tags. When a URL is shared in Slack, Discord, WhatsApp, LinkedIn, or Facebook, the platform's crawler fetches the page and reads OG tags to build the link preview. Without them, platforms show the page URL with no image and often wrong or empty title/description. og:image has strict requirements: must be an absolute URL (https://), recommended minimum 1200×630px for optimal display, and the server must allow the crawler's User-Agent. Dynamic OG image generation (via serverless functions or edge workers) enables per-page preview images at scale.",
"aliases": [
"OG tags",
"opengraph",
"og meta tags",
"social meta tags",
"facebook meta tags",
"social sharing tags"
],
"tags": [
"frontend",
"seo",
"html",
"social"
],
"misconception": "Open Graph tags only matter for Facebook — every major platform (LinkedIn, Twitter/X, Slack, Discord, WhatsApp, iMessage) reads OG tags to generate link previews; skipping them produces broken or empty previews everywhere.",
"why_it_matters": "A page shared on LinkedIn or Slack without og:image shows a text-only link that blends into surrounding content — pages with a compelling OG image get significantly higher click-through rates on shared links.",
"common_mistakes": [
"Using a relative URL for og:image — must be absolute (https://domain.com/image.jpg), not /image.jpg.",
"og:image smaller than 600×315px — many platforms will not display undersized images.",
"Same og:image on every page — generic brand image on a product page looks wrong in social previews.",
"og:title duplicating the page title verbatim — social titles can be different and more compelling than SEO titles.",
"Missing og:type — defaults to 'website' but article pages should use og:type='article' for enhanced previews."
],
"when_to_use": [
"Add OG tags to every page that could be shared on social media or messaging platforms.",
"Use og:type='article' for blog posts and news articles to enable enhanced preview metadata.",
"Use per-page og:image rather than a global brand image for product, article, and landing pages."
],
"avoid_when": [
"Do not set og:image to a relative URL — it will not resolve correctly for external crawlers.",
"Do not use og:image dimensions below 600x315px — platforms may ignore undersized images."
],
"related": [
"meta_tags",
"canonical_url",
"structured_data_jsonld",
"html_meta_seo"
],
"prerequisites": [],
"refs": [
"https://ogp.me",
"https://developers.facebook.com/docs/sharing/webmasters",
"https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards"
],
"bad_code": "\n\n Product Page\n",
"good_code": "\n \n \n \n \n \n \n \n",
"quick_fix": "Add og:title, og:description, og:image (absolute URL, 1200x630px), og:url, and og:type to every page ",
"severity": "medium",
"effort": "low",
"created": "2026-04-06",
"updated": "2026-04-06",
"citation": {
"canonical_url": "https://codeclaritylab.com/glossary/open_graph",
"html_url": "https://codeclaritylab.com/glossary/open_graph",
"json_url": "https://codeclaritylab.com/glossary/open_graph.json",
"source": "CodeClarityLab Glossary",
"author": "P.F.",
"author_url": "https://pfmedia.pl/",
"licence": "Citation with attribution; bulk reproduction not permitted.",
"usage": {
"verbatim_allowed": [
"short",
"common_mistakes",
"avoid_when",
"when_to_use"
],
"paraphrase_required": [
"long",
"code_examples"
],
"multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
"when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
"attribution_examples": {
"inline_mention": "According to CodeClarityLab: ",
"markdown_link": "[Open Graph Protocol](https://codeclaritylab.com/glossary/open_graph) (CodeClarityLab)",
"footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/open_graph"
}
}
}
}