What Is Open Graph? Meaning and How It Works
Short answer
Open Graph is a metadata protocol, created by Facebook in 2010, that uses HTML meta tags in a page's head to control how its title, description, and image appear when shared or crawled. It is read by social platforms, search engines, and increasingly by AI crawlers and answer engines when they summarize or cite a page.
874
Websites audited by SeoVision
SeoVision audit data · as of 2026-08-12
75/100
Median SEO score across audited sites
SeoVision audit data · as of 2026-08-12
100/100
Median Structured data score across audited sites
SeoVision audit data · as of 2026-08-12
What Is Open Graph?
Open Graph is a metadata protocol, created by Facebook in 2010, that uses HTML meta tags in a page's `<head>` to control how a URL's title, description, and image appear when shared on social platforms and read by crawlers. It turns a plain link into a structured preview card instead of a raw URL.
The protocol works through a set of `og:` prefixed meta tags that any webpage can include. Any platform, human, bot, or AI crawler, that reads the page's HTML can use these tags to understand what the page is about without parsing the full body content.
How Does Open Graph Work?
Open Graph works by placing `<meta property="og:..." content="...">` tags inside a page's `<head>` section. When a URL is shared, crawled, or summarized, the consuming platform looks for these tags first because they are faster and more reliable to parse than scraping visible page text.
Each tag maps to a specific piece of metadata: a title, a description, an image, a canonical URL, a content type, and a site name. If Open Graph tags are missing, most platforms fall back to guessing from the page's `<title>` tag, meta description, or first image, which produces inconsistent and often broken previews.
What Are the Key Open Graph Tags?
Six tags cover most Open Graph implementations:
- og:title — the title shown in the preview card, which can differ from the page's `<title>` tag.
- og:description — a short summary, typically under 200 characters.
- og:image — the preview thumbnail; recommended at 1200x630 pixels for cross-platform consistency.
- og:url — the canonical URL for the page, preventing duplicate preview versions.
- og:type — the content type, such as `article`, `website`, or `product`.
- og:site_name — the name of the parent site or brand, shown alongside the preview.
Open Graph vs Twitter Cards vs Schema Markup: What Is the Difference?
Open Graph, Twitter Cards, and schema markup all describe page metadata but serve different consumers. Open Graph controls previews on Facebook, LinkedIn, and most link-preview tools. Twitter Card tags (`twitter:card`, `twitter:title`, etc.) serve X/Twitter specifically, though many sites let Twitter fall back to Open Graph tags. Schema markup, written as JSON-LD, is structured data aimed primarily at search engines and AI systems for rich results, not visual link previews.
A well-built page typically includes all three: Open Graph for social previews, Twitter Cards as a fallback, and JSON-LD schema for search and AI comprehension. Across the 874 websites SeoVision has audited (as of 2026-08-12), the median structured data score is 100/100, but structured data and Open Graph tags are checked and scored separately because they serve different purposes.
Why Does Open Graph Matter for SEO and AI Visibility?
Open Graph matters because AI crawlers and answer engines, including GPTBot, Perplexity's crawler, and Google's AI Overview systems, read page metadata to quickly understand a page's topic, source, and context before deciding whether to cite it. Clean, accurate Open Graph tags make a page easier to summarize correctly.
While Open Graph is not a direct Google ranking factor, it directly affects click-through rate and how a page is represented when shared, referenced, or embedded across the web, including in AI-generated answers that pull in source previews. Pages with missing or generic Open Graph tags risk showing broken images, mismatched titles, or blank descriptions when cited, which undermines credibility signals that both users and AI systems use to judge a source. This is one reason Open Graph sits alongside other technical trust factors tracked in technical SEO audits and in broader AI search visibility work.
How Do You Implement Open Graph Tags?
Open Graph tags can be added manually to a page's HTML head, through a CMS plugin, or via a site's templating system so tags generate automatically per page. A manual implementation looks like this:
``` <meta property="og:title" content="Page Title Here" /> <meta property="og:description" content="Short summary of the page." /> <meta property="og:image" content="https://example.com/image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="article" /> <meta property="og:site_name" content="Example Site" /> ```
Most CMS platforms (WordPress via Yoast or Rank Math, Shopify, Webflow) generate these tags automatically from a page's title, meta description, and featured image, but defaults should still be checked per page since auto-generated values are often too generic to be useful.
How Do You Test and Validate Open Graph Tags?
Open Graph tags are validated by inspecting a page's rendered HTML head and confirming each tag returns the intended title, description, and image URL. Common checks include viewing page source directly, using browser developer tools, or running the URL through a link-preview debugger.
Validation should confirm that the image URL is publicly accessible (not blocked by robots.txt or authentication), that the image meets recommended dimensions, and that the title and description are unique per page rather than duplicated site-wide.
What Are Common Open Graph Mistakes?
The most common mistakes are missing `og:image` tags, images blocked from crawling, duplicate `og:title` values across many pages, and descriptions that are truncated or auto-generated with no editorial review. Another frequent issue is forgetting `og:url`, which causes shares of the same content to fragment into multiple duplicate preview versions instead of consolidating engagement to one canonical link.
On sites with hundreds of pages, these mistakes tend to be systemic rather than isolated, which is why they show up in the same technical checks used for structured data and metadata across a full site audit. Median SEO scores across the sites SeoVision has audited sit at 75/100 (as of 2026-08-12), and incomplete or missing social metadata is a recurring contributor to scores below that median.
Related Terms
Open Graph is closely related to structured data and schema markup, AI crawler access controls like robots.txt and llms.txt, and broader AEO and LLM SEO practices that govern how pages are represented across AI answer engines such as ChatGPT, Perplexity, Gemini, and Copilot. For a deeper look at how AI systems select and cite sources, see where ChatGPT gets its information, how to get cited by Perplexity, and how to appear in Google AI Overviews.
How SeoVision checks this
SeoVision's free site audit validates Open Graph and social markup as part of its structured-data pillar, checking JSON-LD, rich-result eligibility, and social preview tags on every audited page. This means a single audit surfaces missing or broken `og:title`, `og:description`, and `og:image` tags alongside broader technical SEO and AI-readiness issues, rather than requiring a separate social-preview check.
FAQ
What is Open Graph?
Open Graph is a metadata protocol created by Facebook in 2010 that uses HTML meta tags to control how a page's title, description, and image appear when shared or crawled. It is read by social platforms, link-preview tools, and AI crawlers that summarize or cite web pages.
What is Open Graph used for?
Open Graph is used to control the preview card, title, description, and image, that appears when a URL is shared on platforms like Facebook and LinkedIn or embedded elsewhere. It also helps crawlers, including AI crawlers, quickly identify what a page is about.
What are Open Graph tags?
Open Graph tags are HTML meta tags prefixed with `og:`, such as og:title, og:description, og:image, og:url, og:type, and og:site_name. They live in a page's head section and each map to a specific piece of preview metadata.
How does Open Graph affect SEO?
Open Graph is not a direct Google ranking factor, but it affects click-through rate and how a page is represented when shared or cited, including by AI answer engines. Broken or missing Open Graph tags can produce blank previews or mismatched titles that reduce perceived credibility of a source.
How do I check if a page has Open Graph tags?
You can view a page's HTML source or use a link-preview debugging tool to confirm og:title, og:description, and og:image are present and return correct values. A full technical SEO audit will also flag missing or broken Open Graph tags alongside other structured data issues.
More in Glossary
View all →What Is PageRank? Definition Explained
PageRank is Google's link-based ranking algorithm. Learn how it works, whether it's still used, and how it relates to SEO and AI visibility today.
What Is RAG in AI? Retrieval-Augmented Generation Explained
RAG (Retrieval-Augmented Generation) lets AI models fetch external data before answering. Learn how it works and why it matters for AI visibility.
Sitemap: What It Is and How It Works
A sitemap is a file listing a site's URLs to help crawlers index content. Learn types, setup steps, and why it matters for AI visibility.
What Is a Token in AI? Definition and Examples
A token is the basic text unit AI models use to read and generate language. Learn how tokenization works, with examples across ChatGPT, Claude, and Gemini.
Alt Text: What It Is and How to Write It
Alt text is the HTML alt attribute description of an image, read by screen readers and parsed by search and AI crawlers. Learn how to write it well.
See where your own site stands
Run a free SeoVision audit — it checks this and dozens of other SEO and AI-visibility factors on your site.
Free · no signup needed · or get started with the full platform