Generador de Meta Tags

Cómo generar tus meta tags

1. Rellena tu título de página, meta descripción y URL canónica bajo “Básico”, estos tres controlan tu <title>, meta descripción y etiqueta <link rel="canonical">.
2. Opcionalmente rellena los campos de Open Graph (título/descripción OG si son distintos de los planos, una URL de imagen, el tipo OG, y el nombre de tu sitio), estos controlan cómo se ve la página cuando se comparte en Facebook y LinkedIn.
3. Opcionalmente fija el tipo de tarjeta de Twitter/X y tus handles @ de sitio/creador.
4. Observa cómo las tarjetas de vista previa de Búsqueda de Google, Facebook, X y LinkedIn se actualizan al instante mientras escribes, y luego haz clic en Copiar HTML para obtener el bloque de etiquetas <meta> terminado.

Pega el bloque copiado directamente dentro del <head> de tu página, listo.

Por qué importan los meta tags y las vistas previas sociales

El <title> y la meta descripción de una página controlan exactamente lo que aparece en un resultado de búsqueda de Google, y las etiquetas Open Graph/Twitter Card controlan exactamente lo que aparece cuando la página se comparte como enlace en Facebook, LinkedIn, Slack, WhatsApp o X. Equivoca cualquiera de estos, un og:image que falta, un og:title obsoleto que quedó de un rediseño de página, una URL canónica que apunta a la página equivocada, y un enlace que debería verse atractivo aparece en su lugar como una caja gris en blanco sin imagen, o con el título equivocado, justo en el momento en que alguien está decidiendo si hacer clic en él.

Escribir a mano este bloque correctamente significa recordar qué etiqueta usa property="og:..." frente a name="twitter:...", qué campos recurren a qué otros campos cuando se dejan en blanco (Twitter recurriendo a Open Graph, Open Graph recurriendo a tu título/descripción planos), y acertar con el escapado de atributos HTML para cualquier título o descripción que contenga un ampersand, una comilla o un ángulo. Esta herramienta gestiona todo eso y te deja ver el resultado real (como una tarjeta de vista previa real, no solo un muro de etiquetas) antes de que pegues jamás nada en tu sitio.

Leer la vista previa de Google con honestidad

Google trunca por ancho en píxeles, no por número de caracteres, y por eso “mantenlo por debajo de 60 caracteres” solo es una guía aproximada: un título lleno de mayúsculas y de letras anchas se queda sin sitio mucho antes que uno hecho de íes y eles minúsculas. La vista previa de búsqueda de aquí mide tu texto con un canvas real en tu navegador contra aproximadamente 600 píxeles para el título y 920 para la descripción en escritorio, usando una aproximación de la familia Arial al renderizado de Google.

Esas cifras son estimaciones sobre las que ha convergido la comunidad SEO, no límites publicados, y Google ha cambiado su conjunto de fuentes más de una vez. Trata un título que entra con holgura como seguro, uno que entra justo como arriesgado, y uno que se corta como algo que hay que acortar. Para el español esto tiene una consecuencia práctica: las palabras tienden a ser más largas que sus equivalentes inglesas y los acentos no cambian el ancho, así que un título traducido literalmente desde el inglés suele pasarse de largo aunque el original entrara.

La línea de URL se representa como la muestra Google, con el nombre de host primero y los segmentos de ruta separados por comillas angulares. Para una comprobación más exhaustiva, incluidos los anchos móviles, usa el Contador de Píxeles SEO.

Qué campos recurren a cuáles

La cadena de respaldo es la parte que la gente hace mal cuando escribe este bloque a mano, y conviene conocerla aunque dejes que la herramienta se encargue. Un título de Open Graph en blanco toma tu título normal. Una descripción de Open Graph en blanco toma tu meta descripción. No hay ningún campo separado de URL de Open Graph, porque og:url debería ser tu URL canónica y tener dos entradas para un mismo valor invita a que se desvíen entre sí. El título, la descripción y la imagen de Twitter reflejan los valores de Open Graph ya resueltos.

La consecuencia práctica: puedes producir un bloque completo y correcto a partir de tres campos y una URL de imagen. Todo lo demás es refinamiento.

El ampersand que rompe un título

Cada valor que escribes se escapa antes de aterrizar en un atributo. Esto suena a detalle hasta que escribes un título con un ampersand y comillas dentro, que sin escapar cierra el atributo content antes de tiempo y deja el resto de tu título como marcado suelto en la cabecera del documento. El escapado de aquí reutiliza la misma rutina probada que nuestra herramienta Codificador HTML, así que los ampersands, los signos de mayor y menor y las comillas se convierten en entidades de forma consistente en cada etiqueta generada.

summary o summary_large_image, y qué falta

El tipo de tarjeta es la única decisión estética del formulario. summary_large_image, el valor por defecto, pone una imagen ancha sobre el texto y domina una cronología; quiere una imagen de alrededor de 1200 por 630 píxeles. summary coloca una miniatura cuadrada pequeña junto al texto, que algunos editores prefieren para feeds con muchos enlaces. Las dos leen la misma twitter:image, así que cambiar no cuesta más que un nuevo rastreo.

Unas cuantas etiquetas quedan deliberadamente fuera de alcance, y añadirlas a mano es fácil una vez tienes el bloque. No hay og:image:width ni og:image:height, que ayudan a que una tarjeta se represente antes de que el rastreador termine de descargar la imagen, ni og:locale, que es la que declararía es_ES frente a es_MX cuando eso importa, ni article:published_time ni article:author. Los datos estructurados son un trabajo aparte: si además quieres un resultado enriquecido con firma, valoración o acordeón de preguntas frecuentes, genera el JSON-LD con el Generador de Datos Estructurados Schema y ponlo en la misma cabecera.

Todo ocurre en tu navegador

No hay ningún viaje de ida y vuelta al servidor en ningún momento: escribir en un campo, ver la vista previa en vivo actualizarse, y generar el bloque HTML final son todo JavaScript puro que se ejecuta en tu propia pestaña del navegador. Esto importa incluso para una página que ya es pública, ya que podrías estar iterando sobre un título o descripción para una página que aún no está en vivo, o redactando texto social que no quieres que aparezca en ningún sitio antes de que esté listo.

Usos habituales

• Configurar el título, descripción y etiqueta canónica de SEO de una nueva entrada de blog o página de aterrizaje.
• Arreglar una vista previa de compartir social rota o ausente (el clásico problema de “caja gris en blanco” al desplegar un enlace).
• Comprobar cómo se verá una página al compartirla en Slack, WhatsApp o Discord (que generalmente leen las mismas etiquetas Open Graph que Facebook).
• Auditar los meta tags de una página existente copiando sus valores actuales y comprobando las vistas previas en vivo.
• Generar un bloque consistente de Open Graph/Twitter Card en muchas páginas de un sitio estático.
• Redondear la huella legal/SEO básica de un sitio junto con un generador de política de privacidad antes del lanzamiento.
• Fijar una og:image para una entrada de blog técnica usando una captura de pantalla de código como imagen de vista previa social en lugar de un banner genérico.