What is an Open Graph tag?

Open Graph tags are HTML meta tags with a property attribute starting with og: (for example, og:title, og:description, og:image). They were introduced by Facebook and are now used by every major social platform — LinkedIn, Discord, Slack, WhatsApp — to create rich link previews when a URL is shared.

What size should my og:image be?

The recommended og:image size is 1200 × 630 pixels (1.91:1 aspect ratio). This works across Facebook, Twitter large card, and LinkedIn. The image must be served over HTTPS, be publicly accessible, and be under 1 MB. PNG or JPEG formats have the best compatibility.

What is the difference between og:title and the HTML title tag?

The HTML tag is used by browsers (for the tab label) and search engines. The og:title tag is used by social platforms for link previews. They often have the same value but og:title can be shorter or omit the site name suffix since social cards have their own branding context.

Do Twitter Card tags override Open Graph tags?

Twitter reads its own twitter:* tags first and falls back to og:* tags if the twitter:* equivalents are missing. So you can omit twitter:title and twitter:description if they match your og:title and og:description. However, twitter:card is required and has no og:* equivalent.

What does the canonical tag do?

The canonical tag ( ) tells search engines which URL is the preferred version of a page when the same or similar content is accessible at multiple URLs. It prevents duplicate content issues that could dilute your SEO signals.

Open Graph & Meta Tag Generator

Generate Open Graph, Twitter Card, and SEO meta tags — fill in your page details and copy the HTML

All processing happens in your browser. No data is sent to any server.

Core SEO

Page Title15/60

Meta Description72/160

Canonical URL

Keywords (optional, comma-separated)

noindexnofollow

Open Graph

og:type

og:locale

og:site_name (optional)

og:image URL

og:image:alt

og:image:width (px)

og:image:height (px)

Twitter Card

twitter:card

twitter:site (@handle)

twitter:creator (@handle)

Social Share Preview

example.com

My Awesome Page

A brief description of this page for search engines and social networks.

Preview is approximate — actual rendering varies by platform.

Generated Tags

<!-- SEO -->
<meta name="title" content="My Awesome Page">
<meta name="description" content="A brief description of this page for search engines and social networks.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/my-page">

<!-- Open Graph -->
<meta property="og:title" content="My Awesome Page">
<meta property="og:type" content="website">
<meta property="og:description" content="A brief description of this page for search engines and social networks.">
<meta property="og:url" content="https://example.com/my-page">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Page">
<meta name="twitter:description" content="A brief description of this page for search engines and social networks.">
<meta name="twitter:image" content="https://example.com/og-image.png">

You’re launching a page and need the full meta tag stack: <title>, <meta name="description">, Open Graph tags for Facebook/LinkedIn, Twitter Card tags for X, canonical URL, robots directive, and viewport. That’s 12-15 <meta> tags with different attribute patterns (name vs property vs http-equiv), and missing one means a blank preview when someone shares your link.

Why This Generator (Not the OG Meta Tag Generator)

PureDevTools has an OG Meta Tag Generator focused specifically on Open Graph and Twitter Card tags. This tool generates the complete meta tag stack — SEO meta tags, Open Graph, Twitter Cards, and technical meta tags — in one form. Use this for the full <head> snippet; use the OG generator when you only need social sharing tags.

What Are Meta Tags and Why Do They Matter?

Meta tags are HTML elements inside the <head> of a page that provide metadata to browsers, search engines, and social networks. They are invisible to ordinary visitors but critical for how your page appears in Google search results and when shared on platforms like Facebook, LinkedIn, Twitter, Slack, or Discord.

Three sets of tags work together:

Standard SEO tags — <title>, <meta name="description">, <meta name="robots">, and <link rel="canonical"> — tell search crawlers what your page is about and how to index it.
Open Graph tags (og:*) — defined by Facebook, now used by every major platform — control the title, description, image, and type shown when a URL is shared.
Twitter Card tags (twitter:*) — let you choose the card format and supply Twitter-specific overrides for title, description, and image.

Open Graph Tags Reference

og:title

The title of your object as it should appear on the social graph. This is often the same as the page <title> but can be shorter or formatted differently. It has no strict character limit, though 60–70 characters is safe.

<meta property="og:title" content="Free JSON Formatter | PureDevTools">

og:description

A one to two sentence summary of your page. Platforms typically display the first 100–200 characters. Write for humans, not crawlers — this is your chance to entice a click.

<meta property="og:description" content="Format, minify, and validate JSON with syntax highlighting. All in your browser, nothing sent to any server.">

og:image

The image that appears in the social card. Best practices:

Dimensions: 1200 × 630 px (1.91:1 ratio) for wide cards; 1:1 for summary cards.
Format: PNG or JPEG (WebP has limited support on older scrapers).
Size: Under 1 MB.
Absolute URL: Must start with https://.

<meta property="og:image" content="https://example.com/og-images/homepage.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Screenshot of the JSON Formatter tool">

og:url

The canonical URL of the page. When your content is accessible through multiple URLs (e.g., with and without trailing slash, or with query strings), set og:url to the preferred form so all shares aggregate engagement under one URL.

og:type

Declares the type of content. website is the default. Use article for blog posts and news articles to unlock article-specific tags like article:published_time and article:author.

Value	Use case
`website`	Default — home pages, tool pages, landing pages
`article`	Blog posts, documentation, news
`product`	E-commerce product pages
`video.movie`	Standalone video pages
`profile`	Author or user profile pages

