Ir al contenido principal
Bethemesh
Web y SEO

Generador de etiquetas meta

Genera localmente un bloque completo de etiquetas title, description, canonical, robots, Open Graph y Twitter/X listo para integrar.

  • Portapapeles

Integrar este widget

Personaliza el aspecto, comprueba la vista previa y copia el código.

Vista previa

Tipo de código de integración

Código para copiar

Se adapta a tu página y Bethemesh ajusta su tamaño automáticamente.

Título de la página

Longitud del título

0

Longitud de la descripción

0

Código generado

¿Te ha resultado útil esta herramienta?

¿Cómo funciona esta herramienta?

Este generador crea de una vez el bloque de etiquetas del <head> de una página: title, meta description, robots, canonical y, además, las etiquetas Open Graph que leen Facebook, LinkedIn o WhatsApp y las de Twitter/X Cards. Escapa los caracteres especiales y muestra la longitud del título y de la descripción, para obtener un código limpio que pegar en una plantilla.

El título y la descripción son obligatorios: alimentan la etiqueta <title>, la meta description, og:title, og:description, twitter:title y twitter:description.

Los caracteres &, ", < y > se convierten en entidades HTML: un título con comillas no rompe el atributo content.

Los campos opcionales vacíos no generan ninguna etiqueta. La URL canónica sirve también como og:url; la URL de la imagen social alimenta og:image y twitter:image; og:type siempre es website.

El código se organiza en tres bloques separados por una línea en blanco: etiquetas básicas, Open Graph y Twitter/X.

Cómo utilizar esta herramienta

  1. Escribe el título y la descripción

    Los contadores Longitud del título y Longitud de la descripción se actualizan.

  2. Añade la URL canónica y la imagen social

    Usa URL absolutas; la imagen ideal mide 1200 × 630 px.

  3. Ajusta las opciones

    Directivas robots, tarjeta Twitter/X, cuenta del sitio, configuración regional Open Graph y color del tema.

  4. Genera y copia

    Pulsa Generar etiquetas y pega el código generado en el <head>.

Casos de uso

Crear las etiquetas de una página nueva

Obtener un head completo sin olvidar og:image ni la canonical.

Mejorar cómo se comparte en redes

Controlar el título, el resumen y la imagen que se muestran al compartir un enlace en LinkedIn, Facebook o X.

Completar un sitio estático

Añadir metadatos a una página HTML escrita a mano o a una plantilla sin plugin SEO.

Ejemplos

Ficha de producto lista para compartir

Un mismo título y una misma descripción alimentan las tres familias de etiquetas; la URL canónica se reutiliza en og:url y la imagen en og:image y twitter:image.

Entrada

Título de la página: Botella térmica de acero 750 ml | Trek
Descripción: Botella de doble pared: fría 24 h, caliente 12 h. Sin BPA, envío gratis desde 30 €.
URL canónica: https://example.com/botellas/acero-750
Directivas robots: index, follow
Nombre del sitio: Trek
URL de la imagen social: https://example.com/img/botella-acero.jpg
Tarjeta Twitter/X: summary_large_image
Cuenta Twitter/X del sitio: @trek
Configuración regional Open Graph: es_ES

Resultado

Longitud del título: 38 · Longitud de la descripción: 83
<title>Botella térmica de acero 750 ml | Trek</title>
<meta name="description" content="Botella de doble pared: fría 24 h, caliente 12 h. Sin BPA, envío gratis desde 30 €.">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#4f46e5">
<link rel="canonical" href="https://example.com/botellas/acero-750">

<meta property="og:title" content="Botella térmica de acero 750 ml | Trek">
<meta property="og:description" content="Botella de doble pared: fría 24 h, caliente 12 h. Sin BPA, envío gratis desde 30 €.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/botellas/acero-750">
<meta property="og:site_name" content="Trek">
<meta property="og:locale" content="es_ES">
<meta property="og:image" content="https://example.com/img/botella-acero.jpg">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Botella térmica de acero 750 ml | Trek">
<meta name="twitter:description" content="Botella de doble pared: fría 24 h, caliente 12 h. Sin BPA, envío gratis desde 30 €.">
<meta name="twitter:site" content="@trek">
<meta name="twitter:image" content="https://example.com/img/botella-acero.jpg">

Consejos y buenas prácticas

  • Para og:image, usa una imagen de al menos 1200 × 630 px y una URL absoluta https; las redes sociales no leen URL relativas.
  • La tarjeta summary_large_image muestra una imagen grande bajo el enlace; summary, una miniatura cuadrada junto al texto.
  • La configuración regional Open Graph se escribe con guion bajo (es_ES), a diferencia del atributo lang de HTML (es-ES).
  • Algunos navegadores móviles usan el color del tema para teñir la barra de direcciones.

Fuentes y referencias

Preguntas frecuentes

¿Cuentan las etiquetas Open Graph para el SEO?

No directamente para el posicionamiento. Determinan la vista previa de un enlace compartido en redes sociales y mensajería, lo que influye en los clics y, por tanto, en la visibilidad de la página.

¿Hacen falta las etiquetas twitter: si ya están las og:?

X recurre a las etiquetas Open Graph, pero twitter:card es necesaria para elegir el formato de tarjeta. Por eso la herramienta genera ambas familias.

¿Por qué og:type es siempre website?

Es el valor adecuado para la mayoría de páginas. Para una entrada de blog, puedes cambiar website por article en el código generado.

¿Dónde pego el código generado?

En la sección <head> de la página, antes del cierre </head>. En un CMS, usa el campo de código de cabecera o los ajustes SEO de la plantilla.

¿Se envían mis datos a un servidor?

No. Las etiquetas se generan en tu navegador.

Herramientas relacionadas

Continúa con estas herramientas

Herramientas similares o complementarias a esta.

Herramientas similares

Simulador de fragmento SERP

Previsualiza un resultado de búsqueda a partir del título y la meta descripción.

Web y SEODestacadaUsar esta herramienta

Analizador SEO HTML

Analiza localmente las señales SEO principales de un HTML.

Web y SEODestacadaUsar esta herramienta

También te puede interesar