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 Generate Tags: Click "Create SEO Tags".

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>  <div class="accordion-section border-b border-gray-200 dark:border-gray-700"> <button type="button" class="accordion-header w-full flex items-center justify-between p-6 hover:bg-emerald-50 dark:hover:bg-emerald-900/30 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible: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 dark:text-white">FAQ</h3> <p class="text-sm text-gray-600 dark:text-gray-400"> 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 dark:text-gray-500 transition-transform duration-300" data-accordion-icon></i> </button> <div class="accordion-content" data-accordion-content="faq" style="max-height: 0; transition: max-height 0.4s ease-out, opacity 0.3s ease-out; opacity: 0; overflow: hidden;"> <div class="p-6 pt-0 bg-gradient-to-br from-emerald-50/30 to-teal-50/30 dark:from-emerald-900/20 dark:to-teal-900/20"> <div class="space-y-4"> <div class="bg-white dark:bg-gray-800 rounded-xl p-4 border border-emerald-100 dark:border-emerald-900"> <h4 class="font-semibold text-gray-900 dark:text-white 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 dark:text-gray-300 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 dark:bg-gray-800 rounded-xl p-4 border border-emerald-100 dark:border-emerald-900"> <h4 class="font-semibold text-gray-900 dark:text-white 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 dark:text-gray-300 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 dark:bg-gray-800 rounded-xl p-4 border border-emerald-100 dark:border-emerald-900"> <h4 class="font-semibold text-gray-900 dark:text-white 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 dark:text-gray-300 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>  <div class="accordion-section"> <button type="button" class="accordion-header w-full flex items-center justify-between p-6 hover:bg-amber-50 dark:hover:bg-amber-900/30 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 focus-visible: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 dark:text-white">Use Cases & Examples</h3> <p class="text-sm text-gray-600 dark:text-gray-400"> 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 dark:text-gray-500 transition-transform duration-300" data-accordion-icon></i> </button> <div class="accordion-content" data-accordion-content="examples" style="max-height: 0; transition: max-height 0.4s ease-out, opacity 0.3s ease-out; opacity: 0; overflow: hidden;"> <div class="p-6 pt-0 bg-gradient-to-br from-amber-50/30 to-orange-50/30 dark:from-amber-900/20 dark:to-orange-900/20"> <div class="space-y-4"> <div class="bg-white dark:bg-gray-800 rounded-xl p-4 border border-amber-100 dark:border-amber-900"> <h4 class="font-semibold text-gray-900 dark:text-white 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 dark:text-gray-300 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 dark:bg-gray-800 rounded-xl p-4 border border-amber-100 dark:border-amber-900"> <h4 class="font-semibold text-gray-900 dark:text-white 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 dark:text-gray-300 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 dark:bg-gray-800 rounded-xl p-4 border border-amber-100 dark:border-amber-900"> <h4 class="font-semibold text-gray-900 dark:text-white 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 dark:text-gray-300 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>  <script nonce="qkDs4Js8DKaCV7O+IKJiWg=="> 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'; if (!content) { console.warn('[Accordion] Content not found for target:', target); return; } // Toggle current section with smooth animation if (isExpanded) { // Collapse content.style.maxHeight = '0'; content.style.opacity = '0'; content.style.paddingTop = '0'; content.style.paddingBottom = '0'; icon.classList.remove('rotate-180'); this.setAttribute('aria-expanded', 'false'); } else { // Expand - calculate actual height for smooth animation // First, temporarily show to measure content.style.visibility = 'hidden'; content.style.maxHeight = 'none'; content.style.opacity = '1'; content.style.paddingTop = ''; content.style.paddingBottom = ''; const scrollHeight = content.scrollHeight; // Reset and animate content.style.visibility = ''; content.style.maxHeight = '0'; content.style.opacity = '0'; // Force reflow content.offsetHeight; // Now animate to full height requestAnimationFrame(() => { content.style.maxHeight = scrollHeight + 'px'; content.style.opacity = '1'; }); 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>  <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>  <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>  <footer class="bg-gradient-to-br from-gray-900 via-gray-800 to-indigo-900 text-white mt-20" role="contentinfo">  <div class="px-4 py-16 lg:px-8">  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">  <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>  <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/page/privacy-policy" class="block text-gray-300 hover:text-white hover:pl-2 transition-all duration-200"> Privacy Policy </a> <a href="https://nequlluq.com/page/terms-of-service" class="block text-gray-300 hover:text-white hover:pl-2 transition-all duration-200"> Terms of Service </a> <a href="https://nequlluq.com/page/about" class="block text-gray-300 hover:text-white hover:pl-2 transition-all duration-200"> About Us </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>  <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"> Have ideas, feedback, or spotted a bug? We’d love to hear from you! Your input helps us enhance your experience and make continuous improvements. </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>  <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"> © 2025 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=9fc3263c0d94128bd591953026c06309" defer></script> <script src="/js/global-tools.js?id=4ec80802b4adc7ad011b2f3fa192c625" defer></script> <script src="https://nequlluq.com/js/ad-tracking.js?v=1762446130" defer></script>  <script src="https://nequlluq.com/js/toast-notifications.js"></script> <script nonce="qkDs4Js8DKaCV7O+IKJiWg=="> 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', copied: false, // 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(showEmptyWarning = false) { if (!this.title && !this.description) { this.value = ''; this.tags = []; if (showEmptyWarning) { this.toast('Please enter a title or description to generate tags', 'error'); } 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 (using localStorage for persistence across sessions) loadHistory() { try { const saved = localStorage.getItem('seo_tags_history'); this.history = saved ? JSON.parse(saved) : []; } catch (e) { this.history = []; } }, saveHistory() { try { localStorage.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 = []; localStorage.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.onCopySuccess(); }).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.onCopySuccess(); } catch (err) { this.toast('Failed to copy', 'error'); } document.body.removeChild(textarea); }, onCopySuccess() { this.copied = true; this.toast('Copied to clipboard', 'success'); setTimeout(() => { this.copied = false; }, 2000); }, // 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; } } };

SEO Tags Generator

Professional Templates

Recent Tags

Saved Favorites

SEO Information

SEO Score: /100 -

SEO Tips:

Live Preview

Generated SEO Tags

Export Options

No SEO tags generated yet

How to use these tags:

Was this result helpful?

Thank you for your feedback!

How to Use

Menu