Diseño de páginas web en Bilbao y Bizkaia

Author Archives: Abrelink

  • 0
descargar iconos y vectores gratis

Los 5 mejores sitios web para descargar iconos y vectores gratis

Muchas veces un diseñador gráfico o web necesita disponer, no ya sólo de un abundante número de tipografías donde elegir la más adecuada para su proyecto (ya se trate de un logotipo, una tarjeta de empresa, un tríptico o cualquier otro trabajo de papelería e imprenta), sino también de una buena variedad de iconos y vectores. Uno de los usos más recurrentes que se les suele dar a los iconos y vectores es el diseño de infografías, elemento que está más de moda que nunca en el mundillo web, que aumenta el engagement y que puede convertir tus post en virales gracias a su difusión en redes sociales (en este blog encontrarás varios ejemplos).

Es cierto que muchas fuentes tipográficas incluyen los llamados zap dingbats, que son símbolos creados a partir de trazos sencillos (como teléfonos, casas, flechas, animales, etc.) que en un momento dado te pueden sacar de un apuro, y que están pensados básicamente para funciones de señalética. Otro tanto se puede decir de las formas predefinidas y las puntas de pincel de Photoshop.

Sin embargo, a veces estos dingbats no son lo bastante buenos o complejos, y entonces necesitamos buscar iconos más sofisticados, o que combinen colores. Para facilitaros la tarea, os presento aquí 5 sitios web donde podéis descargar iconos y vectores totalmente gratis:

1-FreePSDFiles

FreePSDFiles

Sin duda, mi favorito, y probablemente al que más veces he recurrido. Es como un cajón de sastre donde puedes encontrar de todo, desde iconos hasta mock-ups, pasando por ilustraciones, siluetas, infografías, botones, fondos y plantillas para logos, currículos y páginas web. Basta con echar un vistazo a sus categorías para darse cuenta de la enorme variedad de materiales con los que cuenta. Especial mención merecen los vectores de personajes animados, al más puro estilo cartoon, para los que tiene una web específica. El diseño suele ser excelente en todos los casos, y los archivos (muchos de ellos manipulables) están en formato PSD (Photoshop) dentro de un zip que te descargas.

FreePSDFiles es un must have, uno de esos sitios que tienes que guardar en tus favoritos sí o sí. Sólo está en inglés, pero con un conocimiento básico es más que suficiente (y es que en el mundo del diseño web, ¿quién no se maneja con el inglés?).

2-Flaticon

Flaticon

Este sitio también es muy recomendable. Cuenta con más de 200.000 iconos y vectores para uso personal y comercial divididos por categorías: animales, flechas, arte, edificios, trabajo, cine, etc. También tiene, como es lógico, un buscador. Los vectores están disponibles en varios formatos de imagen: EPS, PNG, PSD e incluso en código HTML y CSS. Cuando quieres descargar un icono te ofrece la posibilidad de hacer una donación al autor y contratar la cuenta Premium (son 9,99$) o realizar una descarga gratuita copiando una línea de código en tu web para citar al autor, lo cual sería un buen gesto, porque estos diseños no se hacen solos. No obstante, si no te sientes altruista, también puedes bajártelo sin pagos ni atribuciones. Los PSD tienen una resolución de 150 px, y en cuanto a los PNG (este detalle me parece muy significativo), puedes elegir el tamaño al que quieres descargártelo, hasta un máximo de 512 píxeles. Asimismo, puedes crear colecciones de iconos y guardar ahí tus favoritos, incluso sin previo registro. Como veis, es un sitio muy completo, donde, si además eres diseñador, puedes unirte a su equipo de profesionales y ganar dinero con tus diseños.

Flaticon está sólo en inglés, y es un proyecto de Freepik.

Ahora Flaticon también cuenta entre sus APPs con un generador de patrones y otro de @font-face que funciona mediante drag&drop, aún más cómodo, si cabe, que el de Fontsquirrel.

3-Iconfinder

Iconfinder

Otro sitio que no puede faltar en ninguna lista. Tiene más de un millón de iconos en su catálogo, aunque conviene aclarar que no todos son gratuitos, pues muchos requieren de una cuenta Premium (cobran 9$ al mes por 25 descargas en su plan básico y unipersonal). Al buscar puedes seleccionar la pestaña Free para que te muestre únicamente los iconos gratuitos. Dependiendo del vector en cuestión, puedes bajártelo en SVG (Adobe Illustrator) o PNG, en cuyo caso, y al igual que en Flaticon, también te permite seleccionar su tamaño en píxeles, con las mismas limitaciones. Asimismo, acepta el formato ICO, el que se usa para los Favicon.

Iconfinder sólo está en inglés.

4-Freepik

Freepik

Es una de las webs de recursos gráficos más populares de la Red. Dispone de casi 100.000 iconos gratis para uso personal y profesional, ordenados por categorías, y muchos más que requieren de licencia o previo pago. Tal como anuncian en su portada, ofrecen fotos, ilustraciones, iconos, PSD y vectores gratis para páginas web, banners, presentaciones, revistas y publicidad en general. Los vectores, los archivos PSD y los iconos tienen sus propias categorías dentro del menú principal. El sistema de descarga es idéntico al de Flaticon: licencia gratis con atribución al autor mediante link en tu página web; de hecho, algunos enlaces te llevan directamente a Flaticon. En el botón de descarga te especifica el peso de la imagen.

Me parece especialmente interesante su Stock de Fotos con casi 200.000 fotos gratis con licencia de Creative Commons, muchas de ellas muy creativas y enfocadas al diseño web.

Admite registro (también mediante redes sociales) y formulario para trabajar con ellos, ya sea como diseñador o como escritor, y está en español.

5-Vector Open Stock

Vector Open Stock

En su página de inicio te muestra una serie de vectores destacados, pero luego puedes buscar por categorías. Tiene una base de datos con más de 37.000 iconos gratis. Los archivos de descarga son comprimidos, zip, y están pensados para Adobe Illustrator  (extensión AI). La licencia gratuita también funciona por atribución, y cada imagen viene acompañada de una sucinta descripción. Algunos iconos son de pago, y sus enlaces te llevan a ShutterStock (los habrás visto en más de una ocasión al buscar imágenes en Google y los reconocerás por sus marcas de agua).

En mi opinión, Vector Open Stock es menos completo que cualquiera de los anteriores sitios, pero tiene la ventaja de que está disponible en español.

Por supuesto, el citado Shutterstock es, con diferencia, el mejor banco de imágenes, el más profesional, pues cuenta con unos vectores en flat design y unas ilustraciones realmente formidables que tú mismo puedes editar, pero, desgraciadamente, está sujeto a unos planes de pago que no son aptos para cualquier bolsillo, y hasta por descargar un JPG (a gran escala, eso sí) tienes que pagar. Para una agencia de marketing quizá sea la opción más indicada, pero un freelance o autónomo tal vez no se lo pueda costear. El registro es gratuito, pero no te da acceso a prácticamente nada. Eso sí, en favor de Shutterstock hay que decir que no sólo almacena imágenes, sino también vídeos y música. Tiene una base de datos colosal, y es difícil que no encuentres lo que estás buscando, sea lo que sea.

Y ya para acabar, por si no habéis tenido suficiente, tres extras:

6-Vecteezy

Vecteezy

Vecteezy es un portal bastante nuevo que ofrece vectores y gráficos gratis. Lo mejor es que no necesitas registrarte para descargártelos. Según el caso, dentro del archivo comprimido puedes encontrar la imagen en varios formatos: JPG, PDF, EPS y AI. Tiene un buscador por categorías. Algunos vectores son muy básicos, pero puede serte útil para bajarte iconos de redes sociales, texturas o patrones. Si eres un miembro Premium la búsqueda se te amplía a Pinceles, Texturas, PSD, Fondos, Plantillas, etc. Lo bueno es que está en español.

Ahora también, gracias a Piktab, una extensión de Google Chrome creada por Freepik, podemos disponer de un amplio surtido de recursos gráficos (iconos, vectores, texturas, fotos, mockups) con tan sólo clicar en nuestra barra de herramientas. Nunca ha sido tan fácil y gratis.

7-Icons8

Icons8

Esta web es relativamente nueva, pero en poco tiempo se ha posicionado muy bien. A diferencia de los otros sitios, permite descargar iconos y vectores al tamaño que tú elijas, y soporta los formatos PNG, SVG (muy usado para crear sofisticadas animaciones mediante vectores y código que además pesan poco), EPS, PDF y por último, también puedes insertarlo como código HTML (te recomiendan añadir un enlace a su página como cortesía).

Otro rasgo distintivo de Icons8 es que los vectores son editables. Los puedes personalizar cambiándoles el relleno, el color de fondo, añadiéndoles una capa de texto o superponiendo cualquier otro elemento.

Tanto o más destacable es la manera en que puedes guardar estos iconos en tu ordenador. Como es habitual, está la opción de descarga directa, pero también funciona con drag and drop, arrastrando y soltando el vector en tu Photoshop o Illustrator, con la posibilidad de modificarlo allí. La verdad es que esta utilidad es muy práctica y funcional.

Aunque Icons8 es un portal gratuito, algunos iconos o formatos son de pago. Está en español.

8-Iconos Redes Sociales

Iconos Redes Sociales

Un tipo de iconos especialmente demandados en blogs y páginas personales son los de redes sociales. En esta web podéis descargaros hasta 30 packs de iconos vectorizados para Social Media en diferentes estilos y formatos, desde diseño plano hasta hechos a mano, minimalistas, con trazo fino y coloreados, redondos, cuadrados y hexagonales, y todo gratis.

9-Iconos de teléfono vectorizados

Vectores de iconos de teléfonos

Otra categoría de símbolo muy requerido para usar en blogs y webs o en tarjetas de empresa para los datos de contacto es el icono de teléfono o móvil. En Flaticon tenéis un buen puñado de ellos, tanto en color como en blanco y negro, pero también podéis usar los zap dingbats de fuentes tipográficas como I Am Telefono, especialmente preparadas para ello. Es de uso gratuito, y os la podéis descargar en Dafont haciendo clic aquí.  Al no ser una imagen en mapa de bits, estos iconos son tan escalables como cualquier otro vector.

10-Iconos de WhatsApp vectorizados

Iconos y vectores gratis para Diseño Web y Gráfico

Con los iconos de WhatsApp sucede otro tanto. Son casi de uso obligado en páginas web, y es que cada vez son más las empresas que utilizan esta vía de comunicación con sus clientes, incluso para enviar o responder presupuestos. Además de en los citados Freepik y Flaticon, en Pixabay también podéis encontrar un buen número de ellos; y gratis, por supuesto. Como en cualquier otro gran banco de imágenes, puedes delimitar tu búsqueda a vectores e ilustraciones, elegir la orientación, el tamaño y el color. Las imágenes con derechos de autor te llevan directamente a Shutterstock.


  • 0
5 webs donde descargar fuentes tipográficas gratis

5 webs donde descargar fuentes tipográficas gratis

Es el deber todo diseñador gráfico disponer de una amplia gama de fuentes tipográficas donde echar mano. Esto, que es fundamental para la creación de logotipos y el material impreso publicitario, vale también para la maquetación de páginas web. Porque diseñar tus páginas con una tipografía clásica como Arial, Times New Roman o Comic Sans da mala imagen, la de un diseñador incompetente que no cuida el acabado final de sus trabajos y que no conoce las diferencias entre una fuente con serifas o sin serifas, caligráfica, elegante, decorativa o en versalitas. Por supuesto, no basta con limitarse a las fuentes que te vienen instaladas con Windows por defecto. Debemos buscar la tipografía que mejor se adapte a los valores que queremos transmitir: rigor, fiabilidad, creatividad, ambiente lúdico y relajado, etc.

