Agregar "meta tags" para Facebook (y otras Redes) en nuestro Website

Regresando... 

 

Mucho tiempo sin escribir. Como pequeño paréntesis he de contar que hace mucho ya no me dedico a la programación como actividad principal económica. La historia de como mi hobbie se convirtió en trabajo y como mi trabajo se convirtió en hobbie tal vez de para una entrada propia. Lo único que contaré por ahora es que me dedico a la danza, específicamente al Tango Argentino (tremendo cambio!). 

La cuestión es que es por ello que no actualizo ya mucho este blog, programo muy poco, sin embargo ahora en estas condiciones pandémicas actuales, me he visto en la necesidad de retomar la actividad de programación para mantener mi cabeza ocupada y lejos de malos pensamientos, además de volver a abrir la ventana de la posibilidad de poder generar ingreso económico ahora que el arte y la cultura están dejados al final.

En fin, esta entrada además del mensaje catártico será breve. Esta es la simple  cuestión:

+ Necesitamos agregar meta tags para que Facebook (y otras redes sociales) al publicar el URL de nuestro Website muestre su información básica junto a un pequeño preview.

Claramente lo que más importa es que muestre el título, la descripción y la imagen. Bien, para no hacer el cuento más largo acá va un ejemplo de las etiquetas que se requieren:

 <meta property="og:image" content="https://www.puertotango.com/assets/img/preview-de-mi-sitio.png"/> <!-- Revisar las dimensiones más adecuadas-->
 <meta property="og:title" content="Mi sitio" /> <!-- Titulo obvio-->
 <meta property="og:url" content="https://www.urldemisitio.com/" />
 <meta property="og:type" content="website" /> <!--- hay varios tipos-->
 <meta property="og:description" content="Descripción que aparecerá de mi sitio." />
 <meta property="og:fb_app" content="none" /> <!-- ID de aplicación de FB *hay que leer más al respecto :) -->

yo además agrego estas otras complementariamente:

        <title>Mi sitio</title>
        <meta content="Descripción de mi sitio." name="description">
        <meta content="palabras, clave " name="keywords">

Acá incluyo la entrada que me salvó y explica de manera más detallada cada etiqueta y un poco más por si están interesados.

Acá el link para entrada referencia - Gracias!

También es recomendable que entren al apartado de Facebook para desarrolladores. Ahí pueden ingresar su URL y les da algunas opciones de depuración para chequear como está interpretando Facebook los "meta tags" de nuestro Website. Yo sólo he usado esa opción, pero parece que hay más para chusmear por ahí... si encuentran algo interesante luego me cuentan.

Acá el link del Debug de Facebook para desarrolladores

 

Listo por hoy... hasta la vista javer@s!!