En el entorno digital actual, la forma en que se comparte tu contenido en redes sociales determina en gran medida el éxito de tus publicaciones. El protocolo Open Graph es la clave técnica que te permite controlar la vista previa de tus enlaces asegurando que tus títulos, descripciones e imágenes se muestran siempre de forma atractiva.
En este artículo de Moderna Digital, te enseñaremos a implementar estas etiquetas de manera correcta para mejorar la imagen de tu marca y maximizar el clic de los usuarios hacia tu sitio web.
¿Qué es el protocolo Open Graph?
El protocolo Open Graph (desarrollado por Facebook) es un conjunto de etiquetas de metadatos que se integran en el código HTML de una página web. Su función principal es permitir que cualquier sitio web se transforme en un objeto enriquecido en las redes sociales.
Mediante estas etiquetas, indicas exactamente a plataformas como Facebook, LinkedIn, X o WhatsApp qué título, descripción e imagen deben mostrar cuando alguien comparte tu enlace. En pocas palabras, es la tarjeta de presentación visual de tu contenido en el entorno social.
¿Cómo funciona Open Graph?
Cuando se comparte una URL en una plataforma social, los rastreadores de esa red examinan el HTML de la página. Si no existen etiquetas OG, la red social intentará adivinar qué información mostrar, seleccionando a menudo imágenes fuera de proporción o textos aleatorios.
Al implementar correctamente Open Graph, garantizas:
- Mayor CTR: Una vista previa atractiva y optimizada capta más la atención que un enlace plano.
- Control de marca: Aseguras que la imagen representativa y el mensaje alineados con tu identidad corporativa sean los que se visualicen.
- Experiencia de usuario fluida: Ofreces un contexto claro antes de que el usuario haga clic.
Etiquetas Open Graph: Las Meta Tags OG que debes implementar
Para que tu contenido se muestre correctamente, es fundamental configurar las etiquetas básicas en la cabecera de tu código HTML.
Etiquetas og:title
Define el título de tu contenido para las redes sociales. A diferencia del meta título SEO tradicional, este puede ser más persuasivo y directo para captar la atención de los usuarios.
Descubre más sobre esta etiqueta en nuestro artículo El papel de la etiqueta OG:Title en la estrategia SEO.
Etiquetas og:type
Especifica el tipo de contenido que estás compartiendo para que las redes sociales adapten su formato de vista previa. Esto ayuda a las plataformas a categorizar tu enlace y presentar la información de la forma más adecuada para el usuario. Algunos ejemplos son:
- article: Para entradas de blog o artículos de noticias.
- website: Para la página de inicio o secciones corporativas.
- product: Para fichas de producto en tiendas online.
- video.other: Para contenidos multimedia enriquecidos.
Etiquetas og:image
La etiqueta open graph image es, probablemente, la más crucial. Define la URL de la imagen que acompañará a la vista previa.
La resolución ideal es de 1200 x 630 píxeles (relación de aspecto 1.91:1) en formatos JPG, PNG o WEBP para evitar recortes indeseados. Y, si necesitas diseñar o comprobar tus imágenes, puedes apoyarte en herramientas como open graph image generator.
Etiquetas og:url
Establece la URL canónica de la página. Ayuda a consolidar las métricas de interacciones sociales hacia una única dirección web, evitando la dispersión por parámetros de rastreo.
Etiquetas og:description
Proporciona un breve resumen del contenido (entre 2 y 4 frases). Debe redactarse para despertar curiosidad e incentivar el clic.
Etiquetas og:site_name
Indica el nombre general de tu sitio web o marca.
Etiquetas og:locale
Define el idioma y la región del contenido para que la red social adapte la publicación al contexto lingüístico del usuario. Se configura mediante el formato idioma_PAÍS (por ejemplo, para español de España se utiliza es_ES).
Cómo implementar las etiquetas Open Graph en tu sitio web
Dependiendo de cómo esté desarrollada tu web, la implementación se realiza de distintas formas. A continuación, te mostramos las vías más habituales:
Implementación manual en el HTML de tu web
Si tu web está desarrollada a medida, la integración se hace editando la cabecera del código HTML de tus plantillas. Dentro de esa sección deberás añadir:
- Propiedad del título: Configurada con el nombre de la página.
- Propiedad de imagen: Incluyendo la URL directa del archivo visual.
- Propiedad de descripción y tipo: Para especificar el resumen y la categoría del contenido.
Cómo configurar Open Graph en WordPress
Si utilizas WordPress, la implementación es sencilla gracias a los plugins de SEO habituales:
- Yoast SEO / Rank Math / SEOPress: Estos plugins generan automáticamente las etiquetas OG basándose en el título y la meta descripción de la entrada.
- Personalización: Dentro del editor de cada entrada, dirígete a la pestaña «Social» del plugin SEO para subir una open graph image específica o ajustar el título social.
- Para validar que las etiquetas se lean correctamente, puedes utilizar un open graph checker o la herramienta oficial Facebook Sharing Debugger.
Configuración de Open Graph en e-commerce
En plataformas de comercio electrónico la optimización de Open Graph es vital para destacar fichas de productos:
- Shopify: La mayoría de las plantillas modernas incluyen soporte nativo para OG. Puedes definir la imagen por defecto desde Tienda online > Preferencias.
- WooCommerce: Plugins como Rank Math detectan automáticamente el precio, la disponibilidad y la imagen destacada del producto para generar las etiquetas correspondientes.
Preguntas Frecuentes
¿Open Graph influye en el posicionamiento SEO de mi web?
Las etiquetas Open Graph no son un factor de ranking directo para el algoritmo de búsqueda de Google. Sin embargo, influyen indirectamente al mejorar el impacto visual en redes sociales, incrementar el CTR, atraer más tráfico cualificado y aumentar las probabilidades de conseguir menciones y enlaces naturales.
¿Qué pasa si no configuro las etiquetas Open Graph?
Si no configuras las etiquetas OG, las plataformas sociales intentarán extraer la información de manera automática. Esto suele resultar en imágenes fuera de foco, textos cortados, logotipos gigantes y enlaces sin vista previa. Esto reduce las interacciones de los usuarios.
¿Cuál es la diferencia entre Meta Tags SEO y Open Graph Tags?
Las Meta Tags SEO están diseñadas para motores de búsqueda como Google o Bing, enfocándose en la coincidencia con las intenciones de búsqueda del usuario. Por otro lado, las Open Graph Tags están diseñadas para plataformas sociales, permitiendo un tono más persuasivo, comercial y de marca adaptado al consumo en redes.
