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.

10 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!

RubénPosted on10:47 pm - Feb 11, 2019

Hola Victor,
Tengo una página de WordPress cuyo theme incluye una Descripción corta en la sección personalizar > Identidad del sitio cuyo campo está en blanco.
También he estado utilizando Yoast para personalizar la meta description de cada página, pero noté que ahora me está arrojando dos , uno en blanco y otro con mi descripción de Yoast en el .

Mi pregunta es, estas dos <meta name="description" se conflictuan, se combinan o se superponen en lo que concierne a motores de búsqueda?

    Victor OtárolaPosted on5:23 pm - Mar 7, 2019

    Hola, Rubén. Disculpa la demora de la respuesta. Por casualidad hay otro plugin que te de la opción de generar esa descripción en etiquetas? y por otro lado, si la respuesta es no, debería superponerse la que está con el campo lleno y no la vacía. Igual, de todas formas, revisar si hay la posibilidad de quitar la vacía – quizás en el código de tu header está esa etiqueta vacía que arrastra a todo el sitio web -. Un fuerte abrazo!

aASASAPosted on3:58 pm - Abr 13, 2019

Hola victor.. hace unos días Facebook e Instagram bloquearon mi blog por qué dice que viola las normas de comunidad, con el depurador de Open Graph encontre que falta poner en la metaetiqueta el fb_id como se hace??

    Victor OtárolaPosted on3:04 pm - Abr 14, 2019

    El FB ID es un identificador que Facebook le da a las cuentas que se crean en esta plataforma. Si tienes un Fanpage debe tener un ID, si no tienes claro cómo encontrarla, hay una página que te echa una mano con eso (https://www.bufa.es/id-pagina-facebook/).

    Por otro lado, no tenía presente que Fb e Instagram podían bloquear un Blog de una página web a menos que bloqueen cuentas en cada una de sus plataformas. Podrías revisar qué tipo de contenido estuviste generando, puede que alguien o varias personas no están de acuerdo con la información que generas y han reportado tu página.

    Si tu blog está ok pero Facebook e Instagram no han querido reconocerlo, revisa si tu blog y revisa si contiene un FB_ID que no coincide con el de tu Fanpage ni con tu cuenta de Instagram.

    Saludos!
    PD: Tendrás el link de tu blog, tu fanpage e instagram que puedas compartir?¿

Deja un comentario