Open Graph & Social Link Metadata
What is Open Graph?
Think of sharing a link on chat apps like WhatsApp, Slack, or Facebook. When you paste the link, it automatically expands into a rich preview card showing a high-quality thumbnail image, a bold title, and a short description.In HTML, we control this card using Open Graph Metadata tags in the <head>. These tags start with property="og:...":
og:title: The bold heading of the card.og:description: The summary snippet.og:image: The preview image URL.Why does it matter?
Open Graph previews make links look professional, trustworthy, and clickable. Sites with rich social cards receive significantly higher click-through rates when shared on social media compared to raw text links.How to write it
Open Graph tags are meta elements inside<head>:
<head>
<meta property="og:title" content="HTML Course">
<meta property="og:description" content="Learn web coding step-by-step.">
</head>
og:image preview
og:title heading
og:description content
Common Mistakes
name instead of property: Open Graph tags require the property attribute (e.g., property="og:title"), unlike standard SEO tags which use the name attribute.og:image URL must be absolute (e.g., must start with https://). Relative paths won't load on social platforms.Quick Reference
<meta property="og:title" content="..."> — Social preview title.<meta property="og:image" content="..."> — Preview thumbnail image (absolute URL).Your Task
In the `<head>`, place a `<meta>` tag with `property="og:title"` and `content="HTML Course"`.
index.html
Type code above to start the lesson.
Live Preview