Metaetiquetas y vistas previas en redes sociales: qué se muestra realmente

Un enlace hacia su sitio web suele ser el primer impacto que un potencial cliente recibe de su marca: en un resultado de búsqueda en Google, en un canal de Slack o en un mensaje de WhatsApp compartido entre directivos. La apariencia de esa tarjeta visual depende de unas seis líneas de código HTML que la mayoría de empresas configuran con errores.

La confusión proviene de que cada plataforma procesa un conjunto distinto de etiquetas, con jerarquías y valores de respaldo (fallbacks) diferentes. Por ese motivo, un enlace puede previsualizarse de forma impecable en Facebook y mostrar una imagen rota o un icono desajustado en LinkedIn.

A continuación, detallamos qué etiquetas interpreta realmente cada plataforma.

Google

Google utiliza <title> y <meta name="description">, aunque a menudo reescribe sus textos en los resultados de búsqueda.

Diversos estudios del sector confirman que Google modifica los títulos en aproximadamente un tercio de los resultados y las descripciones en más de la mitad, extrayendo fragmentos de la página que coincidan con mayor precisión con la consulta exacta del usuario. Este comportamiento algorítmico es normal y no existe ninguna etiqueta que pueda impedirlo.

Eso no resta importancia a su optimización: Google respeta rigurosamente el título y la descripción definidos en búsquedas de marca y de navegación (usuarios que buscan directamente el nombre de su empresa y están cerca de la conversión). En esos términos clave es imprescindible mantener el control total del mensaje.

Límites de longitud recomendados:

• Los títulos se truncan en torno a los 580 píxeles de ancho (aproximadamente 55-60 caracteres). Sitúe las palabras clave diferenciadoras al inicio; incluir el nombre de la empresa al final es adecuado, pero ponerlo al principio desaprovecha el espacio visible.
• Las meta descripciones disponen de un límite eficaz de unos 155-160 caracteres en escritorio y algo menos en dispositivos móviles.
• Declare un único <title> por página y diferéncielo del encabezado <h1>. El título atrae el clic en el buscador; el <h1> orienta al usuario que acaba de aterrizar en la web.

Facebook, LinkedIn, WhatsApp, Slack, Discord y Signal

Todas estas aplicaciones procesan el protocolo Open Graph (OG):

<meta property="og:title"       content="…" />
<meta property="og:description" content="…" />
<meta property="og:image"       content="https://example.com/share.jpg" />
<meta property="og:url"         content="https://example.com/page/" />
<meta property="og:type"        content="website" />
<meta property="og:site_name"   content="Nombre de Empresa" />

Observe el atributo property=, en lugar de name=. Utilizar name="og:title" es un error frecuente de copia y pega que provoca que muchos rastreadores ignoren la etiqueta.

Si falta og:image, la plataforma rastreará el HTML en busca de cualquier archivo gráfico disponible, extrayendo a menudo iconos de interfaz, avatares o un recuadro gris, nunca la imagen representativa deseada.

Requisitos técnicos para og:image:

• Dimensión recomendada: 1200×630 píxeles (proporción 1.91:1), el estándar que todas las plataformas admiten de forma óptima.
• Imágenes inferiores a 200×200 píxeles son descartadas directamente por Facebook.
• Emplee siempre URLs absolutas completas con protocolo HTTPS. Las rutas relativas fallan.
• Mantenga el peso por debajo de 1 MB (el límite suele ser 5 MB, pero archivos pesados provocan tiempos de espera agotados en los rastreadores).
• Las imágenes verticales o cuadradas se recortan desde el centro, provocando cortes visuales indeseados.

El atributo og:type debe ser article para publicaciones de blog y website para el resto de páginas corporativas. El tipo article permite añadir article:published_time y article:author.

X (anteriormente Twitter)

X prioriza sus propias etiquetas específicas y, si no existen, utiliza Open Graph como respaldo:

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image"       content="https://example.com/share.jpg" />

En este caso, la sintaxis correcta exige name=, no property=. Esta disparidad entre Open Graph y Twitter Cards genera confusiones habituales.

La etiqueta más determinante es twitter:card. Sin ella, el enlace se mostrará como una miniatura cuadrada reducida. Con summary_large_image se despliega la tarjeta visual a ancho completo, que obtiene una tasa de interacción sustancialmente superior.

Para título, descripción e imagen, X adopta automáticamente los valores de Open Graph, por lo que no es necesario duplicar etiquetas salvo que desee una redacción específica para esta red.

El problema del almacenamiento en caché

Las redes sociales almacenan en caché los datos Open Graph de forma muy agresiva. Corregir una etiqueta en el servidor no actualiza los enlaces ya compartidos.

• Facebook almacena la caché durante unos 30 días. Para forzar la actualización, utilice su herramienta oficial Sharing Debugger.
• LinkedIn conserva la información durante unos 7 días. Utilice su herramienta Post Inspector para forzar el re-rastreo.
• X almacena en caché por URL exacta; añadir un parámetro ficticio a la URL (ej. ?v=2) suele ser la solución más rápida.
• WhatsApp mantiene la caché durante periodos prolongados y no ofrece ninguna herramienta pública de purga.

Regla de oro: audite las etiquetas antes de publicar o difundir el enlace, nunca después de que un usuario reporte un fallo visual cuando la tarjeta ya esté almacenada en caché.

Puede verificar cualquier URL en todas las plataformas simultáneamente con nuestro verificador gratuito de metaetiquetas y vistas previas.

Estructura completa y recomendada del <head>

<title>Mecanizado CNC de Precisión en Barcelona — Acme Fabricación</title>
<meta name="description" content="Fresado CNC de 5 ejes con tolerancias de ±0,005 mm para automoción y aeronáutica. Series desde 500 unidades. Certificación IATF 16949. Presupuestos en 48h." />
<link rel="canonical" href="https://example.com/es/servicios/mecanizado-cnc/" />

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/es/servicios/mecanizado-cnc/" />
<meta property="og:title" content="Mecanizado CNC de Precisión en Barcelona" />
<meta property="og:description" content="Fresado CNC de 5 ejes con tolerancias de ±0,005 mm. Series desde 500 unidades. Certificación IATF 16949." />
<meta property="og:image" content="https://example.com/img/cnc-share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Acme Fabricación" />

<meta name="twitter:card" content="summary_large_image" />

Dos detalles sobre la redacción técnica:

En primer lugar, la descripción incluye datos cuantitativos precisos (tolerancias, volúmenes de pedido mínimos, certificaciones y plazos de entrega). Esto aporta credibilidad técnica inmediata y permite a los motores generativos de IA extraer datos objetivos.

En segundo lugar, el título de Open Graph es más conciso que el <title> SEO. En buscadores conviene incluir la ubicación y la marca; en una tarjeta social el nombre del dominio ya se muestra debajo del titular.

Gestión en sitios web multilingües

En proyectos multilingües, utilice og:locale y og:locale:alternate para declarar el idioma de la página:

<meta property="og:locale" content="es_ES" />
<meta property="og:locale:alternate" content="en_US" />

Cada versión idiomática debe contar con sus propios títulos, descripciones y —si las creatividades contienen texto integrado— imágenes adaptadas en su respectivo idioma.

Lista de verificación previa a la publicación

1. ¿Tiene cada página un título y una descripción únicos y diferenciados?
2. ¿Está configurada og:image con una URL absoluta y resolución mínima de 1200×630 px?
3. ¿Se incluye twitter:card con el valor summary_large_image?
4. ¿Se utiliza property= en las etiquetas OG y name= en las de Twitter?
5. ¿Se ha verificado la vista previa en herramientas de depuración antes del lanzamiento?