Nivel Principiante
Imagina que compartes un enlace de tu página web en Facebook o WhatsApp. A veces, la vista previa que aparece es fea, o le falta la foto principal o el título correcto. Open Graph es como un conjunto de etiquetas ocultas que le pones a tu página web para que le digas a las redes sociales exactamente qué foto, qué título y qué descripción deben mostrar. Es la forma de asegurarte de que tu enlace siempre se vea bien cuando alguien lo comparte.
Nivel Intermedio
El Open Graph es un protocolo desarrollado por Facebook que permite a cualquier página web tener el mismo nivel de funcionalidad que los objetos nativos de Facebook. En esencia, son un conjunto de etiquetas <meta> que se insertan en la sección <head> de una página HTML para controlar cómo se muestra el contenido cuando se comparte en redes sociales (Facebook, X, LinkedIn, etc.).
Las etiquetas de Open Graph son cruciales para el marketing digital y el SEO, ya que mejoran la visibilidad y el atractivo de los enlaces compartidos. Las etiquetas más importantes son:
og:title: El título del contenido.og:type: El tipo de objeto (por ejemplo,article,video.movie,website).og:image: La URL de la imagen que se mostrará en la vista previa.og:url: La URL canónica de la página.og:description: Una descripción breve del contenido.
Nivel Avanzado
Técnicamente, el protocolo Open Graph utiliza un sistema de metadatos basados en RDFa y funciona como un puente entre la página web y el gráfico social de las redes. Al ser etiquetas <meta>, estas no son visibles para el usuario en la página, pero son interpretadas por los crawlers de las redes sociales cuando se comparte la URL.
El formato de las etiquetas de Open Graph es:
<meta property="og:title" content="El título de tu página web" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.tu-web.com/imagen.jpg" />
<meta property="og:url" content="https://www.tu-web.com/" />
<meta property="og:description" content="Una descripción concisa de tu página." />Para asegurar que los social cards se vean correctamente, es vital que las etiquetas og:image tengan las dimensiones y el tamaño de archivo recomendados por cada red social. Además, el protocolo Open Graph permite etiquetas adicionales para definir más detalles, como og:video, og:audio o og:locale para el idioma. El Open Graph es una parte fundamental de la optimización social y una herramienta esencial para el control de la presentación de un sitio web en plataformas de terceros.