Create and Manage SEO Meta Tags, Open Graph & Twitter Cards
A comprehensive tool for creating and managing SEO metadata, Open Graph tags, Twitter Cards, and structured data for your website. Perfect for optimizing how your content appears in search engines and social media.
The SEO Metadata Editor helps you create comprehensive meta tags for your website. Whether you are building a new site or optimizing an existing one, this tool provides everything you need for optimal search engine and social media visibility.
Already have metadata on your site? Use the Import feature to paste your HTML and automatically extract all existing meta tags, Open Graph, Twitter Cards, and more.
The Basic Metadata section covers the fundamental SEO elements that every webpage should have. These tags are essential for search engine indexing and basic browser functionality.
The title that appears in search results and browser tabs.
A brief summary that appears in search results below the title.
The tool automatically validates character counts and provides visual feedback. Green indicators show optimal length, while warnings appear for titles or descriptions that are too long.
Comma-separated list of relevant keywords
Content author name
Preferred URL to prevent duplicate content issues
Control search engine indexing behavior
Open Graph protocol tags control how your content appears when shared on Facebook, LinkedIn, and other social platforms. Proper Open Graph configuration significantly improves click-through rates from social media.
Use the "Copy from Basic" button to automatically populate Open Graph title, description, and URL from your basic metadata.
Open Graph images should be 1200x630 pixels (1.91:1 aspect ratio) and under 500KB for optimal social media display. The tool automatically validates image URLs and analyzes dimensions.
Create stunning Open Graph images directly in the browser with the visual OG Image Maker. Design custom social media preview images without needing external design tools.
Start with professionally designed templates and customize them to match your brand:
Export your OG image as PNG or JPEG. The recommended size is 1200x630 pixels for optimal display across all social platforms. Images are generated directly in the browser for instant download.
Twitter Cards provide a rich way for your content to be displayed when shared on Twitter/X. Configure these tags to ensure your links stand out in the Twitter timeline.
Small image card
Large featured image
Mobile app promotion
Video/audio content
Use the "Copy from OG" button to quickly populate Twitter Card fields with your Open Graph data. This ensures consistency across platforms while allowing platform-specific customization.
Structured data helps search engines understand your content better and can enable rich results in search. The tool supports JSON-LD format with built-in templates for common content types.
Basic website schema
Blog post or news article
Business or organization
E-commerce product
Navigation breadcrumb
The editor validates your JSON-LD in real-time and displays validation status. Use the Format button to auto-format your code.
Links to Google Rich Results Test and Schema.org Validator for verifying your structured data implementation.
Configure icons for browser tabs, bookmarks, and mobile device home screens. Proper icon configuration improves brand recognition and user experience.
Browser tab and bookmark icons
16x16 or 32x32 pixelsiOS home screen icon
180x180 pixels16x16, 32x32180x180192x192, 512x512144x144Add verification codes for search engine webmaster tools to prove ownership of your website and access additional tools and data.
Add your Google site verification meta tag
Add Bing validation code
Add Pinterest verification
Configure your robots.txt file to control how search engine crawlers access and index your website. The visual editor makes it easy to create and manage crawler directives.
Create rules for specific crawlers or all bots:
* - All botsGooglebot - GoogleBingbot - BingGPTBot - ChatGPTControl access to specific paths:
Specify your XML sitemap location
Set delay between crawler requests
Add custom rules and comments
User-agent: * Allow: / Disallow: /admin/ Disallow: /private/ User-agent: GPTBot Disallow: / Sitemap: https://example.com/sitemap.xml Crawl-delay: 10
Create a Progressive Web App (PWA) manifest file that defines how your app appears when installed on a user's device. Configure app icons, display modes, and behavior.
App store categories
Primary app language
LTR or RTL text
Navigation scope
{
"name": "My Awesome App",
"short_name": "AwesomeApp",
"description": "An awesome progressive web app",
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Configure additional meta tags for viewport, theme color, character encoding, and other advanced settings.
Control how your site displays on different devices. Essential for mobile responsiveness.
Browser UI color on mobile devices and tab colors.
Set your page character set (UTF-8 recommended).
Specify the primary language of your content.
The preview panel on the right side shows how your metadata will appear in different contexts. Switch between Google search preview, social media previews, and code view.
See how your page appears in Google search results with title and description.
Preview Facebook/LinkedIn Open Graph cards and Twitter Cards.
View and copy the generated HTML meta tags organized by category.
The SEO Score panel evaluates your metadata configuration and provides a numerical score with improvement recommendations.
Title Length
Description
Open Graph
Twitter Cards
Import existing metadata from any webpage or save your configurations as reusable presets. Speed up your workflow by reusing common metadata patterns.
Paste HTML from any webpage to extract its metadata. The parser automatically detects:
Import a previously exported JSON configuration to quickly restore all metadata settings.
Save your metadata configurations as named presets for quick reuse:
Store current config with a name
Restore saved configurations
View, rename, or delete presets
All changes are tracked with full undo/redo history. Use Ctrl/Cmd + Z to undo and Ctrl/Cmd + Y to redo any changes.
Export your metadata in multiple formats suitable for different frameworks and platforms.
Standard HTML meta tags ready to paste in your page <head>
Extension: .htmlNext.js 13+ metadata object for App Router pages
Extension: .tsReact Helmet component for SPA applications
Extension: .jsxTypeScript configuration interface
Extension: .tsRaw metadata as JSON object
Extension: .jsonimport type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Your Page Title',
description: 'Your meta description',
openGraph: {
title: 'OG Title',
description: 'OG Description',
images: [{ url: 'https://example.com/og-image.jpg' }],
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'Twitter Title',
images: ['https://example.com/twitter-image.jpg'],
},
};Speed up your workflow with these keyboard shortcuts:
| Action | Shortcut |
|---|---|
| Save / Export | Ctrl / Cmd + S |
| Export | Ctrl / Cmd + E |
| Undo | Ctrl / Cmd + Z |
| Redo | Ctrl / Cmd + Y |
| Toggle Preview Panel | Ctrl / Cmd + P |
| Import Metadata | Ctrl / Cmd + I |
| Show Shortcuts | ? |
| Switch Sections (1-10) | 1 - 9, 0 |