Open Graph Preview

WHAT IT DOES

Open Graph Preview extracts all Open Graph meta tags from the current page and displays a realistic preview of how the page will appear when shared on social media platforms. The tool reads og:title, og:description, og:image, og:url, og:type, and og:site_name, then renders a visual card showing the title, description, image, site name, and domain. Choose from Facebook, Twitter, or LinkedIn preview styles to see exactly how your content will look on each platform. The tool also validates your OG tags, highlighting any missing required tags and providing clear warnings so you can fix issues before sharing.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All meta tag extraction, preview rendering, and validation occur on your machine without any network requests. No page content, OG data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. Images referenced in og:image tags are loaded directly from their source URLs for preview purposes.

HOW TO USE

Click the extension toolbar icon to open the Open Graph Preview panel. Click "Generate Preview" to extract all OG tags and display a visual preview card. The card shows the title, description, image (if available), site name, and domain formatted to match the selected platform. Use the platform dropdown to switch between Facebook, Twitter, and LinkedIn preview styles. Toggle "Show missing tag warnings" to see alerts for missing required OG tags. Enable "Auto preview on page load" to generate the preview automatically whenever you open the panel. The extracted tag list below the preview shows all OG tags with their values, highlighting missing ones in red. Click "Copy OG Tags" to copy all extracted tags to your clipboard.

THE SOCIAL CARD RENDERER — WHY IT WORKS

Most Open Graph previewers simply display the raw meta tag values without showing how they actually appear on social platforms. This tool renders a visual simulation of each platform's card style using CSS that replicates the exact typography, spacing, and layout of Facebook, Twitter, and LinkedIn. The renderer dynamically constructs a card element with proper image sizing, title truncation at character limits (Facebook uses ~90 characters, Twitter ~70), description formatting, and domain display. The image loader handles errors gracefully by showing a placeholder when images fail to load. The validation engine checks each required tag individually, providing user-friendly warnings instead of just dumping raw data. By combining visual previews with structured validation, the tool gives you both the "what" and the "how" of your Open Graph implementation.

THE PANEL

The Open Graph Preview panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the preview card and tag list adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to preview OG tags in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their meta tag patterns; while the tool covers all standard Open Graph tags, some platforms may use custom properties not included in the preview. og:image loading depends on the image URL being accessible; blocked or expired URLs will show a placeholder. All data is processed locally and is never transmitted, logged, or shared. The extension requests no network permissions beyond loading images for preview purposes. The source code is fully auditable and available for review.