Open Graph Meta Tags Example (Copy-Paste)

8 min read

May 27, 2026

You need Open Graph tags in your HTML but do not want to guess the syntax. These copy-paste templates cover the three page types most sites share: homepage, article, and product. Replace the placeholder values, drop the block into your <head>, and scan with OpenGraph Check before you publish.

Short answer

Every page needs og:title, og:description, og:image, og:url, and og:type in server-rendered HTML. Homepages use og:type website. Blog posts use article with optional article:* tags. Product pages use product with price and availability fields. All URLs must be absolute HTTPS. Paste your live URL into OpenGraph Check to verify the output.

Before you copy anything

Open Graph tags belong in the <head> section. Crawlers read the first HTML response. Tags added only by client-side JavaScript are invisible to Facebook, LinkedIn, Slack, and most other platforms.

Rules for every template below:

Replace https://example.com with your domain
Use absolute URLs for og:image, og:url, and all image references
Image size: 1200 × 630 px recommended (see Open Graph Image Size Guide)
Keep og:title under 60 characters and og:description around 80 to 125 characters
Add matching Twitter Card tags for X (see the Twitter block at the end)

New to the protocol? Read Open Graph Tags Explained first.

Homepage template (og:type website)

Use this for your root URL, marketing landing pages, and any general site page that is not an article or product.

<!-- Open Graph - Homepage -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Brand Name">
<meta property="og:title" content="Your Brand - Short value proposition">
<meta property="og:description" content="One sentence explaining what your site offers and why visitors should care.">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/images/og-home.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">

What each field does on a homepage:

Tag	Tip
`og:site_name`	Brand name shown above the title on Facebook and Discord
`og:title`	Lead with your brand or main offer, not generic "Home"
`og:description`	Your elevator pitch, not a list of navigation links
`og:url`	Match the canonical homepage URL exactly
`og:image`	Brand hero image or logo lockup on a clean background

Homepage previews appear in footer links, email signatures, and "About us" shares. Invest in a strong default image.

Blog post / article template (og:type article)

Use this for news posts, tutorials, case studies, and any dated editorial content.

<!-- Open Graph - Article -->
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Brand Name">
<meta property="og:title" content="How to Fix Missing Open Graph Tags">
<meta property="og:description" content="Step-by-step guide to og:title, og:description, og:url, and og:type when your link preview text is wrong.">
<meta property="og:url" content="https://example.com/blog/how-to-fix-missing-og-tags">
<meta property="og:image" content="https://example.com/images/og/blog-missing-tags.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<!-- Article-specific (optional but recommended) -->
<meta property="article:published_time" content="2026-06-19T08:00:00+00:00">
<meta property="article:modified_time" content="2026-06-19T08:00:00+00:00">
<meta property="article:author" content="https://example.com/about/jane-doe">
<meta property="article:section" content="Open Graph">
<meta property="article:tag" content="open graph">
<meta property="article:tag" content="meta tags">

Article-specific notes:

og:title should match the post headline, not the site name alone
og:image can be a featured image unique to the post
article:published_time uses ISO 8601 format with timezone
article:author accepts a URL or profile link, not just a plain name on all platforms
Multiple article:tag entries are allowed

If you publish in multiple languages, set og:locale to en_US or de_DE and add og:locale:alternate for translations.

Product page template (og:type product)

Use this for e-commerce product detail pages where price and availability matter.

<!-- Open Graph - Product -->
<meta property="og:type" content="product">
<meta property="og:site_name" content="Your Store Name">
<meta property="og:title" content="Wireless Headphones Pro - Your Store">
<meta property="og:description" content="Noise-cancelling over-ear headphones with 40-hour battery. Free shipping over $50.">
<meta property="og:url" content="https://example.com/products/wireless-headphones-pro">
<meta property="og:image" content="https://example.com/images/products/headphones-pro-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<!-- Product-specific -->
<meta property="product:price:amount" content="149.99">
<meta property="product:price:currency" content="USD">
<meta property="product:availability" content="in stock">
<meta property="product:condition" content="new">
<meta property="product:retailer_item_id" content="SKU-HEADPHONES-PRO">
<meta property="product:brand" content="Your Brand">

Product-specific notes:

