Ángel Grimaldo

Generador de Meta Etiquetas SEO

Escribe y previsualiza en tiempo real cómo aparecerán tu Título SEO y Meta Descripción en los resultados de Google (SERP). Mide la longitud en píxeles para maximizar tu CTR.

Ejemplos Rápidos (Cargar plantilla con 1-Clic):
0 / 60 0px / 580px
0 / 160 0px / 960px

¡Código copiado al portapapeles!

Vista Previa en Google SERP

Favicon

angelgrimaldo.com

https://angelgrimaldo.com/tu-pagina

Tu Título SEO Aparecerá Aquí

Tu meta descripción aparecerá aquí. Escribe un texto atractivo para animar a los usuarios a hacer clic en tu resultado.

Código HTML Generado 

<title>Tu Título SEO Aparecerá Aquí</title>
<meta name="description" content="Tu meta descripción aparecerá aquí.">

¿Por qué son fundamentales las Meta Etiquetas SEO para tu sitio web?

Las meta etiquetas de título y descripción son el primer punto de contacto entre tu sitio web y los usuarios que buscan en Google. Actúan como el escaparate publicitario digital de tus páginas en la lista de resultados de búsqueda (SERP).

Aumenta tu CTR (Click-Through Rate)

Un título llamativo y una meta descripción persuasiva convencen al usuario de elegir tu enlace frente a los competidores.

Mejora el posicionamiento On-Page

