SEO para diseñadores Diseño web orientado a SEO


Escrito el 27 de Apr de 2014, a las 10:04, por Jonatan Jumbert


SEO para diseñadores

El objetivo de este artículo es el mismo que perseguí en su día cuando di la charla a mis compañeros del equipo de diseño, sentar unas bases de diseño para que el SEO no se resienta a posteriori. El objetivo es implicar al equipo de diseño para que tengan en cuenta algo llamado SEO, desconocido para muchos y no tanto para otros.


¿Qué es el SEO y que implicaciones tiene en el diseño web?

El SEO consiste en optimizar tu página web mediante una serie de técnicas para que tu página aparezca de sin coste alguno en las primeras posiciones de los buscadores, y digo sin coste, porqué mucha gente (aunque seáis incapaz de creerlo) no distingue entre los resultados pagados (SEM - Adwords, en el caso de Google) y los no pagados.

Para determinar el orden de los resultados que aparecen tras realizar una búsqueda en Google (hablaré de Google porqué tiene cerca del 95% de cuota de mercado en España, pero es aplicable al resto de buscadores como Bing, Yahoo, Yandex, etc.), se realizan una serie de cálculos, basados en cientos de factores (cerca de 300), asignando una posición para cada página web y término de búsqueda.

Muchos de estos 300 factores afectan al diseño de la página web y es por ello que el equipo de diseño debe tomar consciencia de lo importante que es hacer las cosas bien desde un buen principio para en el futuro posicionar lo más arriba posible.


Títulos y encabezados

Google, al igual que el resto de buscadores, distinguen hasta 6 tipos de encabezados (títulos, titulares, headings). En código HTML se representan con <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

Estas etiquetas son muy importantes a nivel SEO, puesto que su función es la de contener un título que resuma el contenido que aparecerá a continuación. Así, Google, puede hacerse a la idea de que encontrará en esa página. No se acostumbra a usar todos los encabezados, pero a nivel de diseño es interesante que se planteen los diferentes estilos/formatos para los diferentes encabezados y mantener esta coherencia en todas las páginas. Siendo el <h1> el más importante y <h6> el titular de menor importancia.

Hay que entender el sistema de encabezados como el índice de un libro. Dónde <h1> sería el título del libro (sólo puede haber un <h1> por página), <h2> serían los capítulos, <h3> los temas que se tratan en los capítulos, <h4> subtemas de un tema...

¿Qué hay que tener en cuenta?

  1. Todas las páginas tienen que tener un <h1>. Todas las páginas tienen que tener un título.
  2. La página principal también debe tener un título.
  3. Evitar en la medida de lo posible los títulos con imagen.

Recomendaciones para el equipo de diseño

Cuando se implemente diseño para un nuevo website, crear un PSD (guía de estilo) con:

  1. El estilo necesario para los 6 tipos de encabezados (títulos) <h1>, <h2>, ... <h6>.
  2. Párrafos de texto, citas.
  3. Negritas, cursivas, subrayados.
  4. Listas
  5. Tablas

¿Qué conseguimos siguiendo estas recomendaciones?

  1. Facilitar trabajo al maquetador.
  2. Coherencia de estilos para toda la web.
  3. Tener una plantilla básica para que los content managers puedan escribir sin depender del diseño y pensando en SEO.

Diseño adaptativo, responsive design

El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

O lo que vendría a ser lo mismo... Una misma página web se ve bien en diferentes dispositivos (desktop, tablet, mobile, ...)

Cantidad de dispositivos móviles que se debe adaptar tu diseño web

Datos reveladores del porqué de esta tendencia:

  1. Habrán más dispositivos móviles conectados a Internet que personas a finales de 2014. Leer noticia.
  2. A finales de 2013 un 31% del tráfico web proviene de dispositivos móviles. Fuente.
  3. Perdemos usuarios al no tener el sitio adaptado a dispositivos móviles.
  4. Aparecemos más abajo en las SERP de dispositivos móviles si no tenemos el sitio adaptado.

¿Qué recomendariamos al equipo de diseño en términos de diseño responsive?

Escenario ideal sería hacer 3 diseños, empezando por la versión móvil, luego diseñar para tablets y finalmente para desktop. Evidentemente el proceso de conceptualización de la web y el diseño llevarán más tiempo, pero luego todo son ventajas.

  1. Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, PCs, tabletas, teléfonos móviles y esto hace que el impacto en el usuario sea mucho mayor y de mejor calidad.
  2. Se reducen los costes brutalmente, nada de realizar mantenimientos especializados o versiones diferentes.
  3. La usabilidad es infinitamente mayor, si desde cualquier teléfono puedo USAR tu web, tendré muchísimas más posibilidades de ser usuario y tú muchas más posibilidades de que convierta.
  4. En cuanto a la optimización de motores de búsqueda, también se ve notoriamente mejorada con tan sólo una URL en los resultados de búsqueda.

Está claro que para el equipo de diseño llevará más tiempo/esfuerzo realizar diferentes versiones de sus PSDs pero las implicaciones directas son claras:

Una web de más calidad, una mejora de la experiencia del usuario ya que puede acceder al mismo contenido desde diferentes dispositivos, una mejora SEO ya que evitamos contenidos duplicados y reducimos la tasa de rebote porqué ahora el contenido se visualiza bien independientemente de la resolución de pantalla y todo ello conlleva una mejoría en nuestra tasa de conversión con lo que incrementan las ventas.

¿Qué tal si empezamos a pensar en Diseño Responsive?

Tipografías y contenidos rastreables

Antes de entrar en materia dos tips para los diseñadores (muchos no son conscientes):

  1. No todos los navegadores muestran igual las tipografías.
  2. No siempre disponemos de la tipografía para formato web.

En base a las dos premisas anteriores, lo que suele pasar es que EL CLIENTE quiere que en su Internet Explorer 7 (por ser alarmistas) los textos se vean de la misma manera que en los maravillosos diseños qué el aprobó.

Cómo eso a veces no es posible, la solución que suelen tomar los maquetadores es convertir ese texto en una imagen, con lo que a nivel SEO perdemos una fuerza brutal (podemos darle pistas a Google con el nombre del fichero y haciendo uso del atributo alt, pero en ningún caso equipara el potencial de un texto plano).


Equilibrio entre velocidad de carga y diseño

Implementar diseños super-fashion-molones conlleva muchas líneas de código. Muchos ficheros Javascripts para hacer esas animaciones tan extraordinarias o esos sliders que se mueven a velocidad de crucero. Y como ya sabemos, contra más pese/ocupe una web, más lento carga. Contra más lenta carga una web peor posiciona en los buscadores.

Y como ya sabemos, contra más pese/ocupe (Kb o Mb) una web, más lento carga. Contra más lenta carga una web peor posiciona en los buscadores.

Google considera una web rápida, aquella que carga en menos de 3 segundos.

Así que hay ser conscientes y transmitir estas inquietudes a los diseñadores para que lo tengan en cuenta e intenten realizar diseños "más sencillos" para aquellos proyectos que se orientan a SEO.

Entre el SEO y el diseñador hay que encontrar el equilibrio perfecto entre un diseño web fresco y la velocidad de carga.
Hay que encontrar el equilibrio entre el diseño y la velocidad de carga

Uff, parece que el artículo se está alargando más de lo esperado y aún quedan temas importantes a tratar como:

  • Páginas de error 404
  • Redes sociales
  • Técnicas de Link Baiting
  • CRO y UX
  • Errores comunes

Así que si os ha gustado el artículo y queréis seguir leyendo el resto de puntos, tenéis aquí la presentación que realicé en su día dónde están todos los puntos tratados:



Importante: ¿Quieres descargar esta presentación totalmente GRATIS?

Para descargarla simplemente debes compartir el artículo en alguna de estas redes sociales y la descarga aparecerá en menos de 3 segundos.

¿Buscas algo en concreto?

Valora el artículo: SEO para diseñadores:

0 / 5 (0 votos)

Sobre el autor

Sobre el autor, Jonatan JumbertJonatan Jumbert

Manager de proyectos digitales y consultor SEO en Lavinia Interactiva. Amante de la Analítica web y del Marketing digital.

Ingeniero Técnico Informático de gestión y postgraduado en Marketing y comunicación digital.

Temas sobre los que escribo:


0 comentarios en SEO para diseñadores