¿Qué es Open Graph y cómo puedo usarlo para mi sitio web?

Puede llevar mucho tiempo crear contenido y mantener un sitio web. ¿Cómo podemos asegurarnos de que nuestro contenido se destaque cuando se comparte en las redes sociales de Internet?

  • ¿Qué es Open Graph?
  • ¿Por qué lo necesito?
  • ¿Qué pasa si no lo tengo?
  • Comenzando con los conceptos básicos del gráfico abierto
  • Tipo de gráfico abierto del sitio web
  • Algunas otras etiquetas de gráficos abiertos que vale la pena agregar
  • Twitter y otras redes sociales que utilizan gráficos abiertos
  • Imágenes en gráfico abierto
  • Probando sus etiquetas de gráfico abierto
  • ¿Puedo dar un ejemplo?

¿Qué es Open Graph?

Open Graph es un protocolo de Internet creado originalmente por Facebook para estandarizar el uso de metadatos dentro de una página web para representar el contenido de una página.

Dentro de él, puede proporcionar detalles tan simples como el título de una página o tan específicos como la duración de un video. Todas estas piezas encajan para formar una representación de cada página individual de Internet.

¿Por qué lo necesito?

El contenido en Internet generalmente se crea con al menos un objetivo en mente: compartirlo con otros. Es posible que esto no importe necesariamente si solo lo envía a un amigo, pero si desea compartirlo o desea que se comparta en cualquier red social o aplicación que utilice vistas previas enriquecidas, querrá que esa vista previa sea igual de eficaz. como sea posible.

Cómo convertirse en un desarrollador web Full Stack en 2020 #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock) 10 de marzo de 2020

Esto ayudará a alentar a las personas a ver su contenido e inevitablemente hacer clic en su contenido.

¿Qué pasa si no lo tengo?

La mayoría de las redes sociales por defecto intentarán hacer su mejor esfuerzo para crear una vista previa de su contenido. La mayoría de las veces, esto no va tan bien.

Tomemos, por ejemplo, mi sitio web colbyfayock.com.

Coge correctamente el título de mi página y la descripción, pero no es el tweet más atractivo en un feed.

Compare eso con la vista previa de una sola publicación y vemos una historia diferente.

Entonces, ¿qué sucede si no tiene etiquetas de gráfico abiertas? No sucederá nada malo, pero no aprovecharás algunas de las funciones que ayudan a que tu contenido se destaque junto a otros muchos contenidos que se publican en Internet.

Comenzando con los conceptos básicos del gráfico abierto

Los cuatro etiquetas básicas Open Graph que se requieren para cada página son og:title, og:type, og:image, y og:url. Estas etiquetas deben ser únicas para cada página que sirva, lo que significa que las etiquetas de su página de inicio deben ser todas diferentes de la página del artículo de su publicación de blog.

Si bien debería ser bastante sencillo, aquí hay un desglose de lo que significa cada una de las etiquetas:

  • og:title: El título de su página. Por lo general, es la misma que la etiqueta de su página web, a menos que desee presentarla de manera diferente.
  • og:type: El "tipo" de sitio web que tiene. Explicaré más en la siguiente sección, aunque un "tipo" genérico es "sitio web".
  • og:image: Debe ser un enlace a una imagen que le gustaría representar su contenido. Debe ser una imagen de alta resolución que las redes sociales utilizarán en sus feeds.
  • og:url: Debe ser la URL de la página actual.

Al colocar una etiqueta en su sitio web, debe colocarla junto con cualquier otro metadato. La etiqueta utilizada será una etiqueta y debería tener este patrón:

Entonces, si tuviera que crear un conjunto de cuatro etiquetas gráficas abiertas básicas para mi sitio web, colbyfayock.com, podría verse así:

Tipo de gráfico abierto del sitio web

El protocolo de gráfico abierto tiene algunas variaciones del "tipo" de sitio web que admite. Esto incluye tipos como sitio web, artículo o video.

Al configurar sus etiquetas de gráfico abierto, querrá tener una idea de qué tipo tendrá más sentido para su sitio web. Si su página se centra en un solo video, probablemente tenga sentido usar el tipo "video". Si se trata de un sitio web general sin una vertical específica, probablemente solo desee utilizar el tipo "sitio web".

Al igual que los demás, esto es único para cada página. Entonces, si su página de inicio es "sitio web", siempre puede tener otra página de tipo "video".

