25 septiembre, 2015
Esta nota fue publicada originalmente en la edición 290 de revista USERS. Podes suscribirte a la versión impresa y/o digital aquí.
Por Alejandro Franco
Obtener un puesto número uno en un listado de resultados de Google representa dinero, prestigio y tráfico. Nos visitan más personas, lo que redunda en mayor cantidad de lectores de nuestras columnas, mayor cantidad de consultas/ventas de los artículos que ofrecemos y mayores ingresos por publicidad en el caso que estemos suscriptos a un sistema de avisos pagos online (como es el caso de Google AdSense). Y si la situación de liderazgo persiste, nos transformaremos en una especie de rockstars: obtendremos prestigio, seguidores, seremos considerados una fuente de información originaria y confiable. Nuestros artículos serán reproducidos en blogs, redes sociales y otros medios ubicados más allá del ciberespacio.
Pero obtener un primer puesto en resultados no es fruto del azar o de la buena ventura, sino que se trata del producto de un esfuerzo coordinado. Hay muchos factores que influyen en el posicionamiento final de un sitio, internos y externos, los cuales iremos desentrañando a lo largo de los próximos artículos. Pero el más importante de ellos es contar con una página web optimizada. Si queremos ganar una carrera de Fórmula 1, no podemos competir con un coche de calle; precisamos especializarlo y tunearlo, de manera que quede listo para librar batalla.
Optimizar un sitio web no es necesariamente una tarea críptica –reservada para un puñado de iluminados– sino un proceso guiado por el sentido común. Y si nos dedicamos al diseño web, con el tiempo iremos descubriendo patrones, generaremos nuestras propias recetas y nos haremos con los gajes del oficio. El posicionamiento web no es una materia que se enseñe en las universidades, sino un oficio aprendido sobre la práctica, el cual se destila de los comunicados de Google, las opiniones de las comunidades de webmasters y el escaso material escrito por especialistas que figura en la web (los cuales lo retacean mucho, ya que viven de ofrecer sus costosos servicios al respecto). Para colmo, todo esto es de una caducidad impresionantemente corta, ya que Google –el motor de búsqueda más popular y extendido del mundo– cambia sus reglas cada 3/6 meses, y los webmasters vamos tras sus pasos, no delante de ellos.
Lenguajes actualizados
Sea HTML, ASP, PHP… el lenguaje que fuere, siempre es mejor utilizar las últimas versiones. Las mismas vienen con nuevas herramientas que mejoran el aspecto, las prestaciones y el rendimiento (como la inclusión de reproducción multimedia en HTML 5). Las sentencias son más cortas y la compatibilidad con las últimas versiones de los navegadores es mayor.
Diseñar páginas web livianas
Un sitio web se compone de una página principal (index) y las páginas accesorias, las cuales pueden dividirse en índices de sección y artículos en sí. Procuremos que cada una de ellas no exceda el peso de 100 Kb. Mayor peso implica mayor tiempo de carga (algo a evitar, ya que los navegantes son impacientes y quieren la información en su pantalla ya), e incluso nos puede traer problemas con los buscadores: los robots esquivan la memorización de archivos tan grandes. Si deseamos publicar una nota extensa, más vale que la dividamos en un par de capítulos.
Los 100 Kb de los que hablamos son de código HTML puro. No consideramos las fotos, sonidos, animaciones Flash, etc., insertas en la página, sino de la página HTML en sí. Existen herramientas freeware –como Absolute HTML Compressor (www.alentum.com/ahc/)–, las cuales “comprimen” el código y bajan el peso de las páginas. ¿Cómo lo hacen? Es fácil: quitan los espacios en blanco entre sentencias, unifican líneas de código, remueven caracteres superfluos, limpian de comentarios el código, optimizan las líneas de encabezado (donde figura la versión del lenguaje de programación web utilizado), etc.
Depurar de redundancias el código
Esto resulta patente en los sitios web desarrollados con programas de diseño WYSIWYG (“lo que ve es lo que obtiene”; software de diseño visual como Dreamweaver). El programa Dreamweaver es una herramienta pensada para la productividad, para que un usuario escriba toneladas de páginas sin conocer siquiera una línea de código HTML. Pero ese grado de automatización tiene un precio, y es que a veces el código generado es desprolijo y redundante. Ello suele suceder en el caso de ediciones sucesivas de un texto/formato (léase, hemos reformado una página, cambiando la estructura de párrafos, estilos, tablas, etc.), lo cual no siempre es bien interpretado por el software. Visualmente se verá tal como lo imaginamos, pero el código fuente tendrá duplicaciones, saltos y hasta rezagos del estilo anterior, todo lo cual se corrige con una revisión ocular de la fuente. En sí no es una tarea atroz, pero requiere atención y paciencia.
Organización jerárquica
Hay que organizar el texto en títulos, encabezados secundarios y párrafos. El código HTML prevé semejante jerarquización mediante el uso de etiquetas (<H1>, <H2>,<H3>, <p>), las cuales sirven para asignar prioridades y grados de importancia.
Lo primero que lee el robot de Google son las etiquetas H1; de allí deduce el tema de que trata el artículo, y pasa a leer los subtítulos secundarios (H2, H3, etc) antes de seguir con los párrafos; y en estos últimos, le da vital importancia a las palabras destacadas con negritas y/o cursivas. De ese modo el robot arma un resumen (a grandes rasgos) de los temas tratados en la página, y manda dicho paquete a la base central en donde comienza a ser evaluada y “rankeada”.
Utilizar etiquetas META
Las etiquetas META (o metatags) son instrucciones especiales de código HTML, las cuales van en las primeras líneas del código de la página. Su función es dar un pantallazo informativo (a los navegadores y a los robots visitantes) de las características de la página: versión del lenguaje utilizado, autor de la página, juego de caracteres utilizado (para interpretar acentos o letras especiales), etc. Entre los metatags hay cuatro instrucciones que hacen a nuestro proceso de optimización web:
* Meta name =“description”: es la etiqueta meta en donde va un texto descriptivo del contenido de la página (crítica de la película “Lo que el viento se llevó”).
* Meta name=”keywords”: es la etiqueta en donde van las palabras claves (separadas con comas), las cuales serán usadas para hallar a nuestra página web dentro del listado de resultados (Clark Gable, películas western, cine clásico, películas ganadoras del Oscar, etc.).
* Meta name=”robots”: aquí se detalla si queremos que la página sea visitada y memorizada por los robots, y si queremos que sigan explorando nuestro sitio (la sentencia usual es all, index, follow). Existen ocasiones especiales en donde no queremos que la página sea explorada: por ejemplo, secciones privadas del sitio (reservadas a usuarios registrados o que contienen información sensible y que no debe ser de exposición pública), en donde la orden noindex informará al robot que pase de largo sin leer siquiera una línea de código.
* Meta name=”revisit”: aquí va la cantidad de días que deberían transcurrir entre cada visita del robot del buscador. Un valor de 7 indicaría que nuestra web tiene actualizaciones semanales de contenido y por ello pedimos que sea nuevamente explorada cada siete días; 30 indicaría que nuestra página tiene un regimen único de actualizaciones mensuales.
Ciertamente las etiquetas META han bajado su importancia con el correr de los años en el asunto de posicionar un sitio web. Google se ha dado cuenta de ciertos abusos (exceso de palabras clave, textos redundantes y repetitivos) por parte de webmasters inescrupulosos que deseaban a toda costa posicionar una página web en un determinado rango de keywords. Por eso se han añadido otros parámetros a la evaluación final de un sitio web; pero aún con todo ello, un sitio web con etiquetas META correctas, completas y respetuosas de los lineamientos de Google tiene mas probabilidades de éxito que una página web carente de ellas (como suele pasar con algunos generadores de contenido tipo WordPress, los cuales escriben el código de manera tan automática como despojada).
Las etiquetas META deben estar presentes en cada una de las páginas que conforman su sitio.
Usar hojas de estilo CSS
CSS significa “hojas de estilo en cascada”, y es una de las herramientas más poderosas de posicionamiento y diseño. Un estilo CSS se compone de un alias (para poder identificarlo) y de un listado de las características que lo componen. Por ejemplo, color de letra, color de fondo, tipo y tamaño de letra, si tiene bordes y de qué tamaño, etc. Junto a otros estilos componen un archivo de estilos, el cual está pertinentemente enlazado con cada una de las páginas que componen nuestro sitio web. De ese modo el código HTML no se vuelve extenso al reiterar tamaños, colores, características, sino que simplemente decimos que determinado párrafo va con el estilo “alfa” y el navegador se encarga de buscarlo en el archivo CSS para después aplicarlo. Las ventajas de esto son enormes: CSS permite un grado de riqueza visual que no todos los lenguajes poseen; ubica de manera centralizada los estilos de la página, de manera que retocando un par de instrucciones en el archivo CSS cambiamos la estética de todo el sitio; incrementa la velocidad de carga al alivianar el código HTML; y aumenta la compatibilidad de las páginas con los distintos navegadores y sus diferentes versiones.
Conclusión
Ahora ya disponemos de un punto de partida para comenzar a optimizar nuestro sitio web. Desde ya que faltan muchísimos detalles, porque el posicionamiento es fruto de una amalgama de factores propios y externos, pero es vital estar en control de aquellos elementos que están a nuestro alcance. Desde ya queda subrayado que un sitio web optimizado no sirve para nada si no es interesante, factor en el cual entran a jugar nuestros dones como generadores de contenidos. Pero al menos aquí damos una galería de recetas para ponernos en la ruta y acortar el trayecto hacia esa meta tan deseada: la de aparecer en los primeros puestos de resultados en Google.
En resumen
1) La velocidad lo es todo; los navegantes son impacientes y suelen partir de aquellos sitios que demoran más de 10 o 15 segundos en cargarse en pantalla.
2) Para mejorar la velocidad se precisan páginas webs livianas, de código depurado, escritos con versiones modernas de los lenguajes utilizados, aplicando estilos CSS, etc.
3) Jerarquizar los textos (en titulos, subtítulos y párrafos) y colocar etiquetas META contribuye a que los robots lean (y exploren) mejor nuestro sitio web.
