Open Graph and Social Sharing Metadata
Control what appears when your page is shared in a chat, a feed or a message. Without these tags the platform guesses, and it usually guesses badly.
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
Concept
When a link is pasted into a chat app, a social feed or a messaging thread, the platform fetches the page and builds a preview card. Open Graph is the vocabulary that tells it what to put on that card.
Without these tags the platform guesses: it takes the title, whatever description it can find, and often the first image on the page - which is frequently the logo, a tracking pixel, or nothing at all.
The four required properties
<meta property="og:title" content="Design Course - Riverside College">
<meta property="og:description" content="A three year studio based design course in Pune. Sixty places a year.">
<meta property="og:image" content="https://example.edu/images/design-og.jpg">
<meta property="og:url" content="https://example.edu/courses/design">Note property, not name. Open Graph is an RDFa vocabulary, which is why it uses a different attribute from the standard meta tags. Some parsers accept name; not all do.
The rest of the useful set
<meta property="og:type" content="website"> <!-- or article, product, video.movie -->
<meta property="og:site_name" content="Riverside College">
<meta property="og:locale" content="en_IN">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Students working at drawing boards in a studio">
<!-- for og:type=article -->
<meta property="article:published_time" content="2026-03-02T09:00:00+05:30">
<meta property="article:modified_time" content="2026-03-11T14:20:00+05:30">
<meta property="article:author" content="https://example.edu/people/meera-iyer">
<meta property="article:section" content="Admissions">
<meta property="article:tag" content="design">Declaring og:image:width and og:image:height lets the platform reserve the right space before the image downloads, so the card does not reflow. It is a small thing that visibly improves the preview.
The image
The image is what a card is judged on, and it has specific requirements.
- 1200 by 630 pixels, a ratio of roughly 1.91 to 1. This is the size every major platform expects.
- An absolute URL. A relative path silently fails - the platform has no page context to resolve it against.
- Under about five megabytes, and under one is better.
- JPEG or PNG. WebP support is inconsistent across platforms and SVG is not supported at all.
- Publicly reachable. An image behind a login or blocked in
robots.txtcannot be fetched. - Legible when small. Cards render at a few hundred pixels wide; fine text disappears.
<!-- fails silently on every platform -->
<meta property="og:image" content="/images/design-og.jpg">
<!-- correct -->
<meta property="og:image" content="https://example.edu/images/design-og.jpg">Twitter and X cards
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@riversidecollege">
<meta name="twitter:creator" content="@meeraiyer">
<meta name="twitter:title" content="Design Course - Riverside College">
<meta name="twitter:description" content="A three year studio based design course in Pune.">
<meta name="twitter:image" content="https://example.edu/images/design-og.jpg">
<meta name="twitter:image:alt" content="Students working at drawing boards in a studio">These use name rather than property. The platform falls back to Open Graph for anything not specified, so in practice only twitter:card is genuinely needed - the rest is redundant unless you want a different title or image there.
twitter:card | Result |
|---|---|
summary | Small square thumbnail beside the text |
summary_large_image | Full width image above the text |
player | An embedded media player |
A complete example
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reading a Bus Timetable - Riverside Journal</title>
<meta name="description" content="Every route in the city, and the two that are worth waiting for.">
<link rel="canonical" href="https://example.edu/journal/bus-timetable">
<meta property="og:type" content="article">
<meta property="og:title" content="Reading a Bus Timetable">
<meta property="og:description" content="Every route in the city, and the two that are worth waiting for.">
<meta property="og:url" content="https://example.edu/journal/bus-timetable">
<meta property="og:image" content="https://example.edu/images/bus-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A crowded bus stop at dusk">
<meta property="og:site_name" content="Riverside Journal">
<meta property="article:published_time" content="2026-03-02T09:00:00+05:30">
<meta name="twitter:card" content="summary_large_image">
</head>Caching
Platforms cache the preview, sometimes for days. Changing the tags does not update an already shared link until the cache expires or is cleared manually through the platform debugging tool.
Two consequences: check the card before sharing anything widely, and if a card is wrong, fix the tags and then force a refresh in the debugger rather than waiting.
Each major platform provides a validator that fetches the page, shows the card it would build, and lists any missing properties. Use them; they are the only reliable way to see what will actually appear.
Important rules
- Open Graph uses
property; Twitter cards usename. - All URLs must be absolute.
- The image must be publicly fetchable without a login.
- Tags must be in the
head. Some crawlers read only the first part of the document. - Many platform crawlers do not execute JavaScript, so tags injected by script may never be seen.
- Previews are cached and do not update on their own.
Common mistakes
- A relative
og:imageURL. - Using
nameinstead ofpropertyfor Open Graph. - An image at the wrong ratio, cropped badly by every platform.
- No
og:image, so the card shows a logo or nothing. - Injecting tags with JavaScript in a single page application, so crawlers see an empty head.
- Text in the image too small to read at card size.
- Not checking the card before sharing a launch announcement.
Best practices
- Set title, description, image and URL on every page that might be shared.
- Produce a 1200 by 630 image per page, or per section at minimum.
- Declare image dimensions and alt text.
- Add
twitter:cardand let the rest fall back to Open Graph. - Render the tags server side.
- Validate with each platform debugger before launch.
- Keep
og:urlidentical to the canonical URL.
Practice
- Add a complete Open Graph set to a page and check it in a platform debugger.
- Use a relative image URL and observe what the card shows.
- Design a 1200 by 630 card image and check whether its text is readable at three hundred pixels wide.
- Change a description, reshare the link, and explain why the old one still appears.