Open Graph Generator
Kontakt
Back to Blog
Open GraphMeta Tags

Open Graph Tags: Complete List With Examples

Every Open Graph meta tag documented with HTML code examples, including og:title, og:image, og:type, article properties, and structured sub-properties.

SS
Sanjay Samanta•June 5, 2026
10 min read

Open Graph defines over 30 distinct meta tag properties across multiple object types. Knowing which tags to use — and which are optional — is the difference between a polished social preview card and a broken one.

This reference documents every Open Graph tag with HTML code examples, organized by category.

Core Properties (Required)

These four properties are mandatory for every Open Graph-enabled page:

<meta property="og:title" content="Your Page Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/image.png" />
Property Description Max Length
og:title The preview card headline 60 characters recommended
og:type Content classification See type values below
og:url Canonical page URL Full HTTPS URL
og:image Preview image URL Full HTTPS URL, 1200×630 px 
<meta property="og:description" content="A clear, compelling summary of your page content." />
<meta property="og:site_name" content="Open Graph Generator" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:determiner" content="the" />
Property Description
og:description 1–2 sentence summary (150 chars optimal)
og:site_name The name of your website or brand
og:locale Language and territory code (see Open Graph Locale Explained)
og:locale:alternate Additional supported locales
og:determiner Word before the title ("a", "an", "the", "", "auto")

Image Properties (Structured)

The og:image tag supports several sub-properties for precise control:

<meta property="og:image" content="https://example.com/banner.png" />
<meta property="og:image:secure_url" content="https://example.com/banner.png" />
<meta property="og:image:type" content="image/png" />
<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 preview image" />
Property Description
og:image:secure_url HTTPS version of the image URL
og:image:type MIME type (image/png, image/jpeg, image/webp)
og:image:width Image width in pixels
og:image:height Image height in pixels
og:image:alt Accessibility text for screen readers

For image dimension recommendations per platform, see the Open Graph Image Size Guide.

Video Properties

<meta property="og:video" content="https://example.com/video.mp4" />
<meta property="og:video:secure_url" content="https://example.com/video.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />

Audio Properties

<meta property="og:audio" content="https://example.com/audio.mp3" />
<meta property="og:audio:secure_url" content="https://example.com/audio.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

Article Properties

When og:type is set to article, these additional properties become available:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-05T00:00:00Z" />
<meta property="article:modified_time" content="2026-06-10T00:00:00Z" />
<meta property="article:expiration_time" content="2027-06-05T00:00:00Z" />
<meta property="article:author" content="https://example.com/authors/sanjay-samanta" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="Open Graph" />
<meta property="article:tag" content="SEO" />
Property Description
article:published_time ISO 8601 publication timestamp
article:modified_time ISO 8601 last modification timestamp
article:expiration_time ISO 8601 content expiration date
article:author URL to the author’s profile
article:section Top-level content category
article:tag Content tags (repeatable)

Profile Properties

When og:type is profile:

<meta property="og:type" content="profile" />
<meta property="profile:first_name" content="Sanjay" />
<meta property="profile:last_name" content="Samanta" />
<meta property="profile:username" content="sanjaysamanta" />
<meta property="profile:gender" content="male" />

Object Type Values

Type Use For
website Homepages, landing pages
article Blog posts, news, editorials
profile Author/user profile pages
product E-commerce product pages
video.movie Films
video.episode TV episodes
video.other Other video content
music.song Music tracks
music.album Music albums
book Books

Complete Copy-Paste Template

For a ready-to-use HTML template with all recommended tags, see our Open Graph Template: Complete HTML Template.

To understand the difference between OG tags and standard HTML meta tags, read Open Graph vs Meta Tags.

Generate and validate your tags instantly with the Open Graph Generator — our free tool previews how your card renders across 8+ social platforms simultaneously.

Deep Technical Framework Implementations

Integrating optimized social preview tags into production web frameworks requires understanding how each runtime handles head metadata and server-side rendering:

1. Next.js App Router (layout.tsx / page.tsx)

In Next.js 14 and 15, use the centralized Metadata API to construct unified Open Graph and Twitter Card tags. This ensures that edge crawlers receive complete, pre-rendered meta tags in the initial HTML stream before client hydration:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Next-Generation Web Metadata & Social Graph Suite',
  description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
  openGraph: {
    title: 'Next-Generation Web Metadata & Social Graph Suite',
    description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
    url: 'https://opengraphgenerator.com/',
    siteName: 'Open Graph Generator',
    images: [
      {
        url: 'https://opengraphgenerator.com/images/hero-1200x630.png',
        width: 1200,
        height: 630,
        alt: 'Open Graph Generator Dashboard Interface',
        type: 'image/png',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    site: '@OpenGraphGen',
    creator: '@sanjaysamanta',
    title: 'Next-Generation Web Metadata & Social Graph Suite',
    description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
    images: ['https://opengraphgenerator.com/images/hero-1200x630.png'],
  },
};

For dynamic route handling in Next.js, read our comprehensive Next.js Open Graph Guide.

2. Astro Component Head Architecture

Astro’s component-first model allows you to encapsulate social sharing tags into reusable SEO layouts:

---
interface Props {
  title: string;
  description: string;
  image?: string;
  canonicalUrl?: string;
  type?: 'website' | 'article';
}

const {
  title,
  description,
  image = 'https://opengraphgenerator.com/images/default-og.png',
  canonicalUrl = Astro.url.href,
  type = 'website'
} = Astro.props;
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalUrl} />

  <!-- Open Graph -->
  <meta property="og:type" content={type} />
  <meta property="og:site_name" content="Open Graph Generator" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:url" content={canonicalUrl} />
  <meta property="og:image" content={image} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@OpenGraphGen" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={image} />
