More HTML: How to Use Open Graph Meta Tags

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

Open Graph (OG) tags control how your pages appear when shared on social media platforms like Facebook, Twitter, LinkedIn, and messaging apps.

What is Open Graph?

Open Graph is a protocol that lets you specify metadata about your web pages. When someone shares your URL, social platforms use this data to create rich previews.

Basic OG Tags

Add these tags in your page’s <head>:

<head>
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="A brief description of the page">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">
</head>

Essential Tags

og:title

The title that appears in previews:

<meta property="og:title" content="10 Tips for Better Web Development">

og:description

A brief summary (1-2 sentences):

<meta property="og:description" content="Learn essential techniques to improve your web development workflow and build better websites.">

og:image

The preview image (very important):

<meta property="og:image" content="https://example.com/images/preview.jpg">

Image recommendations:

  • Minimum: 1200 x 630 pixels
  • Aspect ratio: 1.91:1
  • File size: under 5MB
  • Format: JPG or PNG

og:url

The canonical URL:

<meta property="og:url" content="https://example.com/blog/my-article">

og:type

The type of content:

<meta property="og:type" content="article">

Common types: website, article, product, video.movie

Twitter Cards

Twitter uses its own tags that work alongside OG tags:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description here">
<meta name="twitter:image" content="https://example.com/image.jpg">

Card types:

  • summary - Small square image
  • summary_large_image - Large image above text

Complete Example

<head>
  <title>My Blog Post</title>

  <!-- Open Graph -->
  <meta property="og:title" content="My Blog Post">
  <meta property="og:description" content="An interesting article about web development">
  <meta property="og:image" content="https://example.com/images/post-preview.jpg">
  <meta property="og:url" content="https://example.com/blog/my-post">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="My Website">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="My Blog Post">
  <meta name="twitter:description" content="An interesting article about web development">
  <meta name="twitter:image" content="https://example.com/images/post-preview.jpg">
</head>

Testing Your Tags

Use these tools to preview how your links will appear:

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug
  • Twitter Card Validator: cards-dev.twitter.com/validator
  • LinkedIn Post Inspector: linkedin.com/post-inspector

These tools also help Facebook and Twitter clear their cache when you update your OG tags.

Tips for Better Previews

  1. Always include an image - Posts with images get more engagement
  2. Use absolute URLs - Full URLs including https://
  3. Keep titles under 60 characters - Prevents truncation
  4. Keep descriptions under 160 characters - Shows the full text
  5. Use unique images per page - Avoid using the same image everywhere
  6. Test after changes - Clear social platform caches using their debug tools

Lessons in this unit:

0: Introduction
1: How to Use Semantic HTML Container Tags
2: How to Create Links and Navigation in HTML
3: ▶︎ How to Use Open Graph Meta Tags
4: How to Add Favicons to Your Website
5: Introduction to Web Accessibility