Open Graph Protocol Example: Copy-Paste HTML

Setting up Open Graph tags doesn’t require memorizing the entire specification. Below are copy-paste HTML templates for the most common page types. Replace the placeholder values with your actual content and you’re ready to ship.

---

Website / Homepage Template

Use this for homepages, landing pages, and general web pages:

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Your Website Name — Tagline" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/" />
<meta property="og:image" content="https://yoursite.com/og-banner.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Your Website Name banner" />
<meta property="og:description" content="A clear, compelling one-line description of what your site does." />
<meta property="og:site_name" content="Your Website Name" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Website Name — Tagline" />
<meta name="twitter:description" content="A clear, compelling one-line description of what your site does." />
<meta name="twitter:image" content="https://yoursite.com/og-banner.png" />

---

Blog Post / Article Template

Use this for individual blog posts and news articles:

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Article Title: Descriptive and Under 60 Characters" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://yoursite.com/blog/article-slug" />
<meta property="og:image" content="https://yoursite.com/images/article-banner.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Article banner image description" />
<meta property="og:description" content="A 150-character summary of the article content." />
<meta property="og:site_name" content="Your Blog Name" />
<meta property="og:locale" content="en_US" />

<!-- Article-specific properties -->
<meta property="article:published_time" content="2026-06-07T00:00:00Z" />
<meta property="article:modified_time" content="2026-06-07T00:00:00Z" />
<meta property="article:author" content="https://yoursite.com/authors/your-name" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="Open Graph" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Article Title: Descriptive and Under 60 Characters" />
<meta name="twitter:description" content="A 150-character summary of the article content." />
<meta name="twitter:image" content="https://yoursite.com/images/article-banner.png" />
<meta name="twitter:creator" content="@yourtwitterhandle" />

---

E-Commerce Product Template

Use this for individual product pages:

<meta property="og:title" content="Product Name — $29.99" />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://yourstore.com/products/product-slug" />
<meta property="og:image" content="https://yourstore.com/images/product-photo.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="Brief product description highlighting key features and price." />
<meta property="og:site_name" content="Your Store Name" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Product Name — $29.99" />
<meta name="twitter:description" content="Brief product description highlighting key features and price." />
<meta name="twitter:image" content="https://yourstore.com/images/product-photo.jpg" />

---

Author Profile Template

Use this for team member or author biography pages:

<meta property="og:title" content="Sanjay Samanta — Technical SEO Engineer" />
<meta property="og:type" content="profile" />
<meta property="og:url" content="https://yoursite.com/authors/sanjay-samanta" />
<meta property="og:image" content="https://yoursite.com/images/sanjay-headshot.jpg" />
<meta property="og:description" content="Learn more about Sanjay Samanta, our lead technical SEO engineer." />

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

---

Validation Checklist

Before deploying any template, verify these critical rules:

1. Image URLs must be absolute — start with https://, never a relative path.
2. og:url must be the canonical URL — no query parameters, no trailing hash fragments.
3. og:title should be under 60 characters — longer titles get truncated on mobile cards.
4. og:description should be 100–150 characters — enough to be informative, short enough to avoid clipping.

---

Related Resources

• Open Graph Tags: Complete List With Examples — Full property reference.
• Open Graph Template: Complete HTML Template — Extended template with JSON-LD integration.
• Open Graph Protocol: Complete Developer Guide — Deep dive into the OGP specification.
• Use the Open Graph Generator to auto-generate these tags with live multi-platform previews.