og:site_name

The name of the overall website, not the specific page. LinkedIn and others display this as a secondary label under the card.

<meta property="og:site_name" content="PureDevTools">

Twitter Card Tags Reference

Twitter Cards extend Open Graph with Twitter-specific behavior. If twitter:* tags are absent, Twitter falls back to og:* values.

twitter:card

Declares the card format:

Value	Appearance
`summary_large_image`	Large hero image above title — recommended for most pages
`summary`	Small square thumbnail to the left of text
`app`	For mobile app download cards
`player`	For inline video/audio players

twitter:site and twitter:creator

Both accept a Twitter @handle. twitter:site is the account the card is attributed to (e.g., your brand), while twitter:creator is the individual author.

<meta name="twitter:site" content="@puredevtools">
<meta name="twitter:creator" content="@authorhandle">

SEO Meta Tags Reference

Meta Description

The description shown under your page title in Google. It does not directly affect ranking, but a compelling description improves click-through rate (CTR), which is a ranking signal.

Optimal length: 50–160 characters.
Contains the primary keyword: Ideally near the start.
Ends with an implicit or explicit call to action.

<meta name="description" content="Generate strong passwords with a cryptographically secure PRNG. Set length, character sets, and download in bulk. No server, no logging.">

Canonical URL

Prevents duplicate content penalties when identical or near-identical content is accessible under multiple URLs.

<link rel="canonical" href="https://puredevtools.tools/json-formatter">

Robots

Controls search engine crawling and indexing:

<!-- Default: allow indexing and following links -->
<meta name="robots" content="index, follow">

<!-- Prevent indexing of private or staging pages -->
<meta name="robots" content="noindex, nofollow">

Article Metadata

When og:type is article, you can add structured metadata that Google uses for rich results in news searches and Discover:

<meta property="article:published_time" content="2025-01-15T10:00:00Z">
<meta property="article:modified_time" content="2025-06-01T12:00:00Z">
<meta property="article:author" content="Jane Doe">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="web development">

Published and modified times must be ISO 8601 format. Use UTC (Z suffix) or include an offset (+05:30).

Recommended Image Dimensions

Platform	Recommended size	Minimum size	Aspect ratio
Facebook / Open Graph	1200 × 630	600 × 315	1.91:1
Twitter large card	1200 × 628	300 × 157	2:1
Twitter summary card	144 × 144	68 × 68	1:1
LinkedIn	1200 × 627	1200 × 627	1.91:1

A 1200 × 630 PNG is the most universally compatible single image size.

Complete Implementation Example

A typical developer tool page includes all three tag families:

<!-- SEO -->
<meta name="title" content="JSON Formatter | PureDevTools">
<meta name="description" content="Format and validate JSON with syntax highlighting. All in your browser.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://puredevtools.tools/json-formatter">

<!-- Open Graph -->
<meta property="og:title" content="JSON Formatter | PureDevTools">
<meta property="og:type" content="website">
<meta property="og:description" content="Format and validate JSON with syntax highlighting. All in your browser.">
<meta property="og:url" content="https://puredevtools.tools/json-formatter">
<meta property="og:image" content="https://puredevtools.tools/og/json-formatter.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="JSON Formatter tool screenshot">
<meta property="og:site_name" content="PureDevTools">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="JSON Formatter | PureDevTools">
<meta name="twitter:description" content="Format and validate JSON with syntax highlighting. All in your browser.">
<meta name="twitter:image" content="https://puredevtools.tools/og/json-formatter.png">
<meta name="twitter:site" content="@puredevtools">

Validating Your Tags

After deploying, verify your tags with the official debugging tools:

Facebook Sharing Debugger: developers.facebook.com/tools/debug — fetches your URL and shows the parsed Open Graph tags and card preview.
Twitter Card Validator: cards-dev.twitter.com/validator — shows how your card will appear in a tweet.
LinkedIn Post Inspector: linkedin.com/post-inspector — renders the LinkedIn link preview.
Google Rich Results Test: search.google.com/test/rich-results — validates structured data and Article markup.

Note that most debuggers cache results for up to 30 minutes. Use the “Scrape Again” option after updating your tags.

Common Issues and Fixes

Wrong image showing: Sharing debuggers cache aggressively. Force a re-scrape through the debugger tool. Also check that the og:image URL is absolute (not relative), returns a 200 status, and uses HTTPS.

Title truncated: Keep og:title under 70 characters. Some platforms cut at around 65.

No image displayed: The image URL must be publicly accessible — no authentication, no IP restriction. Also ensure the image meets minimum size requirements (at least 200 × 200 px for most platforms).

Description showing page content instead: og:description is missing or empty. Add the tag explicitly; platforms will not fall back to page body text in all cases.

LinkedIn ignoring updates: LinkedIn caches URLs for up to 7 days. Use the Post Inspector to clear the cache for your URL.

Related Tools

JSON Formatter

Format, validate, and minify JSON with syntax highlighting

URL Encoder / Decoder

Encode and decode URLs with percent-encoding

HTML Entity Encoder / Decoder

Encode special characters to HTML entities and decode them back

More SEO & Web Tools

Open Graph Preview robots.txt Generator Favicon Generator Web Manifest Generator Open Graph Preview Twitter Card Generator View all →