Blog

Mejora tu apariencia en RRSS

Mejora tu apariencia en Redes Sociales de forma fácil

Diseño y desarrollo web

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.

¿Cómo puedo modificar las tarjetas que comparto?

Modo Simple: mediante el plugin YOAST SEO

  • Plugin YOAST SEO. Si nuestro sitio cuenta con WordPress, con este plugin puedes manejar toda la información necesaria sobre SEO en tu web. Su versión gratuita contiene herramientas muy útiles y dispone de versión de pago más extensa para ayudar al usuario.
  • Una vez instalado el plugin, podemos modificar los datos de cada página o entrada desde el propio editor de WordPress. Debajo del editor de entrada o página, veremos que se ha añadido una nueva sección en la que se encuentra todo el SEO del elemento que estamos modificando. Esta sección es única por cada elemento.
  • Botón Social. En esta opción nos aparecerán dos pestañas para poder modificar el apartado de compartir de Facebook y Twitter.

    Configuración SEO de página o entrada en YOAST
    Sección que aparece en cada edición de página o entrada en WordPress si tienes instalado YOAST.

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.

Modo Avanzado: vía inserción de código HTML

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.

Añadir OpenGraph de Facebook

Os mostraremos un ejemplo de lo que sería un OpenGraph estándar para un sitio web. Este conjunto llevarán las siguientes propiedades:

  • Dirección canónica: se llama dirección canónica a la URL limpia que no posee ningun dato o variable de sesión.
    <meta property="og:url" content="https://miwebdeejemplo.es">
  • Tipo de página: indicaremos si es una página web, un artículo o si es una página de vídeo. En la documentación, se puede encontrar todos los tipos disponibles.
    <meta property="og:type" content="webpage">
  • Título de la página: Debe de ser claro y objetivo. No debería de ser más largo de 40 caracteres para que Facebook no omita las palabras finales.
    <meta property="og:title" content="Mi página web">
  • Descripción de la página: Debe de llamar la atención para que el lector entre en la página. El tamaño perfecto sería de dos frases y no sobrepasar los 300 caracteres.
    <meta property="og:description" content="Esta es mi página web de prueba. Aquí encontraras cosas muy interesantes.">
  • Dirección de la imagen: Aquí podremos indicarle la dirección donde está alojada la imagen que queremos mostrar en el recuadro.
    <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.

Añadir Cards de Twitter

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:

  • Tipo de tarjeta*: Twitter dispone de diferentes tipos de tarjetas para mostrar un resumen, resumen con imagen grande, reproductor de vídeo o de aplicación.
    <meta name="twitter:card" content="summary_large_image">
  • Dirección de la página o Twitter: esta opción nos permite introducir la dirección de la web o incluir el nombre de nuestra cuenta de Twitter para poder enlazarla.
    <meta name="twitter:site" content="@mitwitterdeejemplo">
  • Título de la web*: El título debe de ser directo y no debería de ser más largo de una línea para la web o de dos para dispositivos móviles.
    <meta name="twitter:title" content="Mi página web">
  • Descripción: un breve comentario que llame la atención y explique de qué trata el sitio web. El límite visible sería de tres líneas.
    <meta name="twitter:description" content="Esta es mi página web de prueba. Aquí encontraras cosas muy interesantes.">
  • Imagen a mostrar: una imagen de proporción de aspecto 2:1 y que no sobrepase de 4096×4096 píxeles. Que se llamativa o curiosa, hará que el público se detenga a ver el post.
    <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? 🙂

¡Si te ha gustado comparte y haz comunidad!