Agregar enlaces a tus imágenes mejora la experiencia de usuario de tu blog.

Mejora la experiencia de uso de tu sitio web o blog agregando enlaces a tus imágenes.

En esta nota queremos darte un consejo que te puede de ser de mucha ayuda sobre todo si desarrollas sitios web o escribes un blog. El consejo se trata básicamente de agregar enlaces a las imágenes que usamos para publicar en la web, aunque esto es algo muy sencillo de realizar en esta nota te queremos compartir la importancia que tiene el realizar esta acción en nuestras publicaciones y el porque deberíamos incorporarlo en nuestro desarrollo de contenido para la web.


Algo que pasamos muchas veces por alto es el hecho de agregar enlaces a la imágenes que acompañan nuestra publicaciones, cuando haces clic en alguna imagen que integra una publicación dentro de un blog por lo regular el enlace nos lleva a ver la imagen sobrepuesta al sitio en que la estemos viendo.

Te recomendamos

👉Canva y la creación de contenido👈

Te sorprendería saber la gran cantidad de clic que reciben las imágenes que hemos publicado en nuestro blog o sitio web, esto te lo comentamos porque en alguna ocasión estábamos presentado un proyecto de sitio web a un conocido y este de manera intuitiva y sin que nosotros le mencionáramos algo le dio clic a una de las imágenes que aparecía en nuestro sitio. La sorpresa para el es que no le habíamos colocado enlace alguno a la imagen sino al texto que la acompañba.

Esto para nosotros fue una valiosa experiencia ya que pudimos ver como interactuaba el usuario con nuestro sitio y por supuesto de inmediato lo corregimos. Ahora bien el uso de las imágenes nos ayuda a comunicar de una mejor manera las ideas que queremos transmitir a través de nuestras publicaciones.

¿Cómo agregar enlaces a tus imágenes?

De manera muy breve ejemplificaremos como podemos agregar enlaces a nuestras imágenes usando Blogger.

Primero subiremos la imagen haciendo clic en el icono de subir imagen de la bara de formato.

Ahí tan solo tendremos que buscar y subir la imagen a utilizar, posteriormente haremos clic en el botón Agregar imagen seleccionada. Una vez hecho esto tendremos que hacer clic sobre la imagen y elegir la opción de vínculo, para que nos abra la ventana de editar vínculo.

En al ventana de Editar vínculo escribiremos la dirección web a la cual queremos que vayan los usuarios que hagan clic en la imagen. Es muy recomendable dejar marcada la opción de Abrir este vínculo en una ventana nueva. Esto hará que el sitio se despliegue en otra ventana del navegador.

Como ejemplo te dejamos una imagen que contiene un enlace a nuestra nota: Convierte archivos PDF escaneados a Word gratis.

Convierte archivos PDF escaneados a Word gratis.

Sabemos que esto es muy sencillo de realizar y que puede parecer innecesario pero es algo muy importante de hacer ya que puede mejorar mucho la experiencia del usuario en nuestro sitio web o blog. 

También existe la opción de entrar en el modo de edición de HTML para hacer alguna adecuación directamente al código y generar las imágenes con enlaces, en este caso te dejamos el código HTML que nos genera, como resultado, la imagen anterior con su enlace.

<a href="http://www.homodigital.net/2015/04/convierte-archivos-pdf-escaneados-word-gratis.html" target="_blank"><img alt="http://www.homodigital.net/2015/04/convierte-archivos-pdf-escaneados-word-gratis.html" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFSD4mVC6NZBjmNRjWnqqSrJiVMhaOFOmJE13Zb09jLeYD2sD7suBCGLZAUysDJeh95zBtHjwC5toxJvOkwBabajKzfGajizSdDQZ1LPGw4SPOia2oEGFmWBPYXfzimOvWioQrBp1tN4/s1600/pdf-to-word.png" title="" /></a>

El uso de esta estrategia es recomendable para que la imagen de nuestro encabezado siempre tenga un enlace a la nota que esta encabezando. Esto es muy útil incluso para los lectores que esten suscritos a nuestro servicio de RSS.

Otro punto importante antes de concluir es el de usar compresores de imágenes para reducir su tamaño sin sacrificar la calidad esto también hará que podamos entregar una mejor experiencia al usuario al tener que esperar menos tiempo en que se vea la página.

Dos opciones muy interesantes que te podemos recomendar son:

- Compressor.io
- TinyPNG

Esperamos que puedas implementar esta sencilla técnica y que logres mejorar la experiencia de tus usuarios.

Como ejemplo práctico te invitamos a consultar nuestra nota: Las 10 notas, de Homo-Digital, más Leídas de Mayo del 2015 la cual esta desarrollada usando la técnica que te comentamos en esta nota:

Las 10 notas, de Homo-Digital, más Leídas de Mayo del 2015

Enlaces:
- Cómo crear enlaces en las imágenes con Facebook.

Cómo agregar Twitter cards a Blogger.

Integra Twitter cards a tu blog creado en Blogger.

Las Twitter Cards son elementos que nos permiten enriquecer nuestras publicaciones en la red social de información. En esencia las Twitter Cards nos permiten generar vistas previas de imágenes, galerías, videos, resúmenes de publicaciones de sitios web entre otras. Estos elementos son un medio fantástico para aumentar la interacción de nuestras publicaciones con los usuarios de Twitter. Puedes obtener más información sobre las Twitter Cards en su sitio oficial.

Cuando tenemos habilitadas las Twitter Cards, los enlaces que publiquemos generaran previsualizaciones del contenido presentado, esto se genera sin que afecte el limite de 140 caracteres. Debido a esto las Twitter Cards son una estupenda alternativa para enriquecer nuestros tweets publicados. Te dejamos un ejemplo en la siguiente imagen, puedes hacer clic en ella para que visualices como se ve el tweet usando las Twitter Cards.

Ejemplo de Tweet con Twitter Cards habilidata.

Agrega las Twitter Cards a tu blog creado en Blogger.

Ahora veremos como puedes agregar la función de Twitter Cards a la publicaciones de tu blog creado con Blogger.

Para empezar copiaremos el código que te proporcionamos en la parte de abajo. Es muy importante cambiar los elementos que aparecen como @usuariotwitter con tu usuario de Twitter.

<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageUrl'> <b:if cond='data:blog.metaDescription'> <meta content='summary' name='twitter:card'/> <meta content='@usuariotwitter' name='twitter:site'/> <meta content='@usuariotwitter' name='twitter:creator'/> <meta expr:content='data:blog.pageName' name='twitter:title'/> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/> </b:if> </b:if> </b:if>

Una vez hechas las modificaciones al código asegúrate de insertarlo antes de la etiqueta /head, dentro del código HTML de tu blog. Para acceder a la modificación de la plantilla debemos elegir la opción de Plantilla y luego Editar HTML, en la imagen de abajo ilustramos esta sección.

Aspectos importantes a considerar.

Una vez que hayamos colocado el código como lo indicamos hay algunos aspectos de mucha importancia que debes tener en cuenta dentro del uso de las Twitter Cards, a continuación los veremos detalladamente.

@Validar tu publicación.

La primera vez que validez tu publicación necesitarás recibir la aprobación de Twitter, solo entre al sitio de validación de Twitter Card y elegir el botón Validate and Apply. Una vez recibida la aprobación de Twitter es importante validar  la corrrecta ejecución de las Twitter Cards para cada Post, para ello solo es necesario ir a la sección de Card Validator e introducir el enlace de nuestro post para verificar y generar la Twitter Card, sin la realización de este paso no se generaran las Twitter Cards para nuestro posts.

Twitter Card Validator.

@Inserta una imagen en el encabezado de tu post.

Para que la generación de Twitter Card funcione es muy importante agregar una imagen en el encabezado de tus Posts. Si no agregas una imagen es muy posible que la generación de la Twitter Card fallé. Al menos para la codificación que te hemos proporcionado.

@Usa el campo de descripción de la búsqueda.

El campo Descripción de la búsqueda que aparece en el editor de entradas de blogger, será muy importante de usar, ya que la información que se coloque en este campo será la que se muestre en la Twitter Cards. Si tienes dudas sobre como habilitar este campo la guía SEO en Blogger te puede ayudar.

@Usando imágenes grandes en el encabezado de tu post.

Si en tu blog usas imagenes de encabezado grandes, como lo hacemos nosotros es importante realizar una modificación más en el código. Esta modificación consiste en cambiar la siguente línea:

meta content='summary' name='twitter:card'/

Por esta otra:

meta content='summary_large_image' name='twitter:card'/

Cómo verás no es muy complejo la implementación de las Twitter Cards desde Blogger y los beneficios son diversos para nuestras publicaciones.

Te invitamos a consultar la nota que tomamos como base para desarrollar esta experiencia que te compartimos en este este espacio, esta nota te será útil para obtener más información sobre el procedimiento de agregar Twitter Cards a Blogger.

How to add Twitter Cards to Blogger por Blogger Widgets.

Enlaces:
- Crea un Blog al estilo Facebook Timeline con Blogger.
- Twitter, Etiqueta perfiles relevantes en las imágenes.

Las 10 notas, de Homo-Digital, más Leídas de Abril del 2015

Lo más leído en Homo-Digital durante Abril del 2015.

Para no romper con nuestra tradición te presentamos nuestro cuadro de honor mensual con las 10 notas más leídas en Homo-Digital durante el pasado mes de abril 2015. Los datos los obtenemos gracias a Google Analytics y la presentación de este listado esta potenciado por  List.ly, un servicio en línea que nos ayuda a enriquecer la presentación de nuestros listados. Como siempre esperamos que este compendio te sea útil.