Cada fuente tipográfica tiene una personalidad y representa unos valores, de ahí la importancia de su elección

-Cómo instalar una fuente tipográfica en Windows

Previo paso a buscar una tipografía adecuada a nuestro blog o web deberemos saber cómo instalarla en nuestro ordenador. Hasta hace relativamente poco, antes de Windows 10, cuando te bajabas una fuente, para instalarla y poder utilizarla, antes tenías que copiar el fichero, abrir la carpeta Fonts y pegarlo allí. La verdad es que el trámite era un poco engorroso. Pero ahora es mucho más sencillo. Por supuesto, aún puedes seguir haciéndolo así, pero lo más práctico es hacer clic en la fuente y pulsar en instalar. De este modo se te instalará automáticamente en tu carpeta Fonts sin tener que buscarla.

Tipografía Windows

-Fuentes tipográficas con acabado profesional

Reconozco que esto es un poco subjetivo, como que te gusten las fuentes con serifas o sin serifas, pero algunas de las tipografías gratuitas que veréis en muchas páginas web y que vosotros también podéis usar en vuestros proyectos libremente dándoles un aspecto elegante y profesional son:

  • Bahamas
  • Caviar Dreams
  • Comfortaa
  • DejaVu Sans
  • Existence
  • Folks
  • Liberation Sans
  • MadAve
  • Nexa
  • Nixie One
  • Roboto
  • Sansation

Y en cuanto a las tipografías manuscritas, caligráficas o artísticas, éstas son mis recomendaciones:

  • Allura
  • Arabella
  • EdmondsHand
  • Indie Flower
  • Lebanon
  • LeftyCasual
  • SantElia Rough
  • Sonsie One
  • Summer Font

-Cómo identificar una tipografía

A todo diseñador gráfico le suele suceder a menudo que necesita identificar una tipografía, ya sea porque un cliente le ha enviado un logotipo en JPG o en cualquier otro formato de imagen y quiere que se lo rediseñe, o porque está navegando por una web y ve una fuente tipográfica que le gustaría probar en su propia página, tríptico, flyer, infografía o lo que fuera.

Una buena opción, y muy socorrida, para identificar una tipografía es usar una aplicación online como WhatTheFont o WhatFontIs. Sólo tenemos que subir una imagen de nuestro disco duro –aceptan JPG, PNG y GIF– o pegar su URL, y luego insertar los caracteres que nos pida para afinar la precisión. A continuación nos mostrará un listado de fuentes que encajan con dicha figura, aunque, claro, los resultados no siempre son certeros. En la búsqueda podemos seleccionar la opción Free fonts o Webfonts, si es que sólo queremos que nos muestre fuentes gratis.

Identificar tipografías con WhatTheFont

Aún más rápido es recurrir a la extensión de Google Chrome WhatFont, que con tan sólo activar y pasar el puntero del ratón por encima de una tipografía (on mouse over) nos informará, a la manera de un tooltip, de qué fuente tipográfica se trata. Ahora bien, esto sólo funciona con texto en HTML, no con texto incrustado en una imagen, para lo que necesitaremos WhatTheFont.

Aquí os presento 5 páginas web donde podéis descargar fuentes tipográficas gratis (y otras muchas cosas más):

1-Font Squirrel

Font Squirrel

La web de la simpática ardilla es una de mis preferidas. A decir verdad, no es la que mayor número de fuentes tipográficas alberga en su archivo, pero su interfaz amigable y sus múltiples opciones hacen de ella un sitio ideal, casi obligado, para guardar en nuestros favoritos. Cuenta con un buscador de fuentes y luego ofrece la posibilidad de buscar por etiquetas o tags, además de otras categorías como recientes o más populares.

Una utilidad que me gusta mucho de Font Squirrel es su Webfont Generator, donde podemos subir una fuente de nuestro disco duro en TTF (TrueType Font) u OTF (OpenType Font), las más usadas en el entorno Windows, y él nos la convierte a otros formatos para web como EOT, WOFF y SVG. Esto es especialmente útil cuando utilizas la propiedad de CSS 3 @font-face.

