SEO para diseñadores web

por Natalia Ventre el 20/05/2013 ・ podés leerlo en 8 minutos ・

SEO (optimización para motores de búsquedas) son técnicas para mejorar la visibilidad de un sitio web en la página de resultados orgánicos (no pagos) de los motores de búsqueda. Estas técnicas incluyen la estrategia de contenido, la optimización del código y la promoción del sitio para conseguir enlaces.

Las técnicas se clasifican en:

  • white hat (sombrero blanco): técnicas aprobadas por los motores de búsqueda.
  • black hat (sombrero negro): técnicas penalizadas por los motores de búsqueda.

Como diseñador web podés optimizar el código, usando técnicas white hat y evitando técnicas black hat.

Técnicas SEO white hat

Metaetiquetas

Los títulos y la descripción deberían ser una descripción fiel y concisa del contenido de la página y que no se tienen que repetir en todo el sitio o en varias páginas.

<head>
	<title>Ejemplo de Título</title>
	<meta name="description" content="Ejemplo de descripción. Generalmente se muestra en la página de resultados de búsqueda.">
</head>

Como diseñador web podés indicarle al cliente qué campos del CMS (sistema de administración de contenido) vas a mostrar como título y descripción1, o instalar un plugin para mayor flexibilidad.

Las redes sociales son un aspecto importante del SEO y agregando las metiquetas de Open Graph Protocol y Twitter Cards podés controlar los fragmentos que muestran Facebook y Twitter respectivamente cuando se comparte un enlace. Google+ usa Open Graph Protocol o Schema.org.

Estructura de las URL

Podés usar caracteres especiales en URLs, pero la práctica más aceptada es que las URLs sean en minúsculas, sin caracteres especiales (sin Ñs, sin espacios). En el canal de YouTube de GoogleWebmasterHelp hay respuestas a varias preguntas sobre SEO, en Do you recommend using special characters in URLs? y Underscores vs. dashes in URLs hay más información.

Para evitar contenido duplicado podés hacer un redireccionamiento 301 y establecer URLs canónicas.

Suprimir la “www.” al inicio de las URLs en el .htaaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

Por para ej. listados de productos que pueden estar ordenados por distintos criterios (alfabético, por precio) podés indicar la página canónica (versión preferida)2.

<head>
	<link rel="canonical" href="http://www.example.com/product.php?item=camisas-hombre"/>
</head>

Para indicar la relación entre elementos paginados (por ej. un artículo dividido en varias páginas o un listado de productos que abarca varias páginas), usás rel=”next” y rel=”prev”.

Ej. para la página 2 de un artículo divido en 3 páginas:

<head>
  <link rel="prev" href="http://www.example.com/article?story=abc&page=1" />
  <link rel="next" href="http://www.example.com/article?story=abc&page=3" />
</head>

Sitemap

A través de las herramientas para webmasters podés enviar un mapa del sitio para informar a Google de todas las páginas de un sitio, incluyendo URLs que podrían no ser detectadas en los procesos de rastreo.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.example.com/</loc>
      <lastmod>2013-02-13</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.5</priority>
   </url>
</urlset>

Para generar un sitemap, podés usar un plugin o el propio sistema de plantillas del CMS para generar un archivo XML. lastmod (fecha de la última actualización), changefreq (frecuencia de actualización) y priority (prioridad) son opcionales.

Optimización de imágenes

Es recomendable que los nombres de archivo sean cortos y descriptivos, con guiones (‑) para separar palabras, pero en un sitio web grande, generalmente se nombran automáticamente las imágenes y en esos casos es importante que le des algún contexto a las imágenes, por ej. usando etiquetas.

Como diseñador web le tenés que dar al cliente herramientas para que siempre que suba una imagen pueda ingresar un atributo alt. En mi artículo anterior Accesibilidad para diseñadores web ya había mencionado la importancia de los mismos.

Campo Matrix en ExpressionEngine
En ExpressionEngine podés usar el add-on Matrix y en Statamic el tipo de campo Grid para poder agregar un atributo alt a cada imagen subida.

Sobre todo si el contenido principal de tu sitio son imágenes, podés hacer un sitemap de imágenes para darle a Google más información.

<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
 <url>
   <loc>http://example.com/galeria.html</loc>
   <image:image>
     <image:loc>http://example.com/images/una-foto.jpg</image:loc>
     <image:title>Título de la Imagen</image:title>
     <image:caption>Pie de foto de la imagen.</image:caption>
   </image:image>
   <image:image>
     <image:loc>http://example.com/images/otra-foto.jpg</image:loc>
     <image:title>Otro título</image:title>
   </image:image>
 </url>
