Open Graph protocol: every og tag, the X card, and what each platform reads

The Open Graph protocol is a set of meta tags that tells other apps what a page is when someone shares its link. Facebook created it in 2010. Today LinkedIn, Slack, Apple’s Messages, Pinterest and Google read some of its tags, and X falls back to them. The spec requires four og tags, and that part is easy. The harder part is that each platform reads its own subset, keeps the first card it built, and documents very little. X has taken its card documentation offline altogether. This page covers every tag, the X (Twitter) card, what each platform says it reads, and what Open Graph does and does not do for SEO and AI answers.

Before you change anything, look at what your page sends today. Platforms read the HTML your server returns, not the page you see in a browser. The free Open Graph checker reads a URL’s og and twitter tags, checks the image, and shows how the card is likely to look on LinkedIn, X, Facebook, Slack and WhatsApp.

The four tags are in the spec^[1]. Meta states its 1 MB cut-off in its crawler documentation^[6]. X’s figure comes from an archived copy of its own docs, which are no longer online^[7]. Slack’s comes from its robots page^[13].

What the Open Graph protocol is

The spec says the protocol “was originally created at Facebook and is inspired by Dublin Core, link-rel canonical, Microformats, and RDFa”^[1]. Facebook announced it at its f8 developer conference on 21 April 2010, alongside Like buttons that other sites could put on their pages^[2]. On launch day, Dan Brickley told the W3C’s RDFa group that it put “structured data into Web sites to sit alongside a Facebook ‘Likes’ button”, so apps could tell whether a page was about a movie, a restaurant or a book^[3]. The spec still lives at ogp.me, published under the Open Web Foundation Agreement, Version 0.9^[1].

Each tag is a meta element in the page’s head. The tag name goes in a property attribute and the value in content, as in the spec’s own example, <meta property="og:title" content="The Rock" />^[1]. People call them OG tags, og tags or Open Graph tags. They all mean the same lines.

The four required og tags

The spec is short on this point: “The four required properties for every page are” og:title, og:type, og:image and og:url^[1]. Here is what each one does, and what the platforms add.

• og:title is “The title of your object as it should appear within the graph”^[1]. Meta asks for the title “without any branding such as your site name”^[4]. Apple says the same for Messages, and points the site name to og:site_name instead^[14].
• og:type says what kind of thing the page is. The spec adds that “Any non-marked up webpage should be treated as og:type website”^[1]. Meta also defaults to website, and notes the type “impacts how your content shows up in Feed”^[4]. Use article for posts and website for most other pages.
• og:image is “An image URL which should represent your object within the graph”^[1]. Give a full URL, starting with https. Next.js, for one, marks its image URLs “Must be an absolute URL”^[21]. Sizes for each platform are in OG image size.
• og:url is “The canonical URL of your object that will be used as its permanent ID in the graph”^[1]. Meta asks for “the undecorated URL, without session variables”^[4]. Make it match your canonical tag, so shares of a tracking link still count for the real page.

Optional og tags worth adding

The spec lists more optional tags. Five earn their place on almost every page.

• og:description: “A one to two sentence description of your object”^[1]. Meta says “usually between 2 and 4 sentences”^[4], and X’s archived reference capped its own description at 200 characters^[8]. One or two plain sentences suit all three.
• og:site_name: “If your object is part of a larger web site, the name which should be displayed”^[1]. Google’s site name system considers it too^[17].
• og:locale: the language and region, in the form language_TERRITORY, with en_US as the default. og:locale:alternate lists the other languages a page exists in^[1][4].
• og:image:width and og:image:height: Meta says these let its crawler “render the image immediately without having to asynchronously download and process it”^[5].
• og:image:alt: “A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt”^[1]. X used it as the fallback for its own image alt text^[8].

Posts get a few more. When og:type is article, the spec adds article:published_time, article:modified_time, article:expiration_time, article:author, article:section and article:tag^[1]. Next.js writes article:published_time and article:author for you when you set the type to article^[21].

You can list more than one og:image. Where values conflict, the spec says “The first tag (from top to bottom) is given preference”^[1]. Put the image you want first.

X (Twitter) cards and the og fallback

A Twitter card, now an X card, is X’s version of the same idea. Its tags start with twitter: and use a name attribute instead of property. X listed four card types: summary, summary_large_image, app and player^[7]. For a web page the choice is between the two summary cards. The large one shows “a large, full-width prominent image” with the post^[9].

X never asked you to repeat your Open Graph tags. Its guide said: “When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property.” Its parser also accepted the property attribute, “so there is no need to modify existing Open Graph protocol markup”^[7].

One tag has no og twin: twitter:card. X’s reference says that if og:type, og:title and og:description exist but twitter:card is absent, “then a summary card may be rendered”^[8]. “May” is not a promise, and summary is the small card. If you want the wide image, set twitter:card to summary_large_image. Note one more rule. X supported one card type per page, and if there were several, “the ‘last’ one in sequence will take priority”^[7]. That is the opposite of Open Graph, where the first tag wins.

For summary_large_image, X gave a 2:1 aspect ratio, at least 300 by 157 pixels and at most 4096 by 4096^[9]. X’s crawler, Twitterbot, follows robots.txt. If a page is blocked, no card is shown, and if only the image is blocked, the card has no image. X also cached a card for 7 days after the link was posted^[7].

Which tags each platform reads

Every platform builds its card from the same tags, but each documents a different subset. This table lists only what each platform says in its own documentation. Platforms we could not find documentation for are left out. WhatsApp has a guide of its own: WhatsApp link preview not showing.

Sources: Facebook^[4][5][6]; X^[7][8][9]; LinkedIn^[10][11]; Slack^[12][13]; Apple^[14]; Pinterest^[15]; Google^{[16][17][18][19]}.

Slack’s developer docs put it simply: Slack “crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadata, and renders some micro-approximation of the content”^[12]. Slack also explains why it ignores robots.txt. It is “not a crawler”, because it does not follow links and acts on behalf of a person^[13].

Two rules follow from the table. First, put the tags in the HTML your server sends, near the top of the head. Meta says Open Graph properties “need to be listed before the first 1 MB” of a page^[6], and Apple says Messages previews do not run JavaScript, so “metadata must be available directly on the linked page”^[14]. Tags added by a script after the page loads may never be seen. Second, expect caching. Each platform keeps the card it built, for its own length of time.

Open Graph vs schema.org structured data

They look alike, since both describe a page in a form machines can read. But they serve different readers. Open Graph is for apps that build a card when a link is shared. Schema.org structured data is, in Google’s words, “a standardized format for providing information about a page and classifying the page content”^[20]. Google uses it for rich results, and recommends the JSON-LD format^[20].

They do overlap in places. For site names, Google says its system considers og:site_name, “However, WebSite structured data is most important, if you want to specify a preference”^[17]. For a page’s preferred image, Google accepts either og:image or the schema.org property primaryImageOfPage^[18]. Pinterest says the most common formats for Rich Pins are “Open Graph and Schema.org”^[15].

So use both, and make them agree: the same title, the same image and the same name everywhere. Build the JSON-LD with the free schema markup generator, and see the entity SEO guide for how structured data tells engines who you are.

Do og tags affect SEO or AI answers?

Start with what Google documents. It reads three Open Graph tags, and all three are about how a result looks.

• og:title is one of the sources Google uses to write title links, next to the title element and headings^[16]. Our guide to title tags covers why Google rewrites them.
• og:site_name is one of the inputs to the site name shown with results^[17].
• og:image is one way to suggest a preferred image, for example “a text result image or the preview image in Discover”^[18]. Discover asks for images at least 1200 px wide, set with schema.org markup or og:image, and enabled by the max-image-preview:large setting^[19].

Now the caveat. None of those pages describes Open Graph as a ranking signal, and we found no Google statement that says it is one, or that it is not. Google calls its choice of site name and image “completely automated”; your tags are one input among several^[17][18]. Claims that og tags boost rankings have no Google source behind them. A good card may earn more clicks when a link is shared, but we know of no study that measures how many, so we give no number.

For AI answers, the facts are thinner still. OpenAI, Anthropic and Perplexity document their crawlers and how to control them. None of their pages, read on 6 October 2026, mentions Open Graph or meta tags^[25][26][27]. Meta separates its crawlers: facebookexternalhit fetches links shared on Facebook, Instagram or Messenger, while meta-externalagent crawls for uses “such as training foundation AI models”, and meta-webindexer works on Meta AI search results^[6]. It does not say which of them read og tags.

So the honest answer is this. AI crawlers fetch your HTML, and your og tags are in it. Whether any AI engine uses them is not documented. What is documented points one way. Vercel and MERJ found that none of the major AI crawlers they measured render JavaScript, and advise server-rendering “meta information (titles, descriptions, categories)”^[28]. Send the tags from the server, and write og:title and og:description as an accurate summary of the page. That is what any reader, human or machine, will take from them.

How to add Open Graph tags

Wherever the tags come from, the result is the same few lines in the head. Pick your setup.

<head>
  <!-- The four tags the Open Graph spec requires -->
  <meta property="og:title" content="Open Graph protocol explained" />
  <meta property="og:type" content="article" />
  <meta property="og:image" content="https://www.example.com/images/open-graph-card.png" />
  <meta property="og:url" content="https://www.example.com/blog/open-graph" />

  <!-- Optional, and worth having on every page -->
  <meta property="og:description" content="The four required tags, the useful optional ones, and how X cards fit in." />
  <meta property="og:site_name" content="Example" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="A link card built from og tags" />
  <meta property="article:published_time" content="2026-10-11T12:00:00Z" />

  <!-- X: one tag of its own. Title, description and image fall back to og -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@example" />
</head>

// app/layout.tsx: shared fields, set once
import type { Metadata } from "next";

export const metadata: Metadata = {
  // Turns relative URLs below into absolute ones
  metadataBase: new URL("https://www.example.com"),
  openGraph: { siteName: "Example", locale: "en_US", type: "website" },
  twitter: { card: "summary_large_image", site: "@example" },
};

// app/blog/open-graph/page.tsx
export const metadata: Metadata = {
  title: "Open Graph protocol explained",
  description: "The four required tags, the useful optional ones, and how X cards fit in.",
  openGraph: {
    // This object REPLACES the layout's openGraph, so repeat the shared fields
    siteName: "Example",
    locale: "en_US",
    type: "article",
    title: "Open Graph protocol explained",
    description: "The four required tags, the useful optional ones, and how X cards fit in.",
    url: "/blog/open-graph",
    publishedTime: "2026-10-11T12:00:00Z",
  },
};

// app/blog/open-graph/opengraph-image.png (or .tsx to generate it)
// Next.js adds og:image, og:image:type, og:image:width and og:image:height

Yoast SEO: Open Graph is on by default. To check it:
  Yoast SEO > Settings > Site features > Social sharing
  Open Graph data: On

Per post or page:
  Yoast sidebar > Social media appearance
  Set the image, title and description

Only one plugin should write og tags.
If another plugin also does, turn the feature off in one of them.

One Next.js catch. Since version 15.2, generateMetadata can be streamed after the page starts to load. For “HTML-limited bots” such as facebookexternalhit, Next.js still puts the metadata in the head^[21]. Our Next.js SEO guide shows what that means for AI crawlers.

How to test and refresh a card

Test in two steps. First, see what the page sends, with the Open Graph checker or your browser’s view source. Then ask each platform to fetch the page again, because each one keeps the card it built first.

• Facebook. The Sharing Debugger “will show which meta tags the crawler scrapes as well as any errors or warnings”, and running it triggers a new scrape. But images “are cached based on the URL and won’t be updated unless the URL changes”^[4]. A new image needs a new file name.
• LinkedIn. Post Inspector refreshes the card for new posts. “The preview for any existing posts with this URL will remain the same”^[11]. More in LinkedIn post preview.
• X. Its archived docs say a card was cached for 7 days after the link was posted^[7]. Get the tags right before a launch post, not after.
• Slack. Fetches are cached for around 30 minutes^[13]. Wait, then share the link again.

Checking a whole site

A checker covers one URL at a time. Across a site, the problems that weaken share cards and search results alike are usually duplicated titles and descriptions, copied from a template. CoreCited’s Site Audit crawls your site, flags pages that share a title or meta description, and checks each page’s JSON-LD. It does not check og tags, so pair it with the free checker for those. The free account audits 10 pages, and every limit is on the pricing page.

Questions people ask

Sources