</head>

3. Nuxt 3 & Vue Composition API

<script setup lang="ts">
useSeoMeta({
  title: 'Enterprise Social Metadata Management',
  ogTitle: 'Enterprise Social Metadata Management',
  description: 'Scalable Open Graph and Twitter Card automation for multi-tenant applications.',
  ogDescription: 'Scalable Open Graph and Twitter Card automation for multi-tenant applications.',
  ogImage: 'https://example.com/og-banner.png',
  ogImageWidth: '1200',
  ogImageHeight: '630',
  ogUrl: 'https://example.com/enterprise/',
  ogType: 'website',
  twitterCard: 'summary_large_image',
  twitterSite: '@OpenGraphGen',
});
</script>

Edge Caching, CDN Invalidation & HTTP Headers

To ensure that social scrapers (facebookexternalhit, Twitterbot, LinkedInBot, Slackbot, WhatsApp/2.x) always receive fresh metadata while minimizing origin server CPU load, implement a multi-tiered caching strategy:

Asset Category Cache-Control Header Edge CDN TTL Browser Cache TTL
HTML Webpages public, max-age=0, s-maxage=600, must-revalidate 10 Minutes 0 Seconds (Always revalidate)
Static OG Images public, max-age=31536000, immutable 1 Year 1 Year (Content-hashed URLs)
Dynamic OG API Routes public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400 24 Hours 1 Hour 
# NGINX Edge Caching Configuration for Social Scraping
location ~* \.(html)$ {
    add_header Cache-Control "public, max-age=0, s-maxage=600, must-revalidate";
    add_header X-Robots-Tag "all";
}

location ~* \.(png|jpg|jpeg|webp)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Access-Control-Allow-Origin "*";
}

Comprehensive Troubleshooting & Error Code Resolution Matrix

When debugging failed link previews across development, staging, and production environments, refer to this error resolution matrix:

HTTP Status / Error Scraper Behavior Root Cause Actionable Developer Fix
401 Unauthorized Plain URL rendered, no image or text Staging environment protected by Basic Auth or IP whitelist Allowlist crawler User-Agent strings or test on public preview URLs.
403 Forbidden Scraper skips metadata extraction Web Application Firewall (WAF) or Cloudflare Bot Management blocking scrapers Add WAF custom rules to bypass verified social bots (Twitterbot, facebookexternalhit, LinkedInBot).
404 Not Found Error page metadata cached Scraped URL does not exist or has an unhandled redirect Ensure canonical trailing slashes match server routing. Inspect with Head Auditor.
SSL Handshake Failure Scraper aborts connection immediately Missing intermediate SSL certificate or expired TLS cert Install full certificate bundle. Audit security with Security Headers.
Timeout (3.0s+) Text-only link with no thumbnail Slow server response time or SSR cold starts Cache HTML responses at the edge or use static pre-rendering.
Stale Preview Cache Shows old headline/image after deploy Social platform CDN cache still active Invalidate via Facebook Debugger or LinkedIn Post Inspector.

For an in-depth walkthrough on cache purging, read How to Fix Cached Previews on LinkedIn & WhatsApp.

The Complete Technical SEO & Social Ecosystem

A world-class digital presence requires harmonizing social metadata, search engine rich results, crawl directives, and AI agent context:

  1. Live URL Inspection: Audit your production URLs with our Open Graph Inspector to detect missing properties before publishing.
  2. Twitter Card Generation: Ensure large banner rendering with our Twitter Card Generator.
  3. Structured Search Data: Unlock star ratings and FAQ rich snippets with our JSON-LD Schema Generator and validate with our Schema Inspector.
  4. Crawl Budget Management: Verify search engine bot permissions using our Robots Simulator and build compliant files with our Robots.txt Builder.
  5. AI Knowledge Architecture: Format repository knowledge for AI coding agents (Cursor, Claude Code, Windsurf) using the Open Knowledge Format (OKF) Generator and explore the OKF Developer Guide.

Generate and validate your full metadata stack with our free Open Graph Generator today!

More Articles
Advertisement

Related Articles

Does Open Graph Help SEO?

6 min read

Dynamic Open Graph Images: Complete Guide

8 min read

How to Test Open Graph Tags

6 min read