https://github.com/apoorvdarshan/opengraph-studio
crop, compress, and preview your OpenGraph metadata live across Twitter/X, WhatsApp, Facebook, LinkedIn, Slack & more — all in the browser.
https://github.com/apoorvdarshan/opengraph-studio
metadata nextjs og-tags opengraph preview seo social-media web
Last synced: 6 days ago
JSON representation
crop, compress, and preview your OpenGraph metadata live across Twitter/X, WhatsApp, Facebook, LinkedIn, Slack & more — all in the browser.
- Host: GitHub
- URL: https://github.com/apoorvdarshan/opengraph-studio
- Owner: apoorvdarshan
- License: mit
- Created: 2026-04-25T21:16:55.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-12T03:27:01.000Z (about 1 month ago)
- Last Synced: 2026-05-12T05:30:42.344Z (about 1 month ago)
- Topics: metadata, nextjs, og-tags, opengraph, preview, seo, social-media, web
- Language: HTML
- Homepage: http://opengraph.website
- Size: 510 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
OpenGraph Studio
Live → opengraph.website
A single-page workshop for designing, previewing, and exporting Open Graph share cards. Vanilla HTML/CSS/JS — no build step, no framework, no account. Runs entirely in your browser.
> Crop · Compress · Preview · Export — pixel-perfect 1200×630.
## Features
- **Two input methods**
- Paste any URL → fetches the live page (via [corsproxy.io](https://corsproxy.io)), parses `og:*` / `twitter:*` / `` / ``, and auto-loads the `og:image` into the editor.
- Drag, click, or paste (`⌘V` / `Ctrl+V`) any JPG, PNG, or WEBP from your clipboard or desktop.
- **Editor**
- Interactive crop overlay locked to the 1200 × 630 OG aspect ratio (1.91:1).
- Live quality slider (10–100%) with live output-size readout.
- Format toggle: JPEG, PNG, WEBP (with auto-derived `og:image:type` in the embed output).
- Source-dimension warning when the input is below 1200 × 630.
- One-click **auto-compress** — binary-searches the highest quality that fits under 200 KB.
- **Download HD** at exactly 1200 × 630.
- **Live previews for 6 platforms** — Twitter / X, Facebook, LinkedIn, WhatsApp, Slack, Discord. Each card renders its actual platform-truncated text so you see exactly how it'll appear when shared.
- **Character-limit awareness** — per-platform truncation hints under each metadata field. Title and description counters color-code as you approach each platform's hard cap (WhatsApp 65, Twitter/LinkedIn 70, Slack 75, Facebook 100; descriptions WhatsApp 175, Twitter 200).
- **Embed block** — generates up to 18 OG + Twitter Card meta tags, including `og:image:type/width/height/alt`, `og:locale`, `twitter:site/creator/image:alt`. One-click copy.
- **Status bar** — live source dimensions, character counts, tag count, and output file size with traffic-light status indicator.
## Live demo
**[opengraph.website](https://www.opengraph.website/)** — hosted on Vercel.
Or run it locally — no install required:
```bash
git clone https://github.com/apoorvdarshan/opengraph-studio
cd opengraph-studio
python3 -m http.server 3000
# then open http://localhost:3000
```
You can also just open `index.html` directly in any modern browser.
## Project structure
```
opengraph-studio/
├── index.html # the entire app (HTML + CSS + JS)
├── api/
│ └── fetch.js # Vercel Edge function: server-side CORS proxy
├── vercel.json # canonical redirects + crawl-related headers
├── LICENSE # MIT
├── README.md
├── CONTRIBUTING.md
└── .github/
└── FUNDING.yml
```
The whole app is in `index.html` — no build, no `node_modules`, no toolchain. The single `api/fetch.js` is a Vercel Edge function that handles the URL-fetch feature server-side, and `vercel.json` keeps the custom domain canonical for crawlers.
## Tech
- **Vanilla HTML, CSS, and JavaScript** — no framework, no bundler, no CDN libraries (except Google Fonts for typography).
- **Manrope** for UI, **Instrument Serif** for display moments, **JetBrains Mono** for code/dimensions — all from Google Fonts.
- Image processing via the **Canvas API** (`drawImage` + `toBlob`).
- **URL-fetch backend**: Vercel Edge function at `/api/fetch?url=...`. Validates the URL, blocks SSRF-prone hosts (localhost, link-local, internal metadata endpoints), 10s timeout, browser-like User-Agent, edge-cached for 5 minutes. Client falls back to public CORS proxies (allorigins, corsproxy.io, codetabs) if the edge function isn't reachable — useful for local development.
## Recommended values (encoded in the tool)
| Tag | Recommended | Hard caps |
|---|---|---|
| `og:title` | ≤ 60 chars | WA 65, TW/LI 70, Slack 75, FB 100 |
| `og:description` | 130–160 chars | WA 175, TW/FB 200 |
| `og:image` | 1200 × 630 (1.91:1) | min 600 × 315 |
| File size | ≤ 200 KB | acceptable to ~500 KB |
## Deploying
Drop `index.html` on any static host:
- **Vercel** — connect the repo (this is what [opengraph.website](https://www.opengraph.website/) uses); Vercel Web Analytics works out of the box via the script in the page.
- **GitHub Pages** — Settings → Pages → deploy from `main`. The Vercel Analytics script will silently 404; remove it if you don't want the console line.
- **Netlify / Cloudflare Pages** — drag-and-drop the file, or connect the repo.
No server, no API, no env vars required.
## Privacy
The hosted site at [opengraph.website](https://www.opengraph.website/) uses [Vercel Web Analytics](https://vercel.com/docs/analytics) — privacy-friendly, no cookies, no IP storage, GDPR-compliant. All image processing happens locally in your browser; uploaded images and pasted URLs never leave your device.
## Roadmap
- Safe-zone overlay (60 px margin guides) on the crop tool
- Optional `og:image:secure_url` toggle
- Save / load presets
- Per-platform export (different sizes for each)
## License
[MIT](./LICENSE) © Apoorv Darshan
## Contributing
PRs welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) for the workflow and style notes.
## Author & support
- **Developer:** Apoorv Darshan — [@apoorvdarshan on X](https://x.com/apoorvdarshan)
- **Email:** [ad13dtu@gmail.com](mailto:ad13dtu@gmail.com)
- **Issues / bugs:** [github.com/apoorvdarshan/opengraph-studio/issues](https://github.com/apoorvdarshan/opengraph-studio/issues)
- **Support the project:** [ko-fi.com/apoorvdarshan](https://ko-fi.com/apoorvdarshan) — or just star the repo, that helps too
If this saved you time, a ⭐ on [the repo](https://github.com/apoorvdarshan/opengraph-studio) is the easiest thank-you.