Guide
How to extract Open Graph & page metadata
Titles, descriptions, authors, preview images — a page's metadata is spread across three competing standards and often injected by JavaScript. This guide explains the formats and how to pull one clean object out of the mess.
By Roger Campos · Last updated: September 2026
TL;DR
A page describes itself through three overlapping sources: standard HTML meta tags, Open Graph (og:*) for social sharing, and Twitter Cards. They conflict, overlap and are often incomplete or set by JavaScript. To get reliable metadata, render the page first, then reconcile the three sources into one normalized object with sensible fallbacks.
Free plan, no credit card. 1,000 credits a month.
The basics
What "page metadata" actually is
Metadata is what a page says about itself — the data a link preview, a search result or a bookmark is built from. The trouble is there's no single place it lives.
A page can describe itself through three overlapping sources, and most pages use some mix of all three. To get reliable metadata you have to read every source and reconcile them, not just grab the first tag you find.
- Standard HTML metadata — the title, the description meta tag, the canonical link, language and robots directives.
- Open Graph (og:*) — Facebook's standard, read by most other apps too (LinkedIn, Slack, WhatsApp, Discord) to build link previews: og:title, og:description, og:image, og:type.
- Twitter Cards (twitter:*) — Twitter/X's equivalent, which takes precedence on X and often duplicates the Open Graph values.
The overlap
Three standards, one preview
These standards describe the same handful of things in different vocabularies. A resilient extractor reads all of them and falls back in a sensible order — for example, prefer og:title, then twitter:title, then the plain title tag.
| Field | Open Graph | Standard | |
|---|---|---|---|
| Title | og:title | twitter:title | title tag |
| Description | og:description | twitter:description | meta description |
| Image | og:image | twitter:image | — |
| URL | og:url | — | link canonical |
| Type / card | og:type | twitter:card | — |
Why it's messy
The things that break naive extraction
- Missing tags — many pages set only a title and description, so previews need fallbacks.
- Conflicting values — og:title and the title tag disagree; you need a defined precedence.
- Relative image URLs — og:image is often a path, not an absolute URL, and must be resolved.
- JavaScript-injected tags — frameworks and tag managers frequently set canonical, og:image and description after load, so a raw fetch misses them entirely.
If it's your page
Rendering first is right for reading metadata. For publishing it, the tags must be in the HTML the server sends: link-preview bots don't run JavaScript — Apple documents this for Messages — so a tag your framework adds client-side is a tag Slack, iMessage and most others never see. Compare the raw and the rendered result; if a tag only appears in the second, move it server-side.
How to do it
Extracting one clean object
- 1Render the page first. Load it in a real browser so JavaScript-injected tags are present before you read anything.
- 2Collect all three sources. Read the standard meta tags, the og:* tags and the twitter:* tags.
- 3Reconcile with a fallback order. For each field, pick the richest available value (typically Open Graph → Twitter → standard).
- 4Resolve and normalize. Make image and feed URLs absolute, trim whitespace, and parse dates into a consistent format.
- 5Return a single object. One normalized record — title, description, language, image, favicon, author, date, feed — instead of a pile of raw tags.
To see what this looks like on a real page, paste a URL into the Open Graph checker: it renders the page, reconciles the sources in a fixed fallback order, and gives you one record back — the same object the /meta endpoint returns, with every URL resolved against the page and the raw og: and twitter: tags alongside. If the preview image is what you're working on, the Open Graph image sizes guide has each network's documented limits.
Metadata vs. keywords
Metadata is what the page declares about itself. If you also want to know what a page is actually about — for tagging or topic analysis — that's keyword extraction, which reads the content itself rather than the tags. See how to get keywords from a URL.
FAQ
Frequently asked questions
What's the difference between Open Graph and Twitter Cards?
Why is the metadata I get incomplete or wrong?
Do I need to render the page to read metadata?
How is metadata extraction different from keyword extraction?
Try it yourself
Free tools for this
No signup — run these on a real page right now, then call the same endpoint from your code.
- Check a page's Open Graph tags and metadata
Paste a link and see everything the page says about itself — title, description, share image, authors, dates, language, icons and feeds — as one structured object.
Try it free - See how a link unfurls in Slack, X, LinkedIn and Discord
Paste a link and see the card each app builds from its title, description and share image — with a screenshot of the page standing in when it has no image of its own.
Try it free - Screenshot any website from its URL
Paste a link and get a full-page PNG of the rendered page — JavaScript executed, exactly as a real browser would draw it. Great for previews, monitoring and visual QA.
Try it free
Put this into practice.
Each of the eight kinds of data URLpipe returns has a free, no-signup tool — try the ideas from this guide on a real page, then grab an API key to run them from your code. 1,000 credits a month, no card.