El SEO para desarrolladores web es uno de los factores que demuestra el nivel de hiperconexión profesional que requiere nuestra era digital, donde cada especialista que interviene en el proceso de creación debe conocer aspectos clave de campos que, aun siendo ajenos al suyo, se verán influidos según cómo oriente su labor. La tarea de preservar y optimizar el SEO afecta a todos los perfiles involucrados en la creación digital entre los que tú, como diseñador web, no solo te encuentras sino que juegas el papel fundamental que comprende los pilares de una plataforma web.
El tratamiento que hagas de los aspectos del SEO durante la creación de tu producto determinará en buena parte el comportamiento que los motores de búsqueda tendrán respecto a él, permitiendo un buen posicionamiento orgánico fruto de un código rico y un entorno funcional, o por el contrario una indexación pobre que se arrastrará durante años.
¿Tú no haces SEO, sino webs? Quizás. Pero en la industria actual todos los perfiles involucrados en la creación, mantenimiento y optimización web estamos conectados y llamados a conocer aspectos fundamentales de los demás actores. ¿Piensas que los expertos en SEO no conocen detalles de programación, estilizado o accesibilidad relativos a su entorno? Este es un barco en el que estamos todos metidos… y sólo avanza si remamos juntos.
Un perfil de desarrollador web debe aplicar unas técnicas de trabajo que supongan un impulso del posicionamiento de una plataforma, y no un trastorno. Aquí te dejo un buen resumen de ellas:
Optimiza y haz accesible tu arquitectura web
- Lo primero que registran los rastreadores de motores de búsqueda (en adelante bots) es la URL de una página, por lo que su formulación es esencial de cara a la indexación.
- Acorta la URL en su conjunto: un exceso de profundidad en una estructura no solo confunde y dificulta que el usuario la comprenda y pueda memorizarla, sino que el peso de indexación de cada palabra contenida en la URL se diluye exponencialmente cuanto más a la derecha se encuentre. Esto se acentúa en los casos de URL’s de gran longitud:
no -> www.mitienda.es/productos/hogar/menaje/cuberterias/deluxe/vajilla-premium.html sí -> www.mitienda.es/menaje/vajilla-premium.html
- Es recomendable la presencia de palabras clave en una URL, pero evita repetirlas en algún punto de la misma ya que podría considerarse spam:
no -> www.mitienda.es/productos/cuberteria/cuberteria-premium.html sí -> www.mitienda.es/productos/cuberteria/vajilla-premium.html
- No utilices mayúsculas, ya que los bots registran las URL’s de forma case-sensitive: la norma a este efecto es mantener la URL completa en minúsculas:
no -> www.mitienda.es/Productos/cuberterias/VajillaPremium.html sí -> www.mitienda.es/productos/cuberterias/vajilla-premium.html
Declara URL’s amigables
- Formula un nombre conciso, descriptible y comprensible para cada página, incluyendo en la medida de lo posible las palabras clave de la misma:
no -> www.mitienda.es/version.online/productos/tipo3/mostrar.html sí -> www.mitienda.es/productos/disfraz-mariposa-adulto.html
- Separa cada palabra con un guión medio, no con guiones bajos.
- Evita el uso de parámetros de tipo texto (URL’s dinámicas), siempre que sea posible:
no -> www.mitienda.es/productos?id=215&orden=asc sí -> www.mitienda.es/productos/vajilla-premium.html
- Evita las palabras vacías o stop words, que no aportan significado ni son tenidas en cuenta para la indexación:
no -> www.mitienda.es/productos-para-el-cuidado-personal/esponja.html sí -> www.mitienda.es/productos-cuidado-personal/esponja.html
- Configura convenientemente el archivo .htaccess para evitar que una página sea percibida como dos páginas independientes según si se teclean, o no, las www. previo al nombre del dominio. Este snippet dirigirá cada visita a la versión con las www. de tu web, incluso si no las han tecleado en el navegador, e igualmente es configurable de forma inversa:
RewriteEngine On RewriteCond %{HTTP_HOST} !^www\. RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]
- De igual forma, el archivo .htaccess permite ocultar las extensiones de la páginas de cara al usuario, algo obligado si trabajas con PHP y recomendable para las páginas HTML. Esta configuración no solo embellecerá una URL evitando la necesidad de incluir su extensión .html al final, sino que evitará que una misma página sufra una duplicidad en su indexado por esta doble forma de accederla:
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.html [NC,L]
Identifica adecuadamente la página
- Utiliza un <title> de menos de 60 caracteres que contenga las palabras clave al principio. Separa contenidos de diferente naturaleza mediante la barra ( | ) e incluye cuando sea necesario menciones orientadas a contextos estratégicos del público objetivo, como por ejemplo su demografía:
Cortinas de seda natural de orugas | Mi Tienda de Menaje | Madrid - Para la meta etiqueta de descripción formula un texto de máximo 160 caracteres que represente de forma sólida el contenido que trata la página. Los bots comparan esta información con los títulos y subtitulos de la misma para evaluar el nivel de coincidencia entre ambos y determinar cuándo realmente una página está enfocada a un tema en particular:
<meta name="description” content=”Descripción corta y representativa del contenido, con 160 caracteres máximo”/>
- La etiqueta canonical evita que los buscadores indexen erróneamente una misma página varias veces bajo diferentes URL’s. Esta propiedad es de gran utilidad en casos como el de una tienda online con un mismo producto que es accesible a través de dos rutas diferentes, o cuando estemos frente a una URL dinámica:
url dinamica 1 -> www.mitienda.es/productos/vajilla?orden=asc&color=blanco&precio=des url dinamica 2 -> www.mitienda.es/productos/vajilla?color=blanco&precio=des&categoria=deluxe etiqueta de esta página ->
- ¿Estás creando un documento con relación directa entre otras URL’s? Indica a través de una etiqueta de relacional la página que represente la continuación de la actual ( rel=”next” ) y la que sea anterior a la actual ( rel=”prev” ):
- Si la plataforma es multi lenguaje y se orienta a diferentes localizaciones demográficas, indica no sólo el idioma se encuentra cada documento mediante la etiqueta principal <html lang=”es”> , sino añadiendo además una etiqueta alternate por cada equivalente traducido que re dirigirá al usuario que realiza la búsqueda a la versión que corresponda con su idioma (a través del sitemap es igualmente posible):
Programa correctamente cada documento
- Conoce a fondo todas las etiquetas HTML5 y las relaciones entre las mismas. Aprovecha el potencial semántico y estructural de los etiquetados actuales para facilitar a los bots la comprensión de tu contenido, estimulando un mejor posicionamiento natural fruto de un HTML que se describe por sí mismo.
- En contra de lo que se piensa, Google no penaliza HTML inválido (es decir, un documento que no cumpla el estándar) pero sí indexa con mayor facilidad y eficiencia aquellos documentos con una lógica estructural y semántica. Omitir los aspectos fundamentales de etiquetado puede desembocar en la incapacidad por parte de los bots para comprender, y por tanto indexar, su contenido.
- El contenido que no existe dentro del propio documento (como aquel que se encuentra de forma externa a la página y que es cargado a través de AJAX) no es indexado. En casos como el de ampliación de información oculta mediante ventanas modales, cargas asíncronas u otras técnicas es preferible ocultar el contenido en cuestión mediante CSS y mostrarlo cuando sea solicitado por el usuario.
- Existe un debate histórico en relación a si los bots de Google omiten aquellos contenidos ocultados mediante CSS, o si ocultar contenidos en un documento deriva en una penalización del buscador. Ninguna de las dos es cierta en la actualidad: Google ha confirmado en un vídeo que los contenidos escondidos a traves de CSS son igualmente indexados, pero con un menor peso de indexación que el resto del conjunto lo que sugiere no contener en ellos palabras clave. En ningún caso supondría una penalización si no están orientados a falsear los resultados que los bots extraen de un site.
- Optimiza la semántica de tu documento a través de los microdatos, una especificación HTML que permite anidar metadada en el contenido de una página web y que enriquece sensiblemente la estructura de datos. De esta forma tu documento será reconocido y analizado por los bots de una forma mucho más clara e inmediata. Puedes conocerlos a fondo en Schema.org, y una vez hayas configurado tu propio esquema de datos, validarlo con la herramienta de testeo de datos de Google.
- Haz uso de los fragmentos enriquecidos de Google (rich snippets) que permitirán que el resultado de tu web se muestre en el buscador con información adicional de alto valor diferenciador: enlaces relacionados1, la valoración de un producto con, además, algunos detalles adicionales2 o enlaces de eventos dotados de fechas y localizaciones3 son algunas de las posibilidades a este efecto:
Regula el comportamiento de los bots
- Incluye un mapa web ( sitemap.xml ) que describa tu estructura web y establezca cómo deben comportarse los bots de cara a tu indexación. La frecuencia con la que deben visitar la web de nuevo para actualizar sus registros, la prioridad de cada página en relación con el resto del sitio o las versiones alternativas de una página (como, por ejemplo, las plataformas multi lenguaje) son algunas de las indicaciones que este archivo permite transmitirles.
- Restringe el acceso a los bots en aquellas páginas que no deseas que sean indexadas mediante la meta etiqueta robots, que permite combinar en su contenido los valores noindex (no indexará la página) y/o nofollow (no indexará los enlaces contenidos):
- Restringe la indexación de enlaces improcedentes mediante el atributo rel:
Iniciar sesión
- Configura un protocolo de exclusión de robots a través del archivo robots.txt que posicionado en el directorio raíz del site evitará que los bots indexen directorios, archivos o extensiones del conjunto de la web, pero hazlo con mesura ya que un exceso de restricción derivará en una penalización. En este ejemplo se crea una lista de directorios restringidos para todos los bots (la propiedad User-agent puede especificar a cuál de ellos en particular afecta, o a todos mediante un asterisco) así como una restricción de todos los archivos bajo ese dominio con extensión .ppt:
User-agent: * Disallow: /cgi-bin/ Disallow: /images/ Disallow: /tmp/ Disallow: /private/ Disallow: *.ppt$
Optimiza los tiempos de carga
- Prepara las imágenes de forma que estén optimizadas para el entorno web, y siempre utiliza un compresor de imágenes como paso último previo a publicarlas. Esta compresión no genera pérdida de calidad, y en su defecto puede reducir hasta un 60% del peso original de cada archivo.
- En plataformas orientadas a un público internacional, plantea utilizar un servicio de red de entrega de contenidos (CDN en ingés, Content Delivey Network) que se encargará de servir el contenido desde una localización que dependerá de la posición geográfica en la que cada visitante acceda a tu web. Gracias a la cercanía con el usuario, la velocidad de descarga aumenta.
- Utiliza el atributo srcset en tus imágenes para que sean servidas en función de qué densidad del píxel y tamaño físico tiene la pantalla del dispositivo de acceso. Podrás asociar a cada rango de medidas o densidades de píxel su correspondiente imagen, separando cada escalado por una coma. En este caso serviríamos la imagen original a navegadores que no soportan el atributo srcset, mientras que diferenciaríamos cuatro densidades de píxel asociando una imagen específica para cada una de ellas:
- Asegúrate de que todos los archivos CSS y JS que incluyes en tu página se encuentran minificados.
- Evita el uso de plugins pesados, y más concretamente aquellos que realizan una consulta externa a tiempo real. Por ejemplo, los plugins que importan el número de interacciones en una red social (como los likes de Facebook) suponen un incremento sensible de los tiempos de carga.
- Los recursos de importación externa como las fuentes de Google bloquean la carga de página hasta que han sido recibidos, úsalos con moderación. Importa los estrictamente necesarios y minimiza el tiempo de bloqueo de la carga incluyéndolos en el <head> de la web como un <link> , y no como un @import de CSS.
- Desarrolla tu código manteniendo el principio universal de reusabilidad: formula CSS y Javascript reutilizable y optimizado. Quizás te interese leer la entrada en la que se tratan los principios universales de desarrollo de software aplicados a CSS.
- Comprime tu web en gzip, una forma sencilla de almacenar y servir tus archivos en un fichero .zip que ahorra peso de descarga y por tanto tiempo de carga. En estos casos el usuario se descargaría un único fichero comprimido .zip al acceder a tu página, y el navegador lo descomprimiría previo a mostrarla. Unas líneas adicionales en tu .htaccess dejarán este aspecto cubierto:
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
- Evita que otras páginas hagan hotlinking con tus imágenes, es decir, que tus imágenes sean enlazadas por terceros directamente desde tu página y consuman tu ancho de banda cada vez que alguien visita la suya. De nuevo es el archivo .htaccess el que evitará que sean enlazables de forma externa:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?tudominio.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]
- Si incorporas una librería completa de efectos, funcionalidades o widgets haz un aprovechamiento intensivo de la misma. En caso de estar utilizando una pequeña parte de las funcionalidades que ofrezca, opta por buscar plugins sueltos que realicen la misma función… ¿tendrías un Boing para usar su cafetera?
- Aprovecha la capacidad de almacenamiento en caché, que guarda de forma local ciertos archivos de una web y evita que sean cargados de nuevo en posteriores visitas (de ahí que la primera vez que se visita una página el tiempo de carga sea superior). Esto es configurable en el archivo .htaccess , permitiendo asociar diferentes períodos de expiración para cada recurso cacheado:
## EXPIRES CACHING ##
ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" ## EXPIRES CACHING ##
Conclusión
Como ves, el perfil del diseñador web juega un papel técnico que se hace fundamental de cara al posicionamiento web. Un papel para el que no hace falta dominar el famoso algoritmo de Google (sí, para mi también es una nube difusa que prefiero mantener lejos) y que se reduce a conocer y adoptar unas buenas prácticas a este efecto.
De esta forma, los productos que desarrollemos serán SEO-friendly desde su base y establecerán una diferenciación cualitativa que, a la vez que favorece el acceso y comprensión de nuestro producto de cara a su indexación, no elude que son las personas el objetivo al que debemos orientarnos, no los bots.