OpenGraph Viewer

Preview how your website looks when shared on social media — before you deploy.

Getting Started · Features · API Reference

About

OpenGraph Viewer is a lightweight tool that extracts OpenGraph and Twitter Card metadata from any URL and renders realistic previews for major social platforms. Stop guessing how your links will look — see exactly how they'll appear on Facebook, Twitter/X, LinkedIn, Discord, and Slack.

Available as both a desktop application (macOS, Windows, Linux) and a web server for developers who want to validate their meta tags during local development without deploying to production first.

Features

• Multi-platform previews — See how your link renders on Facebook, Twitter/X, LinkedIn, Discord, and Slack simultaneously
• Localhost support — Preview metadata from your local development server (e.g. localhost:3000)
• Metadata validation — Get warnings for missing or incomplete OpenGraph tags that could affect social sharing
• Raw metadata inspector — View every meta tag extracted from the page in a detailed table
• Twitter Card variants — Renders both summary and summary_large_image card types
• Zero configuration — Just start the server and go

Getting Started

Desktop Application (Recommended)

Download the latest release for your platform:

• macOS: Download .dmg file
• Windows: Download .exe installer
• Linux: Download .AppImage or .deb package

Simply install and launch the app — no configuration needed!

Web Server (For Development)

Prerequisites

• Node.js v14 or later

Installation

git clone https://github.com/Frostist/OpenGraphViewer.git
cd OpenGraphViewer
npm install

Usage

Run as web server:

npm start

Open http://localhost:3456 in your browser.

Run as Electron desktop app:

npm run electron

Build desktop app for distribution:

# Build for your current platform
npm run electron:build

# Build for specific platforms
npm run electron:build:mac    # macOS (.dmg)
npm run electron:build:win    # Windows (.exe)
npm run electron:build:linux  # Linux (.AppImage, .deb)

Built applications will be in the dist/ folder.

API Reference

OpenGraph Viewer exposes a single endpoint for programmatic use:

POST /api/fetch-og
Content-Type: application/json

Request body:

{
  "url": "https://example.com"
}

Response:

{
  "title": "Example",
  "description": "An example page",
  "image": "https://example.com/og-image.png",
  "imageWidth": "1200",
  "imageHeight": "630",
  "siteName": "Example",
  "twitterCard": "summary_large_image",
  "allMeta": { ... }
}

Tech Stack

Layer	Technology
Desktop App	Electron
Backend	Express.js
HTML Parsing	Cheerio
Frontend	Vanilla HTML, CSS, and JavaScript
Build Tool	electron-builder

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.