Make a link look good when shared – HTML Practice

When someone shares this page, it should show a proper card.

What to build

Open Graph tags and a canonical link.

Requirements

og:title with any content.
og:description with any content.
og:image with a full address beginning https://.
A canonical link to https://example.org/events/fair.

Constraints

Open Graph tags must use the property attribute.

Example

<meta property="og:title" content="Book fair">

Why it works

Chat and social apps read those tags to build a preview, and the canonical link says which address is the real one.

Hints

Hint 1

Open Graph uses property, not name.

Hint 2

og:image needs a full address, starting with https.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Book fair</title>
  <link rel="canonical" href="https://example.org/events/fair">
  <meta property="og:title" content="Book fair">
  <meta property="og:description" content="Three days of books, talks and food.">
  <meta property="og:image" content="https://example.org/fair.jpg">
</head>
<body><h1>Book fair</h1></body>
</html>

Lesson: The head: titles, search results and sharing →