Optimización de Open Graph - Consejos que los operadores de sitios web deben tener en cuenta

Optimización de Open Graph - Consejos que los operadores de sitios web deben tener en cuenta

El protocolo Open Graph se introdujo por primera vez por Facebook en otoño de 2010. Sustituye a "Facebook Connect" que se utilizó anteriormente para verificar los perfiles de Facebook en los sitios web.

La actividad de los clics juega un papel clave para el contenido compartido en Facebook y otras redes sociales - al igual que en las páginas de resultados de búsqueda. Además del título y la descripción, también se pueden definir otros elementos (por ejemplo, imágenes de vista previa) en las redes sociales. Una vista previa bien optimizada y enfocada del artículo compartido ayuda a mejorar el CTR de manera significativa. Este artículo muestra los consejos más importantes sobre la optimización de Open Graph para ayudarte a sacar el máximo provecho en tus publicaciones sociales.

Integración 

og:title

El og:title es el elemento más importante mostrado junto a la imagen en un post de Facebook. Por lo tanto, debes tratar de dirigirte a tu grupo objetivo en las redes sociales de la mejor manera posible con el fin de mejorar el CTR de tus mensajes compartidos. Asegúrate de que el título no sea superior a 95 caracteres. Para mantener el título corto y divisible, debes tener en cuenta que siempre hay un salto de línea después de los primeros 50 caracteres. 

<meta property=”og:title” content="Optimización de Open Graph - Consejos que los operadores de sitios web deben tener en cuenta"/>

og:description

Al igual que con la meta HTML descripción, puedes añadir una descripción para las redes sociales utilizando og:description. Las palabras clave primaria, secundaria, etc., no importan en este caso, y ni hay palabras clave resaltadas en negrita. Por lo tanto, la descripción debe tener por objeto incitar al usuario a hacer clic y debe dar al mismo una idea de qué puede esperar al hacer clic sobre el enlace (esto ayuda a evitar la decepción de usuario y por lo tanto evitar el deterioro de la ux). El número máximo de caracteres es 297.

<meta property=”og:description” content=”description “/>

og:image

Un elemento muy importante de las propiedades es og:image. Debes prestar especial atención a este elemento y optimizarlo de la mejor manera posible. Para que la imagen represente perfectamente al grupo objetivo correspondiente, es recomendable utilizar un og:image personalizado, sobre todo si el contenido es crucial para las redes sociales. Hay muchas maneras de optimizar la imagen del artículo utilizada en tu página web. El usuario también puede seleccionar una imagen si og:image no se ha utilizado. Los banners, iconos y otros elementos del sitio web a menudo también se muestran en esta selección, algo que no debería suceder. Los detalles sobre las dimensiones de la imagen ideal y los tamaños los veremos más adelante en este artículo. El siguiente ejemplo muestra una forma de presentar de forma óptima el og:image.

OnPage.org - Este og:image personalizado fue desarrollado para la Revista OnPage. Esta disposición contiene el nombre de la marca, el autor y una foto del autor. En este caso, está claro que tenemos diferentes opciones de optimización (de un artículo a otro), y la relación coste-beneficio que muestra que la imagen og:image utilizada por OnPage es perfecta.

Imaginanet

En cuanto a tu propio sitio web, simplemente tienes que seguir experimentando las diferentes opciones. El seguimiento (con herramientas como Google Analytics) permite encontrar rápidamente la opción que más gusta a los diferentes grupos objetivo. La og:image debe ofrecer pistas sobre el contenido del artículo, mientras que el título y la descripción se deben utilizar para animar a más usuarios a hacer clic.

Conviene saber: Si no utilizas og:image, XING no busca una imagen en la página web. El elemento og:image es necesario con el fin de mostrar una vista previa para el enlace compartido en XING.

og:url

Algunas personas consideran la lista og:url redundante en el uso de la etiqueta canónica. Sin embargo, ya que a veces hay que utilizar varias direcciones URL (por ejemplo, mediante el seguimiento de campañas en medios sociales), es importante configurarlos mediante el protocolo Open Graph con el fin de suministrar a las redes sociales mejores pistas sobre el cálculo Edge Rank (Facebook). Y teniendo en cuenta que las redes sociales también trabajan con pistas alternativas (por ejemplo, la URL canónica), es aconsejable listar la og:url antes de la etiqueta Canonica en el código fuente. 

<meta property=”og:url” content=”https://imaginanet.com/blog/?p=7112&preview=true”/>

og:type

En la mayoría de los casos, podemos utilizar og:type para sitios web, blogs o artículos. Sin embargo, si también trabajas con otros medios, tales como música, videos, libros, etc., sin duda, debes estar bien familiarizado con las propiedades de og:type. En este artículo, nos centramos en la optimización de los documentos HTML para Open Graph. Hacer referencia al og:type se parece a esto:

<meta property=”og:type” content=”articulo”/>

El formato de imagen ideal (og:image) 

Necesitas estar familiarizado con los formatos y tamaños de imagen utilizados en la actualidad si deseas presentar óptimamente el og:image en Facebook. Facebook actualmente utiliza el formato 1.91:1 para las imágenes. Pero todavía tienes que tener en cuenta varios aspectos para este tamaño:

Formato óptimo: al menos 1200 x 630 pixeles en formato 1.91: 1 - la imagen mostrada es lo suficientemente grande y bien presentada, incluso en dispositivos de alta resolución.

Ok: 600 x 315 pixeles - la imagen que aparece en el feed de noticias es suficientemente grande, la visualización en dispositivos de alta resolución no es la ideal - está bien si la imagen no la tienes disponible en una resolución más alta.

Mínimo: 200 x 200 pixeles - la imagen se muestra muy pequeña - no es recomendable.

Si estás trabajando con imágenes pequeñas y te gustaría integrarlas dentro del texto, debes tratar de colocarlas lo más centradas posible. Esto te asegura que las imágenes sean también visibles en el muro de Facebook.

Depurador Open Graph (Open Graph Debugger)

Una herramienta muy útil y valiosa en la optimización de los elementos Open Graph es el Facebook Object Debugger. Esto muestra la información guardada en Facebook para una URL específica, así como la manera en que se muestra la URL en Facebook. 

La función más importante del Open Graph Debugger: Fetch new scrape information. Esta función es particularmente importante cuando tienes bastante que probar y optimizar en tu página web. También sirve como una función de "borrar caché" en el protocolo Open Graph. Facebook almacena información de manera temporal. Si optimizas og:title, og:image, u otros elementos, pasará algún tiempo antes de que Facebook muestre los elementos correctamente. La función "Fetch new scrape information" borra y vuelve a cargar la información almacenada en caché.

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí