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, local development 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.

Built 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

Prerequisites

• Node.js v14 or later

Installation

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

Usage

npm start

Open http://localhost:3456 in your browser, enter a URL, and instantly preview how it will appear across social platforms.

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
Backend	Express.js
HTML Parsing	Cheerio
Frontend	Vanilla HTML, CSS, and JavaScript

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.