Ahora también incluye un Identificador de Fuentes a imitación del ínclito WhatTheFont. Asimismo, dispone de un blog y de un foro donde resolver dudas; ambos, por supuesto, en inglés.

Quizás su mayor defecto y lo único que se echa en falta es el típico visor para poder escribir el texto deseado y mostrarlo en las diferentes tipografías a medida que van cargando, algo que siempre ayuda a hacerse una mejor idea de la composición que tenemos en la cabeza.

Sus fuentes son 100% gratis para uso comercial, como recalcan en su logo.

2-Megafuentes

Megafuentes

Funciona muy parecido a Font Squirrel, aunque tiene menos utilidades. La búsqueda es, igualmente, por etiquetas, y tiene una categoría de novedades y unas fuentes destacadas en primera página. La ventaja es que está en español. Le falta, asimismo, el visor. Las fuentes son TrueType y OpenType.

3-Urbanfonts

Urbanfonts

Esta web es muy completa, y su catálogo de fuentes es de lo más heterogéneo y diverso que se puede encontrar. Las tipografías gratuitas (también tiene de pago, las premium) están ordenadas alfabéticamente y también por categorías (Fuentes nuevas, Nuestras favoritas, Top 100), básicas, script, display/decorativas, no latinas y miscelánea. A diferencia de las anteriores páginas, Urbanfonts sí cuenta con un visor de texto, y además muy completo, pues te deja cambiar el color del texto y el del fondo, así como aumentar o disminuir el cuerpo de letra.

Urbanfonts no sólo permite descargar fuentes tipográficas, sino también un variado repertorio de dingbats (símbolos) y vectores. Otra web que tampoco debería faltar en nuestros favoritos.

4-Font River

Font River

Es muy similar a las anteriores. En su header muestra tres secciones destacadas con Fuentes nuevas, Lo más popular y al Azar. Más abajo establece una serie de categorías: básico, símbolos, fantasía, extranjero, gótico, fiestas, escritura y tecno. No tiene visor de texto, pero sí mapa de caracteres. Presume de tener 20.000 fuentes  y dingbats descargables para Windows y Mac. Permite descargar (en TTF) y donar al autor. Está en varios idiomas; entre ellos, español.

Sus fuentes son gratuitas para uso personal.

5-1001 Free Fonts

1001 Free Fonts

Como su nombre indica, esta web posee una gran colección de fuentes. Están ordenadas alfabéticamente y por etiquetas. Al igual que Urbanfonts, cuenta con un visor de texto, aunque menos sofisticado (éste no permite, por ejemplo, cambiar el color de fondo). En cada fuente se te informa de si es gratuita, o sólo para uso personal (en cuyo caso puedes adquirir la licencia comercial), de dominio público, etc. También permite hacer una donación al diseñador, cosa que seguro te agradecerá.

Y por último, un extra que no puede faltar en ninguna lista:

6-Google Fonts

Google Fonts

Tanto si eres diseñador gráfico como desarrollador web, Google Fonts te va a interesar. Aquí puedes encontrar una gran variedad de tipografías amigables con el navegador. Están divididas en 5 categorías básicas: serif, sans serif, display, handwriting y monospace, que puedes seleccionar o deseleccionar a tu antojo para afinar la búsqueda. También puedes elegir el lenguaje (incluye alfabetos como el cirílico, el árabe o el griego) y ajustar el criterio de búsqueda por trending, popular, fecha de publicación u orden alfabético.

Si pulsas en See the specimen, al pie de cada tipografía, te conduce a una página donde te muestra el diseñador, una descripción de la fuente, sus caracteres, un gráfico con los países donde más se usa, una lista con tipografías similares y un recuadro donde puedes escribir el texto para verlo con dicha fuente y al tamaño en píxeles que quieras.

Aparte, cuando seleccionas una fuente se te abre una pestaña en la parte inferior de la pantalla. Si la despliegas, te ofrece la opción de descargártela totalmente gratis en un zip y el código para embeberla en tu sitio web que debes insertar en el <head>, además del CSS con el font-family. La línea de código sería algo tal que así:

<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">

También puedes importarla como un estilo y customizarla (regular, bold):

<style>
@import url('https://fonts.googleapis.com/css?family=Caveat');
</style>

Google Fonts es una alternativa a @font-face para usar tipografías en páginas web sin necesidad siquiera de instalarlas y subirlas a tu FTP, aunque ten en cuenta que al solicitar un request a la biblioteca de Google puede aumentar el tiempo de carga. En relación con esto, en Load Time te indica si dicha fuente carga rápido o lento.

Y como premio al que haya llegado hasta aquí, dos webs más que no deberían faltar en ninguna lista sobre tipografías gratuitas:

7-BeFonts

BeFonts

Hace poco que tuve conocimiento de esta página, y la verdad es que estoy encantado con ella. No es que tenga un enorme archivo de fuentes tipográficas, pero las que tiene son muy profesionales. Las fuentes se organizan por categorías dentro de un menú superior: basic, display, script, symbols, non western y misc, con sus correspondientes desplegables.

Una cosa que hace especial a BeFonts es que cada tipografía aparece con una imagen de portada a modo de cover, algo que enriquece mucho el aspecto visual y estético de la web. También incorpora capturas de pantalla para que puedas ver cómo queda en diferentes contextos.

Las fuentes son gratuitas, la mayoría sólo para uso personal y algunas también para uso comercial, y puedes descargártelas en TTF sin necesidad de registro.

8-Dafont

Dafont

Esta página es algo así como un clásico de las tipografías gratis. Bajo su sencilla apariencia esconde un buscador de fuentes muy útil y práctico. Como todos, está estructurado en categorías, donde destacan los bitmap y dingbats. Al lado de cada fuente tiene un botón de descarga. Así de simple y directo, sin páginas intermedias. Pero además también cuenta con una vista previa donde puedes teclear tu texto. Dispone de atajos directos a las novedades y a las tipografías top (aquí no podían faltar la Caviar Dreams o la Sansation).

Las fuentes tipográficas son 100% gratis y están en OTF o TTF.


  • 0
Qué es un featured Snippet

Qué es un featured snippet de Google

Seguro que muchos de vosotros, amantes del SEO, habéis oído hablar en más de una ocasión de los featured snippets. ¿Pero qué son y en qué se diferencian de los rich snippets? En este post voy a tratar de explicároslo.

-¿Qué son los featured snippets o fragmentos destacados de Google?

Un featured snippet es un formato enriquecido o fragmento destacado que ocupa la “posición cero” de Google; es decir, que se sitúa por encima de los resultados de las SERPs. Lo que hace un featured snippet es responder a una consulta o búsqueda real del usuario, y básicamente los hay de tres tipos: los que se presentan como una definición –la mayoría–, los que tienen forma de lista y los que adoptan estructura de tabla. Se sabe que para ocupar un featured snippet no es necesario ser el primer resultado orgánico del ranking, pero sí aparecer en el top 10 o primera página de resultados. Lo más extraño y controvertido es que puede darse el caso de que la definición de este fragmento destacado la extraiga Google de una página y la imagen anexa de otra distinta.

Ejemplo de featured Snippet

Si se sabe que el primer resultado de las SERPs se lleva en torno al 25% de los clicks y los tres siguientes se reparten el otro 50%, no hace falta decir mucho más sobre la importancia de alcanzar un featured snippet, en especial en keywords que mueven mucho tráfico.

-Rich snippets y otros fragmentos enriquecidos

Como sin duda sabréis si habéis llegado hasta aquí, los snippets, en general, son los resultados de búsqueda que aparecen en las SERPs; es decir, la caja invisible con el title, el meta description y la URL de una web, junto con la fecha en que se publicó o en que se realizó el último cambio, o la última vez que la visitaste.

Existen herramientas online para optimizar estos snippets de Google. Yo, personalmente, os recomendaría SEOmofo, que cuenta con un excelente simulador y que además te marca el número máximo de caracteres que puedes escribir en el title y en el description si no quieres que se vean cortados.

