Social Share Preview

WHAT IT DOES

Social Share Preview is a browser extension that displays a preview of how the current page will appear when shared on social media platforms including Facebook, Twitter, and LinkedIn. It extracts Open Graph (og:) meta tags and Twitter Card meta tags from the page and shows a visual preview with title, description, and image. You can switch between platforms to see how the card will look on each. The tool also shows a summary of the meta tags found, helping you identify missing or incomplete social media tags. The tool is ideal for SEO professionals, content marketers, web developers, and anyone who wants to ensure their pages look great when shared on social media.

WHERE IT RUNS

Social Share Preview runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, reading meta tags from the page head. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the preview. Select a platform (Facebook, Twitter, or LinkedIn) to see how the page will appear when shared on that platform. The preview card shows the title, description, image, and URL. A summary section below shows the meta tags found, including OG Title, OG Description, OG Image, OG Type, Twitter Card, and Twitter Site. Click the "Refresh Preview" button to manually update the display. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most social media preview tools require entering a URL into an external website or using browser developer tools to inspect meta tags. Social Share Preview uses a real-time, in-page approach that reads meta tags directly from the DOM. The tool queries the page head for Open Graph meta tags (property starting with "og:") and Twitter Card meta tags (name starting with "twitter:"). It extracts og:title, og:description, og:image, og:site_name, og:type, twitter:card, twitter:site, and twitter:creator. If OG tags are missing, the tool falls back to the page title and description. The preview card is rendered using a card-style layout that mimics the platform's share card appearance. A summary section shows all found tags, making it easy to identify missing or incomplete tags. The tool uses MutationObserver to detect changes to meta tags and updates automatically. This approach ensures accurate, real-time, and fully private social share preview without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view the preview. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and selected platform—are saved per domain for a seamless experience.

PLEASE NOTE

Social Share Preview requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The preview is a visual representation and may not exactly match the platform's actual rendering. The tool reads meta tags from the page; it does not modify them. The image preview uses the image URL from the meta tags; if the image is not accessible or fails to load, a placeholder is shown. All settings are stored locally in your browser using GM_setValue. No page content or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only reads and displays meta tag data at your request.