# Open Graph Debugger

Extract Open Graph and Twitter Card tags from pasted HTML and preview the shared card.

## URL

https://ilham.dev/tools/open-graph-debugger/

## What It Does

Paste a page's HTML and the page pulls out its Open Graph and Twitter Card tags, the title and the canonical link, then draws a preview of the card a link would produce. It is the quick way to see why a shared link shows the wrong title or no image.

## Features

- Runs in the browser
- No login required

## Input

text input.

## Output

text output.

## Privacy

Processing happens locally in the browser.

No input data is uploaded to ilham.dev.

- Requires login: false
- Requires API key: false
- Stores user data: false


## Examples

- Why does the preview look different from the real one?
- Which title wins if several are present?
- The image is missing from the preview. Why?
- Is the page fetched for me?




## Questions

### Why does the preview look different from the real one?

Every platform renders the card its own way and may crop the image or ignore a tag. This preview shows the values that were found and the order of priority, which is what you need to debug, not a pixel-perfect copy of any one site.

### Which title wins if several are present?

Open Graph is preferred over Twitter Card, and both are preferred over the plain title element. That matches how most crawlers resolve it, and the tag table still lists every value so you can see what else is there.

### The image is missing from the preview. Why?

The tool does not load images: it only displays the image URL as text when present. If the tag is missing, the preview has no image section. On a live page, verify that the URL is absolute and publicly reachable using the platform you care about.

### Is the page fetched for me?

No. You paste the HTML and it is parsed in the browser with a local DOM parser. Nothing is requested, so you can inspect a staging page behind a login or a page that is not public yet.