Open Graph and Social Cards
Control how your links look when shared on social media and chat apps.
Paste a link into a chat app or social feed and a rich preview card appears — image, title, description. That card isn't magic; it's driven by Open Graph meta tags in your <head>. Skip them and platforms guess, usually badly.
The core four
og:title— the card headline (can differ from your <title>).og:description— the supporting line.og:image— the preview image; aim for 1200×630 pixels.og:url— the canonical link the card points to.
Open Graph tags use the property attribute, not name:
<meta property="og:title" content="My Great Article">
<meta property="og:image" content="https://site.com/card.jpg">Twitter's variant
Some platforms read Twitter Card tags (twitter:card, twitter:image). Add <meta name="twitter:card" content="summary_large_image"> for a big-image layout; most will otherwise fall back to your Open Graph tags.
Example
When to use it
- A marketing team adds Open Graph tags to every blog post so sharing the URL on LinkedIn shows the article image and title.
- A developer adds og:image and og:description to product pages so Facebook and Twitter display rich preview cards.
- A podcast site adds og:audio and og:type="music.song" so social platforms embed a playable audio preview.
More examples
Core Open Graph tags for a page
og:type, title, description, url, and image are the minimum required for a rich social media preview card.
<head>
<meta property="og:type" content="article">
<meta property="og:title" content="HTML Tutorial — SoundsCode">
<meta property="og:description"
content="Learn HTML from scratch with interactive examples.">
<meta property="og:url" content="https://soundscode.io/html/">
<meta property="og:image" content="https://soundscode.io/img/html-og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>Twitter card meta tags
Twitter uses its own meta names; summary_large_image shows a full-width image in the tweet card preview.
<head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@SoundsCode">
<meta name="twitter:title" content="HTML Tutorial">
<meta name="twitter:description"
content="Master HTML with hands-on lessons on SoundsCode.">
<meta name="twitter:image"
content="https://soundscode.io/img/html-twitter.png">
</head>OG tags for an article with author
article namespace properties add publish date, author profile URL, and tags to the Open Graph metadata.
<head>
<meta property="og:type" content="article">
<meta property="og:title" content="5 HTML Tips for 2025">
<meta property="og:image" content="https://soundscode.io/img/tips-og.png">
<meta property="article:published_time" content="2025-06-01T08:00:00Z">
<meta property="article:author" content="https://soundscode.io/authors/jane">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="Web Development">
</head>
Discussion