Getting Started with Open Graph Preview Tool

Step 1: Install the Browser Extension

Visit the Chrome Web Store or Firefox Add-ons page and install the OG Preview Tool extension. Once installed, you'll see a small icon in your toolbar.

Step 2: Visit Any Website

Navigate to any webpage you'd like to preview — this could be a blog post, product page, or landing page. The extension works automatically on most sites.

Step 3: Click the Extension Icon

Click the OG Preview icon in your browser toolbar. A panel will open showing current meta tags and a live preview of how your content appears on Facebook, Twitter (X), LinkedIn, and other platforms.

Step 4: Edit Meta Tags

In the panel, edit the title, description, or image URL. The preview updates in real time as you type. You can even upload a custom image using the built-in picker.

Step 5: Copy and Implement Code

Once satisfied, click "Copy HTML" to get the complete Open Graph meta tags. Paste this code into your website's <head> section (or use a CMS plugin like Yoast SEO or Rank Math).

Step 6: Test Your Implementation

Paste your page URL into Facebook's Sharing Debugger, Twitter Card Validator, or LinkedIn Post Inspector to verify the preview appears correctly. Clear caches if needed.

← Back to Tool