Generador de meta tags
Rellena los campos (o impórtalos de una URL) y copia el bloque completo de Open Graph, Twitter Card y meta tags básicos, listo para pegar en tu <head>.
Vista previa
Código
<!-- Primary -->
<title>Herramientas Open Graph · ZPJ Studio</title>
<meta name="description" content="Genera, analiza y previsualiza tus imágenes Open Graph. Templates bonitos y export a PNG, gratis." />
<link rel="canonical" href="https://zpjstudio.com/tools" />
<!-- Open Graph (Facebook, LinkedIn, WhatsApp…) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://zpjstudio.com/tools" />
<meta property="og:title" content="Herramientas Open Graph · ZPJ Studio" />
<meta property="og:description" content="Genera, analiza y previsualiza tus imágenes Open Graph. Templates bonitos y export a PNG, gratis." />
<meta property="og:image" content="https://zpjstudio.com/og/og-es.png" />
<meta property="og:image:alt" content="ZPJ Studio" />
<meta property="og:site_name" content="ZPJ Studio" />
<meta property="og:locale" content="es_ES" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@zpjstudio" />
<meta name="twitter:title" content="Herramientas Open Graph · ZPJ Studio" />
<meta name="twitter:description" content="Genera, analiza y previsualiza tus imágenes Open Graph. Templates bonitos y export a PNG, gratis." />
<meta name="twitter:image" content="https://zpjstudio.com/og/og-es.png" />
<meta name="theme-color" content="#16171d" />Pega esto dentro del <head> de tu página.
Cómo generar tus meta tags
- 01
Importa o escribe los datos
Pega la URL de tu web para partir de sus etiquetas actuales, o rellena el título, la descripción y la imagen a mano.
- 02
Revisa la longitud
El contador te indica si el título (ideal ≤ 60 caracteres) y la descripción (50–160) están en el rango recomendado.
- 03
Completa los extras
Añade el nombre del sitio, el tipo de contenido, tu usuario de X, el idioma y el color de tema del navegador.
- 04
Copia y pega
Copia el bloque generado y pégalo dentro del <head> de tu página. Repite para cada página importante.
Buenas prácticas de meta tags
Un título único por página
Google y las redes usan el título para decidir si hacen clic. Evita repetir el mismo título en todo el sitio.
URLs absolutas
og:image y og:url deben empezar por https://. Una ruta relativa como /og.png no la entienden las redes.
summary_large_image
Es el tipo de Twitter Card que muestra la imagen grande. Con summary solo verás una miniatura.
Canonical coherente
La URL canónica y og:url deberían coincidir para no repartir señales entre versiones de la misma página.
Preguntas frecuentes
¿Qué son los meta tags Open Graph?
Son etiquetas <meta> del <head> (og:title, og:description, og:image…) que le dicen a Facebook, LinkedIn, WhatsApp y otras redes qué título, texto e imagen mostrar cuando alguien comparte tu enlace.
¿Necesito también las etiquetas de Twitter (X)?
X lee las etiquetas Open Graph como respaldo, pero necesita twitter:card para mostrar la imagen grande. El bloque generado incluye ambas para que funcione en todas partes.
¿Los meta tags mejoran el posicionamiento en Google?
El <title> y la meta description influyen en cómo apareces en los resultados y en cuántos hacen clic. Las etiquetas Open Graph no son un factor directo de ranking, pero mejoran el CTR cuando tu enlace se comparte.
¿Dónde pego el código generado?
Dentro de la etiqueta <head> de cada página, antes de </head>. En WordPress, Webflow o Shopify suele haber un campo de SEO o de código personalizado para el head.
¿Tu web necesita algo más que meta tags?
Diseñamos y desarrollamos webs rápidas, con SEO técnico bien hecho desde el primer día, y software a medida para negocios que crecen.