Snippet Abrelink

Luego están los rich snippets, que son fragmentos enriquecidos (microformatos Schema) que Google muchas veces tiene en cuenta a la hora de mostrar los resultados de búsqueda en las SERPs. Los más comunes son las estrellitas que suelen aparecer entre la URL y el description. También se les conoce como rating o reviews, y en WordPress hay diferentes plugins para insertarlos (siempre que te bajes un plugin de WordPress deberías revisar la fecha de la última actualización para estar seguro de que no tiene errores y aún funciona).

Rich Snippet Abrelink

Estos rich snippets son extremadamente útiles, ya que aumentan en sumo grado el CTR (principal métrica de la experiencia de usuario), y es que una web, aunque no ocupe la primera posición de la SERP, si tiene cinco estrellitas inevitablemente llamará mucho más la atención que otra que no las tenga, y siendo así, recibirá más clicks (y cuantos más clicks reciba, más arriba se posicionará). Lo malo es que Google no siempre los muestra, y en el caso de la Home, y para según qué palabras clave, es muy probable que no lo haga.

Un truco que muchos desconocen es que algunos símbolos, estratégicamente utilizados, también pueden cumplir la función de los rich snippets y aumentar el CTR. Por ejemplo, el símbolo del copyright sugiere que ese sitio web es el oficial de la marca, y de ese modo transmite mayor seguridad y confianza.

Otra forma particular de rich snippets son los resultados del llamado Local Pack, que es el recuadro que en ciertos casos de búsqueda geolocalizada aparece debajo del mapa de Google Maps, y que actualmente sólo muestra los que para Google son los tres mejores resultados (esto fluctúa tanto como las SERPs). Estar aquí también representa una gran ventaja comparativa. En este post sobre SEO Local os hablé sobre qué hacer para tratar de meterse en el Local Pack, y en especial sobre la importancia de las reseñas de Google My Business.

Snippet Local Pack

Otros rich snippets más o menos comunes son los site links, enlaces que en algunos casos, sobre todo cuando hay un menú o una lista relevante, aparecen debajo de la meta description, y el gráfico de conocimiento o knowledge graph, información encuadrada que aparece a la derecha del buscador con datos de carácter biográfico o fundacional y una imagen ilustrativa o de marca. Conseguir un gráfico de conocimiento es sumamente complicado, pero las ventajas que representaría en branding y en lead magnet son enormes.

Gráfico de conocimiento Rich Snippets

Y ahora sí, después de esta introducción, llegamos a los featured snippets, que serían la última categoría de snippets. A diferencia de los otros snippets, estos fragmentos destacados en la búsqueda, como se llaman en español, no podemos editarlos nosotros mismos. Es Google quien, mediante programación, determina qué resultado es más útil para el usuario y lo convierte en un featured snippet, con su diseño destacado.

Los featured snippets siempre responden a consultas reales de los usuarios, a preguntas como “¿qué es un..?” o ¿qué significa?. Por esa razón están relacionados con el Rank Brain, las búsquedas por voz (Siri, Cortana), el machine-learning y el modelo de web semántico, que es la tendencia actual y futura del algoritmo.

Featured Snippet Blog

Como responden a consultas, herramientas de keyword research como Answer the public pueden sernos muy valiosas para determinar cuáles son las búsquedas más frecuentes en Google para las palabras clave para las que nos interesa posicionarnos.

Visualmente, los featured snippets se componen de una cajetilla o recuadro con una descripción del término buscado extraído de una página y (aquí viene lo interesante) un link a esa web de referencia. Abajo a la derecha hay un texto que reza “Danos tu opinión”, donde puedes valorar la utilidad de ese fragmento destacado y/o enviar algún comentario o sugerencia al buscador. Por si hubiera alguna duda, eso deja a las claras que este fragmento está sujeto a cambios.

Fragmento destacado, opinión

