×

html · level 3 · unit 4 · lesson 4

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

tags build the card people see when they share a link.

Paste a link into a chat app and a appears: a picture, a title and a line of text. Apps build it from Open Graph tags in your head. Without them, they guess, often badly.

Open Graph tags are <meta> tags with property instead of name: og:title, og:description, og:image, og:url and og:type. Each fact goes in content.

og:image and og:url must be full URLs, because the app reading them is not on your site. A wide picture, about 1200 by 630 pixels, looks best.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Summer fair | Pip's Plants</title>
    <meta property="og:title" content="Summer fair at Pip's Plants">
    <meta property="og:description" content="Free plant swaps, cake and live music on 14 June.">
    <meta property="og:image" content="https://example.com/images/fair.svg">
    <meta property="og:url" content="https://example.com/summer-fair">
    <meta property="og:type" content="website">
  </head>
  <body>
    <h1>Summer fair</h1>
  </body>
</html>

Press show my page to see it here.

Chat apps keep a copy of the card, so check your tags before you share the link.