Open Graph. ¿Qué es y cómo implementarlo en mi web?

PorVictor Otárola

Open Graph. ¿Qué es y cómo implementarlo en mi web?

Open Graph es un código de inserción para implementarlo dentro de tus etiquetas Meta de tu Html. Puedes llamarlo API (Aplication Programming Interface / Interfaz de Programación de Aplicaciones), ya que mediante este código podrás hacer uso de un servicio web externo con la posibilidad de poder configurarlo de acuerdo a la necesidad de tu proyecto de forma segura y confiable.

¿Cuál es la función del Open Graph en mi proyecto web?

Si alguna vez intentaste copiar y pegar un link de tu blog o de tu página web en tu Fanpage o en tu muro personal de Facebook y te salió algo como esto:

Open Graph. ¿Qué es y cómo implementarlo en mi web?

Entonces vas a querer implementarlo rápido en tu web. Hay 3 cosas que debemos tomar en cuenta:

  • No se verá bien que compartas un link de tu página y aparezca una imagen que no quieres que se vea al compartirla.
  • A diferencia de hacer un post con texto descriptivo es que este formato (integrándolo con Open Graph) facilitará a tus seguidores a redireccionarlos a tu página web para seguir leyendo tu contenido
  • Si logras editar las etiquetas del código de forma correcta, tendrás un link compartido mucho más jalador o comercial que enriquecen a tu código Html y mejoran tu SEO.

Manos a la obra

1ero. Estas son las Etiquetas Meta básicas que te mencionaba.

2do. Revisa si los parámetros están bien en este enlace: https://developers.facebook.com/tools/debug/ . Pon el URL que necesitas compartir y presiona “Depurar”, luego más abajo, presiona el botón “Extraer”. Si todo anda bien entonces puedes ir al siguiente paso.

3do. Ingresa a tu Fanpage o a tu Facebook personal y copia tu URL y pégalo en tu post. Acompáñalo con un texto si deseas y espera que las personas lean el contenido que haya en tu web.

En caso hayas editado la descripción de tu artículo debes depurar nuevamente tu enlace. Repetir el paso 2.

…y si mi blog lo tengo en WordPress?

Si tienes un blog en WordPress, te recomiendo usar este plugin Yoast SEO

que tiene como “todo en uno” para tu posicionamiento SEO y puedes editar el título, enlace y descripción por cada artículo. La imagen que debes poner al inicio de tu post deberá ser 560 x 292px. Por el contrario, si es una imagen de fondo que pondrás en tu artículo puede ser 1500 x 800px. Con la ayuda de Yoast SEO, al pegar el enlace en tu muro la imagen se redimensiona de forma automática.

De hecho, existen más Etiquetas Meta para tu código. Si quieres entrar en más detalle de ellas puedes ingresar aquí: https://developers.facebook.com/docs/reference/opengraph/

Resultado:

About the author

Victor Otárola administrator

Fundador y director general de Kyriac, un estudio creativo especializado en brindar a las empresas soluciones de diseño y publicidad alineadas a su estrategia de marketing. Egresado en diseño y programación web de IPAD con dos especialidades en Marketing por la escuela de posgrado ESAN y otros estudios relacionados a la Gestión Publicitaria y Marketing Estratégico. Baterista de Mandamás y viajero.

2 Comments so far

victorPosted on3:35 am - Nov 16, 2018

Muchas gracias por la información, muy util , un abrazo

Deja un comentario