Estoy seguro de que muchos de vosotros pensabais que estos featured snippets eran entradas de Wikipedia o definiciones de algún término (y, en verdad, así es), pero no es tan simple. También se pueden “colar” enlaces a páginas comerciales. Aquí un ejemplo:

Featured Snippet Ejemplo

Eso, por supuesto, significa una gran ventaja. Ahora lo veremos.

-¿Qué beneficios tiene aparecer en un featured snippet?

No es difícil de imaginar. Sólo por el hecho de estar en el featured snippet para una keyword te aseguras el primer puesto de esa SERP. No importa que tu posicionamiento orgánico sea peor que el de los demás competidores (en el ejemplo que he puesto, esa web rankea 7ª), o que no tengas un anuncio patrocinado de Adwords. Tú estarás en la cima. Imagínate la cantidad de veces que te harán click y lo que aumentará tu CTR.

Si esa keyword tiene un gran volumen de búsquedas, conseguirás un montón de visitas, leads y clientes.

-¿Se pueden manipular estos fragmentos destacados?

Al igual que ocurre con Google Suggest, los featured snippets en teoría no se pueden manipular para que tu web aparezca en ellos. Ahora bien, eso no quiere decir que no se puedan utilizar trucos o estrategias encaminadas a intentar ocupar esa posición preferencial. Desde luego, recibir muchos clicks sería un buen principio, pero hay más acciones y tienen que ver con el SEO On-Page, por lo que sí dependen de nosotros.

Lo primero que tienes hacer si quieres adueñarte de ese fragmento destacado es analizar la web que lo ocupa y tomar nota de:

  • Su title, description, h1 y h2, primer párrafo, estilos de texto y densidad de palabras clave. Así te asegurarás de estar respondiendo adecuadamente a la pregunta de los usuarios.
  • Luego puedes ir un poco más allá y revisar el slug de tu URL para introducir las keywords apropiadas (aquí seguramente sea conveniente utilizar las stop-words).
  • También deberías analizar el enlazado interno de tu sitio web para distribuir mejor el link juice y potenciar esta URL.

-Consejos para conseguir un featured snippet

Aunque nadie tiene la llave para conquistar la “posición cero” de Google y perpetuarse en ella, pues en todas las SERPs existe una gran volatilidad, y ésta no es una excepción, sí que podemos hablar de un tipo de contenido snippeable.

Éstos son algunos consejos que te pueden ayudar a obtener un featured snippet:

  1. Usa herramientas de keyword research que te muestren las preguntas que se hacen los usuarios, como Answer the public o Keywordtool.io.
  2. Distribuye dichas palabras clave por los lugares estratégicos de la web: title, h1, h2, primer y último párrafo, etc.
  3. Usa listas y tablas para estructurar el contenido.
  4. Mide la densidad de keywords o, más propiamente, de frases clave, porque, como es lógico, estamos hablando de keywords long-tail. Para ello te recomiendo usar la extensión de Google Chrome SEOquake.
  5. Revisa el enlazado interno de tu web para introducir estas keywords en los anchor text de algunos enlaces (sin sobreoptimizar).
  6. Haz link building con ese mismo texto ancla, pero cuidando de no descompensar tu perfil natural de enlaces.
  7. Aprovecha el atributo ALT de las imágenes para meter palabras clave (el SEO para imágenes es fundamental, pues los featured snippets se componen también de una parte visual, que además lleva un enlace a la web de origen).
  8. No te olvides de los microformatos y datos estructurados Schema y JSON, donde puedes orientar al buscador sobre el contenido de tu sitio y las palabras clave que quieres posicionar.
  9. Utiliza las LSI keywords, sinónimos y términos relacionados, para enriquecer el valor semántico de tu artículo.

Por último, si no quieres que tu web aparezca como featured snippet (aunque no se me ocurre ninguna buena razón para no quererlo), puedes inhabilitar estos fragmentos destacados insertando la etiqueta <meta name=”googlebot” content=”nosnippet”>  en el head de tu página.

Espero que esta información te haya resultado útil.


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER