What are Open Graph tags?

Open Graph (OG) tags are meta tags that control how content appears when shared on social media. Originally created by Facebook, they're now supported by LinkedIn, Pinterest, and other platforms. OG tags define title, description, image, and content type for rich link previews.

What is the difference between Open Graph and Twitter Cards?

Open Graph (og:) is used by Facebook, LinkedIn, and Pinterest. Twitter Cards (twitter:) are Twitter-specific. Twitter supports both but prefers its own tags. Best practice is to include both OG and Twitter tags for maximum compatibility across all platforms.

What are the recommended OG image sizes?

Facebook recommends 1200×630px (1.91:1 ratio) for shared links. Minimum is 200×200px. Twitter recommends 1200×600px for summary cards. LinkedIn uses 1200×627px. For best results across all platforms, use 1200×630px PNG or JPG images.

What OG type values are available?

Common OG types include: website (default), article, blog, book, music.song, music.album, video.movie, profile, product. Article type supports additional tags like published_time, author, and section for richer metadata.

How do I test Open Graph tags?

Use platform-specific debuggers: Facebook Sharing Debugger (shares.facebook.com), LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator (cards-dev.twitter.com). These tools show preview and report errors.

Where should OG tags be placed in HTML?

OG tags belong in the section of your HTML document, typically after charset and viewport meta tags. They should appear before any external CSS or JavaScript links for optimal crawler access.

Open Graph Generator

Generate Open Graph tags for Facebook, LinkedIn and other social previews.

Back to all tools on ToolForge

About Open Graph Generator

This Open Graph generator creates OG meta tags and Twitter Card tags for social media sharing. Open Graph protocol was introduced by Facebook in 2010 and is now supported by LinkedIn, Pinterest, Slack, and other platforms. The generator produces properly formatted meta tags for optimal social preview display.

It is useful for web developers, content managers, SEO specialists, and marketers who need to ensure their content displays correctly when shared on social platforms with rich previews including title, description, and thumbnail images.

Open Graph Protocol

Open Graph enables web pages to become rich objects in social graphs:

Open Graph Basics:

Protocol: ogp.me
Namespace: xmlns:og="http://ogp.me/ns#"

Required Properties:
  - og:title: Title of your content
  - og:type: Content type (website, article, etc.)
  - og:image: Image URL for preview
  - og:url: Canonical URL of the page

Optional Properties:
  - og:description: Content description
  - og:site_name: Overall site name
  - og:locale: Language/region (en_US default)
  - og:video: Video URL for rich content

Complete Example:
  <head>
    <meta property="og:type" content="website">
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Page description">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:site_name" content="Site Name">
    <meta property="og:locale" content="en_US">
  </head>

OG Type Values

Type	Description	Use Case
website	Default type for web pages	Homepages, landing pages
article	News articles and blog posts	Blog posts, news stories
book	Books with ISBN metadata	Book pages, reviews
profile	Person profiles	User profiles, bios
product	E-commerce products	Product pages, shops
video.movie	Movies and films	Movie pages, streaming
music.song	Music tracks	Song pages, lyrics

Twitter Card Types

Twitter Card Types:

1. summary (Default)
   - 100×100px minimum image
   - Title + description + small image
   - Best for: Articles, blog posts

   <meta name="twitter:card" content="summary">

2. summary_large_image
   - 300×157px minimum (1200×600 recommended)
   - Full-width preview image
   - Best for: Photography, featured content

   <meta name="twitter:card" content="summary_large_image">

3. app (Deprecated)
   - Mobile app downloads
   - Now use standard cards with app links

4. player (Requires approval)
   - Embedded media player
   - Video/audio content

Complete Twitter Tags:
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@username">
  <meta name="twitter:creator" content="@author">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Description">
  <meta name="twitter:image" content="https://example.com/image.jpg">

Image Specifications

Platform	Recommended Size	Aspect Ratio	File Size	Format
Facebook	1200×630px	1.91:1	<8MB	JPG, PNG
Twitter	1200×600px	2:1	<5MB	JPG, PNG, GIF
LinkedIn	1200×627px	1.91:1	<5MB	JPG, PNG
Pinterest	1000×1500px	2:3	<20MB	JPG, PNG
Slack	1200×630px	1.91:1	N/A	JPG, PNG

Article-Specific Tags

Article Type Properties:

For blog posts and news articles, use og:type="article"
with additional metadata:

  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2024-03-15T10:00:00Z">
  <meta property="article:modified_time" content="2024-03-16T08:30:00Z">
  <meta property="article:author" content="https://example.com/author/john">
  <meta property="article:section" content="Technology">
  <meta property="article:tag" content="Web Development">