El Título SEO (``) es uno de los factores de ranking directo más potentes para indicar a Google el tema principal de tu página. </p> </div> <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm"> <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center font-bold text-lg mb-3"> <i class="fa-solid fa-scissors"></i> </div> <h3 class="font-bold text-gray-900 text-base mb-1">Evita textos cortados (...)</h3> <p class="text-xs sm:text-sm text-gray-600 leading-relaxed"> Medir la longitud en píxeles evita que Google trunque tu mensaje en mitad de una palabra importante. </p> </div> <div class="bg-white p-5 rounded-2xl border border-gray-200 shadow-sm"> <div class="w-10 h-10 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center font-bold text-lg mb-3"> <i class="fa-solid fa-bullseye"></i> </div> <h3 class="font-bold text-gray-900 text-base mb-1">Conecta con la intención de búsqueda</h3> <p class="text-xs sm:text-sm text-gray-600 leading-relaxed"> Responde exactamente a la pregunta del usuario desde el primer vistazo en el Snippet de Google. </p> </div> </div> </section> <!-- SECCIÓN 2: LÍMITES Y ESPECIFICACIONES --> <section class="bg-white p-6 sm:p-8 rounded-2xl sm:rounded-3xl border border-gray-200 shadow-sm"> <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 mb-6"> Guía de Límites de Píxeles y Caracteres en Google (2026) </h2> <div class="overflow-x-auto"> <table class="w-full text-left text-xs sm:text-sm text-gray-600"> <thead class="bg-gray-100 text-gray-900 font-bold uppercase text-xs"> <tr> <th class="p-3 rounded-l-lg">Etiqueta Meta</th> <th class="p-3">Límite Píxeles (Escritorio)</th> <th class="p-3">Límite Píxeles (Móvil)</th> <th class="p-3">Caracteres Aproximados</th> <th class="p-3 rounded-r-lg">Función SEO</th> </tr> </thead> <tbody class="divide-y divide-gray-200"> <tr> <td class="p-3 font-bold text-gray-900 flex items-center gap-2"><i class="fa-solid fa-heading text-blue-600"></i> Título SEO (<title>)</td> <td class="p-3 text-green-700 font-semibold">580 px</td> <td class="p-3 text-green-700 font-semibold">560 px</td> <td class="p-3">50 – 60 caracteres</td> <td class="p-3">Factor directo de ranking</td> </tr> <tr> <td class="p-3 font-bold text-gray-900 flex items-center gap-2"><i class="fa-solid fa-paragraph text-teal-600"></i> Meta Descripción</td> <td class="p-3 text-green-700 font-semibold">960 px</td> <td class="p-3 text-green-700 font-semibold">680 px</td> <td class="p-3">150 – 160 caracteres</td> <td class="p-3">Optimizador directo de CTR</td> </tr> </tbody> </table> </div> <p class="text-xs text-gray-500 mt-4 leading-relaxed"> <em>Nota importante:</em> Google no cuenta caracteres exactos, sino el ancho real en píxeles. Caracteres anchos como la <strong>"W"</strong> o la <strong>"M"</strong> consumen más espacio que letras angostas como la <strong>"i"</strong> o la <strong>"l"</strong>. Nuestra herramienta mide los píxeles reales usando el tipo de letra nativo de Google (Arial 20px para títulos y Arial 14px para descripciones). </p> </section> <!-- SECCIÓN 3: CONSEJOS Y BUENAS PRÁCTICAS --> <section class="bg-blue-50/70 rounded-2xl sm:rounded-3xl p-5 sm:p-8 border border-blue-200"> <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 mb-4 sm:mb-6 flex items-center gap-2"> <i class="fa-solid fa-lightbulb text-amber-500"></i> 5 Consejos para Redactar Meta Etiquetas de Alto Impacto </h2> <ul class="space-y-3 sm:space-y-4 text-xs sm:text-sm"> <li class="flex items-start gap-3"> <i class="fa-solid fa-check text-blue-600 mt-1"></i> <div> <strong>Coloca la palabra clave principal al inicio del Título:</strong> Las palabras situadas al principio del título reciben mayor peso algorítmico y atraen la atención del usuario inmediatamente. </div> </li> <li class="flex items-start gap-3"> <i class="fa-solid fa-check text-blue-600 mt-1"></i> <div> <strong>Incluye un llamado a la acción (CTA) en la Meta Descripción:</strong> Utiliza verbos de acción como <em>"Descubre"</em>, <em>"Prueba gratis"</em>, <em>"Calcula"</em> o <em>"Aprende"</em> para motivar el clic. </div> </li> <li class="flex items-start gap-3"> <i class="fa-solid fa-check text-blue-600 mt-1"></i> <div> <strong>Rastrea el tráfico resultante con UTM:</strong> Si compartes enlaces en redes sociales o anuncios, compleméntalos con nuestro <a href="/herramientas/generador-utm" class="text-blue-600 underline font-semibold hover:text-blue-800">Generador de Enlaces UTM</a> para medir la atribución exacta en Google Analytics 4. </div> </li> <li class="flex items-start gap-3"> <i class="fa-solid fa-check text-blue-600 mt-1"></i> <div> <strong>Usa corchetes o números para destacar visualmente:</strong> Añadir elementos como <code>[Guía 2026]</code> o <code>100% Gratis</code> ayuda a diferenciar tu resultado en la SERP. </div> </li> <li class="flex items-start gap-3"> <i class="fa-solid fa-check text-blue-600 mt-1"></i> <div> <strong>Evita meta etiquetas duplicadas en tu sitio:</strong> Cada página o artículo de tu web debe tener un título SEO y una descripción únicos enfocados en su intención de búsqueda específica. </div> </li> </ul> </section> <!-- SECCIÓN 4: PREGUNTAS FRECUENTES (FAQ) --> <section> <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 mb-6 sm:mb-8"> Preguntas Frecuentes sobre Meta Etiquetas SEO </h2> <div class="space-y-3 sm:space-y-4"> <details class="group bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 shadow-sm [&_summary::-webkit-details-marker]:none"> <summary class="flex items-center justify-between font-bold text-gray-900 cursor-pointer text-base sm:text-lg"> <span>¿Qué es un generador de meta etiquetas SEO y para qué sirve?</span> <span class="ml-4 flex-shrink-0 transition-transform group-open:-rotate-180"> <i class="fa-solid fa-chevron-down text-gray-400"></i> </span> </summary> <p class="mt-3 sm:mt-4 text-gray-600 text-xs sm:text-sm leading-relaxed"> Un generador de meta etiquetas es una herramienta interactiva gratuita que te permite crear y previsualizar exactamente cómo se mostrarán el título SEO y la meta descripción de una página en los resultados de búsqueda de Google (SERP), ayudándote a controlar la longitud en píxeles para evitar que el texto se corte. </p> </details> <details class="group bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 shadow-sm [&_summary::-webkit-details-marker]:none"> <summary class="flex items-center justify-between font-bold text-gray-900 cursor-pointer text-base sm:text-lg"> <span>¿Cuál es la longitud máxima recomendada para el Título SEO?</span> <span class="ml-4 flex-shrink-0 transition-transform group-open:-rotate-180"> <i class="fa-solid fa-chevron-down text-gray-400"></i> </span> </summary> <p class="mt-3 sm:mt-4 text-gray-600 text-xs sm:text-sm leading-relaxed"> Google mide los títulos en píxeles. En escritorio, el límite máximo es de aproximadamente 580 píxeles (entre 50 y 60 caracteres). Si sobrepasas este ancho, Google truncará el título añadiendo tres puntos suspensivos (...). </p> </details> <details class="group bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 shadow-sm [&_summary::-webkit-details-marker]:none"> <summary class="flex items-center justify-between font-bold text-gray-900 cursor-pointer text-base sm:text-lg"> <span>¿Cuál es la longitud ideal para la Meta Descripción?</span> <span class="ml-4 flex-shrink-0 transition-transform group-open:-rotate-180"> <i class="fa-solid fa-chevron-down text-gray-400"></i> </span> </summary> <p class="mt-3 sm:mt-4 text-gray-600 text-xs sm:text-sm leading-relaxed"> La meta descripción en escritorio tiene un límite máximo recomendado de 960 píxeles (entre 150 y 160 caracteres). En dispositivos móviles, el espacio se reduce a unos 680 píxeles (~120 caracteres). </p> </details> <details class="group bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 shadow-sm [&_summary::-webkit-details-marker]:none"> <summary class="flex items-center justify-between font-bold text-gray-900 cursor-pointer text-base sm:text-lg"> <span>¿Las meta etiquetas afectan el posicionamiento en Google?</span> <span class="ml-4 flex-shrink-0 transition-transform group-open:-rotate-180"> <i class="fa-solid fa-chevron-down text-gray-400"></i> </span> </summary> <p class="mt-3 sm:mt-4 text-gray-600 text-xs sm:text-sm leading-relaxed"> El Título SEO es uno de los factores de posicionamiento On-Page más importantes. Aunque la Meta Descripción no influye directamente en las posiciones orgánicas, una descripción atractiva aumenta drásticamente la tasa de clics (CTR), lo cual envía señales positivas al algoritmo de Google. </p> </details> <details class="group bg-white p-4 sm:p-6 rounded-xl sm:rounded-2xl border border-gray-200 shadow-sm [&_summary::-webkit-details-marker]:none"> <summary class="flex items-center justify-between font-bold text-gray-900 cursor-pointer text-base sm:text-lg"> <span>¿Por qué Google a veces cambia o reescribe mi título o meta descripción?</span> <span class="ml-4 flex-shrink-0 transition-transform group-open:-rotate-180"> <i class="fa-solid fa-chevron-down text-gray-400"></i> </span> </summary> <p class="mt-3 sm:mt-4 text-gray-600 text-xs sm:text-sm leading-relaxed"> Google puede reescribir tus meta etiquetas si considera que son demasiado largas, muy cortas, irrelevantes para la búsqueda del usuario o si contienen spam de palabras clave. Mantenerlas optimizadas reduce las probabilidades de reescritura automática. </p> </details> </div> </section> <!-- SECCIÓN 5: HERRAMIENTAS RELACIONADAS (ENLACES INTERNOS) --> <section class="border-t border-gray-200 pt-12"> <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-6 text-center"> Otras Herramientas de Marketing Digital Gratuitas </h2> <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4"> <a href="/herramientas/generador-utm" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-teal-500 hover:shadow-md transition-all text-center block group"> <i class="fa-solid fa-link text-2xl text-teal-600 mb-2 block group-hover:scale-110 transition-transform"></i> <span class="font-bold text-gray-900 text-sm block">Generador de Enlaces UTM</span> <span class="text-xs text-gray-500 mt-1 block">Rastrea campañas en GA4</span> </a> <a href="/herramientas/simulador-posts-redes" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-pink-500 hover:shadow-md transition-all text-center block group"> <i class="fa-solid fa-share-nodes text-2xl text-pink-600 mb-2 block group-hover:scale-110 transition-transform"></i> <span class="font-bold text-gray-900 text-sm block">Simulador de Posts</span> <span class="text-xs text-gray-500 mt-1 block">Previsualiza LinkedIn y X</span> </a> <a href="/herramientas/calculadora-significancia-ab" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-indigo-500 hover:shadow-md transition-all text-center block group"> <i class="fa-solid fa-percent text-2xl text-indigo-600 mb-2 block group-hover:scale-110 transition-transform"></i> <span class="font-bold text-gray-900 text-sm block">Calculadora A/B</span> <span class="text-xs text-gray-500 mt-1 block">Valida conversiones CRO</span> </a> <a href="/herramientas/generador-qr" class="p-4 bg-white rounded-xl border border-gray-200 hover:border-purple-500 hover:shadow-md transition-all text-center block group"> <i class="fa-solid fa-qrcode text-2xl text-purple-600 mb-2 block group-hover:scale-110 transition-transform"></i> <span class="font-bold text-gray-900 text-sm block">Generador de Códigos QR</span> <span class="text-xs text-gray-500 mt-1 block">Crea QR personalizados</span> </a> </div> </section> </div> </div> <!-- SECCIÓN CTA FINAL --> <section class="py-14"> <div class="container mx-auto px-4"> <div class="bg-violet-100/50 rounded-2xl p-8 md:p-12"> <div class="flex flex-col lg:flex-row items-center justify-between gap-8"> <div class="flex items-center gap-6 text-center lg:text-left"> <div class="hidden sm:block flex-shrink-0"> <svg class="w-16 h-16 md:w-20 md:h-20 text-violet-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7zm-3 18a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1H9v1z"/> </svg> </div> <div> <h2 class="text-3xl md:text-4xl font-bold text-gray-900">¿Necesitas ayuda con tu estrategia SEO y CTR?</h2> <p class="text-gray-600 mt-2">Una optimización On-Page impecable es la clave para dominar la SERP de Google. Hablemos de cómo escalar tu tráfico orgánico.</p> </div> </div> <div class="flex flex-col sm:flex-row gap-4 flex-shrink-0"> <a href="https://wa.me/51936389191?text=Hola+%C3%81ngel%2C+estuve+usando+el+generador+de+meta+tags+y+quisiera+consultar+sobre+tus+servicios.+Vengo+de+la+p%C3%A1gina%3A+https%3A%2F%2Fangelgrimaldo.com%2Fherramientas%2Fgenerador-meta-tags" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold text-white bg-green-500 rounded-lg shadow-md hover:bg-green-600 transition-colors transform hover:scale-105"> <i class="fab fa-whatsapp text-xl"></i> <span>Contáctenos</span> </a> <a href="/servicios" class="inline-flex items-center justify-center gap-2 px-6 py-3 font-semibold text-white bg-indigo-600 rounded-lg shadow-md hover:bg-indigo-700 transition-colors transform hover:scale-105"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A11.953 11.953 0 0012 13.5c2.998 0 5.74 1.1 7.843 2.918m-15.686 0A8.959 8.959 0 003 12c0-.778.099-1.533.284-2.253m0 0A11.953 11.953 0 0012 10.5c-2.998 0-5.74-1.1-7.843-2.918" /></svg> <span>Ver Servicios</span> </a> </div> </div> </div> </div> </section> <script> document.addEventListener('DOMContentLoaded', function() { // Elementos del DOM const titleInput = document.getElementById('title-input'); const descInput = document.getElementById('desc-input'); const urlInput = document.getElementById('url-input'); const copyBtn = document.getElementById('copy-btn'); const copyFeedback = document.getElementById('copy-feedback'); const codeSnippet = document.getElementById('code-snippet'); const clearBtn = document.getElementById('clear-btn'); // Presets const presetEcommerce = document.getElementById('preset-ecommerce'); const presetService = document.getElementById('preset-service'); const presetBlog = document.getElementById('preset-blog'); // Contadores const titleCharCount = document.getElementById('title-char-count'); const titlePixelCount = document.getElementById('title-pixel-count'); const titlePixelProgress = document.getElementById('title-pixel-progress'); const titleCheck = document.getElementById('title-check'); const descCharCount = document.getElementById('desc-char-count'); const descPixelCount = document.getElementById('desc-pixel-count'); const descPixelProgress = document.getElementById('desc-pixel-progress'); const descCheck = document.getElementById('desc-check'); // Vistas previas const desktopTitle = document.getElementById('desktop-title-preview'); const desktopDesc = document.getElementById('desktop-desc-preview'); const desktopUrlRoot = document.getElementById('desktop-url-root'); const desktopUrlPath = document.getElementById('desktop-url-path'); const mobileTitle = document.getElementById('mobile-title-preview'); const mobileDesc = document.getElementById('mobile-desc-preview'); const mobileUrlRoot = document.getElementById('mobile-url-root'); const mobileUrlPath = document.getElementById('mobile-url-path'); // Pestañas const desktopTab = document.getElementById('desktop-tab'); const mobileTab = document.getElementById('mobile-tab'); const desktopPreview = document.getElementById('desktop-preview'); const mobilePreview = document.getElementById('mobile-preview'); // Límites const MAX_TITLE_PIXELS = 580; const MAX_DESC_PIXELS = 960; const OPTIMAL_TITLE_MIN = 300; const OPTIMAL_DESC_MIN = 700; // Presets Event Listeners presetEcommerce.addEventListener('click', () => { titleInput.value = 'Tienda Virtual de Calzado en Lima | Envío Gratis Perú'; descInput.value = 'Compra calzado de cuero para hombre y mujer con envío gratis en Lima. Descubre nuestras ofertas exclusivas y paga al recibir tu pedido.'; urlInput.value = 'https://mitienda.pe/calzado'; updateAll(); }); presetService.addEventListener('click', () => { titleInput.value = '🥇 Consultor E-commerce en Perú | Ángel Grimaldo'; descInput.value = 'Consultor E-commerce en Perú especializado en escalar ventas de tiendas virtuales (Shopify, WooCommerce). Consultoría digital, CRO y analítica web.'; urlInput.value = 'https://angelgrimaldo.com/servicios/ecommerce'; updateAll(); }); presetBlog.addEventListener('click', () => { titleInput.value = 'Guía SEO para WooCommerce [2026]: Paso a Paso'; descInput.value = 'Aprende a optimizar el SEO de tu tienda WooCommerce desde cero. Guía completa con ejemplos tácticos para posicionar tus productos en Google.'; urlInput.value = 'https://angelgrimaldo.com/blog/seo-woocommerce-guia'; updateAll(); }); clearBtn.addEventListener('click', () => { titleInput.value = ''; descInput.value = ''; urlInput.value = 'https://angelgrimaldo.com/tu-pagina'; updateAll(); }); // Función para medir el ancho en píxeles de un texto function getTextWidth(text, font) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); context.font = font; return context.measureText(text).width; } function updateAll() { // Actualizar Título const rawTitle = titleInput.value.trim(); const titleText = rawTitle || 'Tu Título SEO Aparecerá Aquí'; const titleFont = '20px Arial'; const titlePixels = getTextWidth(titleText, titleFont); desktopTitle.textContent = titleText; mobileTitle.textContent = titleText; titleCharCount.textContent = `${titleInput.value.length} / 60`; titlePixelCount.textContent = `${Math.round(titlePixels)}px / ${MAX_TITLE_PIXELS}px`; const titleProgress = (titlePixels / MAX_TITLE_PIXELS) * 100; titlePixelProgress.style.width = `${Math.min(titleProgress, 100)}%`; if (titlePixels > MAX_TITLE_PIXELS) { titlePixelProgress.className = 'bg-red-500 h-2 rounded-full'; titleCheck.classList.remove('opacity-100'); titleCheck.classList.add('opacity-0'); } else if (titlePixels > OPTIMAL_TITLE_MIN) { titlePixelProgress.className = 'bg-green-500 h-2 rounded-full'; titleCheck.classList.remove('opacity-0'); titleCheck.classList.add('opacity-100'); } else { titlePixelProgress.className = 'bg-yellow-500 h-2 rounded-full'; titleCheck.classList.remove('opacity-100'); titleCheck.classList.add('opacity-0'); } // Actualizar Descripción const rawDesc = descInput.value.trim(); const descText = rawDesc || 'Tu meta descripción aparecerá aquí. Escribe un texto atractivo para animar a los usuarios a hacer clic en tu resultado.'; const descFont = '14px Arial'; const descPixels = getTextWidth(descText, descFont); desktopDesc.textContent = descText; mobileDesc.textContent = descText; descCharCount.textContent = `${descInput.value.length} / 160`; descPixelCount.textContent = `${Math.round(descPixels)}px / ${MAX_DESC_PIXELS}px`; const descProgress = (descPixels / MAX_DESC_PIXELS) * 100; descPixelProgress.style.width = `${Math.min(descProgress, 100)}%`; if (descPixels > MAX_DESC_PIXELS) { descPixelProgress.className = 'bg-red-500 h-2 rounded-full'; descCheck.classList.remove('opacity-100'); descCheck.classList.add('opacity-0'); } else if (descPixels > OPTIMAL_DESC_MIN) { descPixelProgress.className = 'bg-green-500 h-2 rounded-full'; descCheck.classList.remove('opacity-0'); descCheck.classList.add('opacity-100'); } else { descPixelProgress.className = 'bg-yellow-500 h-2 rounded-full'; descCheck.classList.remove('opacity-100'); descCheck.classList.add('opacity-0'); } // Actualizar URL try { const rawUrl = urlInput.value.trim() || 'https://angelgrimaldo.com/tu-pagina'; const url = new URL(rawUrl.startsWith('http') ? rawUrl : `https://${rawUrl}`); const root = url.hostname; const fullPath = url.href; desktopUrlRoot.textContent = root; desktopUrlPath.textContent = fullPath; mobileUrlRoot.textContent = root; mobileUrlPath.textContent = fullPath; } catch (e) { desktopUrlRoot.textContent = 'angelgrimaldo.com'; desktopUrlPath.textContent = urlInput.value || '/tu-pagina'; mobileUrlRoot.textContent = 'angelgrimaldo.com'; mobileUrlPath.textContent = urlInput.value || '/tu-pagina'; } // Snippet HTML const titleCode = titleInput.value ? `<title>${titleInput.value}` : `Tu Título SEO Aparecerá Aquí`; const descCode = descInput.value ? `` : ``; codeSnippet.textContent = `${titleCode}\n${descCode}`; } // Event Listeners titleInput.addEventListener('input', updateAll); descInput.addEventListener('input', updateAll); urlInput.addEventListener('input', updateAll); desktopTab.addEventListener('click', () => { desktopPreview.classList.remove('hidden'); mobilePreview.classList.add('hidden'); desktopTab.className = 'px-3 py-1.5 rounded-md text-blue-600 bg-blue-50 transition-all'; mobileTab.className = 'px-3 py-1.5 rounded-md text-gray-500 hover:text-gray-900 transition-all'; }); mobileTab.addEventListener('click', () => { desktopPreview.classList.add('hidden'); mobilePreview.classList.remove('hidden'); mobileTab.className = 'px-3 py-1.5 rounded-md text-blue-600 bg-blue-50 transition-all'; desktopTab.className = 'px-3 py-1.5 rounded-md text-gray-500 hover:text-gray-900 transition-all'; }); copyBtn.addEventListener('click', () => { const titleTag = `${titleInput.value}`; const descTag = ``; const textToCopy = `${titleTag}\n${descTag}`; navigator.clipboard.writeText(textToCopy).then(() => { copyFeedback.classList.remove('opacity-0'); setTimeout(() => { copyFeedback.classList.add('opacity-0'); }, 2000); }); }); // Carga inicial updateAll(); });

Únete a mi Newsletter

Recibe directamente en tu bandeja de entrada mis últimos artículos, consejos exclusivos y reflexiones sobre el mundo del marketing digital y e-commerce. Sin spam, solo contenido de valor.