What is the Open Graph Protocol?

The Open Graph protocol was developed at Facebook and open-sourced in 2010. Its goal was to enable any web page to become a rich object in the social graph — meaning that when a URL is shared, platforms can display a structured, visually rich preview rather than a bare URL. The protocol defines a set of <meta property="og:..."> tags that live in the HTML <head>.

Today, Open Graph tags are read by virtually every major social platform (Facebook, LinkedIn, Pinterest, Slack, Discord, WhatsApp, iMessage) and many messaging apps. Twitter (now X) developed its own Twitter Card system that partly overlaps with Open Graph and partly extends it.

The business case is clear: a well-configured og:image and title dramatically increases click-through rates on shared links, because a compelling visual preview in a social feed is far more engaging than a plain text URL.

The Essential Open Graph Tags

These four tags are required for the Open Graph protocol. Without them, platforms will attempt to infer content from your page, which produces inconsistent and often poor results.

<meta property="og:title" content="Page Title Here">
<meta property="og:description" content="A compelling description of this page">
<meta property="og:type" content="website">
<meta property="og:url" content="https://toolmasta.com/blog/this-page">

In addition to these four, og:image is practically required — shares without an image display as a text-only link card, which receives far fewer clicks in social feeds.

<meta property="og:image" content="https://toolmasta.com/images/og-default.jpg">

Recommended Additional Tags

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive alt text for the image">
<meta property="og:site_name" content="ToolMasta">

Including og:image:width and og:image:height allows platforms to allocate space for the image before fetching it, preventing layout shifts in the preview rendering. og:image:alt is important for accessibility — screen readers used by visually impaired users will read this text when they encounter a shared link.

og:image Specifications for Each Platform

PlatformRecommended SizeMin. SizeAspect RatioMax File Size
Facebook1200×630px600×315px1.91:18MB
LinkedIn1200×627px200×200px1.91:15MB
Twitter (summary_large_image)1200×628px300×157px2:15MB
Discord1200×630px—Any8MB
Slack1200×630px—Any—

Creating a single 1200×630 image works acceptably across all platforms. For pixel-perfect results on each platform, you would create slightly different crops, but for most websites a single og:image is the practical choice. Use JPEG for photos and PNG for graphics with text.

og:type Values

The og:type tag tells the platform what kind of object this page represents. The most common values:

  • website — generic web page (use for homepages and utility pages)
  • article — blog posts, news articles, documentation
  • product — e-commerce product pages
  • profile — personal profile pages
  • video.movie, video.episode — video content
  • music.song, music.album — music content
  • book — book listings

When using og:type = article, you unlock additional article-specific properties (covered below). For most web pages that are not a specific product, video, or profile, use website or article.

Practical Tip: Set og:type to article for all blog posts and content pages, and to website for your homepage and tool pages. This semantic distinction helps social platforms display the appropriate sharing UI elements and signals the nature of your content to crawlers.

og:locale and Internationalisation

The og:locale tag specifies the language and territory of the page content. It uses IETF language tag format: language_TERRITORY.

<meta property="og:locale" content="en_US">
<!-- For British English -->
<meta property="og:locale" content="en_GB">
<!-- For French -->
<meta property="og:locale" content="fr_FR">

If your site has translated versions of the same page, use og:locale:alternate to declare the available alternatives:

<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="de_DE">

Twitter Card Tags

Twitter's Card system extends Open Graph with Twitter-specific controls. Twitter reads Open Graph tags as fallbacks, but explicit Twitter tags give you more precise control. According to the Twitter Cards documentation, there are four card types:

  • summary — small square thumbnail with title and description
  • summary_large_image — large header image above title and description (recommended for articles)
  • app — for mobile app download links
  • player — for audio and video content
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ToolMasta">
<meta name="twitter:creator" content="@ToolMasta">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description for Twitter">
<meta name="twitter:image" content="https://toolmasta.com/images/twitter-card.jpg">
<meta name="twitter:image:alt" content="Alt text for the image">

Debugging Your Open Graph Tags

After adding or updating Open Graph tags, you need to verify they are rendering correctly. The key challenge is that social platforms cache OG data aggressively — a change to your tags may not immediately reflect in new shares.

Use the Facebook Sharing Debugger (search for it by name in your browser) to enter your URL and see exactly how Facebook is reading your Open Graph tags. Critically, it has a "Scrape Again" button that forces Facebook to fetch fresh data and clear the cache for that URL.

LinkedIn has a Post Inspector tool (search: "LinkedIn Post Inspector") that serves the same purpose. For Twitter, sharing the URL in a tweet draft gives you an instant preview — no cache-clearing tool is available for general use.

Common issues to check:

  • Image URL returns a 404 or redirects — the platform will show no image
  • Image dimensions are below the minimum — shows as small thumbnail
  • og:url does not match the canonical URL — may cause de-duplication issues
  • Missing og:type — defaults to "website" but should be explicit
  • Title or description truncated unexpectedly — keep within character limits

Article-Specific Tags

When og:type is set to article, you can use additional properties from the Open Graph article namespace:

<meta property="article:published_time" content="2024-07-05T09:00:00Z">
<meta property="article:modified_time" content="2024-07-05T09:00:00Z">
<meta property="article:author" content="https://toolmasta.com/about">
<meta property="article:section" content="Developer Tools">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Meta Tags">

These tags provide additional context to news aggregators, Facebook Instant Articles, and other content platforms that use structured article data. The published_time value in ISO 8601 format is particularly useful for news-type content.

Try It Free — No Signup Required

Generate all Open Graph, Twitter Card, and SEO meta tags in one form — copy the complete code block instantly.

Generate Meta Tags Now