Back to Blog
Open GraphTemplates
Open Graph Template: Complete HTML Template
A production-ready HTML template with Open Graph, Twitter Card, and JSON-LD structured data tags. Copy, customize, and deploy.
6 min read
Setting up Open Graph correctly requires a specific combination of meta tags placed in a specific order. Rather than piecing together snippets from different sources, use this production-ready HTML template that includes Open Graph, Twitter Card, and JSON-LD structured data in a single, validated block.
The Complete Open Graph HTML Template
Copy the following template into your page’s <head> section and replace all placeholder values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary SEO Meta Tags -->
<title>Page Title — Site Name</title>
<meta name="description" content="A clear, compelling description of the page (150 characters)." />
<meta name="author" content="Author Name" />
<link rel="canonical" href="https://yoursite.com/page-url" />
<!-- Open Graph / Facebook / LinkedIn / WhatsApp -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/page-url" />
<meta property="og:title" content="Page Title — Site Name" />
<meta property="og:description" content="A clear, compelling description of the page." />
<meta property="og:image" content="https://yoursite.com/images/og-banner.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 banner image" />
<meta property="og:image:type" content="image/png" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter / X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://yoursite.com/page-url" />
<meta name="twitter:title" content="Page Title — Site Name" />
<meta name="twitter:description" content="A clear, compelling description of the page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-banner.png" />
<meta name="twitter:image:alt" content="Descriptive alt text for the banner image" />
<meta name="twitter:creator" content="@yourtwitterhandle" />
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Page Title",
"description": "A clear description of the page content.",
"url": "https://yoursite.com/page-url",
"image": "https://yoursite.com/images/og-banner.png",
"publisher": {
"@type": "Organization",
"name": "Site Name",
"url": "https://yoursite.com",
"logo": {
"@type": "ImageObject",
"url": "https://yoursite.com/logo.png"
}
}
}
</script>
</head>Blog Article Variation
For blog posts, change og:type to article and add article-specific properties:
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-11T00:00:00Z" />
<meta property="article:modified_time" content="2026-06-11T00:00:00Z" />
<meta property="article:author" content="https://yoursite.com/authors/author-name" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="Open Graph" />And update the JSON-LD type to Article:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"datePublished": "2026-06-11T00:00:00Z",
"dateModified": "2026-06-11T00:00:00Z",
"author": {
"@type": "Person",
"name": "Author Name",
"url": "https://yoursite.com/authors/author-name"
}
}
</script>Key Customization Notes
- Keep
og:titleunder 60 characters — Longer titles get truncated on mobile previews. - Use
og:descriptionof 100–150 characters — Enough to be informative without clipping. - Images must be absolute URLs — Always start with
https://. See our Open Graph Image Size Guide for platform-specific dimensions. og:urlmust match<link rel="canonical">— This consolidates social engagement signals.
Related Resources
- Open Graph Protocol Example: Copy-Paste HTML — Simpler examples per content type.
- Open Graph Tags: Complete List With Examples — Full tag reference.
- Open Graph Meta Tags for SEO — How OG tags affect search rankings.
- Where to Put JSON-LD in HTML — JSON-LD placement best practices.
- Generate and preview your template live with the Open Graph Generator.