ISO 8601 Date Format:
  YYYY-MM-DDTHH:MM:SSZ
  Example: 2024-03-15T10:00:00Z

Multiple Authors:
  Use separate meta tags for each:
  <meta property="article:author" content="Author 1">
  <meta property="article:author" content="Author 2">

Multiple Tags:
  <meta property="article:tag" content="Tag 1">
  <meta property="article:tag" content="Tag 2">

Complete Example

Full Implementation Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Primary Meta Tags -->
  <title>Web Development Guide | ToolForge</title>
  <meta name="title" content="Web Development Guide | ToolForge">
  <meta name="description" content="Complete guide to modern web development.">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://toolforge.site/guide/">
  <meta property="og:title" content="Web Development Guide | ToolForge">
  <meta property="og:description" content="Complete guide to modern web development.">
  <meta property="og:image" content="https://toolforge.site/images/og-guide.jpg">
  <meta property="og:site_name" content="ToolForge">
  <meta property="og:locale" content="en_US">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@toolforge">
  <meta name="twitter:creator" content="@author">
  <meta name="twitter:title" content="Web Development Guide | ToolForge">
  <meta name="twitter:description" content="Complete guide to modern web development.">
  <meta name="twitter:image" content="https://toolforge.site/images/og-guide.jpg">

  <!-- Additional SEO -->
  <link rel="canonical" href="https://toolforge.site/guide/">
</head>
<body>
  ...
</body>
</html>

Testing and Debugging

Tool	URL	Platform
Sharing Debugger	shares.facebook.com	Facebook
Post Inspector	linkedin.com/post-inspector	LinkedIn
Card Validator	cards-dev.twitter.com	Twitter
Pin It Button	developers.pinterest.com	Pinterest
Slack Preview	Paste URL in Slack	Slack

Best Practices

Use absolute URLs: Always use full URLs (https://...) for og:url and og:image to ensure crawlers can access them.
Host images on your domain: Some platforms may not display images from certain CDNs or external hosts.
Include both OG and Twitter tags: Maximum compatibility across all social platforms requires both tag sets.
Keep titles concise: 60 characters or less for optimal display across platforms.
Write compelling descriptions: 150-160 characters, similar to meta description best practices.
Refresh caches: Use platform debuggers to refresh cached previews after updating tags.
Validate image accessibility: Ensure OG images are publicly accessible without authentication.

Common Mistakes

Relative image URLs: Using /image.jpg instead of https://example.com/image.jpg causes broken images.
Images too small: Images under 200×200px may not display or appear pixelated.
Missing og:type: Without type, platforms may not render preview correctly.
Inconsistent tags: Different titles in OG vs Twitter tags create confusing previews.
Protected images: Images behind login walls or hotlink protection won't load in previews.
Wrong aspect ratio: Incorrect ratios cause awkward cropping on different platforms.
Not refreshing cache: Updated tags may not appear until cache is manually refreshed via debugger tools.

Limitations

Platform variations: Each platform interprets OG tags slightly differently; testing on each is recommended.
Cache delays: Social platforms cache previews; changes may take time to propagate even after cache refresh.
No video preview: This generator creates static tags only; video OG tags require additional configuration.
Limited type support: Some specialized OG types (music.*, video.*) require additional properties not covered here.
No structured data: OG tags are separate from Schema.org structured data; both may be needed for optimal SEO.

Frequently Asked Questions

What are Open Graph tags?: Open Graph (OG) tags are meta tags that control how content appears when shared on social media. Originally created by Facebook, they're now supported by LinkedIn, Pinterest, and other platforms. OG tags define title, description, image, and content type for rich link previews.
What is the difference between Open Graph and Twitter Cards?: Open Graph (og:) is used by Facebook, LinkedIn, and Pinterest. Twitter Cards (twitter:) are Twitter-specific. Twitter supports both but prefers its own tags. Best practice is to include both OG and Twitter tags for maximum compatibility across all platforms.
What are the recommended OG image sizes?: Facebook recommends 1200×630px (1.91:1 ratio) for shared links. Minimum is 200×200px. Twitter recommends 1200×600px for summary cards. LinkedIn uses 1200×627px. For best results across all platforms, use 1200×630px PNG or JPG images.
What OG type values are available?: Common OG types include: website (default), article, blog, book, music.song, music.album, video.movie, profile, product. Article type supports additional tags like published_time, author, and section for richer metadata.
How do I test Open Graph tags?: Use platform-specific debuggers: Facebook Sharing Debugger (shares.facebook.com), LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator (cards-dev.twitter.com). These tools show preview and report errors.
Where should OG tags be placed in HTML?: OG tags belong in the section of your HTML document, typically after charset and viewport meta tags. They should appear before any external CSS or JavaScript links for optimal crawler access.