OpenGraph Viewer

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

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.

Why I Built This

I grew tired of having to publish a site to production in order to try preview a link in WhatsApp. So I built this so I could do it locally.

I am aware of other local options like npm packages and other tools, but I just wanted a easy to use option.

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.