Lesson 5 / 32

Open Graph Tags

Use Open Graph meta tags to control how your content appears on social media.

Why Open Graph matters

When you share a link on Facebook, Twitter, or LinkedIn, those platforms crawl your page for meta tags to decide what image, title, and description to display. Without Open Graph tags, they'll guess — and often guess wrong.

Open Graph meta tags

Use og: properties in your <head> to tell social platforms how to display your page. Always include og:title, og:description, og:image, and og:url.

<head>
  <meta property="og:title" content="Mastering React Hooks: A Complete Guide">
  <meta property="og:description" content="Learn how to use React Hooks to build modern, efficient components.">
  <meta property="og:image" content="https://example.com/images/react-hooks-guide.jpg">
  <meta property="og:image:alt" content="React Hooks diagram">
  <meta property="og:url" content="https://example.com/blog/react-hooks">
  <meta property="og:type" content="article">
  <meta property="og:locale" content="en_US">
</head>