{"id":50979217,"url":"https://github.com/apoorvdarshan/opengraph-studio","last_synced_at":"2026-06-19T12:31:25.508Z","repository":{"id":357271915,"uuid":"1221177408","full_name":"apoorvdarshan/opengraph-studio","owner":"apoorvdarshan","description":"crop, compress, and preview your OpenGraph metadata live across Twitter/X, WhatsApp, Facebook, LinkedIn, Slack \u0026 more — all in the browser.","archived":false,"fork":false,"pushed_at":"2026-05-12T03:27:01.000Z","size":522,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-12T05:30:42.344Z","etag":null,"topics":["metadata","nextjs","og-tags","opengraph","preview","seo","social-media","web"],"latest_commit_sha":null,"homepage":"http://opengraph.website","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apoorvdarshan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["apoorvdarshan"]}},"created_at":"2026-04-25T21:16:55.000Z","updated_at":"2026-05-12T03:27:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/apoorvdarshan/opengraph-studio","commit_stats":null,"previous_names":["apoorvdarshan/opengraph-studio"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/apoorvdarshan/opengraph-studio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apoorvdarshan%2Fopengraph-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apoorvdarshan%2Fopengraph-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apoorvdarshan%2Fopengraph-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apoorvdarshan%2Fopengraph-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apoorvdarshan","download_url":"https://codeload.github.com/apoorvdarshan/opengraph-studio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apoorvdarshan%2Fopengraph-studio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34532251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["metadata","nextjs","og-tags","opengraph","preview","seo","social-media","web"],"created_at":"2026-06-19T12:31:22.777Z","updated_at":"2026-06-19T12:31:25.464Z","avatar_url":"https://github.com/apoorvdarshan.png","language":"HTML","funding_links":["https://github.com/sponsors/apoorvdarshan","https://ko-fi.com/apoorvdarshan"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.opengraph.website/\"\u003e\n    \u003cimg src=\"https://www.opengraph.website/favicon.svg\" alt=\"OpenGraph Studio logo\" width=\"96\" height=\"96\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eOpenGraph Studio\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eLive → \u003ca href=\"https://www.opengraph.website/\"\u003eopengraph.website\u003c/a\u003e\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/apoorvdarshan/opengraph-studio/stargazers\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/apoorvdarshan/opengraph-studio?style=flat\u0026color=a78bfa\"\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/license-MIT-a78bfa.svg?style=flat\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://x.com/apoorvdarshan\"\u003e\u003cimg alt=\"Follow on X\" src=\"https://img.shields.io/badge/X-%40apoorvdarshan-a78bfa?style=flat\u0026logo=x\u0026logoColor=white\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\nA 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.\n\n\u003e Crop · Compress · Preview · Export — pixel-perfect 1200×630.\n\n## Features\n\n- **Two input methods**\n  - Paste any URL → fetches the live page (via [corsproxy.io](https://corsproxy.io)), parses `og:*` / `twitter:*` / `\u003ctitle\u003e` / `\u003cmeta description\u003e`, and auto-loads the `og:image` into the editor.\n  - Drag, click, or paste (`⌘V` / `Ctrl+V`) any JPG, PNG, or WEBP from your clipboard or desktop.\n\n- **Editor**\n  - Interactive crop overlay locked to the 1200 × 630 OG aspect ratio (1.91:1).\n  - Live quality slider (10–100%) with live output-size readout.\n  - Format toggle: JPEG, PNG, WEBP (with auto-derived `og:image:type` in the embed output).\n  - Source-dimension warning when the input is below 1200 × 630.\n  - One-click **auto-compress** — binary-searches the highest quality that fits under 200 KB.\n  - **Download HD** at exactly 1200 × 630.\n\n- **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.\n\n- **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).\n\n- **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.\n\n- **Status bar** — live source dimensions, character counts, tag count, and output file size with traffic-light status indicator.\n\n## Live demo\n\n**[opengraph.website](https://www.opengraph.website/)** — hosted on Vercel.\n\nOr run it locally — no install required:\n\n```bash\ngit clone https://github.com/apoorvdarshan/opengraph-studio\ncd opengraph-studio\npython3 -m http.server 3000\n# then open http://localhost:3000\n```\n\nYou can also just open `index.html` directly in any modern browser.\n\n## Project structure\n\n```\nopengraph-studio/\n├── index.html        # the entire app (HTML + CSS + JS)\n├── api/\n│   └── fetch.js      # Vercel Edge function: server-side CORS proxy\n├── vercel.json       # canonical redirects + crawl-related headers\n├── LICENSE           # MIT\n├── README.md\n├── CONTRIBUTING.md\n└── .github/\n    └── FUNDING.yml\n```\n\nThe 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.\n\n## Tech\n\n- **Vanilla HTML, CSS, and JavaScript** — no framework, no bundler, no CDN libraries (except Google Fonts for typography).\n- **Manrope** for UI, **Instrument Serif** for display moments, **JetBrains Mono** for code/dimensions — all from Google Fonts.\n- Image processing via the **Canvas API** (`drawImage` + `toBlob`).\n- **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.\n\n## Recommended values (encoded in the tool)\n\n| Tag | Recommended | Hard caps |\n|---|---|---|\n| `og:title` | ≤ 60 chars | WA 65, TW/LI 70, Slack 75, FB 100 |\n| `og:description` | 130–160 chars | WA 175, TW/FB 200 |\n| `og:image` | 1200 × 630 (1.91:1) | min 600 × 315 |\n| File size | ≤ 200 KB | acceptable to ~500 KB |\n\n## Deploying\n\nDrop `index.html` on any static host:\n\n- **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.\n- **GitHub Pages** — Settings → Pages → deploy from `main`. The Vercel Analytics script will silently 404; remove it if you don't want the console line.\n- **Netlify / Cloudflare Pages** — drag-and-drop the file, or connect the repo.\n\nNo server, no API, no env vars required.\n\n## Privacy\n\nThe 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.\n\n## Roadmap\n\n- Safe-zone overlay (60 px margin guides) on the crop tool\n- Optional `og:image:secure_url` toggle\n- Save / load presets\n- Per-platform export (different sizes for each)\n\n## License\n\n[MIT](./LICENSE) © Apoorv Darshan\n\n## Contributing\n\nPRs welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) for the workflow and style notes.\n\n## Author \u0026 support\n\n- **Developer:** Apoorv Darshan — [@apoorvdarshan on X](https://x.com/apoorvdarshan)\n- **Email:** [ad13dtu@gmail.com](mailto:ad13dtu@gmail.com)\n- **Issues / bugs:** [github.com/apoorvdarshan/opengraph-studio/issues](https://github.com/apoorvdarshan/opengraph-studio/issues)\n- **Support the project:** [ko-fi.com/apoorvdarshan](https://ko-fi.com/apoorvdarshan) — or just star the repo, that helps too\n\nIf this saved you time, a ⭐ on [the repo](https://github.com/apoorvdarshan/opengraph-studio) is the easiest thank-you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapoorvdarshan%2Fopengraph-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapoorvdarshan%2Fopengraph-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapoorvdarshan%2Fopengraph-studio/lists"}