EN CA ES

Meta Tags Generator

Generate SEO meta tags, Open Graph, and JSON-LD schema for better search rankings and rich results

Basic Information

0/60 characters (recommended)
0/160 characters (recommended)
The canonical URL of your page

Social Media (Open Graph & Twitter)

Custom title for social media shares
Custom description for social media shares
Recommended size: 1200x630 pixels for Facebook/LinkedIn, 1200x600 for Twitter

Robots & Indexing

Control how search engines crawl and index your page

JSON-LD Schema (Structured Data)

Add structured data for rich search results (FAQ, Article, Product, etc.)

Preview

Google Search Result Preview

Page Title Will Appear Here
https://www.example.com
Your meta description will appear here. Make it compelling to improve click-through rates from search results.

Generated Meta Tags

SEO Tips

Title Tags

  • Keep titles under 60 characters
  • Include primary keyword near the start
  • Make each title unique across your site
  • Use pipes or dashes as separators

Meta Descriptions

  • Aim for 150-160 characters
  • Include a call-to-action
  • Summarize the page content accurately
  • Use active voice and be specific

Open Graph

  • Use high-quality images (1200x630px)
  • Test with Facebook Sharing Debugger
  • Keep OG titles under 95 characters
  • Include site name for brand recognition
Copied to clipboard!
`); } return tags.join('\n'); } // Escape HTML entities function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // Syntax highlight the code function highlightCode(code) { return code .replace(/(<\/?[\w-]+)/g, '$1') .replace(/([\w-]+)=/g, '$1=') .replace(/"([^"]*)"/g, '"$1"'); } // Update output function updateOutput() { updateCharCounts(); updatePreviews(); const tags = generateMetaTags(); codeOutput.innerHTML = highlightCode(escapeHtml(tags)); } // Show toast notification function showToast(message) { toast.textContent = message; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); } // Tab switching document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); tab.classList.add('active'); Object.values(previewContainers).forEach(c => c.style.display = 'none'); previewContainers[tab.dataset.preview].style.display = 'block'; }); }); // Event listeners for all inputs const inputs = [pageTitle, pageDescription, pageUrl, siteName, author, ogTitle, ogDescription, ogImage, twitterCard, twitterHandle]; inputs.forEach(input => { input.addEventListener('input', updateOutput); }); // Event listeners for robots checkboxes [robotsIndex, robotsFollow, robotsNoarchive, robotsNosnippet].forEach(checkbox => { checkbox.addEventListener('change', updateOutput); }); // Event listeners for JSON-LD schema inputs const schemaInputs = document.querySelectorAll('#article-fields input, #product-fields input, #product-fields select, #faq-fields textarea, #localbusiness-fields input'); schemaInputs.forEach(input => { input.addEventListener('input', updateOutput); input.addEventListener('change', updateOutput); }); // Copy to clipboard document.getElementById('copy-btn').addEventListener('click', () => { const tags = generateMetaTags(); navigator.clipboard.writeText(tags).then(() => { showToast('Copied to clipboard!'); }); }); // Download as HTML document.getElementById('download-btn').addEventListener('click', () => { const tags = generateMetaTags(); const blob = new Blob([tags], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'meta-tags.html'; a.click(); URL.revokeObjectURL(url); showToast('Downloaded!'); }); // Theme toggle functionality const savedTheme = localStorage.getItem('theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (savedTheme === 'dark' || (!savedTheme && prefersDark)) { document.documentElement.setAttribute('data-theme', 'dark'); } document.querySelector('.theme-toggle').addEventListener('click', () => { const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; const newTheme = isDark ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); }); // Initialize updateOutput();