Open Graph and Social Media Meta Tags

Open Graph meta tags control how your page looks when someone shares it on social media or in chat apps. In this lesson you will learn the og: and twitter: tags, the right image size, and how to test your link preview.

What are Open Graph tags?

When you paste a link into WhatsApp, LinkedIn, Facebook, Slack, Discord or X, a small preview card often appears, with a picture, a title and a short text. That card comes from Open Graph tags, a set of <meta> tags in the <head>. Facebook created the Open Graph protocol, but today almost every app reads it. Without these tags, the app guesses, and the guess is often a random image or no image at all.

Open Graph tags use the property attribute (not name) and start with og:.

Tag	What it is
og:title	The title on the card. Can be a bit shorter and friendlier than the page <title>.
og:description	One or two sentences under the title.
og:image	The full URL of the preview image.
og:url	The canonical URL of the page.
og:type	The kind of content, usually website or article.
og:site_name	The name of your website.

What size should og:image be?

The image is the most important part of the card, because it is what people notice first. Use these settings:

• Size: 1200 × 630 pixels (a ratio of about 1.91 to 1). This works well almost everywhere.
• Format: JPEG or PNG are the safest. Many apps also accept WebP, but not all.
• File size: keep it under about 5 MB, smaller is better.
• Keep important text and logos in the middle, because some apps crop the image into a square.
• Use a full absolute URL, starting with https://. A relative path like /images/card.jpg often does not work.

You can add og:image:width, og:image:height and og:image:alt so apps can show the image faster and describe it for screen reader users.

The twitter:card tag

X (formerly Twitter) reads Open Graph tags too, but it needs one extra tag to decide the card style: twitter:card. The value summary_large_image shows a big image. The value summary shows a small square thumbnail. These tags use name, not property.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@bakeclub">

The first line asks for a large image card. The second, which is optional, links the card to your account. If twitter:title or twitter:image are missing, X uses the og: versions, so you don't need to repeat them.

A full head example with Open Graph tags

Here is a complete <head> for a blog article, with normal SEO tags and social tags together.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>10 Houseplants That Are Almost Impossible to Kill | Leafy Home</title>
  <meta name="description" content="New to plants? These 10 tough houseplants survive low light, missed watering and busy lives. Care tips for each one.">
  <link rel="canonical" href="https://leafyhome.example/blog/easy-houseplants">

  <!-- Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Leafy Home">
  <meta property="og:title" content="10 Houseplants That Are Almost Impossible to Kill">
  <meta property="og:description" content="Tough plants for beginners, with simple care tips for each one.">
  <meta property="og:url" content="https://leafyhome.example/blog/easy-houseplants">
  <meta property="og:image" content="https://leafyhome.example/images/og/easy-houseplants.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="A snake plant, a pothos and a ZZ plant on a sunny shelf">
  <meta property="og:locale" content="en_US">

  <!-- X / Twitter -->
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <main>
    <h1>10 Houseplants That Are Almost Impossible to Kill</h1>
  </main>
</body>
</html>

When someone shares this link, they see a large card with the plant photo, the title "10 Houseplants That Are Almost Impossible to Kill" and the short description. The og:url matches the canonical link, so likes and shares are counted for one single URL.

Common mistake: Using the same og:image and og:title on every page of a site. Each page should have its own, especially articles and products, or every shared link will look the same.

How to test your social media preview

Apps read your tags from the live page, so you need to publish the page first. Then use these free tools:

1. Facebook Sharing Debugger shows what Facebook sees and lets you clear its old cached preview.
2. LinkedIn Post Inspector does the same for LinkedIn.
3. General preview sites such as opengraph.xyz show how your card looks on many apps at once.
4. Or simply paste the link into a private chat with yourself.

Note: Apps save (cache) previews for days or weeks. If you change your image and the old one still appears, use the Facebook or LinkedIn tool to refresh it, or add a small change to the image file name.

Practice exercise

Add Open Graph and Twitter tags to a page about your favourite hobby. Make a 1200 × 630 preview image in any free image editor, and include og:type, og:title, og:description, og:url, og:image with width, height and alt, and twitter:card.

Hint: Your image URL must be absolute. If you are only working on your own computer, write the URL you would use after publishing.

Key takeaways

• Open Graph tags control the preview card when your link is shared.
• Use property="og:..." for Open Graph and name="twitter:card" for X.
• Use a 1200 × 630 image with an absolute https:// URL.
• Give every important page its own title, description and image.
• Test previews with the Facebook Sharing Debugger or LinkedIn Post Inspector after publishing.