When you publish a webpage, people are not the only ones reading it. Browsers, search engines, and sharing apps also look for clues about its meaning. This lesson explains how open graph metadata: social sharing basics fits into that picture.
The Idea in Plain English
Open Graph properties describe the title, description, URL and preview image that compatible social services may read when a page is shared. They are metadata in the head, not text shown in the page body.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<head>
<meta charset="utf-8">
<title>Build a Birdhouse</title>
<meta property="og:type" content="article">
<meta property="og:title" content="Build a Birdhouse">
<meta property="og:description" content="A weekend project for beginners.">
<meta property="og:url" content="https://example.com/birdhouse/">
<meta property="og:image" content="https://example.com/images/birdhouse.jpg">
</head>What Each Part Does
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- The title gives the document a name in tabs and other browser surfaces.
- The head holds page metadata, not the visible lesson content.
- charset identifies the character encoding used by the document.
- property gives the Open Graph property name.
- content supplies the value of a meta declaration.
A sharing service may create a card for the page; the final preview depends on the service, its cache and its image rules.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: add social title, summary, and image metadata. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Using a relative og:image URL or assuming the social preview must match the browser tab title.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Assuming that browser behavior or third-party search previews will be identical everywhere; check the feature and its current support.
Key Takeaways
- Open Graph properties describe the title, description, URL and preview image that compatible social services may read when a page is shared. They are metadata in the head, not text shown in the page body.
- A sharing service may create a card for the page; the final preview depends on the service, its cache and its image rules.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.