HtmlHow-ToBeginner · 3 min read

How to Add OG Tags in HTML for Social Media Sharing

Add Open Graph tags by placing <meta property="og:title" content="Your Title" /> and similar tags inside the <head> section of your HTML. These tags tell social media platforms what title, image, and description to show when your page is shared.

📐

Syntax

Open Graph tags use <meta> elements with a property attribute starting with og: and a content attribute holding the value. Place these inside the <head> of your HTML.

property: The OG property name like og:title, og:description, og:image.
content: The value for that property, such as the page title or image URL.

html

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description of the page." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page.html" />

💻

Example

This example shows a simple HTML page with basic Open Graph tags inside the <head>. These tags help social media sites display a nice preview with a title, description, and image when the page link is shared.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample Page with OG Tags</title>
  <meta property="og:title" content="Welcome to My Website" />
  <meta property="og:description" content="This is a simple page demonstrating Open Graph tags." />
  <meta property="og:image" content="https://example.com/images/preview.jpg" />
  <meta property="og:url" content="https://example.com/sample-page.html" />
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This page includes Open Graph tags for social sharing.</p>
</body>
</html>

Output

A webpage with a heading 'Hello, world!' and a paragraph. When shared on social media, it shows the title 'Welcome to My Website', description, and preview image.

⚠️

Common Pitfalls

Forgetting to place OG tags inside the <head> section.
Using name instead of property attribute for OG tags.
Not providing absolute URLs for og:image and og:url which can cause previews to fail.
Missing required tags like og:title or og:image which social platforms expect.

html

<!-- Wrong: using name instead of property -->
<meta name="og:title" content="Wrong Usage" />

<!-- Correct: use property attribute -->
<meta property="og:title" content="Correct Usage" />

📊

Quick Reference

OG Tag	Purpose	Example
og:title	Title shown on social media
og:description	Short description of the page
og:image	Image URL for preview
og:url	Canonical URL of the page
og:type	Type of content (e.g., website, article)

✅

Key Takeaways

Place Open Graph tags inside the section of your HTML document.

Use the property attribute with values starting with 'og:' to define OG tags.

Always provide absolute URLs for og:image and og:url for proper social media previews.

Include at least og:title, og:description, og:image, and og:url for best results.

Avoid using the name attribute instead of property for Open Graph meta tags.