What are open graph tags in html

HtmlConceptBeginner · 3 min read

Open Graph Tags in HTML: What They Are and How They Work

Open graph tags are meta tags in HTML that control how web pages appear when shared on social media platforms. They provide information like title, description, and image to create rich link previews.

⚙️

How It Works

Open graph tags work like a label on a gift box. When you share a link on social media, the platform looks for these tags in your webpage's HTML to know what title, image, and description to show. Without these tags, social media guesses or shows plain links, which can look boring or unclear.

These tags are placed inside the <head> section of your HTML. They use properties like og:title for the page title, og:description for a short summary, and og:image for a preview picture. This helps your shared link look attractive and informative, encouraging more clicks.

💻

Example

This example shows how to add open graph tags to a webpage to control its preview on social media.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome Page</title>
  <meta property="og:title" content="My Awesome Page">
  <meta property="og:description" content="This is a cool page about awesome things.">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/my-awesome-page">
  <meta property="og:type" content="website">
</head>
<body>
  <h1>Welcome to My Awesome Page</h1>
  <p>Enjoy the content!</p>
</body>
</html>

Output

A webpage titled 'My Awesome Page' with a heading and paragraph. When shared on social media, it shows the specified title, description, and image.

🎯

When to Use

Use open graph tags whenever you want your webpage to look good when shared on social media like Facebook, Twitter, LinkedIn, or WhatsApp. They help control what users see, making your links more clickable and trustworthy.

For example, businesses use them to show product images and descriptions, bloggers highlight article titles and summaries, and event pages display event details. Without these tags, social media might show random or missing information, which can reduce interest.

✅

Key Points

Open graph tags are meta tags inside the HTML <head>.
They define how links appear on social media with title, description, image, and more.
They improve link appearance and increase user engagement.
Common properties include og:title, og:description, og:image, and og:url.
They are supported by many social platforms and improve sharing consistency.

✅

Key Takeaways

Open graph tags control how your webpage looks when shared on social media.

They are placed as meta tags inside the HTML <head> section.

Use them to specify title, description, image, and URL for better link previews.

Proper use of open graph tags can increase clicks and user engagement.

Most social platforms support open graph tags for consistent sharing appearance.