A browser extension that adds a developer tools panel for inspecting HTML meta tags on any webpage.
Meta Tags Inspector is a lightweight browser extension that integrates seamlessly with your browser's developer tools. It provides a clean, organized view of all meta tags present on the current webpage, making it easy to verify SEO tags, Open Graph data, Twitter Cards, and other metadata.
- Dedicated DevTools Panel: Adds a "Metatags" tab to your browser's developer tools
- Comprehensive Meta Tag Display: Shows all meta tags including:
- Page title
- Meta name attributes
- Meta property attributes (Open Graph, Twitter Cards, etc.)
- Visual Previews:
- Image previews for meta tags containing images (og:image, twitter:image, etc.)
- Color swatches for theme-color meta tags
- Interactive Elements:
- Click on images to open them in a new tab
- Inspect button to jump directly to the meta tag in the Elements panel
- Real-time Updates: Reload button to refresh meta tags after page changes
- Clean Interface: Dark theme matching browser developer tools styling
- Clone or download this repository
- Open Firefox and navigate to
about:debugging - Click "This Firefox" in the left sidebar
- Click "Load Temporary Add-on"
- Navigate to the extension directory and select the
manifest.jsonfile
git clone https://github.com/Roy-Ermers/metatags-inpector.git
cd metatags-inpectorThen follow the Firefox installation steps above.
- Open your browser's Developer Tools (F12 or right-click → Inspect)
- Look for the "Metatags" tab in the developer tools panel
- Click on the "Metatags" tab to view all meta tags on the current page
- Use the toolbar buttons:
- Reload (↻): Refresh the meta tags list
- Clear (🗑): Clear the current display
- Interact with meta tags:
- Click on image previews to open them in a new tab
- Click the external link icon (↗) to inspect the meta tag in the Elements panel
- Hover over color swatches to see color values
The extension displays:
- Title Element: The page's
<title>tag content - Meta Name Tags: All
<meta name="...">tags (description, keywords, author, etc.) - Meta Property Tags: All
<meta property="...">tags (Open Graph, Facebook, etc.) - Content Values: The content or value attribute of each meta tag
metatags-inpector/
├── manifest.json # Extension configuration
├── background_scripts/
│ └── background.js # Background script for message handling
├── devtools/
│ ├── devtools-page.html # DevTools page
│ ├── devtools.js # Creates the DevTools panel
│ └── panel/
│ ├── panel.html # Panel UI
│ ├── devtools-panel.js # Panel logic
│ └── variables.css # Theme variables
└── icons/
└── tag.svg # Extension icon
<all_urls>: Required to inspect meta tags on any webpage
browser.devtools.panels: Creates the developer tools panelbrowser.devtools.inspectedWindow: Evaluates JavaScript in the inspected pagebrowser.runtime: Message passing between background script and panel
- Firefox (Manifest V2)
- Other browsers supporting WebExtensions API (may require adaptation)
Roy Ermers
This project is open source. Check the repository for license details.
Based on the MDN WebExtensions examples for developer tools panels.
Contributions, issues, and feature requests are welcome!
- The extension name in the manifest is "Meta tags" but the repository is named "metatags-inpector"
- This extension is particularly useful for web developers, SEO specialists, and anyone working with social media metadata