¿Qué son las etiquetas meta de Open Graph?
Las etiquetas meta de Open Graph son fragmentos de código insertados en la sección
de una página web que permiten que la URL se convierta en un objeto enriquecido en los gráficos de redes sociales. Introducido originalmente por Facebook en 2010 para estandarizar cómo se previsualiza el contenido externo en su plataforma, el protocolo Open Graph ha sido adoptado universalmente por las principales plataformas, incluidas Twitter, LinkedIn, Discord, Slack, WhatsApp y Telegram.Sin las etiquetas Open Graph adecuadas, los rastreadores de redes sociales intentarán adivinar el título, la descripción y la imagen de vista previa de su página raspando contenido arbitrario de la página. Esto a menudo resulta en diseños rotos, imágenes faltantes o irrelevantes (como iconos aleatorios o anuncios) y texto truncado que no representa el valor de su página. Al definir explícitamente estas propiedades, mantiene el control total sobre cómo se percibe su marca cuando se comparte en la web.
Propiedades de metadatos básicos
El protocolo Open Graph define cinco propiedades principales requeridas para casi todos los tipos de páginas web. La implementación de estas garantiza una representación limpia en todas las plataformas:
- og:title: Define el título de su objeto tal como debe aparecer dentro del gráfico. Este debe ser conciso y enfocarse en valores clave de marketing (recomendado menos de 60 caracteres).
- og:description: Un breve resumen del contenido de la página (1 o 2 oraciones, recomendado menos de 160 caracteres) que sirve como su argumento para los visitantes potenciales.
- og:image: La URL absoluta de una imagen que representa su contenido. Este es el recurso más importante para impulsar los clics de los usuarios y el compromiso social.
- og:url: La URL canónica de su página, que actúa como su identificador único permanente en el gráfico. Esto ayuda a consolidar los me gusta y las acciones compartidas en una sola URL.
- og:type: El tipo de contenido que está compartiendo (por ejemplo, website, article, video.movie). Esto determina cómo se estructura el objeto en el sistema.
A continuación se muestra un ejemplo del marcado Open Graph para una página web de artículo típica:
<head>
<meta property="og:title" content="Open Graph Rebuild Guide" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://opengraphgenerator.com/blog/rebuild" />
<meta property="og:image" content="https://opengraphgenerator.com/images/og-guide.png" />
<meta property="og:description" content="A complete guide on modernizing web apps to Astro 5." />
</head>Por qué importan las etiquetas meta para el SEO y el marketing digital
En la comunidad de SEO, se reconoce ampliamente que si bien las etiquetas meta específicas de redes sociales (como Open Graph y Twitter Cards) no influyen directamente en los algoritmos de clasificación de búsqueda (a diferencia de la etiqueta HTML <title>), tienen un impacto indirecto masivo.
Cuando los enlaces se comparten en canales sociales o aplicaciones de chat, las tarjetas de vista previa de alta calidad con títulos limpios e imágenes relevantes y llamativas aumentan drásticamente la tasa de clics (CTR). Un CTR alto genera más tráfico, lo que a su vez indica a los motores de búsqueda que su página es valiosa y relevante, lo que impulsa las clasificaciones orgánicas.
Piense en los enlaces compartidos en redes sociales como el escaparate de una tienda digital. Compartir un enlace con vistas previas rotas es como tener una tienda con estantes vacíos y polvorientos. La gente seguirá pasando de largo. Tener una vista previa optimizada hace que su enlace se vea limpio, profesional y confiable, lo que anima a los usuarios a hacer clic.
Depuradores y validadores oficiales
Una vez que haya agregado las etiquetas Open Graph a su página web, es fundamental probarlas utilizando las herramientas de validación oficiales proporcionadas por cada plataforma social. Estos depuradores analizan su sitio en vivo y muestran exactamente cómo lo representan, al mismo tiempo que borran sus capas de almacenamiento en caché interno para que las actualizaciones se muestren de inmediato: