Saltar al contenido principal

¿Qué es Open Graph?

image

Definición​

Open Graph Protocol es un protocolo de metadatos desarrollado por Facebook en 2010 que controla cómo se muestran las páginas web cuando se comparten en redes sociales. En pocas palabras, son etiquetas meta HTML que predefinen el título, descripción e imagen que aparecen cuando compartes un enlace de blog en Facebook, KakaoTalk, LinkedIn, etc.

Con Open Graph, puedes convertir tu página web en un "objeto" para redes sociales. Por ejemplo, cuando compartes una publicación de blog, en lugar de mostrar solo una URL, aparece una imagen en miniatura atractiva junto con el título y descripción resumida en un formato de tarjeta bellamente diseñado. Esto aumenta significativamente las tasas de clics y se ha convertido en un elemento central del marketing en redes sociales.

Open Graph se implementa con etiquetas en formato <meta property="og:xxx"> en la sección <head>. Aunque comenzó con Facebook, ahora es adoptado como estándar por la mayoría de las plataformas sociales, incluidas Twitter (X), LinkedIn, Slack, KakaoTalk y Line. Sin Open Graph, las plataformas sociales extraerán arbitrariamente contenido de tu página, mostrando potencialmente imágenes o textos no deseados.

Características​

  • Optimización de Redes Sociales: Controla con precisión títulos, descripciones e imágenes al compartir enlaces para mejorar significativamente las tasas de clics. Las investigaciones muestran que los enlaces con imágenes Open Graph tienen hasta un 200% más de participación.
  • Protocolo Estándar: Desarrollado por Facebook pero ahora un estándar de facto de la industria compatible con casi todas las plataformas sociales. Configúralo una vez y funciona en múltiples plataformas.
  • Implementación Simple: No es técnicamente complejo ya que solo necesitas agregar etiquetas meta a la sección <head> HTML. Cualquiera puede aplicarlo fácilmente sin conocimientos de programación.
  • Herramientas de Depuración Disponibles: Facebook, LinkedIn y otros proporcionan herramientas de depuración oficiales para probar y previsualizar etiquetas Open Graph.
  • Útil para Motores de Búsqueda: La información de Open Graph también es referenciada por motores de búsqueda, ayudando indirectamente con el SEO. Particularmente efectivo para la optimización de búsqueda de imágenes.

Cómo Usar​

Así es como utilizar Open Graph de manera efectiva.

Paso 1: Agregar Etiquetas Open Graph Requeridas Agrega etiquetas Open Graph básicas a la sección <head> de tu página web. Como mínimo, debes incluir cuatro etiquetas: og:title, og:type, og:url y og:image. Estos son los cuatro elementos centrales de Open Graph.

<head>
  <meta property="og:title" content="Guía Completa de Optimización SEO de Blog">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

Paso 2: Agregar Etiquetas Opcionales Agrega descripción, nombre del sitio, locale, etc. para proporcionar información más rica. og:description es particularmente importante y debe contener texto convincente que anime a hacer clic.

<meta property="og:description" content="Métodos de optimización SEO de blog paso a paso que incluso los principiantes pueden seguir fácilmente.">
<meta property="og:site_name" content="Blog Zero-Coke">
<meta property="og:locale" content="es_ES">

Paso 3: Optimización de Imagen El elemento más importante en Open Graph es la imagen. Las imágenes en miniatura determinan la primera impresión, así que elige cuidadosamente. Facebook recomienda 1200x630px, con un mínimo de 600x314px. Mantén el tamaño del archivo por debajo de 8MB.

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Miniatura de Guía de Optimización SEO">

Paso 4: Etiquetas Adicionales Específicas del Tipo de Contenido Para publicaciones de blog (artículos), puedes proporcionar información adicional como autor, fecha de publicación y sección. Esto ayuda a mostrar información más rica en los feeds de noticias.

<meta property="article:author" content="Juan Pérez">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Blog">
<meta property="article:tag" content="SEO">

