Lo que aprenderás
Al final de esta lección, comprenderá qué son las etiquetas OpenGraph, por qué son importantes para el SEO y cómo implementarlas correctamente en su sitio web para aumentar la participación en las redes sociales y las tasas de clics.
¿Qué son las etiquetas OpenGraph?
Las etiquetas OpenGraph son fragmentos de código que controlan cómo se muestra tu contenido al compartirlo en redes sociales como Facebook, LinkedIn, Twitter y WhatsApp. Fueron creadas por Facebook en 2010 y ahora se utilizan en toda la web.
Ejemplo simple: Cuando compartes un enlace en Facebook, ¿te has fijado en que muestra un título, una descripción y una imagen? Así funciona OpenGraph.
Por qué son importantes las etiquetas OpenGraph para el SEO
Las etiquetas OpenGraph no mejoran directamente su clasificación en Google, pero impactan significativamente su estrategia de SEO de estas maneras:
Mayores tasas de clics (CTR)
Las etiquetas bien optimizadas crean vistas previas atractivas que fomentan más clics en las redes sociales.
Mejor Experiencia de Usuario
Los usuarios ven exactamente qué esperar antes de hacer clic, lo que reduce las tasas de rebote.
Control de marca
Tú decides qué imagen, título y descripción representan tu contenido en las plataformas sociales.
Aumento de las acciones sociales
Las vistas previas atractivas generan más acciones, lo que puede generar tráfico y vínculos de retroceso.
Etiquetas OpenGraph esenciales que necesitas
Aquí están las cuatro etiquetas principales de OpenGraph que cada página debe tener:
og:title – Su etiqueta de título
El titular que aparece en las vistas previas de las redes sociales.
<meta property="og:title" content="10 SEO Tips to Rank #1 on Google" />Mejores prácticas para los títulos
Mantenlo por debajo de los 60 caracteres para una visualización óptima.
og:description – Su etiqueta de resumen
Un breve resumen de su contenido.
<meta property="og:description" content="Learn proven SEO strategies that helped 500+ websites reach the first page of Google in 2025." />Mejores prácticas para las descripciones
Intenta escribir entre 155 y 160 caracteres. Hazlo atractivo y con acción.
og:image – Tu etiqueta visual
El elemento visual que aparece con tu enlace.
<meta property="og:image" content="https://yoursite.com/images/seo-tips.jpg" />Mejores prácticas para imágenes
- Utilice 1200 x 630 píxeles (tamaño recomendado)
- Mantenga el tamaño del archivo por debajo de 8 MB
- Utilice el formato JPG o PNG
og:url – Su etiqueta de enlace
La URL canónica de su página.
<meta property="og:url" content="https://yoursite.com/seo-tips" />Mejores prácticas para las URL
Utilice siempre la URL completa y absoluta.
Etiquetas importantes adicionales
Más allá de las cuatro esenciales, estas etiquetas brindan control adicional sobre tu presencia en las redes sociales.
og:type – Etiqueta de tipo de contenido
Define el tipo de contenido.
<meta property="og:type" content="article" />Tipos de contenido comunes
- sitio web
- artículo
- video
- producto
og:site_name – Etiqueta de nombre de marca
Su sitio web o marca.
<meta property="og:site_name" content="ClickRank SEO Academy" />og:locale – Etiqueta de idioma
El idioma y la región de su contenido.
<meta property="og:locale" content="en_US" />Guía de implementación paso a paso
Siga estos cuatro sencillos pasos para agregar etiquetas OpenGraph a su sitio web.
Paso 1: Agregue etiquetas a la sección de encabezado HTML
Coloque todas las etiquetas OpenGraph dentro de <head> sección de su documento HTML.
Paso 2: Personalizar para cada página
Cada página debe tener etiquetas únicas og:title, og:description y og:url.
Paso 3: Pruebe sus etiquetas
Utilice el depurador de uso compartido de Facebook o el inspector de publicaciones de LinkedIn para obtener una vista previa de cómo aparecerá su contenido.
Paso 4: Supervisar el rendimiento
Realice un seguimiento del tráfico de referencia de las redes sociales en Google Analytics para medir la eficacia.
Ejemplo del mundo real: Implementación completa
Así es como debería verse una publicación de blog sobre SEO:
<head>
<meta property="og:title" content="Master Keyword Research in 5 Simple Steps" />
<meta property="og:description" content="Discover how to find profitable keywords that drive organic traffic. Includes free tools and templates." />
<meta property="og:image" content="https://clickrank.com/images/keyword-research-guide.jpg" />
<meta property="og:url" content="https://clickrank.com/keyword-research-guide" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="ClickRank SEO Academy" />
<meta property="og:locale" content="en_US" />
</head>Errores Comunes que se deben Evitar
Aprenda de estos cinco errores que perjudican su rendimiento en las redes sociales.
Error 1: Usar las mismas etiquetas en todas las páginas
Cada página necesita etiquetas únicas que describan con precisión su contenido específico.
¿Por qué este Matters
Las etiquetas genéricas confunden a los usuarios y reducen las tasas de clics.
Error 2: Olvidar actualizar las URL de las imágenes
Los enlaces de imágenes rotas generan vistas previas genéricas sin elementos visuales.
Como arreglarlo
Utilice siempre URL absolutas y pruébelas antes de publicarlas.
Error 3: Ignorar las dimensiones de la imagen
Las imágenes que son demasiado pequeñas o tienen una relación de aspecto incorrecta se recortan mal.
La Solución
Mantenga 1200 x 630 píxeles para obtener vistas previas consistentes y profesionales.
Error 4: Escribir descripciones genéricas
"Visite nuestro sitio web" no genera clics. Sea específico sobre el valor que ofrece.
Qué hacer en tu lugar
Concéntrese en los beneficios e incluya un llamado a la acción claro.
Error 5: No realizar pruebas antes de publicar
Siempre valide sus etiquetas utilizando herramientas de depuración antes de publicarlas.
Herramientas de prueba para utilizar
El depurador de uso compartido de Facebook y el inspector de publicaciones de LinkedIn detectan errores de forma temprana.
OpenGraph frente a tarjetas de Twitter
Aunque OpenGraph funciona en la mayoría de las plataformas, Twitter utiliza su propio sistema llamado Twitter Cards. Muchas plataformas recurren a OpenGraph si no disponen de Twitter Cards.
Implementando ambos sistemas
Para obtener la máxima compatibilidad, utilice tanto OpenGraph como Twitter Cards:
<!-- OpenGraph -->
<meta property="og:title" content="Your Title" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />Cuándo usar cada uno
Utilice OpenGraph para:
- Facebook, LinkedIn, WhatsApp y la mayoría de las plataformas sociales
Utilice las tarjetas de Twitter para:
- Twitter y la plataforma X específicamente
Herramientas para probar sus etiquetas OpenGraph
Estas cuatro herramientas le ayudan a validar y obtener una vista previa de su implementación de OpenGraph.
Facebook Sharing Debugger
URL: desarrolladores.facebook.com/tools/debug
Que hace
Muestra exactamente cómo aparece tu contenido en Facebook y borra el caché.
Inspector de publicaciones de LinkedIn
URL: linkedin.com/post-inspector
Que hace
Obtén una vista previa de tu contenido tal como aparecerá en los feeds de LinkedIn.
OpenGraph.xyz
Una herramienta de vista previa rápida para múltiples plataformas
Que hace
Prueba tus etiquetas en Facebook, Twitter, LinkedIn y más simultáneamente.
Extensiones del navegador
Instalar verificadores de OpenGraph como “OpenGraph Preview” para Chrome
Que hace
Compruebe las etiquetas OpenGraph de cualquier página directamente desde su navegador.
Usuarios de WordPress: Implementación sencilla
Si usa WordPress, estos complementos simplifican la implementación de OpenGraph.
Yoast SEO
Generación automática de OpenGraph con opciones de personalización
Características principales
- Editor de vista previa visual
- Generación automática de etiquetas
- Integración a redes sociales
Rank Math
Vista previa y edición de redes sociales integradas
Características principales
- Optimización con un clic
- Soporte multiplataforma
- Vista previa en tiempo real
All in One SEO
Gestión integral de metaetiquetas sociales
Características principales
- Personalización avanzada
- Opciones de edición masiva
- Seguimiento del rendimiento
Métricas de éxito
Realice un seguimiento de estas métricas para evaluar su optimización de OpenGraph.
Tráfico de referencia social
Consulte Google Analytics para ver los aumentos de Facebook, LinkedIn, etc.
Cómo rastrear
Vaya a Adquisición > Todo el tráfico > Fuente/Medio en Google Analytics.
Tasa de interacción
Monitorear los “Me gusta”, las publicaciones compartidas y los comentarios en los enlaces compartidos
Qué buscar
Un mayor engagement indica vistas previas más atractivas.
Clic por calificaciones
Comparar el CTR antes y después de la optimización
Objetivos de referencia
Intente lograr una mejora de al menos el 20% en el CTR social.
Porcentaje de rebote
Las tasas de rebote más bajas indican una mejor correspondencia del contenido
Métrica objetivo
Las tasas de rebote inferiores al 50 % muestran una buena alineación entre el contenido y la vista previa.
Puntos Clave
Esto es lo que debes recordar sobre las etiquetas OpenGraph:
- Las etiquetas OpenGraph controlan cómo aparece su contenido en las redes sociales
- Cuatro etiquetas esenciales: og:título, og:descripción, og:image, og:url
- Las imágenes deben tener 1200 x 630 píxeles para obtener mejores resultados.
- Pruebe siempre sus etiquetas antes de publicar
- Personaliza las etiquetas para cada página para lograr el máximo impacto
- Monitorear el tráfico de referencias sociales para medir el éxito
¿Qué sucede si no agrego etiquetas OpenGraph a mi sitio web?
Sin las etiquetas OpenGraph, las redes sociales extraerán automáticamente el contenido de tu página, lo que a menudo resulta en vistas previas de baja calidad con imágenes incorrectas o texto incompleto. Esto reduce la tasa de clics y dificulta la compartibilidad de tu contenido. Añadir las etiquetas adecuadas te da control total sobre cómo se muestra tu contenido.
¿Las etiquetas OpenGraph funcionan en todas las plataformas de redes sociales?
Las etiquetas OpenGraph funcionan en la mayoría de las plataformas principales, como Facebook, LinkedIn, WhatsApp, Pinterest y Slack. Twitter usa principalmente tarjetas de Twitter, pero recurre a OpenGraph si no las tiene. Instagram no muestra vistas previas de enlaces en las publicaciones, por lo que las etiquetas OpenGraph no se aplican en ese caso.
¿Cuánto tiempo tardan en aparecer los cambios en OpenGraph?
Los cambios aparecen inmediatamente al compartir contenido. Sin embargo, las plataformas sociales almacenan en caché los datos antiguos, por lo que los enlaces compartidos previamente no se actualizan automáticamente. Usa el depurador de contenido compartido de Facebook o el inspector de publicaciones de LinkedIn para borrar la caché y forzar la actualización de las URL ya compartidas.
¿Puedo utilizar diferentes imágenes OpenGraph para diferentes plataformas sociales?
Sí, puedes especificar imágenes específicas para cada plataforma. Por ejemplo, usa og:image para plataformas generales y twitter:image para Twitter. Cada plataforma usará su etiqueta específica si está disponible, y usará og:image si no. Esto te permite optimizar las imágenes para las dimensiones de cada plataforma.
¿Dónde exactamente debo colocar las etiquetas OpenGraph en mi HTML?
Coloque todas las etiquetas OpenGraph dentro de la sección de encabezado de su documento HTML, antes de la etiqueta de cierre. Deben aparecer después de la etiqueta de título y otras metaetiquetas. El orden no afecta la funcionalidad, pero mantenerlas juntas mejora la organización del código.
¿Necesito etiquetas OpenGraph en cada página?
Sí, cada página que se comparta en redes sociales debe tener etiquetas OpenGraph únicas. Esto incluye entradas de blog, páginas de producto, páginas de destino e incluso tu página de inicio. Las páginas sin etiquetas mostrarán vistas previas genéricas o incorrectas al compartirlas, lo que perjudicará tus tasas de clics.
