Open Graph Generator
Contact Us
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.

SS
Sanjay Samanta•June 11, 2026
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

  1. Keep og:title under 60 characters — Longer titles get truncated on mobile previews.
  2. Use og:description of 100–150 characters — Enough to be informative without clipping.
  3. Images must be absolute URLs — Always start with https://. See our Open Graph Image Size Guide for platform-specific dimensions.
  4. og:url must match <link rel="canonical"> — This consolidates social engagement signals.
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