Cuando se trata de compartir contenido en redes sociales, el control sobre cómo se ve tu página es clave. No basta con tener buen contenido: si el título, la descripción o la imagen no están bien configurados, perdés clics, tráfico y oportunidades de viralidad.
Ahí es donde entra en juego el protocolo Open Graph.
Implementar correctamente las etiquetas OG no solo mejora la presentación en redes como Facebook, LinkedIn o Pinterest, sino que también impacta en tu estrategia SEO al aumentar el CTR y reforzar tu imagen de marca.
¿Qué es Open Graph?
Open Graph es un protocolo creado por Facebook en 2010 que permite a cualquier sitio web controlar cómo se muestra su contenido al ser compartido en redes sociales.
A través de etiquetas HTML insertadas en el <head> de la página, podés definir manualmente:
- El título que se mostrará.
- Una descripción atractiva.
- Una imagen destacada.
- La URL exacta y su tipo de contenido.
Esto evita que las plataformas generen previews automáticos confusos o poco atractivos, y te da control total sobre tu presencia social.
Hoy en día, Open Graph es soportado por plataformas como LinkedIn, Pinterest, Slack y más. Twitter tiene sus propias etiquetas (Twitter Cards), pero pueden convivir perfectamente.
Principales etiquetas Open Graph
Vamos con las etiquetas:
1. og:title
Define el título del contenido tal como se verá en redes. Debe ser claro, atractivo y contener tu palabra clave principal.
Ejemplo:
<meta property="og:title" content="Guía completa sobre Open Graph" />
2. og:description
Es el texto descriptivo que acompaña al título. Idealmente, debería ser un resumen llamativo con un llamado a la acción.
Ejemplo:
<meta property="og:description" content="Aprendé cómo implementar correctamente las etiquetas Open Graph y optimizá tu presencia en redes sociales." />
3. og:image
La imagen destacada que se mostrará al compartir la URL. Este campo es clave para el CTR. La recomendación general es una imagen de mínimo 1200×630 px, bien optimizada y de alta calidad.
Ejemplo:
<meta property="og:image" content="https://tupacbruch.com/wp-content/uploads/2024/04/open-graph-ejemplo.jpg" />
4. og:url
La URL canónica que debe mostrarse. Idealmente, una URL limpia, sin parámetros ni redirecciones.
Ejemplo:
<meta property="og:url" content="https://tupacbruch.com/open-graph/" />
5. og:type
Indica el tipo de contenido. Los más comunes son:
website(para páginas de inicio)article(para posts o noticias)video.movie,music.song, etc.
Ejemplo:
<meta property="og:type" content="article" />
6. og:site_name
Permite incluir el nombre del sitio o marca para reforzar autoridad y reconocimiento.
Ejemplo:
<meta property="og:site_name" content="Tupac Bruch" />
7. og:video (opcional)
Si tu página incluye un video, podés usar esta etiqueta para mostrarlo directamente en la preview.
<meta property="og:video" content="https://tusitio.com/video.mp4" />
Diferencias con otras etiquetas sociales: Twitter Cards y Rich Pins
Aunque Open Graph es el más universal, otras redes tienen sus propias etiquetas:
| Red Social | Etiquetas | Compatibilidad con OG |
|---|---|---|
| Open Graph | Total | |
| Open Graph | Total | |
| Twitter Cards | Parcial (mejor con tags propias) | |
| Rich Pins | Compatible y validables |
Para Twitter, por ejemplo:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título para Twitter">
<meta name="twitter:description" content="Descripción para Twitter">
<meta name="twitter:image" content="https://tuimagen.com/og-twitter.jpg">
Herramientas para validar tus etiquetas Open Graph
Antes de lanzar una campaña o compartir un enlace importante, asegurate de que todo se vea bien con estas herramientas:
Además, si actualizás una imagen y no se refleja en la preview, estas herramientas también fuerzan una “limpieza de caché” de la URL.
Cómo implementar Open Graph en WordPress
Si usás WordPress, no necesitás tocar el código a mano. Plugins como Rank Math o Yoast SEO permiten configurar las etiquetas OG de forma visual.
Con Rank Math, por ejemplo:
- Entrá al editor del post o página.
- Navegá a la pestaña «Social».
- Configurá manualmente el título, descripción y la imagen Open Graph.
Esto te asegura control total sobre cómo se comparte tu contenido.
Con Yoast SEO, lo bueno es qué podés hacerlo todo de entrada. Sino me crees, mirate este video:
Buenas prácticas para optimizar Open Graph
- Usá imágenes de calidad: mínimo 1200x630px, formato JPG o PNG.
- Cada página debe tener su propia imagen, título y descripción.
- No repitas el mismo OG en todo el sitio.
- Usá URLs limpias y preferiblemente con HTTPS.
- Comprobá los resultados en los validadores antes de compartir.
También podés leer sobre la importancia de mantener URLs optimizadas en esta guía: URLs SEO-friendly
¿Cómo influye Open Graph en el SEO?
Aunque las etiquetas OG no impactan directamente en el ranking de Google, sí lo hacen indirectamente:
- Mejoran el CTR desde redes sociales.
- Aumentan la viralidad y el tráfico de referencia.
- Refuerzan tu marca en entornos sociales.
- Mejoran la experiencia del usuario, lo que sí afecta al posicionamiento.
Más sobre este enfoque en: SEO on page y experiencia del usuario y SEO.
Conclusión
Optimizar las etiquetas Open Graph debería ser parte de cualquier estrategia SEO moderna. No solo ayudan a que tu contenido se vea mejor en redes sociales, sino que te permiten controlar cómo se presenta tu marca y cómo te perciben tus usuarios.
Una buena implementación es simple, rápida y puede marcar la diferencia entre ser ignorado o ser clickeado.
Si encontraste útil toda la información que hemos compartido, te agradecemos sinceramente tu apoyo. Si deseas colaborar con nosotros, puedes hacerlo mediante una donación a través de PayPal o Cafecito. Tu generosidad nos ayuda a mantener nuestro contenido libre de publicidad y a seguir ofreciendo información valiosa para ti y para nuestra comunidad de lectores.
Si estás considerando crear tu propio sitio web, te recomendamos Hostgator. Es una plataforma fácil de usar y muy popular que te permitirá llevar tus ideas al mundo digital. Haz clic en el banner de abajo para obtener un descuento al crear tu sitio con WordPress.
