Generador de Metatags Open Graph para Facebook y Twitter: Herramienta SEO con Avisos de Longitud

Cuando alguien comparte tu página en Facebook, X o WhatsApp y sale sin foto, con un título cortado o con un texto que no toca, casi siempre faltan las metatags Open Graph. Este generador compone por ti las etiquetas de Open Graph y Twitter Cards y te entrega el bloque listo para pegar en el , avisándote si el título o la descripción se pasan de longitud. Generador de metatags open graph facebook twitter seo tool gratis en IlmHunt, en línea y sin registro.

Herramientas relacionadas

Explora también estas herramientas gratuitas en español:

• Generador de Archivos htaccess para Redirecciones SEO 301: Reglas de Apache Listas para Pegar
• Generador de Robots TXT Optimizado para WordPress SEO: Crea tu Archivo con Bloqueos, Permisos y Sitemap en un Clic
• Conversor de Texto Plano a Formato Slug URL SEO Amigable para WordPress y Blogs
• Separador de Nombres y Apellidos en Excel Online Gratis: Divide Nombre Completo en Tres Columnas y Descarga el CSV
• Limpiador de Bases de Datos de Nombres y Direcciones con Caracteres Raros: Quita Símbolos, Duplicados y Espacios
• Validador y Formateador de JSON Online con Errores en Español: Encuentra la Línea y la Columna del Fallo
• Conversor de Fecha Europea a Timestamp Unix Epoch: Convierte DD/MM/AAAA a Segundos y Milisegundos
• Calculadora de Subredes IP CIDR Máscara de Red Gratis: Red, Broadcast y Hosts sin Instalar Nada

Ver todas las herramientas gratis en español