Paso 5: Depurar y Probar Después de agregar las etiquetas, siempre pruébalas. Ingresa tu URL en el Depurador de Compartir de Facebook (https://developers.facebook.com/tools/debug/) para previsualizar cómo se mostrará Open Graph. Corrige cualquier error inmediatamente.

Paso 6: Actualizar Caché Si has cambiado el Open Graph de una URL ya compartida, necesitas actualizar el caché de la plataforma social. Haz clic en el botón "Volver a Scrapear" en el Depurador de Compartir de Facebook para actualizar a la información más reciente. Cada plataforma proporciona herramientas similares.

Ejemplos​

Ejemplo 1: Open Graph Básico para Publicación de Blog

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>¿Qué son los Backlinks? Guía para Principiantes de SEO</title>

  <!-- Etiquetas Open Graph Básicas -->
  <meta property="og:title" content="¿Qué son los Backlinks? Guía Completa para Principiantes de SEO">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="Explica la definición, importancia y métodos de adquisición de backlinks de una manera que incluso los principiantes pueden entender fácilmente.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="es_ES">

  <!-- Etiquetas Adicionales Relacionadas con Artículo -->
  <meta property="article:author" content="Juan Pérez">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="Backlinks">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="Optimización de Motores de Búsqueda">
</head>
<body>
  <!-- Contenido de la Página -->
</body>
</html>

Ejemplo 2: Open Graph con Optimización de Imagen

<head>
  <!-- Información Básica -->
  <meta property="og:title" content="Tendencias de Marketing Digital 2024">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- Información Detallada de Imagen -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Infografía de Tendencias de Marketing Digital 2024">

  <!-- Múltiples Imágenes (La Plataforma Elige) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- Información Adicional -->
  <meta property="og:description" content="Analiza las tendencias de marketing digital 2024 a seguir, incluyendo IA, marketing de influencers y contenido de formato corto.">
  <meta property="og:site_name" content="Marketing Insights">
</head>

Ejemplo 3: Página de Producto de E-commerce

<head>
  <!-- Información Básica del Producto -->
  <meta property="og:title" content="Auriculares Bluetooth Inalámbricos Premium - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="Auriculares inalámbricos de alta calidad con cancelación de ruido. Hasta 30 horas de reproducción.">

  <!-- Información Específica del Producto -->
  <meta property="product:price:amount" content="129.00">
  <meta property="product:price:currency" content="EUR">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- Imágenes Adicionales -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

Ejemplo 4: Contenido de Video

<head>
  <!-- Información Básica de Video -->
  <meta property="og:title" content="Guía Completa de Monetización de Blog (Más Reciente 2024)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="Gana 1000€/mes con tu blog. Te mostramos todo, desde AdSense hasta marketing de afiliados y venta de productos digitales.">

  <!-- Información Específica de Video -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:type" content="video/mp4">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  <meta property="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- URL de Incrustación de YouTube -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

Ejemplo 5: Página de Inicio del Sitio Web

<head>
  <!-- Información General del Sitio Web -->
  <meta property="og:title" content="Zero-Coke - Medio Especialista en Optimización SEO de Blog">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="Compartimos conocimiento experto sobre SEO de blog, optimización de motores de búsqueda y desarrollo web. Guías prácticas para todos, desde principiantes hasta expertos.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="es_ES">
  <meta property="og:locale:alternate" content="en_US">

  <!-- Perfiles de Redes Sociales -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

Ventajas y Desventajas​

Ventajas​

  • Tasas de Clics Dramáticamente Mejoradas: Los enlaces con miniaturas atractivas y descripciones tienen tasas de clics 2-3 veces más altas que los enlaces solo de texto. La forma más efectiva de aumentar el tráfico de redes sociales.

  • Imagen de Marca Mejorada: El uso de imágenes y descripciones Open Graph consistentes construye una imagen de marca profesional y confiable. Las miniaturas bien diseñadas aumentan el reconocimiento de marca.

  • Versatilidad y Compatibilidad: Configúralo una vez y se aplica automáticamente a la mayoría de las plataformas, incluidas Facebook, Twitter, LinkedIn, KakaoTalk y Slack. No es necesario configurar por separado para cada plataforma.

Desventajas​

  • Carga de Creación de Imágenes: Requiere recursos de diseño ya que necesitas crear imágenes Open Graph apropiadas para cada página. Puede ser un trabajo considerable si tienes muchas publicaciones de blog.

  • Problemas de Caché: Las plataformas sociales almacenan en caché la información de Open Graph, por lo que los cambios no se reflejan de inmediato. Debe actualizarse manualmente el caché, y los enlaces ya compartidos pueden no actualizarse.

  • Diferencias de Plataforma: Si bien la mayoría de las plataformas admiten Open Graph, algunas prefieren sus propias etiquetas. Twitter, por ejemplo, prioriza Twitter Cards, por lo que puede ser necesario trabajo adicional para una optimización perfecta.

FAQ​

P: ¿Qué sucede sin Open Graph? R: Los enlaces aún se pueden compartir sin etiquetas Open Graph, pero las plataformas sociales extraerán información arbitrariamente de la página. Esto puede resultar en que se muestren imágenes o textos no deseados, o que no aparezca ninguna miniatura. Esto reduce significativamente las tasas de clics.

P: ¿Cuál es el tamaño óptimo de imagen Open Graph? R: Facebook recomienda 1200x630px (relación de aspecto 1,91:1). El tamaño mínimo es 600x314px; tamaños más pequeños degradarán la calidad. Proporcionar imágenes cuadradas (1200x1200px) también se muestra mejor en varias plataformas. El tamaño del archivo debe ser menor de 8MB, y se prefieren formatos JPG o PNG.

P: ¿Cuál es la diferencia entre og:title y la etiqueta title HTML? R: La etiqueta HTML <title> es el título que se muestra en las pestañas del navegador y en los resultados de búsqueda, mientras que og:title es el título que se muestra cuando se comparte en redes sociales. Pueden ser iguales, pero usar títulos más cortos y convincentes para redes sociales puede ser más efectivo. Ejemplo: <title> es "¿Qué son los Backlinks? Definición, Características, Métodos de Adquisición Guía Completa | Zero-Coke", mientras que og:title es "Cómo Impulsar las Clasificaciones del Blog con Backlinks".

P: Cambié Open Graph pero no se actualiza. ¿Qué hago? R: Las plataformas sociales almacenan en caché la información de Open Graph para mejorar el rendimiento. Haz clic en el botón "Volver a Scrapear" en el Depurador de Compartir de Facebook (https://developers.facebook.com/tools/debug/) para actualizar el caché. LinkedIn usa Post Inspector (https://www.linkedin.com/post-inspector/), y Twitter tiene Card Validator. Las publicaciones ya compartidas no se actualizarán, por lo que los cambios importantes pueden requerir volver a compartir.