</urlset>

También podés hacer un sitemap para videos en donde podés incluir el título, descripción, la URL de la página de reproducción, la URL de miniatura, etc.

Datos estructurados

Google genera fragmentos enriquecidos de contenido marcado con microdatos (schema.org) y otros formatos (microformatos, etc.) para personas, eventos, opiniones, productos, recetas y rutas de navegación. En Does the use of schema.org markup create a ranking benefit? Matt Cutts explica que usar Schema.org es recomenendable aunque directamente no te asegura un mejor posicionamiento.

Ej. de fragmentos enriquecidos: opiniones (microdatos)

<div itemscope itemtype="http://data-vocabulary.org/Review">
  <span itemprop="itemreviewed">El Bar de la Esquina</span>
  por <span itemprop="reviewer">Juan Pérez</span> el
  <time itemprop="dtreviewed" datetime="2013-02-13">13 Feb</time>.
  <span itemprop="summary">¡El mejor bar que conozco!</span>
  <span itemprop="description">El Bar de la Esquina hace una pizza riquísima...</span>
  Puntaje: <span itemprop="rating">4.5</span>
</div>

Para poder marcar los datos tenés que definir campos personalizados en el CMS y crear las plantillas necesarias para cada tipo de dato.

La autoría se muestra en la página de resultados de búsqueda (de manera similar a los datos estructurados) y se especula que el posicionamiento de autor va a ser un cambio más radical que la actualización Panda y Pingüino.

Autoría en un resultado de búsqueda
Autoría en un resultado de búsqueda de Google.

Sobre todo para un blog multi-autor, como diseñador web podés agregar las etiquetas necesarias en la plantilla con un condicional, para dejarlo vacío si el autor no tiene aún perfil en Google+.

Contenido fresco

El contenido fresco (contenido nuevo o actualizado) es uno de las tantas señales que influye el posicionamiento. Por ese motivo, siempre es recomendable que desarrolles sitios basados en CMSs inclusive sitios web estilo folleto, para que el cliente pueda actualizar números de teléfono, horarios de oficina, sucursales y cualquier otra información útil para el visitante. Hay blogs sobre SEO que hacen curiosos experimentos de posicionamiento, pero Matt pone este tema en contexto en Is freshness an important signal for all sites?

Velocidad

La velocidad mejora la experiencia del usuario, reduce los costos operativos y además es uno de los tantos factores que Google usa para el posicionamiento en los resultados de búsqueda.

Si incorporás en tu flujo de trabajo herramientas como Page Speed o YSlow podés evaluar y mejorar la performance con sólo seguir consejos como por ej.: concatenar y minimizar archivos CSS y JavaScript, usar sprites CSS, optimizar imágenes, etc.

Técnicas SEO black hat

Nadie en su sano juicio hace black hat SEO porque no es una estrategia que funcione a largo plazo para tener un negocio legítimo en la web, pero es importante conocer en qué consisten estas técnicas para evitar problemas.

Texto y enlaces escondidos

No usar CSS para hacer el texto del mismo color que el fondo ni para que los enlaces no se distingan del texto normal.

Páginas puerta

Las páginas de resultados de búsqueda u otras páginas similares no son útiles para el visitante proveniente de un motor de búsqueda y por lo tanto conviene restringir el acceso a los robots de motores de búsqueda con un archivo robots.txt:

User-agent: *
Disallow: /resultados-de-busqueda/

Spam en comentarios

Para combatir el spam generado por los usuarios usá rel=”nofollow” para no transferirles PageRank.

Recursos

GoogleWebmasterHelp en YoutTube es un buen recurso para aprender sobre SEO y específicamente sobre el diseño y desarrollo del sitio hay varios videos cortos:

Conclusiones

Hay clientes que saben mucho de su negocio y nada sobre cómo funciona un sitio web, y cuando te contratan como diseñador web, está bueno que vos sí lo sepas. No se trata de agregar SEO como servicio o de hacer tareas ajenas a tu profesión. Se trata de asesorar al cliente y cuando le presentás el diseño, tener argumentos para justificar tus decisiones.


  1. Por ej. para un blog basado en WordPress sería razonable usar el título de la entrada como título de la página y el extracto como meta descripción.

  2. En algunos casos es difícil determinar automáticamente cuál es la página canónica, como último recurso se puede agregar un campo personalizado para ingresarla manualmente.