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: July 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.

Start free See the API

Free plan, no credit card. 50 AI + 500 web operations / month.

The basics

What "page metadata" actually is

Metadata is what a page says about itself — the data used to build a link preview, a search result or a bookmark. 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, now used by most platforms (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	Twitter	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.

How to do it

Extracting one clean object

1
Render the page first. Load it in a real browser so JavaScript-injected tags are present before you read anything.
2
Collect all three sources. Read the standard meta tags, the og:* tags and the twitter:* tags.
3
Reconcile with a fallback order. For each field, pick the richest available value (typically Open Graph → Twitter → standard).
4
Resolve and normalize. Make image and canonical URLs absolute, trim whitespace, and parse dates into a consistent format.
5
Return a single object. One normalized record — title, description, canonical, author, date, image, feed — instead of a pile of raw tags.

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.

FAQ

Frequently asked questions

What's the difference between Open Graph and Twitter Cards?

Open Graph (og:title, og:image, …) is Facebook's standard, now used by most platforms to build link previews. Twitter Cards (twitter:*) are Twitter/X's equivalent and take precedence there. Both overlap with the standard HTML <title> and <meta name="description">. A robust extractor reads all three and falls back sensibly.

Why is the metadata I get incomplete or wrong?

Many pages set only some tags, duplicate others with conflicting values, or inject them with JavaScript after load. If you read the raw HTML you'll miss the JS-injected values; if you don't reconcile the three standards you'll get conflicting ones.

Do I need to render the page to read metadata?

Often, yes. Frameworks and tag managers frequently set og:image, canonical and description client-side, so rendering the page in a real browser first captures values a raw fetch would miss.

How is metadata extraction different from keyword extraction?

Metadata is what the page declares about itself (title, description, author, image). Keyword extraction analyzes the page's actual content to surface the terms it's really about — useful for tagging and topic analysis rather than link previews.

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.

/meta API docs /keywords API docs

Keep reading

HTML to Markdown for LLMs Reading a Lighthouse audit Rendered vs. raw HTML All guides

Put this into practice.

Every URLpipe endpoint 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. 50 AI + 500 web operations a month, no card.

Start free Email the team