Entonces, si tuviera que crear un tipo de gráfico abierto para mi sitio web, podría verse como el siguiente en mi página de inicio:

Al navegar a una publicación de blog, se vería así:

Puede encontrar los tipos de sitios web de gráficos abiertos más comunes en la página web de gráficos abiertos: //ogp.me/#types

Algunas otras etiquetas de gráficos abiertos que vale la pena agregar

Aunque generalmente estará de acuerdo con los conceptos básicos, aquí hay algunos más que valdría la pena agregar:

  • og:description: Una descripción de su página. De manera similar og:title, esta puede ser la misma que la etiqueta de su sitio web , a menos que desee presentarla de manera diferente.
  • og:locale: Si desea localizar sus etiquetas, probablemente tenga sentido incluir la configuración regional. El formato es language_TERRITORY, donde está el predeterminado en_US.
  • og:site_name: El nombre del sitio web general en el que se encuentra su contenido. Si estás en la página de una publicación de blog, es posible que tengas titleque usar el título de esa publicación, donde site_namesería el nombre de tu blog.
  • og:video: ¿Tiene un video que respalde su contenido? Aquí tienes la oportunidad de incluirlo. Agrega un enlace a tu video usando esta etiqueta.

Estas etiquetas se agregarán con el mismo patrón que antes:

Twitter y otras redes sociales que utilizan gráficos abiertos

La mayoría de las redes sociales se adhieren a los principios básicos de los estándares de gráficos abiertos, pero algunas de ellas también incluyen su propia extensión para ayudar a personalizar la apariencia dentro de su ecosistema.

Twitter, por ejemplo, te permite especificar twitter:cardcuál es el tipo de "tarjeta" que puedes usar cuando muestran tu sitio web. En este momento, sus tipos de tarjetas incluyen:

  • resumen
  • summary_large_image
  • aplicación
  • jugador

Esto le ayudará a elegir cómo se utilizan sus enlaces en su feed. Si elige, summary_large_imagepor ejemplo, Twitter mostrará sus enlaces con imágenes grandes de alta resolución siempre que lo proporcione en la og:imageetiqueta.

Aquí hay algunas referencias rápidas a la documentación sobre cómo usar etiquetas de gráficos abiertos con algunos de los sitios de redes sociales:

  • Twitter: //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Imágenes en gráfico abierto

Si bien agregar su imagen como og:imagedebería ser suficiente, a veces puede ser un desafío lograr que su imagen se muestre correctamente. Si parece que tiene problemas, el estándar de gráfico abierto incluye algunas etiquetas de imagen como og:image:urlvs og:image:secure_url, así como og:image:widthy og:image:height.

Intente asegurarse de seguir todas las notas y ejemplos de la documentación de Open Graph. Además, algunas de las redes sociales tienen requisitos de imagen. Twitter, por ejemplo, requiere una proporción de 2: 1 con un tamaño mínimo de 300x157 y un tamaño máximo de 4096x4096 inferior a 5 MB y en formato JPG, PNG, WEBP o GIF.

Si está atascado, pruebe sus etiquetas con las herramientas de la red social para ver si puede encontrar el problema.

Probando sus etiquetas de gráfico abierto

Afortunadamente, nuestras redes sociales favoritas también brindan herramientas para ayudarnos a depurar nuestras etiquetas. Una vez que te asegures de que tus etiquetas se muestren realmente en el código fuente de tu sitio web, podrás obtener una vista previa de cómo se verá tu sitio web en el feed.

  • Gorjeo: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Profundizando en las etiquetas de gráficos abiertos

Si bien la mayoría de estos deben cubrir un sitio web básico, hay algunas etiquetas más que pueden ayudarlo a usted y a la visibilidad de su empresa en las redes sociales.

Si está interesado en profundizar más, la documentación hace un gran trabajo al proporcionar una lista de todas las etiquetas disponibles para su uso.

//ogp.me/

¿Puedo dar un ejemplo?

Si simplemente está buscando un ejemplo para comenzar, esto es lo que debe obtener al configurar sus etiquetas para una publicación de blog:

¿Busca otras formas de optimizar y analizar su contenido?

  • Cómo agregar una imagen de redes sociales a su repositorio de proyectos de Github
  • Cómo entender Google Analytics y el tráfico a su sitio web
  • Cómo configurar y rastrear el rendimiento del canal de YouTube con Google Analytics

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín