Open Graph Tag Generator

WHAT IT DOES Open Graph Tag Generator creates complete Open Graph meta tags and shows you exactly how your page will appear when shared on social media. Enter your title, description, image URL, URL, type, and site name, and the tool generates all the required og: tags. A live preview shows the card as it would appear on Facebook, Twitter, or LinkedIn, so you can see the result before adding the tags to your website. Choose from preset templates for Blog, Portfolio, Business, Product, and Article to get started quickly. The tool also generates Twitter Card tags for complete social media coverage. WHERE IT RUNS The extension runs entirely within your browser's local environment using the BotGentz framework. All Open Graph tag generation, preview rendering, and formatting occur on your machine without any network requests. No website data, generated tags, 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. Social media previews are rendered using CSS to simulate platform-specific card styles. HOW TO USE Click the extension toolbar icon to open the Open Graph Tag Generator panel. Fill in the fields: og:title, og:description, og:image (URL), og:url, og:type, and og:site_name. The generated tags appear in the output area, and a live preview shows how the card will look. Switch between Facebook, Twitter, and LinkedIn preview platforms using the dropdown. Toggle "Include Twitter Cards" to add Twitter Card meta tags. Select a preset (Blog, Portfolio, Business, Product, or Article) to load pre-configured values. Click "Copy" to copy the generated tags to your clipboard. Click "Download" to save the tags as an .html file. The preview updates automatically as you type. THE OPEN GRAPH GENERATION ENGINE — WHY IT WORKS Most Open Graph generators only output the raw meta tags without showing you the visual result. This tool combines tag generation with a visual preview engine that simulates how social media platforms render shared links. The engine collects all OG tag values, escapes them for HTML safety, and generates the complete set of meta tags using the proper property attributes. The preview renderer builds a card using CSS that replicates Facebook's, Twitter's, and LinkedIn's card styles—including image sizing, title and description truncation, domain display, and platform-specific visual elements. The image preview uses the og:image URL directly, with graceful fallback when images fail to load. The Twitter Card generation adds the appropriate twitter:name attributes in addition to the OG tags. This dual approach—both raw tag output and visual preview—helps you verify that your tags will work correctly before deployment. THE PANEL The Open Graph Tag Generator 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 input fields, preview, and tag output adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to generate OG tags for multiple pages simultaneously. PLEASE NOTE This extension requires the free BotGentz extension framework to be installed and enabled. The tool generates Open Graph and Twitter Card meta tags but does not modify your website automatically—you must copy and paste the tags into your HTML section. The preview is a visual simulation and may not match every platform's exact rendering. Presets are templates and should be customized for your specific content. All generated tags are processed locally and are never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.