Generador de etiquetas meta
Genera meta tags de SEO, Open Graph, article y Twitter Card con contadores en vivo de longitud del título y la descripción y opciones de robots, theme-color y autor.
Generador de etiquetas meta — Completa el título, la descripción, la URL canónica, la imagen y el nombre del sitio de tu página para obtener un bloque listo para pegar de etiquetas meta de SEO, Open Graph y Twitter Card en el head de tu HTML. Las vistas previas en vivo del SERP de Google y de la tarjeta social muestran cómo se verá la página en las búsquedas y al compartirla. Todo se genera en tu navegador: no se sube nada de tu página. Los contadores en vivo comparan tu título y descripción con las longitudes recomendadas, los campos opcionales añaden etiquetas de robots, viewport, charset, theme-color y autor además de etiquetas Open Graph específicas de artículos, y la herramienta lee la URL de tu imagen para avisar de una imagen de vista previa ausente o con tamaño anómalo.
¿Qué es Generador de etiquetas meta?
El Generador de etiquetas meta es una herramienta en línea gratuita que convierte unos pocos datos de la página en un conjunto completo de etiquetas meta HTML: las etiquetas SEO estándar (title, meta description, enlace canónico), las etiquetas Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name) y las etiquetas Twitter Card (twitter:card, twitter:title, twitter:description, twitter:image). Especialistas en marketing, blogueros y desarrolladores la usan al lanzar una página o un artículo para controlar cómo aparece en los resultados de Google y cómo se despliega su enlace en Facebook, LinkedIn, X/Twitter, Slack y Discord. Elige el og:type (website, article, product, profile o video.other) y el estilo de twitter:card (summary, summary_large_image, app o player), y la herramienta escribe solo las líneas de los campos que completes. Genera etiquetas HTML simples: no rastrea tu sitio ni lee la página por ti. Los contadores en vivo avisan cuando el título (unos 60 caracteres) o la descripción (unos 160) se alarga demasiado, y la herramienta carga la URL de tu imagen para leer su tamaño real en píxeles y avisar de una imagen ausente o demasiado grande o pequeña. Los campos opcionales añaden una directiva robots, etiquetas viewport y charset UTF-8, un theme-color y un autor, además de article:published_time, article:author y article:section cuando og:type es article.
Cómo usar Generador de etiquetas meta
- Escribe el título de la página: se convierte en las etiquetas <title>, og:title y twitter:title.
- Redacta una meta descripción (unos 150–160 caracteres) para las etiquetas description, og:description y twitter:description.
- Introduce la URL canónica de la página y una URL de imagen absoluta para la vista previa del enlace.
- Añade el nombre del sitio y elige el og:type y el twitter:card en los menús desplegables.
- Copia el bloque HTML generado desde la casilla de salida y pégalo en el <head> de tu página.
- Usa las vistas previas del SERP de Google y de la tarjeta social para comprobar el resultado antes de publicar.
- Vigila los contadores de longitud en vivo del título y la descripción, y abre las opciones ⚙ para añadir etiquetas de robots, viewport, charset, theme-color, autor o de artículo.
Ejemplos
Etiquetas de un artículo de blog
Entrada
Título: Cómo hacer pan de masa madre Descripción: Una guía para principiantes para hacer pan de masa madre en casa. URL: https://blog.example.com/sourdough og:type: article
Salida
<title>Cómo hacer pan de masa madre</title> <meta name="description" content="Una guía para principiantes para hacer pan de masa madre en casa." /> <link rel="canonical" href="https://blog.example.com/sourdough" /> <meta property="og:title" content="Cómo hacer pan de masa madre" /> <meta property="og:type" content="article" /> <meta name="twitter:card" content="summary_large_image" />
Tarjeta social con imagen grande
Entrada
Imagen: https://example.com/og.png twitter:card: summary_large_image
Salida
<meta property="og:image" content="https://example.com/og.png" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
Los caracteres especiales se escapan
Entrada
Título: Tips & Tricks for "Pros"
Salida
<title>Tips & Tricks for "Pros"</title>
Artículo con etiquetas de robots y de artículo
Entrada
Título: Cómo hacer pan de masa madre og:type: article Robots: index, follow article:published_time: 2024-05-01T09:00 article:section: Food
Salida
<meta name="robots" content="index, follow" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2024-05-01T09:00" /> <meta property="article:section" content="Food" />
Preguntas frecuentes
- ¿Qué etiquetas meta genera?
- Produce etiquetas SEO estándar (<title>, meta description y un enlace canónico), etiquetas Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name) y etiquetas Twitter Card (twitter:card, twitter:title, twitter:description, twitter:image). Solo se incluyen las líneas de los campos que completes, así que nunca obtienes etiquetas de marcador de posición vacías.
- ¿Cuál es la diferencia entre og:type y twitter:card?
- og:type indica a las plataformas qué tipo de objeto es la página —website, article, product, profile o video.other—, lo que afecta a cómo se despliega el enlace. twitter:card elige el diseño en X/Twitter: summary es una miniatura pequeña, summary_large_image muestra una imagen grande tipo banner, mientras que app y player son para aplicaciones y medios. Elige la combinación que coincida con tu contenido.
- ¿La URL de la imagen debe ser absoluta?
- Sí. og:image y twitter:image deben ser URL absolutas completas que empiecen por https:// porque los rastreadores las obtienen desde fuera de tu sitio: una ruta relativa como /og.png no se cargará. Para mejores resultados usa una imagen de 1200×630 en las tarjetas grandes.
- ¿Esta herramienta rastrea o lee mi página en vivo?
- No. Solo da formato a los valores que escribes en etiquetas meta HTML. No obtiene, rastrea ni analiza ninguna URL: las URL canónica y de imagen se escriben en las etiquetas tal cual, sin ser visitadas.
- ¿Se envían mis datos a un servidor?
- No. Las etiquetas se crean por completo en tu navegador con JavaScript. Nada de lo que escribas —incluidos títulos, URL o descripciones sin publicar— se sube, almacena ni envía a ningún sitio, por lo que es seguro usarlo en páginas privadas o previas al lanzamiento.
- ¿Qué longitud deben tener el título y la descripción?
- Apunta a unos 60 caracteres o menos para el título y aproximadamente 120–160 para la descripción; los buscadores truncan el texto más largo. La herramienta muestra un contador en vivo para cada uno que pasa de un estado correcto a una advertencia en cuanto superas la longitud recomendada.
- ¿Qué etiquetas meta adicionales puedo añadir y cómo funcionan las advertencias de imagen?
- Abre las opciones ⚙ para añadir una directiva robots (ajustes index/follow), una etiqueta viewport, una etiqueta charset UTF-8, un theme-color y un autor; cuando og:type es article también puedes añadir article:published_time, article:author y article:section. La herramienta además carga la URL de tu imagen en el navegador para mostrar su tamaño real en píxeles y avisar si falta o se aleja mucho del recomendado 1200×630.
Herramientas relacionadas
Generador de etiquetas hreflang
Genera etiquetas link hreflang para una página multilingüe a partir de una lista de pares de idioma y URL, con un x-default opcional y una etiqueta autorreferencial.
Generador de JSON-LD
Genera datos estructurados JSON-LD válidos para los esquemas Article, Product, FAQPage, HowTo, LocalBusiness, Event, Recipe, BreadcrumbList y Organization desde un formulario sencillo.
Comprobador de densidad de palabras clave
Analiza la frecuencia de palabras y la densidad de palabras clave en frases de 1, 2 o 3 palabras, con filtro de palabras vacías y palabra clave objetivo.
Vista previa de Open Graph y tarjetas sociales
Previsualiza cómo se despliega un enlace como tarjeta social en X, LinkedIn, Slack, Discord y Facebook a partir de un título, una descripción, una URL de imagen y una URL de página.