🔖 Advanced HTML

Meta Tags & Open Graph

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can add the must-have meta tags every page needs, and use Open Graph tags so links to your site look great on WhatsApp, Facebook and X.

The <head> is invisible to visitors but vital to machines — browsers, search engines and social platforms all read it. A few meta tags here decide whether your page renders correctly on phones and whether a shared link looks like a rich preview card or an ugly bare URL.

1The must-have meta tags

Three meta tags belong in essentially every page's <head>:

<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1">
<meta name="description" content="…">
  • charset="UTF-8" — tells the browser how to read your text. Without it, accents and other languages can turn into garbled symbols. It should be the first thing in the head.
  • viewport — the single most important tag for mobile. It makes the page fit the device width instead of showing a tiny zoomed-out desktop layout. Leave it out and your responsive CSS won't work on phones.
  • description — the search snippet from the last lesson.
If you forget the viewport tag, your site will look broken and tiny on every phone — and most of your visitors are on phones. It's not optional.
Key points
  • <meta charset="UTF-8"> ensures text and accents display correctly — put it first.
  • <meta name="viewport"> makes the page fit mobile screens — without it, responsive CSS won't work.
  • <meta name="description"> supplies the search-result snippet.

2Open Graph — control your share preview

When someone pastes your link into WhatsApp, Facebook, LinkedIn or X, those platforms look for Open Graph (og:) meta tags to build the preview card — the image, title and description you see:

<meta property="og:title" content="Free HTML & CSS Course">
<meta property="og:description" content="Learn web design, free.">
<meta property="og:image" content="https://site.com/cover.jpg">
<meta property="og:url" content="https://site.com/">

X (Twitter) adds a couple of its own: <meta name="twitter:card" content="summary_large_image"> for a big-image card. The playground below shows what these values produce — a share card:

What Open Graph builds (a share-preview card)
HTML
CSS
Live preview
What's happening: Edit the title and description text and watch the 'share card' update — that's exactly what og:title and og:description control when your link is shared. The og:image fills the cover area.
Key points
  • Open Graph (og:) meta tags control the preview card shown when your link is shared.
  • Key ones: og:title, og:description, og:image, og:url.
  • Add twitter:card for X's preview style (e.g. summary_large_image).

★ Practical: a complete, share-ready head

Write the <code>&lt;head&gt;</code> meta tags for a page about your project:

  1. <meta charset="UTF-8"> and the mobile viewport tag.
  2. A <meta name="description">.
  3. Open Graph tags: og:title, og:description, og:image, og:url.
  4. A twitter:card tag set to summary_large_image.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
SEO with HTML
Next →
Performance Basics