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.

6 Comments so far

victorPosted on3:35 am - Nov 16, 2018

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

estebanPosted on5:16 pm - Dic 25, 2018

una consulta, cuando te pide poner una imagen siempre mostrara la misma imagen? como seria si yo quiero que muestre la imagen de cada articulo?

    Victor OtárolaPosted on9:20 pm - Dic 25, 2018

    Hola, Esteban! En la parte inferior de cada entrada Yoast tiene 3 pestañas. Selecciona la que aparece con el ícono de social (son 3 círculos unidos por una línea) y ahí te da la opción de agregar la imagen, el título y el texto descriptivo. Así por cada artículo puedes colocar una imagen distinta siempre. Saludos!

Daniel CorreaPosted on6:26 pm - Feb 1, 2019

Hola, tengo un sitio web en el cual vendo ropa, a menudo etiqueto las fotos de la ropa en mi facebook e instagram mediante facebook e instagram shopping las cuales redirigen a la gente a mi sitio web. Mi pregunta es; ¿esta meta etiqueta Open Graph tambien funciona con los enlaces que se ponen cuando se etiqueta la ropa en facebook e instaggram shopping?

Muchas Gracias.

    Victor OtárolaPosted on4:25 am - Feb 4, 2019

    Hola, Daniel.

    Si tu página web está hecha en WordPress y has integrado Yoast Seo te debe salir las opciones de Open Graph para colocar una imagen por cada producto en cada página, pero esto es más que todo para que aparezca en tu muro de Facebook cuando copies y pegues el enlace de ese producto.

    Si estás etiquetando con enlaces tus imágenes de Instagram no interfiere en la funcionalidad de redirigirte a la página de destino.

    En cuanto a las etiquetas meta también es una opción que puedes editar con el plugin de Yoast Seo por cada producto/cada página para que esté alineado a tu estrategia de anuncios con Google.

    Saludos!

Deja un comentario