Open Graph Meta Tags

Open Graph (OG) is a protocol created by Facebook that controls how a page is represented when shared on social media platforms including Facebook, Twitter/X, LinkedIn, and WhatsApp. OG tags are <meta> elements in the <head> that use a property attribute instead of name.

Essential OG Tags

The four required OG tags are og:title, og:type, og:image, and og:url. Additional important tags include og:description and og:site_name. Twitter has its own set of tags (using name with twitter: prefix) but falls back to OG tags when Twitter-specific ones are absent. Always use an absolute URL for og:image and aim for 1200×630px to display correctly on all platforms.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Getting Started with HTML | WebAcademy</title>

  <!-- Open Graph -->
  <meta property="og:type"        content="article">
  <meta property="og:title"       content="Getting Started with HTML">
  <meta property="og:description" content="A beginner's guide to writing your first HTML page from scratch.">
  <meta property="og:image"       content="https://webacademy.com/img/html-intro.jpg">
  <meta property="og:url"         content="https://webacademy.com/html/intro/">
  <meta property="og:site_name"   content="WebAcademy">

  <!-- Twitter Card -->
  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:title"      content="Getting Started with HTML">
  <meta name="twitter:description" content="A beginner's guide to writing your first HTML page.">
  <meta name="twitter:image"      content="https://webacademy.com/img/html-intro.jpg">
</head>
<body>...</body>
</html>

HTML

Full Editor

Pro Tip

Test your Open Graph tags with the Facebook Sharing Debugger and Twitter Card Validator before publishing — they show exactly how your page will appear when shared, and allow you to force a cache refresh if you update the tags.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned