Metadata and sharing
Control the title, description, canonical URL and preview card for every page.
What you will be able to do
- Write a search-friendly title and description
- Set a canonical URL
- Add Open Graph preview data
Metadata lives in the head and describes the page to browsers, search engines and social platforms. Keep it specific to the page, not the whole site.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Accessible forms — EduByte</title>
<meta name="description" content="Build forms with labels, hints and clear errors." />
<link rel="canonical" href="https://edubyte.tech/tutorials/html/forms-and-inputs" />
<meta property="og:title" content="Accessible forms — EduByte" />
<meta property="og:description" content="Labels, hints and errors that everyone can use." />
<meta property="og:image" content="https://edubyte.tech/images/courses/html.svg" />
<meta name="theme-color" content="#f7f4ee" />
</head>| Element | Purpose |
|---|---|
| title | Tab text and search result heading |
| meta description | Short summary under the search result |
| link rel="canonical" | The preferred URL for duplicate content |
| og:title / og:image | Title and image used in link previews |
| meta theme-color | Browser chrome colour on mobile |
Your turn
MediumWrite a page head
For a lesson called Accessible forms, add a title, description, canonical URL and Open Graph title and image.
HTML · starter
<head>
<meta charset="utf-8" />
</head>Check your understanding before moving on.
Knowledge checkQuestion 1
Which element usually becomes the heading of a search result?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.