Inserta esta herramienta en tu web — gratis

Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;es&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Generador de metatags Open Graph y Twitter&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin-top:0;font-size:20px} label{display:block;margin:10px 0 4px;font-weight:bold} input,select,textarea{width:100%;padding:8px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px;font-family:inherit} textarea{min-height:60px} textarea.codigo{min-height:200px;font-family:monospace;font-size:12.5px} button{margin-top:14px;background:#0b5ed7;color:#fff;border:0;padding:10px 18px;border-radius:4px;cursor:pointer;font-size:16px} .nota{font-size:13px;color:#555;margin-top:12px} .aviso{font-size:13px;color:#8a6d00;background:#fff8e1;border:1px solid #ffe08a;padding:8px;border-radius:6px;margin-top:10px;display:none} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;Generador de metatags Open Graph y Twitter&lt;/h2&gt; &lt;label for=&quot;titulo&quot;&gt;Título de la página&lt;/label&gt; &lt;input id=&quot;titulo&quot; type=&quot;text&quot; value=&quot;Guía completa de jardinería urbana para principiantes&quot;&gt; &lt;label for=&quot;descripcion&quot;&gt;Descripción&lt;/label&gt; &lt;textarea id=&quot;descripcion&quot;&gt;Aprende a montar tu primer huerto en el balcón: qué plantar, cuándo regar y cómo evitar los errores más comunes.&lt;/textarea&gt; &lt;label for=&quot;url&quot;&gt;URL canónica&lt;/label&gt; &lt;input id=&quot;url&quot; type=&quot;url&quot; value=&quot;https://ejemplo.com/guia-jardineria-urbana&quot;&gt; &lt;label for=&quot;imagen&quot;&gt;URL de la imagen (1200 × 630 px recomendado)&lt;/label&gt; &lt;input id=&quot;imagen&quot; type=&quot;url&quot; value=&quot;https://ejemplo.com/img/huerto-balcon.jpg&quot;&gt; &lt;label for=&quot;tipo&quot;&gt;Tipo de contenido&lt;/label&gt; &lt;select id=&quot;tipo&quot;&gt; &lt;option value=&quot;website&quot;&gt;website (página general)&lt;/option&gt; &lt;option value=&quot;article&quot; selected&gt;article (artículo)&lt;/option&gt; &lt;option value=&quot;product&quot;&gt;product (producto)&lt;/option&gt; &lt;option value=&quot;profile&quot;&gt;profile (perfil)&lt;/option&gt; &lt;option value=&quot;book&quot;&gt;book (libro)&lt;/option&gt; &lt;option value=&quot;video.other&quot;&gt;video.other (vídeo)&lt;/option&gt; &lt;/select&gt; &lt;label for=&quot;nombreSitio&quot;&gt;Nombre del sitio&lt;/label&gt; &lt;input id=&quot;nombreSitio&quot; type=&quot;text&quot; value=&quot;Mi Blog Verde&quot;&gt; &lt;label for=&quot;locale&quot;&gt;Idioma y país (og:locale)&lt;/label&gt; &lt;select id=&quot;locale&quot;&gt; &lt;option value=&quot;es_ES&quot; selected&gt;es_ES (España)&lt;/option&gt; &lt;option value=&quot;es_MX&quot;&gt;es_MX (México)&lt;/option&gt; &lt;option value=&quot;es_AR&quot;&gt;es_AR (Argentina)&lt;/option&gt; &lt;option value=&quot;es_CO&quot;&gt;es_CO (Colombia)&lt;/option&gt; &lt;option value=&quot;es_CL&quot;&gt;es_CL (Chile)&lt;/option&gt; &lt;option value=&quot;es_PE&quot;&gt;es_PE (Perú)&lt;/option&gt; &lt;option value=&quot;en_US&quot;&gt;en_US (inglés EE. UU.)&lt;/option&gt; &lt;/select&gt; &lt;label for=&quot;twitterCard&quot;&gt;Tipo de tarjeta de Twitter / X&lt;/label&gt; &lt;select id=&quot;twitterCard&quot;&gt; &lt;option value=&quot;summary_large_image&quot; selected&gt;summary_large_image (imagen grande)&lt;/option&gt; &lt;option value=&quot;summary&quot;&gt;summary (imagen pequeña)&lt;/option&gt; &lt;option value=&quot;app&quot;&gt;app&lt;/option&gt; &lt;option value=&quot;player&quot;&gt;player&lt;/option&gt; &lt;/select&gt; &lt;label for=&quot;twitterUsuario&quot;&gt;Usuario de Twitter / X del sitio (opcional)&lt;/label&gt; &lt;input id=&quot;twitterUsuario&quot; type=&quot;text&quot; value=&quot;miblogverde&quot;&gt; &lt;label for=&quot;autor&quot;&gt;Autor (opcional)&lt;/label&gt; &lt;input id=&quot;autor&quot; type=&quot;text&quot; value=&quot;&quot;&gt; &lt;label for=&quot;salida&quot;&gt;Código generado (para pegar entre &amp;lt;head&amp;gt; y &amp;lt;/head&amp;gt;)&lt;/label&gt; &lt;textarea id=&quot;salida&quot; class=&quot;codigo&quot; readonly&gt;&lt;/textarea&gt; &lt;div class=&quot;aviso&quot; id=&quot;aviso&quot;&gt;&lt;/div&gt; &lt;button type=&quot;button&quot; id=&quot;btnCopiar&quot;&gt;Copiar código&lt;/button&gt; &lt;p class=&quot;nota&quot;&gt;🔒 Todo se genera en tu navegador: ningún dato sale de tu dispositivo. La vista previa real de cómo se verá al compartir depende de cada red social.&lt;/p&gt; &lt;/div&gt; &lt;script&gt; // es-572: generador de metatags Open Graph / Twitter Cards function escAttr(v){ return String(v===null||v===undefined?'':v) .replace(/&amp;/g,'&amp;amp;').replace(/&quot;/g,'&amp;quot;') .replace(/&lt;/g,'&amp;lt;').replace(/&gt;/g,'&amp;gt;'); } function generarMetatags(d){ var L=[]; var titulo=(d.titulo||'').trim(),desc=(d.descripcion||'').trim(), url=(d.url||'').trim(),img=(d.imagen||'').trim(), tipo=(d.tipo||'website').trim(),sitio=(d.nombreSitio||'').trim(), locale=(d.locale||'es_ES').trim(),tarjeta=(d.twitterCard||'summary_large_image').trim(), twUser=(d.twitterUsuario||'').trim(),autor=(d.autor||'').trim(); if(titulo){L.push('&lt;title&gt;'+escAttr(titulo)+'&lt;/title&gt;');} if(desc){L.push('&lt;meta name=&quot;description&quot; content=&quot;'+escAttr(desc)+'&quot;&gt;');} L.push('&lt;!-- Open Graph / Facebook --&gt;'); if(tipo){L.push('&lt;meta property=&quot;og:type&quot; content=&quot;'+escAttr(tipo)+'&quot;&gt;');} if(url){L.push('&lt;meta property=&quot;og:url&quot; content=&quot;'+escAttr(url)+'&quot;&gt;');} if(titulo){L.push('&lt;meta property=&quot;og:title&quot; content=&quot;'+escAttr(titulo)+'&quot;&gt;');} if(desc){L.push('&lt;meta property=&quot;og:description&quot; content=&quot;'+escAttr(desc)+'&quot;&gt;');} if(img){L.push('&lt;meta property=&quot;og:image&quot; content=&quot;'+escAttr(img)+'&quot;&gt;');} if(sitio){L.push('&lt;meta property=&quot;og:site_name&quot; content=&quot;'+escAttr(sitio)+'&quot;&gt;');} if(locale){L.push('&lt;meta property=&quot;og:locale&quot; content=&quot;'+escAttr(locale)+'&quot;&gt;');} L.push('&lt;!-- Twitter --&gt;'); L.push('&lt;meta name=&quot;twitter:card&quot; content=&quot;'+escAttr(tarjeta)+'&quot;&gt;'); if(url){L.push('&lt;meta name=&quot;twitter:url&quot; content=&quot;'+escAttr(url)+'&quot;&gt;');} if(titulo){L.push('&lt;meta name=&quot;twitter:title&quot; content=&quot;'+escAttr(titulo)+'&quot;&gt;');} if(desc){L.push('&lt;meta name=&quot;twitter:description&quot; content=&quot;'+escAttr(desc)+'&quot;&gt;');} if(img){L.push('&lt;meta name=&quot;twitter:image&quot; content=&quot;'+escAttr(img)+'&quot;&gt;');} if(twUser){L.push('&lt;meta name=&quot;twitter:site&quot; content=&quot;'+escAttr(twUser.charAt(0)==='@'?twUser:'@'+twUser)+'&quot;&gt;');} if(autor){L.push('&lt;meta name=&quot;author&quot; content=&quot;'+escAttr(autor)+'&quot;&gt;');} return L.join('\n'); } var campos=['titulo','descripcion','url','imagen','tipo','nombreSitio','locale','twitterCard','twitterUsuario','autor']; function regenerar(){ var d={}; campos.forEach(function(c){d[c]=document.getElementById(c).value;}); document.getElementById('salida').value=generarMetatags(d); var avisos=[]; if(d.titulo.trim().length&gt;60)avisos.push('El título tiene '+d.titulo.trim().length+' caracteres: en redes sociales suele recortarse por encima de 60.'); if(d.descripcion.trim().length&gt;160)avisos.push('La descripción tiene '+d.descripcion.trim().length+' caracteres: por encima de 160 es fácil que se corte con «…».'); if(d.descripcion.trim().length===0)avisos.push('Sin descripción, cada red social tomará cualquier texto de la página.'); if(d.imagen.trim()&amp;&amp;!/^https:\/\//i.test(d.imagen.trim()))avisos.push('La imagen debería usar una URL absoluta con https:// para que todas las plataformas la carguen.'); var a=document.getElementById('aviso'); if(avisos.length){a.style.display='block';a.textContent='⚠ '+avisos.join(' ');} else{a.style.display='none';} } campos.forEach(function(c){document.getElementById(c).addEventListener('input',regenerar);document.getElementById(c).addEventListener('change',regenerar);}); document.getElementById('btnCopiar').addEventListener('click',function(){ var s=document.getElementById('salida');s.select(); if(navigator.clipboard){navigator.clipboard.writeText(s.value);} else{document.execCommand('copy');} alert('Código copiado.'); }); regenerar(); &lt;/script&gt; &lt;script&gt;(function(){var ID=9102;function post(){try{parent.postMessage({wpcId:ID,wpcH:document.body.scrollHeight},'*');}catch(e){}}window.addEventListener('load',post);setInterval(post,600);})();&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-9102" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/generador-de-metatags-open-graph-facebook-twitter/" target="_blank" rel="noopener">Generador de Metatags Open Graph para Facebook y Twitter: Herramienta SEO con Avisos de Longitud</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — herramientas gratis en línea</p>