La apariencia en redes sociales y la manera en la que te comunicas en ellas, se hace cada más importante, pues para la mayoría de usuarios se han convertido en el primer punto de referencia de información. Además, muchas empresas las utilizan para acercarse al público, poder compartir novedades e introducir ciertos aspectos que no son conocidos a simple vista.
Estas redes nos permiten publicar contenido para poder transmitir un mensaje a futuros usuarios o clientes de nuestro sitio web. Cuando publicamos un enlace de nuestra web o de un post, aparecen tarjetas que identifican el sitio con una imagen, texto o, incluso, vídeo. Estas tarjetas tienen un nombre que poca gente conoce y son muy útiles a la hora del posicionamiento en motores de búsqueda.
En Facebook se les conocen como OpenGraph y en Twitter se las conoce como Cards (‘tarjetas’ en inglés). Estas tarjetas se rellenan automáticamente, por lo que puede que no tengan la apariencia que nosotros queremos, así que en esta entrada os enseñaremos dos maneras de modificar su apariencia en redes sociales para que así los usuarios quieran saber de qué trata nuestra web.
YOAST nos permite añadir un título, una descripción y una imagen. Otros aspectos como la dirección web o el tipo de contenido lo añade automáticamente, por lo que sólo tendremos que preocuparnos de estos tres elementos.
Por supuesto, hay otras alternativas de modificación de tarjetas para WordPress en el directorio de plugins si no os convence YOAST o buscáis modificar todos los aspectos posibles.
Si nuestra web no está basada en WordPress o somos administradores con conocimiento de desarrollo y pueden modificar archivos de la web, podemos hacerlo de forma manual introduciendo el código HTML en la cabecera (dentro de la etiqueta <head>) del sitio.
Os mostraremos un ejemplo de lo que sería un OpenGraph estándar para un sitio web. Este conjunto llevarán las siguientes propiedades:
<meta property="og:url" content="https://miwebdeejemplo.es">
<meta property="og:type" content="webpage">
<meta property="og:title" content="Mi página web">
<meta property="og:description" content="Esta es mi página web de prueba. Aquí encontraras cosas muy interesantes.">
<meta property="og:image" content="https://miwebdeejemplo.es/portada.jpg">
Por supuesto, hay más parámetros configurables de Facebook y se pueden encontrar todos en su web de documentación oficial.
La forma de introducir las Twitter Cards se asemeja mucho a la de Facebook, pero cambia el atributo que indica qué es. Twitter solicita obligatoriamente ciertas etiquetas y añadiremos un asterisco rojo (*) para indicaros si esa etiqueta lo es. Este sería el mismo ejemplo de las Twitter Cards:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mitwitterdeejemplo">
<meta name="twitter:title" content="Mi página web">
<meta name="twitter:description" content="Esta es mi página web de prueba. Aquí encontraras cosas muy interesantes.">
<meta name="twitter:image" content="https://miwebdeejemplo.es/portada.jpg">
Realizar esto y otras tareas mejora la experiencia de usuario al navegar en la red y que visite nuestra página web. Esta tarea realizada cuando publicamos una entrada o una nueva página, hará que los motores de búsqueda obtengan más información y poder indexar nuestras páginas de forma correcta.
Esperamos que os haya sido de utilidad esta entrada.
¿Intercambiamos tarjetas? 🙂
