Blog

¿Qué son las etiquetas Open Graph?

Las etiquetas Open Graph son metadatos que se añaden a una página web para proporcionar información sobre el contenido de la página a los servicios de redes sociales, como Facebook y LinkedIn. Estos metadatos incluyen información como título, descripción, imagen y otros detalles relevantes que se muestran cuando se comparte un enlace a la página en una red social. Esto permite a los usuarios tener una mejor comprensión del contenido de la página antes de hacer clic en el enlace.

Estas etiquetas se incluyen en la sección <head> de una página web y se pueden leer y procesar por los servicios de redes sociales para personalizar la forma en que se muestra el contenido compartido. Al especificar estos metadatos, se puede mejorar la experiencia de los usuarios y aumentar la probabilidad de que hagan clic en el enlace y visiten la página.

Las etiquetas Open Graph más comunes

Algunas de las etiquetas Open Graph más comunes y su uso son:

  • og:title: Especifica el título de la página que se comparte en una red social.og:type: Indica el tipo de contenido que se comparte (por ejemplo, una página de artículo, una página de perfil, una página de producto, etc.).
  • og:image: Especifica la URL de una imagen que se mostrará junto al enlace en una red social.
  • og:url: Especifica la URL de la página que se comparte en una red social.
  • og:description: Proporciona una descripción breve del contenido de la página que se comparte en una red social.

Cada red social puede tener sus propias reglas y especificaciones para cómo se deben usar las etiquetas Open Graph. Por ejemplo, algunas redes sociales pueden tener requisitos específicos para el tamaño de la imagen o la longitud máxima permitida para el título o la descripción. Por lo tanto, es importante consultar la documentación de cada red social para asegurarse de que se está utilizando correctamente las etiquetas Open Graph.

Además, es posible que algunas redes sociales ofrezcan características adicionales o etiquetas que no estén incluidas en el estándar Open Graph. Por lo tanto, es importante investigar y considerar cualquier requisito o recomendación específica para cada red social antes de compartir el contenido.

Diferencias según las redes sociales

Algunos ejemplos de diferencias en el uso de las etiquetas Open Graph en diferentes redes sociales:

  • Facebook: En Facebook, se pueden especificar etiquetas adicionales, como og:locale para indicar el idioma de la página o og:site_name para proporcionar el nombre del sitio que aloja la página. También hay requisitos específicos para el tamaño de la imagen (por ejemplo, se recomienda un tamaño mínimo de 1200 x 630 píxeles).
  • Twitter: En Twitter, se usan etiquetas específicas llamadas «Cards». Estas etiquetas incluyen información adicional, como el nombre de la autoría o la descripción corta de la página.
  • LinkedIn: En LinkedIn, las etiquetas Open Graph se usan para personalizar la forma en que se muestran los enlaces compartidos en la plataforma. Algunas etiquetas útiles incluyen og:title, og:image y og:description.

Estos son solo algunos ejemplos, y es posible que haya diferencias adicionales en el uso de las etiquetas Open Graph según la red social. Por lo tanto, es importante consultar la documentación de cada red social para asegurarse de estar utilizando correctamente las etiquetas.

Algunos ejemplos de etiquetas

  • <meta property=»og:type» content=»website»>
  • <meta property=»og:url» content=»https://www.example.com/»>
  • <meta property=»og:title» content=»Example Page»>
  • <meta property=»og:description» content=»This is an example of a page using Open Graph tags.»>
  • <meta property=»og:image» content=»https://www.example.com/images/example-og-image.jpg»>

Estas etiquetas incluyen información básica para personalizar la forma en que se muestra el contenido compartido en las redes sociales. La etiqueta og:type especifica el tipo de contenido (en este caso, «website»), la etiqueta og:url proporciona la URL de la página, la etiqueta og:title proporciona el título de la página, la etiqueta og:description proporciona una descripción corta del contenido y la etiqueta og:image proporciona la URL de una imagen que se mostrará junto con el enlace compartido.

Estas son solo etiquetas básicas y es posible que sea necesario incluir más etiquetas o información adicional dependiendo de la red social o la página específica. Por lo tanto, es importante consultar la documentación de cada red social para asegurarse de estar utilizando correctamente las etiquetas Open Graph.

Aquí hay un ejemplo de código HTML que incluye muchas de las etiquetas Open Graph disponibles:

  • <meta property=»og:type» content=»article»>
  • <meta property=»og:url» content=»https://www.example.com/articles/example-article»>
  • <meta property=»og:title» content=»Example Article»>
  • <meta property=»og:description» content=»This is an example of an article using Open Graph tags.»>
  • <meta property=»og:image» content=»https://www.example.com/images/example-og-image.jpg»>
  • <meta property=»og:image:secure_url» content=»https://www.example.com/images/example-og-image.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=»Example OG Image»>
  • <meta property=»og:locale» content=»en_US»>
  • <meta property=»og:site_name» content=»Example Website»>
  • <meta property=»og:article:published_time» content=»2021-01-01T00:00:00+00:00″>
  • <meta property=»og:article:modified_time» content=»2021-01-01T00:00:00+00:00″>
  • <meta property=»og:article:section» content=»Examples»>
  • <meta property=»og:article:tag» content=»Open Graph, Examples»>
  • <meta property=»og:video» content=»https://www.example.com/videos/example-video.mp4″>
  • <meta property=»og:video:secure_url» content=»https://www.example.com/videos/example-video.mp4″>
  • <meta property=»og:video:type» content=»video/mp4″>
  • <meta property=»og:video:width» content=»1280″>
  • <meta property=»og:video:height» content=»720″>

¿Influye en SEO?

Sí, las etiquetas Open Graph pueden tener un impacto en el SEO de una página web. Las redes sociales pueden utilizar la información incluida en las etiquetas Open Graph para mejorar la forma en que se muestran los enlaces compartidos en sus plataformas. Si el contenido compartido es atractivo y bien optimizado, es más probable que los usuarios hagan clic en el enlace y visiten la página. Esto puede aumentar el tráfico a la página y mejorar su posicionamiento en los resultados de búsqueda.

Además, algunos motores de búsqueda, como Google, pueden utilizar la información de las etiquetas Open Graph para comprender mejor el contenido de una página y mejorar la forma en que se muestra en los resultados de búsqueda. Por lo tanto, incluir etiquetas Open Graph informativas y precisas puede mejorar la experiencia del usuario y aumentar la visibilidad de una página en los resultados de búsqueda.

A tener en cuenta

Asegúrate de que la información proporcionada en las etiquetas sea precisa y representativa del contenido de la página.

Algunas redes sociales, como Facebook, permiten verificar la propiedad de una página y tener control sobre la forma en que se muestra el contenido en el feed de noticias.

Mi opinión sobre el uso de etiquetas Open Graph es que son una herramienta valiosa para mejorar la representación y promoción de una página en las redes sociales. Al utilizar etiquetas claras y precisas, es posible garantizar que el contenido sea representado de manera atractiva y atractiva en las redes sociales, lo que puede aumentar la visibilidad y el tráfico a un sitio web. Sin embargo, es importante asegurarse de que se cumplan todas las especificaciones y requisitos de cada red social y de mantener un enfoque ético en el uso de estas etiquetas.

 

 

Aún no hay comentarios
¿Qué te ha parecido este contenido?
Al pulsar en "Enviar" aceptas nuestra Política de Privacidad - + Información, para tratar tus datos con la finalidad de tramitar las consultas que puedas plantearnos.