Curso HTML 15.4 Etiquetas para redes sociales (Open Graph, Twitter Cards)

15.4 Etiquetas para redes sociales (Open Graph, Twitter Cards)

¿Por qué son necesarias?

Las meta etiquetas para redes sociales permiten controlar cómo se muestra el contenido de tu página cuando alguien lo comparte en plataformas como Facebook, LinkedIn o Twitter. Sin ellas, la red social realiza un scrapping automático y puede elegir título, descripción o imagen que no representan correctamente tu marca o tu contenido.

Open Graph (OG)

¿Qué es Open Graph?

Open Graph es un protocolo creado por Facebook pero adoptado por la mayoría de redes sociales. Se basa en meta etiquetas que se incluyen dentro de la sección <head> de tu documento HTML.

Propiedades fundamentales

• og:title: título que aparecerá al compartir.
• og:description: descripción breve (máx. ~200 caracteres).
• og:image: URL absoluta de la imagen principal (recomendado 1200×630 px).
• og:url: URL canónica de la página.
• og:type: tipo de contenido (website, article, video, etc.).
• og:site_name: nombre de tu sitio web.
• og:locale: código de idioma (por ejemplo, es_ES).

Ejemplo básico de Open Graph

Etiquetas avanzadas de Open Graph

• og:image:width y og:image:height: especifica dimensiones exactas de la imagen para optimizar el render.
• og:video, og:video:type, og:video:width, og:video:height: para incrustar contenido de vídeo directamente.
• og:audio: igual que vídeo pero para audio.
• og:locale:alternate: para páginas multi-idioma, indica locales alternativos.

Ejemplo avanzado con vídeo y dimensiones

Twitter Cards

¿Qué son?

Twitter Cards es un conjunto de meta etiquetas (con name='twitter:…') que permiten personalizar el formato de las previsualizaciones en Twitter.

Tipos principales de Twitter Cards

Meta etiquetas básicas de Twitter Cards

• twitter:card: tipo de tarjeta (summary, summary_large_image,…).
• twitter:site: cuenta oficial del sitio (@TuCuenta).
• twitter:creator: cuenta del autor del contenido (@Autor).
• twitter:title: título (máx. 70 caracteres).
• twitter:description: descripción (máx. 200 caracteres).
• twitter:image: URL absoluta de la imagen para la tarjeta.
• twitter:image:alt: texto alternativo accesible para la imagen.

Ejemplo de Twitter Cards (summary_large_image)

Ejemplo avanzado: Player Card

Mejores prácticas

• Siempre usar URLs absolutas para og:image y twitter:image.
• Optimizar tamaño y peso de imágenes: WebP o JPG comprimido sin perder calidad.
• Respetar ratios recomendados (1.91:1 para Open Graph, 1.78:1 o 16:9 para Twitter summary_large_image).
• Incluir og:locale y og:locale:alternate si tu sitio es multilingüe.
• Usar twitter:image:alt para mejorar accesibilidad.
• Probar con herramientas oficiales:
  • Facebook Sharing Debugger
  • Twitter Card Validator

Con estas meta etiquetas bien definidas, garantizas una apariencia profesional y coherente al compartir tu contenido en redes sociales, aumentando así tu alcance y engagement.