SEO Tags Generator

Generate optimized SEO meta tags (Title, Description) for improved search engine rankings and CTR.

Home SEO Tags Generator
Our free SEO Tags Generator helps you create the perfect Title tag, Meta description, and viewport tags. Input your content and keywords to instantly output fully optimized code, maximizing your click-through rate (CTR) and search engine visibility. Generate your SEO Tags now!

SEO Information

SEO Score: /100 -

Based on title length, description quality, and completeness

SEO Tips:

  • • Keep titles under 60 characters
  • • Write descriptions between 150-160 characters
  • • Use high-quality images (1200x630px for social sharing)
  • • Include relevant keywords naturally

Live Preview

Preview
1200 x 630

Preview
1200 x 630

Generated SEO Tags

How to use these tags:

Copy the generated HTML meta tags and paste them into the <head> section of your webpage. These tags will help search engines and social media platforms understand your content better.

Includes: Title tags, Meta descriptions, Open Graph tags (Facebook/LinkedIn), Twitter Card tags
  1. 1 Enter Content Data: Input your target Primary Keyword, the desired Title Tag (max 60 characters), and your compelling Meta Description (max 160 characters).
  2. 2 Generate Tags: Click "Create SEO Tags".
  3. 3 Copy Code: The tool generates the complete, correctly structured `` and `<meta name="description">` HTML code snippet ready to be placed in your page's `<head>`.</span> </li> </ol> </div> </div> </div> </div> <!-- Section 2: FAQ --> <div class="accordion-section border-b border-gray-200"> <button type="button" class="accordion-header w-full flex items-center justify-between p-6 hover:bg-emerald-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-inset" data-accordion-target="faq" aria-expanded="false"> <div class="flex items-center gap-4 flex-1 min-w-0"> <div class="w-10 h-10 bg-gradient-to-br from-emerald-600 to-teal-600 rounded-xl flex items-center justify-center shadow-md flex-shrink-0"> <i class="fas fa-question-circle text-white"></i> </div> <div class="text-left flex-1 min-w-0"> <h3 class="text-lg font-semibold text-gray-900">FAQ</h3> <p class="text-sm text-gray-600"> Common questions <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800"> 3 questions </span> </p> </div> </div> <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300" data-accordion-icon></i> </button> <div class="accordion-content hidden" data-accordion-content="faq" style="max-height: 0; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; overflow: hidden;"> <div class="p-6 pt-0 bg-gradient-to-br from-emerald-50/30 to-teal-50/30"> <div class="space-y-4"> <div class="bg-white rounded-xl p-4 border border-emerald-100"> <h4 class="font-semibold text-gray-900 mb-2 flex items-start gap-2"> <i class="fas fa-circle text-emerald-600 text-xs mt-1.5"></i> Why is the Title Tag length restricted? </h4> <p class="text-gray-700 text-sm pl-5">Google typically truncates titles longer than <strong>60 characters</strong>. Keeping it concise ensures your full message and main keyword are visible in search results (SERPs).</p> </div> <div class="bg-white rounded-xl p-4 border border-emerald-100"> <h4 class="font-semibold text-gray-900 mb-2 flex items-start gap-2"> <i class="fas fa-circle text-emerald-600 text-xs mt-1.5"></i> How does the Meta Description help SEO? </h4> <p class="text-gray-700 text-sm pl-5">While it's not a direct ranking factor, a well-written, engaging <strong>Meta Description</strong> significantly increases the <strong>Click-Through Rate (CTR)</strong>, which is a strong signal to search engines.</p> </div> <div class="bg-white rounded-xl p-4 border border-emerald-100"> <h4 class="font-semibold text-gray-900 mb-2 flex items-start gap-2"> <i class="fas fa-circle text-emerald-600 text-xs mt-1.5"></i> Should I include keywords in the Meta Description? </h4> <p class="text-gray-700 text-sm pl-5">Yes, include your primary keyword naturally. Google will often <strong>bold</strong> the search terms in the description, drawing the user's eye and boosting visibility.</p> </div> </div> </div> </div> </div> <!-- Section 3: Use Cases & Examples --> <div class="accordion-section"> <button type="button" class="accordion-header w-full flex items-center justify-between p-6 hover:bg-amber-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-inset" data-accordion-target="examples" aria-expanded="false"> <div class="flex items-center gap-4 flex-1 min-w-0"> <div class="w-10 h-10 bg-gradient-to-br from-amber-600 to-orange-600 rounded-xl flex items-center justify-center shadow-md flex-shrink-0"> <i class="fas fa-lightbulb text-white"></i> </div> <div class="text-left flex-1 min-w-0"> <h3 class="text-lg font-semibold text-gray-900">Use Cases & Examples</h3> <p class="text-sm text-gray-600"> Real-world applications <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800"> 3 examples </span> </p> </div> </div> <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300" data-accordion-icon></i> </button> <div class="accordion-content hidden" data-accordion-content="examples" style="max-height: 0; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; overflow: hidden;"> <div class="p-6 pt-0 bg-gradient-to-br from-amber-50/30 to-orange-50/30"> <div class="space-y-4"> <div class="bg-white rounded-xl p-4 border border-amber-100"> <h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-2"> <i class="fas fa-star text-amber-600 text-sm"></i> Page Optimization </h4> <p class="text-gray-700 text-sm"><strong>Example Keyword:</strong> <code>generate optimized title tag</code><br>Create compelling snippets that feature your primary <strong>high-intent keyword</strong> at the beginning.</p> </div> <div class="bg-white rounded-xl p-4 border border-amber-100"> <h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-2"> <i class="fas fa-star text-amber-600 text-sm"></i> CTR Improvement </h4> <p class="text-gray-700 text-sm"><strong>Example Keyword:</strong> <code>seo meta tag creator for higher clicks</code><br>Write and test a Meta Description that includes a clear <strong>Call-to-Action (CTA)</strong> for better click performance.</p> </div> <div class="bg-white rounded-xl p-4 border border-amber-100"> <h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-2"> <i class="fas fa-star text-amber-600 text-sm"></i> HTML Implementation </h4> <p class="text-gray-700 text-sm"><strong>Example Keyword:</strong> <code>create meta description html code</code><br>Generate the exact HTML code needed for developers to deploy the optimized tags immediately.</p> </div> </div> </div> </div> </div> </div> <!-- Inline JavaScript for Enhanced Accordion Functionality --> <script nonce="QTob4EyVyAXid1xcjSb+7w=="> document.addEventListener('DOMContentLoaded', function() { // Initialize accordion with smooth animations const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { header.addEventListener('click', function() { const target = this.dataset.accordionTarget; const content = document.querySelector(`[data-accordion-content="${target}"]`); const icon = this.querySelector('[data-accordion-icon]'); const isExpanded = this.getAttribute('aria-expanded') === 'true'; // Toggle current section with smooth animation if (isExpanded) { // Collapse content.style.maxHeight = '0'; content.style.opacity = '0'; setTimeout(() => { content.classList.add('hidden'); }, 300); // Wait for animation to complete icon.classList.remove('rotate-180'); this.setAttribute('aria-expanded', 'false'); } else { // Expand content.classList.remove('hidden'); // Use setTimeout to ensure the browser registers the change setTimeout(() => { content.style.maxHeight = '2000px'; // Large enough for most content content.style.opacity = '1'; }, 10); icon.classList.add('rotate-180'); this.setAttribute('aria-expanded', 'true'); // Scroll into view if needed (smooth scroll) if (window.innerWidth < 768) { // Mobile devices setTimeout(() => { this.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100); } } }); // Add keyboard support (Enter/Space to toggle) header.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); }); // Add copy-to-clipboard functionality for use case examples document.querySelectorAll('.copy-example-btn').forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); const textToCopy = this.dataset.copyText; const btnId = this.dataset.btnId; // Copy to clipboard if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(textToCopy).then(() => { showCopyFeedback(this); }).catch(err => { console.error('Failed to copy:', err); }); } else { // Fallback for older browsers const textarea = document.createElement('textarea'); textarea.value = textToCopy; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); showCopyFeedback(this); } catch (err) { console.error('Failed to copy:', err); } document.body.removeChild(textarea); } }); }); function showCopyFeedback(btn) { const originalHTML = btn.innerHTML; btn.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!'; btn.classList.add('bg-green-600', 'text-white'); btn.classList.remove('bg-gray-100', 'text-gray-700'); setTimeout(() => { btn.innerHTML = originalHTML; btn.classList.remove('bg-green-600', 'text-white'); btn.classList.add('bg-gray-100', 'text-gray-700'); }, 2000); } // Add smooth scroll to instructions when hash is #howto if (window.location.hash === '#howto' || window.location.hash === '#help') { const instructionsEl = document.getElementById('toolInstructions'); if (instructionsEl) { setTimeout(() => { instructionsEl.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 300); } } }); </script> </div> </div> </div> <!-- Right Sidebar Ad --> <aside class="hidden lg:block lg:col-span-2"> <div class="ad-container sticky top-24"> <iframe src="https://toolgami.com/banner/bildirchingroup/banner-160x600.html" width="160" height="600" frameborder="0" scrolling="no" style="border: none; display: block; margin: 0 auto;"> </iframe> </div> </aside> </div> </div> </div> <!-- Related Tools Section --> <div class="related-tools-section"> <div class="related-tools-container"> <div class="related-tools-header"> <div class="related-tools-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path id="chart-relationship" d="M29.25,6.75a4.5,4.5,0,0,0-4.34,3.375H20.171A8.995,8.995,0,1,0,10.125,20.171V24.91a4.5,4.5,0,1,0,2.25,0V20.173A8.945,8.945,0,0,0,16.76,18.35l4.128,4.129a4.447,4.447,0,0,0-.638,2.271,4.5,4.5,0,1,0,4.5-4.5,4.446,4.446,0,0,0-2.271.638L18.35,16.759a8.944,8.944,0,0,0,1.823-4.384H24.91A4.492,4.492,0,1,0,29.25,6.75Z" transform="translate(-2.251 -2.251)" fill="white"/> </svg> </div> <h2 class="related-tools-title">Related Tools</h2> <p class="related-tools-subtitle">Discover more tools that work perfectly with SEO Tags Generator</p> </div> <div class="content-cats-sec"> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/html-code-editor" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-code text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">HTML Code Editor</div> </div> <p class="text-gray-600 mb-4">An online editor for writing, editing, and previewing HTML, CSS, and JavaScript code instantly.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Development</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Code</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Tools</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/twitter-card-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fab fa-twitter text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Twitter Card Generator</div> </div> <p class="text-gray-600 mb-4">Create the necessary meta tags to ensure your links look great when shared on Twitter.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Generator</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Create</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Template</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/privacy-policy-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-file-contract text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Privacy Policy Generator</div> </div> <p class="text-gray-600 mb-4">Generate a professional, legally compliant Privacy Policy for your website or app in minutes.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Generator</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Create</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Template</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/terms-of-service-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-file-contract text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Terms of Service Generator</div> </div> <p class="text-gray-600 mb-4">Create a comprehensive Terms of Service (ToS) agreement for your website or application.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Generator</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Create</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Template</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/robotstxt-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-file-contract text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Robots.txt Generator</div> </div> <p class="text-gray-600 mb-4">Easily create or edit a robots.txt file to guide search engine crawlers on your website.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Generator</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Create</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Template</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/htaccess-redirect-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-file-contract text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">HTACCESS Redirect Generator</div> </div> <p class="text-gray-600 mb-4">Easily generate .htaccess code snippets for 301, 302, and other common redirects.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Generator</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Create</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Template</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/lorem-ipsum-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-font text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Lorem Ipsum Generator</div> </div> <p class="text-gray-600 mb-4">Generate classic Lorem Ipsum placeholder text for design, layout, and mockup purposes.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Network</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">DNS</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Utility</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/html-tags-stripper" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-file-alt text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">HTML Tags Stripper</div> </div> <p class="text-gray-600 mb-4">Remove all HTML and XML tags from text, leaving only the clean, raw content.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Network</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">DNS</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Utility</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/js-obfuscator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fab fa-js-square text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">JS Obfuscator</div> </div> <p class="text-gray-600 mb-4">Protect your JavaScript source code by making it difficult for humans to read and reverse-engineer.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">JavaScript</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Development</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Formatter</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/sql-beautifier" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-code text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">SQL Beautifier</div> </div> <p class="text-gray-600 mb-4">Format and beautify messy or unreadable SQL queries for clarity and maintenance.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Converter</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Utility</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Transform</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/wheel-color-picker" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-palette text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Wheel Color Picker</div> </div> <p class="text-gray-600 mb-4">Dive into the world of gooey fun! Spin the wheel to craft your unique slime masterpiece</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Converter</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Utility</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Transform</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/smtp-test" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-envelope text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Online SMTP Test</div> </div> <p class="text-gray-600 mb-4">Test your SMTP server connection and email sending functionality instantly.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Converter</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Utility</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Transform</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/gzip-test" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-wrench text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">GZIP Compression Test</div> </div> <p class="text-gray-600 mb-4">Check if GZIP compression is enabled and working correctly on your web server.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Network</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">DNS</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Utility</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/source-code-downloader" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-wrench text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Source Code Downloader</div> </div> <p class="text-gray-600 mb-4">Download the complete source code (HTML, CSS, JS) of any publicly accessible webpage.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Development</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Code</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Tools</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/fake-name-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-font text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Fake Name Generator</div> </div> <p class="text-gray-600 mb-4">Generate random fake names and identities for testing purposes.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">Generator</span> <span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Create</span> <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded">Template</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/hashtag-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-hashtag text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Hashtag Generator</div> </div> <p class="text-gray-600 mb-4">Generate relevant and trending hashtags for your social media content instantly.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-3 py-1 bg-rose-100 text-rose-700 rounded-full text-sm font-medium">Social Media</span> <span class="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm font-medium">Marketing</span> <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">Tags</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/open-graph-preview" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-share-alt text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Open Graph Preview</div> </div> <p class="text-gray-600 mb-4">Preview how your website link will appear when shared on Facebook and other social media.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">SEO</span> <span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-medium">Social</span> <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">Meta Tags</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/schema-markup-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-code text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Schema Markup Generator</div> </div> <p class="text-gray-600 mb-4">Easily create structured data JSON-LD and Microdata for popular Schema types (e.g., FAQ, Recipe).</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-medium">SEO</span> <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">Schema</span> <span class="px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm font-medium">Structured Data</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> <div class="content-cats-col"> <a href="https://nequlluq.com/tool/sitemap-generator" class="content-cats-inner "> <div class="h-full flex flex-col"> <div class="flex items-center mb-4"> <div class="p-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-md"> <i class="fas fa-sitemap text-white text-2xl"></i> </div> <div class="ml-4 text-xl font-bold text-gray-800" role="heading" aria-level="3">Sitemap Generator</div> </div> <p class="text-gray-600 mb-4">Generate an XML Sitemap for your website to help search engines efficiently crawl all pages.</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="px-3 py-1 bg-slate-100 text-slate-700 rounded-full text-sm font-medium">SEO</span> <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">XML</span> <span class="px-3 py-1 bg-zinc-100 text-zinc-700 rounded-full text-sm font-medium">Website</span> </div> <div class="mt-auto block w-full text-center px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-colors"> Use Tool </div> </div> </a> </div> </div> </div> </div> </main> <!-- MODERN FOOTER WITH TAILWIND --> <footer class="bg-gradient-to-br from-gray-900 via-gray-800 to-indigo-900 text-white mt-20" role="contentinfo"> <!-- Footer Banner Ad --> <div class="px-4 py-16 lg:px-8"> <!-- Footer Cards Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> <!-- Brand Card --> <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10"> <div class="flex items-center mb-6"> <a href="https://nequlluq.com" class="flex items-center space-x-3 hover:opacity-80 transition-opacity"> <img src="https://nequlluq.com/storage/01K9ABR475NM521MJYK1VQR11Q.webp" alt="Toolgami.com – Fold Your Workflow into Perfection with Free Online Tools" class="h-10 w-auto" width="120" height="40" loading="lazy"> </a> </div> <div> <h3 class="text-2xl font-bold text-white mb-3">Transform Your Workflow</h3> <p class="text-gray-300 leading-relaxed">Professional tools for modern creators and developers. Streamline your work with our comprehensive suite of online utilities.</p> </div> </div> <!-- Quick Links Card --> <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10"> <div class="flex items-center mb-6"> <div class="w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center mr-4"> <i class="fas fa-link text-white text-lg"></i> </div> <h3 class="text-xl font-bold text-white">Quick Links</h3> </div> <div class="space-y-3"> <a href="https://nequlluq.com" class="block text-gray-300 hover:text-white hover:pl-2 transition-all duration-200"> Home </a> <a href="https://nequlluq.com/blog" class="block text-gray-300 hover:text-white hover:pl-2 transition-all duration-200"> Blog </a> </div> </div> <!-- Contact Card --> <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10"> <div class="flex items-center mb-6"> <div class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center mr-4"> <i class="fas fa-envelope text-white text-lg"></i> </div> <h3 class="text-xl font-bold text-white">Get in Touch</h3> </div> <div class="text-gray-300 mb-6"> </div> <a href="https://nequlluq.com/contact" class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white rounded-xl font-medium hover:bg-emerald-700 transition-colors duration-200 shadow-lg hover:shadow-xl"> <i class="fas fa-paper-plane mr-2"></i> Contact Us </a> </div> </div> </div> <!-- Footer Bottom --> <div class="border-t border-white/10 bg-black/20"> <div class="px-4 py-6 lg:px-8"> <div class="text-center text-gray-400 text-sm"> © 2024 Toolgami. All rights reserved. </div> </div> </div> </footer> <div x-data="{ accepted: false }" class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-50 p-4" x-ref="parent" x-show="!accepted" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4"> <div class="max-w-7xl mx-auto flex items-center justify-between"> <span class="text-sm text-gray-600">This website uses Cookies to ensure optimal user experience.</span> <button x-on:click="fetch('https://nequlluq.com/cookie-consent').then(function() { accepted = true; setTimeout(function() { $refs.parent && $refs.parent.remove(); }, 300); });" class="ml-4 px-6 py-2 bg-indigo-600 text-white rounded-xl font-medium hover:bg-indigo-700 transition-colors duration-200 shadow-lg hover:shadow-xl"> <span x-show="!accepted">OK</span> <span x-show="accepted" class="inline-flex items-center"> <i class="fas fa-check mr-2"></i> Accepted </span> </button> </div> </div> <script src="/js/manifest.js?id=50001a758eab7981465d55659c8cb508" defer></script> <script src="/js/vendor.js?id=be8b1ae8ddfdab9f720d921829711f0f" defer></script> <script src="/js/app.js?id=d21744213eeb6e2516e64c4d971e60e9" defer></script> <script src="/js/global-tools.js?id=a24db5984260aa0771c942b9f233343f" defer></script> <script src="https://nequlluq.com/js/ad-tracking.js?v=1762446130" defer></script> <script nonce="QTob4EyVyAXid1xcjSb+7w=="> window.bildirchinSEOTagsGeneratorComponent = function() { return { // Form data title: '', description: '', websiteName: '', websiteUrl: '', websiteType: 'article', imageUrl: '', value: '', tags: [], // UI state showToast: false, toastMessage: '', toastType: 'success', showHistory: false, showFavorites: false, showTemplates: false, showExport: false, showPreviews: false, activePreview: 'google', previewDevice: 'desktop', // Data history: [], favorites: [], templates: [ { name: 'Blog Article', title: 'How to Master SEO in 2024: Complete Guide', description: 'Learn proven SEO strategies and techniques to rank higher on Google. Discover actionable tips, best practices, and expert insights for 2024.', websiteName: 'Your Blog Name', websiteUrl: 'https://yourblog.com/seo-guide-2024', websiteType: 'article', imageUrl: 'https://example.com/blog-featured.jpg' }, { name: 'Product Page', title: 'Premium Wireless Headphones - Noise Cancelling', description: 'Experience superior sound quality with our premium wireless headphones. Active noise cancelling, 30-hour battery life, and premium comfort.', websiteName: 'Your Store', websiteUrl: 'https://yourstore.com/products/wireless-headphones', websiteType: 'product', imageUrl: 'https://example.com/product-image.jpg' }, { name: 'Service Page', title: 'Professional Web Design Services | Custom Solutions', description: 'Transform your online presence with our expert web design services. Custom, responsive websites that drive results. Get a free quote today!', websiteName: 'Your Agency', websiteUrl: 'https://youragency.com/services/web-design', websiteType: 'website', imageUrl: 'https://example.com/service-hero.jpg' }, { name: 'Landing Page', title: 'Get 50% Off - Limited Time Offer on Premium Courses', description: 'Unlock your potential with our premium online courses. Learn from industry experts, get certified, and advance your career. Offer ends soon!', websiteName: 'Course Platform', websiteUrl: 'https://courses.com/special-offer', websiteType: 'website', imageUrl: 'https://example.com/promo-banner.jpg' }, { name: 'Video Content', title: 'Behind the Scenes: Building a Startup from Scratch', description: 'Watch our exclusive documentary following the journey of building a tech startup. Real challenges, real solutions, inspiring stories.', websiteName: 'Startup Stories', websiteUrl: 'https://videos.com/startup-documentary', websiteType: 'video', imageUrl: 'https://example.com/video-thumbnail.jpg' } ], init() { this.loadHistory(); this.loadFavorites(); }, // Toast notification toast(message, type = 'success') { this.toastMessage = message; this.toastType = type; this.showToast = true; setTimeout(() => { this.showToast = false; }, 3000); }, // Character counters get titleLength() { return this.title.length; }, get descriptionLength() { return this.description.length; }, get titleStatus() { if (this.titleLength === 0) return 'empty'; if (this.titleLength < 30) return 'short'; if (this.titleLength <= 60) return 'good'; return 'long'; }, get descriptionStatus() { if (this.descriptionLength === 0) return 'empty'; if (this.descriptionLength < 70) return 'short'; if (this.descriptionLength <= 160) return 'good'; return 'long'; }, // SEO Score calculation get seoScore() { let score = 0; // Title (30 points) if (this.title.length >= 30 && this.title.length <= 60) score += 20; else if (this.title.length > 0) score += 10; if (this.title.split(' ').length >= 5) score += 5; if (/[A-Z]/.test(this.title)) score += 5; // Description (30 points) if (this.description.length >= 120 && this.description.length <= 160) score += 20; else if (this.description.length > 0) score += 10; if (this.description.split(' ').length >= 15) score += 5; if (this.description.includes('.') || this.description.includes('!')) score += 5; // Additional fields (40 points) if (this.websiteName) score += 10; if (this.websiteUrl && this.isValidUrl(this.websiteUrl)) score += 10; if (this.imageUrl && this.isValidUrl(this.imageUrl)) score += 10; if (this.websiteType) score += 10; return Math.min(100, score); }, get seoScoreLabel() { if (this.seoScore >= 90) return 'Excellent'; if (this.seoScore >= 75) return 'Good'; if (this.seoScore >= 60) return 'Fair'; if (this.seoScore >= 40) return 'Poor'; return 'Needs Work'; }, get seoScoreColor() { if (this.seoScore >= 90) return 'green'; if (this.seoScore >= 75) return 'blue'; if (this.seoScore >= 60) return 'yellow'; if (this.seoScore >= 40) return 'orange'; return 'red'; }, // URL validation isValidUrl(url) { try { new URL(url); return true; } catch { return false; } }, // HTML entity escaping function escapeHtml(text) { if (!text) return ''; return text .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); }, generate() { if (!this.title && !this.description) { this.value = ''; this.tags = []; return; } // Escape all user input const escapedTitle = this.escapeHtml(this.title); const escapedDescription = this.escapeHtml(this.description); const escapedWebsiteName = this.escapeHtml(this.websiteName); const escapedWebsiteUrl = this.escapeHtml(this.websiteUrl); const escapedImageUrl = this.escapeHtml(this.imageUrl); this.tags = [ escapedTitle ? `<title>${escapedTitle}` : '', escapedDescription ? `` : '', '', '', escapedTitle ? `` : '', escapedWebsiteName ? `` : '', escapedWebsiteUrl ? `` : '', escapedDescription ? `` : '', ``, escapedImageUrl ? `` : '', '', '', '', escapedTitle ? `` : '', escapedDescription ? `` : '', escapedImageUrl ? `` : '' ].filter(tag => tag !== ''); this.value = this.tags.join('\n'); // Auto-save to history when tags are generated if (this.value && this.title) { this.addToHistory(); } }, // History management loadHistory() { try { const saved = sessionStorage.getItem('seo_tags_history'); this.history = saved ? JSON.parse(saved) : []; } catch (e) { this.history = []; } }, saveHistory() { try { sessionStorage.setItem('seo_tags_history', JSON.stringify(this.history)); } catch (e) { console.error('Failed to save history:', e); } }, addToHistory() { const entry = { title: this.title, description: this.description, websiteName: this.websiteName, websiteUrl: this.websiteUrl, websiteType: this.websiteType, imageUrl: this.imageUrl, timestamp: new Date().toLocaleString() }; // Check if entry already exists (avoid duplicates) const exists = this.history.some(h => h.title === entry.title && h.description === entry.description ); if (!exists) { this.history.unshift(entry); this.history = this.history.slice(0, 10); this.saveHistory(); } }, clearHistory() { this.history = []; sessionStorage.removeItem('seo_tags_history'); this.toast('History cleared', 'info'); }, useHistoryItem(item) { this.title = item.title; this.description = item.description; this.websiteName = item.websiteName || ''; this.websiteUrl = item.websiteUrl || ''; this.websiteType = item.websiteType || 'article'; this.imageUrl = item.imageUrl || ''; this.generate(); this.showHistory = false; this.toast('Tags loaded from history', 'success'); }, // Favorites management loadFavorites() { try { const saved = localStorage.getItem('seo_tags_favorites'); this.favorites = saved ? JSON.parse(saved) : []; } catch (e) { this.favorites = []; } }, saveFavorites() { try { localStorage.setItem('seo_tags_favorites', JSON.stringify(this.favorites)); } catch (e) { console.error('Failed to save favorites:', e); } }, addToFavorites() { if (!this.title || !this.description) { this.toast('Please fill in title and description first', 'error'); return; } if (this.favorites.length >= 20) { this.toast('Maximum 20 favorites allowed', 'error'); return; } const exists = this.favorites.some(f => f.title === this.title && f.description === this.description ); if (exists) { this.toast('Already in favorites', 'info'); return; } const note = prompt('Add a note (optional):') || ''; this.favorites.unshift({ title: this.title, description: this.description, websiteName: this.websiteName, websiteUrl: this.websiteUrl, websiteType: this.websiteType, imageUrl: this.imageUrl, note: note, timestamp: new Date().toLocaleString() }); this.saveFavorites(); this.toast('Added to favorites', 'success'); }, clearFavorites() { if (confirm('Clear all favorites?')) { this.favorites = []; localStorage.removeItem('seo_tags_favorites'); this.toast('Favorites cleared', 'info'); } }, removeFavorite(index) { this.favorites.splice(index, 1); this.saveFavorites(); this.toast('Removed from favorites', 'info'); }, useFavoriteItem(item) { this.title = item.title; this.description = item.description; this.websiteName = item.websiteName || ''; this.websiteUrl = item.websiteUrl || ''; this.websiteType = item.websiteType || 'article'; this.imageUrl = item.imageUrl || ''; this.generate(); this.showFavorites = false; this.toast('Tags loaded from favorites', 'success'); }, // Template management applyTemplate(template) { this.title = template.title; this.description = template.description; this.websiteName = template.websiteName; this.websiteUrl = template.websiteUrl; this.websiteType = template.websiteType; this.imageUrl = template.imageUrl; this.generate(); this.showTemplates = false; this.toast('Template applied', 'success'); }, // Clipboard copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(() => { this.toast('Copied to clipboard', 'success'); }).catch(() => { this.fallbackCopy(text); }); } else { this.fallbackCopy(text); } }, fallbackCopy(text) { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); this.toast('Copied to clipboard', 'success'); } catch (err) { this.toast('Failed to copy', 'error'); } document.body.removeChild(textarea); }, // Export functionality exportData(format) { if (!this.value) { this.toast('Generate tags first', 'error'); return; } let content, filename, mimeType; if (format === 'json') { content = JSON.stringify({ title: this.title, description: this.description, websiteName: this.websiteName, websiteUrl: this.websiteUrl, websiteType: this.websiteType, imageUrl: this.imageUrl, tags: this.tags, seoScore: this.seoScore, exported_at: new Date().toISOString() }, null, 2); filename = 'seo-tags-' + Date.now() + '.json'; mimeType = 'application/json'; } else if (format === 'html') { content = this.value; filename = 'seo-tags-' + Date.now() + '.html'; mimeType = 'text/html'; } else if (format === 'csv') { let csv = 'Property,Value\n'; csv += `Title,"${this.title.replace(/"/g, '""')}"\n`; csv += `Description,"${this.description.replace(/"/g, '""')}"\n`; csv += `Website Name,"${this.websiteName.replace(/"/g, '""')}"\n`; csv += `Website URL,"${this.websiteUrl.replace(/"/g, '""')}"\n`; csv += `Type,"${this.websiteType}"\n`; csv += `Image URL,"${this.imageUrl.replace(/"/g, '""')}"\n`; csv += `SEO Score,${this.seoScore}\n`; content = csv; filename = 'seo-tags-' + Date.now() + '.csv'; mimeType = 'text/csv'; } const blob = new Blob([content], { type: mimeType }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); this.toast(`Exported as ${format.toUpperCase()}`, 'success'); this.showExport = false; } } };