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

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.

<meta property=’og:site_name’ content=’El nombre de tu blog’/> <meta property=’og:locale’ content=’es_PE’/> (El idioma y el país) <meta property=’og:type’ content=’website’/> (El tipo de contenido. En mi caso es mi web, puedes poner “Article”) <meta property=”og:title” content=”Título de tu artículo” /> (Aquí es muy personal. Yo puse un llamado a la acción corto, para evitar que se corten mis títulos por su longitud) <meta property=”og:description” content=”Breve resumen de tu artículo” /> (Si lo puedes hacer un resumen dentro de 130 – 140 caracteres. Genial) <meta property=”og:url” content=”El link de tu página web” /> <meta property=”og:image” content=”El enlace donde está alojada la imagen que quieres que se vea” /> (Debe estar la ruta absoluta. Es decir: http://www.mipagina.com/img/imagen.jpg)

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:

Otros articulos

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *

Guardar mi nombre y correo electrónico en este navegador para la próxima vez que comente.
Escribir el primer comentario