← Back to Tools

Meta Tag Generator

Create SEO-optimized meta tags, Open Graph tags, Twitter Cards, and structured data

📥 Import Existing Meta Tags
🏷️ Basic Meta Tags
0 / 100 Optimal: 50-60 characters
0 / 300 Optimal: 150-160 characters

Separated by commas. Tip: 5-10 keywords per page.

Specify the preferred version of your page.

🔗 Open Graph Tags

Recommended: 1200x630px for optimal display.

🐦 Twitter Card Tags

Include @ symbol. This is the website's Twitter handle.

The content creator's Twitter handle.

📊 Google SERP Preview
example.com
Your Page Title
Your page description will appear here...

Title: 50-60 chars | Description: 150-160 chars

👍 Facebook Share Preview
𝕏 Twitter Card Preview
📦 JSON-LD Structured Data

Generate structured data for search engines to better understand your content.

Add FAQ items for your page. Each question and answer pair helps search engines understand common queries.

💻 Generated HTML
META TAGS
OPEN GRAPH TAGS
TWITTER CARD TAGS
JSON-LD STRUCTURED DATA
`; const blob = new Blob([html], { type: 'text/html' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'meta-tags.html'; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); showToast('HTML downloaded!'); } // Toast Notification function showToast(message) { const toast = document.createElement('div'); toast.className = 'toast'; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.style.animation = 'slideIn 0.3s ease reverse'; setTimeout(() => toast.remove(), 300); }, 2000); } // Import Meta Tags function importMetaTags() { const html = document.getElementById('importHtml').value; if (!html) { showToast('Please paste HTML code'); return; } const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); // Extract meta tags const title = doc.querySelector('title')?.textContent || ''; const description = doc.querySelector('meta[name="description"]')?.getAttribute('content') || ''; const keywords = doc.querySelector('meta[name="keywords"]')?.getAttribute('content') || ''; const author = doc.querySelector('meta[name="author"]')?.getAttribute('content') || ''; const canonical = doc.querySelector('link[rel="canonical"]')?.getAttribute('href') || ''; // OG Tags const ogTitle = doc.querySelector('meta[property="og:title"]')?.getAttribute('content') || title; const ogDescription = doc.querySelector('meta[property="og:description"]')?.getAttribute('content') || description; const ogImage = doc.querySelector('meta[property="og:image"]')?.getAttribute('content') || ''; const ogUrl = doc.querySelector('meta[property="og:url"]')?.getAttribute('content') || ''; const ogType = doc.querySelector('meta[property="og:type"]')?.getAttribute('content') || 'website'; const ogSiteName = doc.querySelector('meta[property="og:site_name"]')?.getAttribute('content') || ''; // Twitter Tags const twitterCard = doc.querySelector('meta[name="twitter:card"]')?.getAttribute('content') || 'summary'; const twitterSite = doc.querySelector('meta[name="twitter:site"]')?.getAttribute('content') || ''; const twitterCreator = doc.querySelector('meta[name="twitter:creator"]')?.getAttribute('content') || ''; const twitterImage = doc.querySelector('meta[name="twitter:image"]')?.getAttribute('content') || ogImage; // Fill form document.getElementById('title').value = title; document.getElementById('description').value = description; document.getElementById('keywords').value = keywords; document.getElementById('author').value = author; document.getElementById('canonical').value = canonical; document.getElementById('ogImage').value = ogImage; document.getElementById('ogUrl').value = ogUrl; document.getElementById('ogType').value = ogType; document.getElementById('ogSiteName').value = ogSiteName; document.getElementById('twitterCardType').value = twitterCard; document.getElementById('twitterSite').value = twitterSite; document.getElementById('twitterCreator').value = twitterCreator; document.getElementById('twitterImage').value = twitterImage; updateAll(); showToast('Meta tags imported successfully!'); } // Tab Switching function switchTab(e, tabId) { e.preventDefault(); document.querySelectorAll('.tab-content').forEach(tab => { tab.classList.remove('active'); }); document.querySelectorAll('.tab-button').forEach(btn => { btn.classList.remove('active'); }); document.getElementById(tabId).classList.add('active'); e.target.classList.add('active'); } // Add FAQ Item function addFaqItem() { const faqItems = document.getElementById('faqItems'); const index = faqItems.children.length + 1; const item = document.createElement('div'); item.className = 'form-group'; item.style.cssText = 'background: rgba(123, 47, 247, 0.1); padding: 15px; border-radius: 8px; margin-bottom: 15px;'; item.innerHTML = ` `; faqItems.appendChild(item); } // Escape HTML function escapeHtml(text) { const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, m => map[m]); } // Keyboard shortcut: Ctrl+S to copy all document.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); copyAllMetaTags(); } }); \xF0\x9F\x92\x99 Tip\xF0\x9F\x93\x9A Get Bundle \x244.99