product:price:amount uses a decimal number without currency symbols
product:availability accepts in stock, out of stock, preorder, and other Open Graph product values
Use a clean product photo on a neutral background for og:image
og:description should mention the key selling point, not repeat the SKU

Not every platform renders product fields in the preview card, but Facebook and some ad tools read them for catalog integrations.

Twitter Card block (add to every template)

X (Twitter) reads Open Graph as a fallback, but explicit Twitter tags give more control. Add this block alongside any template above:

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Same as og:title">
<meta name="twitter:description" content="Same as og:description">
<meta name="twitter:image" content="https://example.com/images/og-home.jpg">

Use summary_large_image for the big preview card. See Open Graph vs Twitter Card for the full comparison.

Complete head example (article page)

Here is a minimal but complete <head> showing how Open Graph fits alongside standard meta tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>How to Fix Missing Open Graph Tags | Your Brand</title>
  <meta name="description" content="Fix og:title, og:description, og:url, and og:type when your social preview text is wrong." />
  <link rel="canonical" href="https://example.com/blog/how-to-fix-missing-og-tags" />
  <!-- Open Graph - Article -->
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Your Brand" />
  <meta property="og:title" content="How to Fix Missing Open Graph Tags" />
  <meta property="og:description" content="Step-by-step guide to og:title, og:description, og:url, and og:type." />
  <meta property="og:url" content="https://example.com/blog/how-to-fix-missing-og-tags" />
  <meta property="og:image" content="https://example.com/images/og/blog-missing-tags.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:locale" content="en_US" />
  <meta property="article:published_time" content="2026-06-19T08:00:00+00:00" />
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="How to Fix Missing Open Graph Tags" />
  <meta name="twitter:description" content="Step-by-step guide to og:title, og:description, og:url, and og:type." />
  <meta name="twitter:image" content="https://example.com/images/og/blog-missing-tags.jpg" />
</head>
<body>
  <!-- page content -->
</body>
</html>

Notice three separate title/description systems: <title> and meta description for SEO, Open Graph for social, Twitter for X. They can share copy but are set independently.

How to validate your templates

After you deploy:

View Page Source on the live URL and confirm tags appear in HTML
Paste the URL into OpenGraph Check for multi-platform previews
Run How to Test Open Graph Tags before high-stakes shares

If og:image fails to load, switch to How to Fix a Missing OG Image. If text tags are empty, see How to Fix Missing Open Graph Tags.

Common template mistakes

Relative image paths

Wrong: content="/images/og.jpg"

Correct: content="https://example.com/images/og.jpg"

Mismatched og:url and canonical link

og:url and <link rel="canonical"> should point to the same URL. Mismatches confuse crawlers and cache systems.

Using name instead of property

Open Graph tags use property, not name:

Wrong: <meta name="og:title" ...>

Correct: <meta property="og:title" ...>

One global image for every page

A single site-wide og:image works as a fallback, but articles and products should override it with page-specific visuals for higher click-through.

FAQ

Do I need different templates for Facebook and LinkedIn?

No. Both read standard Open Graph tags. One correct template works across Facebook, LinkedIn, Slack, Discord, and WhatsApp.

Can I skip og:image:width and og:image:height?

Yes, they are optional. Adding them helps some platforms reserve layout space before the image loads.

What og:type for a pricing or contact page?

Use website. Reserve article and product for content that genuinely fits those types.

Should og:title match the HTML title tag exactly?

Not required. SEO titles often include branding suffixes social previews do not need. Write each for its purpose.

How do I handle multilingual sites?

Set og:locale per language version. Add og:locale:alternate tags pointing to translated URLs. Each locale gets its own og:url.

Where do these tags go in Next.js or WordPress?

Next.js: generateMetadata or the Metadata export. WordPress: Yoast or Rank Math social fields. The HTML output matters, not where you configure it.

Can I test templates on localhost?

Social crawlers cannot reach localhost. Deploy to a public HTTPS URL first, then scan with OpenGraph Check.

Bottom line

Copy the template that matches your page type, swap in your real URLs and copy, and confirm the result in page source. Three blocks cover most sites: website for homepages, article for blog posts, product for shop pages. Scan every new template with OpenGraph Check before you share.