Internet no para de evolucionar en todos los sentidos, incluso en su tecnología. Hay cosas que se van poniendo de moda y luego, poco a poco, se van dejando de lado, otras en cambio llegan con suficiente fuerza como para que todos sepamos que marcan el "camino a seguir".
El "Responsive Design" o en español "Diseño adaptativo", es una de estas últimas. Un sistema basado en los estándares web actuales que permite que nuestras webs se adapten a la pantalla del usuario que está viéndolas. El Responsive Design se ha puesto muy de moda con el auge de la navegación movil, pero va mucho más allá, se trata de webs con diseños inteligentes (smart que dirían los ingleses) que facilitan la usabilidad de las webs en funcion de quien las observa.
Pero el Responsive Design no son simples añadidos a una web, es una filosofía del desarrollo del front de la misma totalmetne distinta y que abarca tal cantidad de detalles que resulta impracticable para muchas empresas y realmente complejo para otras. Realmente yo a día de hoy no recomiendo realizar webs en Responsive Design, pues no estamos preparados para ello, pero si que podemos sacar ciertos conocimientos sobre estas aplicaciones para hacer nuestras webs seudo-adaptables y mejorar la experiencia del usuario. Quizás no hasta el nivel que los diseños responsive que vamos viendo nos marcan pero si con suficiente calidad como para que el ratio "mejoría/coste" nos merezca la pena.
La maquetación en HTML5 poco a poco va imponiendose en el desarrollo web actual. La desgracia es que como tantas otras veces estamos haciendo las cosas más por modas que por que tengan algún sentido. Así pues, nos encontramos muchas webs que están creadas en HTML5 solo porque algún cliente o jefecillo ha decidido que quiere webs en HTML5 sin dar mayores explicaciones.
El problema que estamos teniendo realmente es que aunque parezca mentira -al menos, para el que entienda un poco de todo esto- actualmente empiezan a proliferar este tipo de webs:
Webs en HTML5 hechas con dreamweaver y en tablas
Webs en HTML5 con 200 "div"
Webs en HTML5 en las que simplemente se han reemplazado los 200 divs por 200 "section"
En mi opinión aun no estamos en el momento de desarrollar en HTML5, pero queda tan poco para que lo sea que empieza a ser importante que nos tomemos todo esto en serio.
Las etiquetas Html5 solo tienen una ventaja respecto a XHTML: Son semánticas de por si... si no vamos a usar esta semántica, ¿quiere alguien decirme que coño estamos haciendo?
Hay tres grandes motivos por los que en SEO actual tiene mucho sentido preocuparse porque Google sepa quienes son los autores del contenido de nuestras páginas.
1. No ser penalizado erroneamente por Google Panda. Es decir, si nos preocupamos por conseguir que Google entienda quien ha escrito el contenido, habrá mucho menos riesgo de que al copiarnos un tercero Google asigne mal la autoría del Documento y se lo queden ellos penalizándonos a nosotros.
2. Conseguir el Rich Snippet de Autor (el resultado en google con la foto y nombre del autor) y así acaparar un mayor número de clicks (¡viva el CTR!)
3. Promocionar a nuestros redactores, haciéndolos más conocidos socialmente de forma que su autoría forme parte de nuestra marca. Las personas, por fin se están volviendo esenciales en Internet.
Dado que tiene mucho sentido conseguir que Google sepa asignar bien la autoría de los contenidos, seguidamente indicaré que pasos hay que dar para poder mejorar esta muchísimo...
Sinceramente, no creo que esto sea nuevo. ¿Como no va a leer estas etiquetas que llevan ya un tiempo existiendo? Otra cosa es el caso que les hiciese que sin duda ahora será mayor. Ya que entramos en el mundo de las etiquetas en la cabcera de una página creo que lo suyo, es conocer todas las importantes y no quedarse solo en el next y prev... Por eso, quería compartir esta lista de las que considero yo las más importantes:
Corría la noticia por Twitter este fin de semana: Google entre sus nuevos añadidos empieza a incorporar links directos a eventos que tengas definidos en tus páginas en sus propios resultados. El formato escogido es el siguiente:
Como se ve, es un cambio importante que permite a los usuarios ir directamente al evento que les interesa pero que mejor aún, llama más la atención y por tanto tendrá un mejor CTR en Google. Pero este no es el único movimiento que viene haciendo Google en cuanto al formato de sus resultados, ya empiezan a ser unos cuantos los añadidos al resultado y muchos se basan en lo mismo: los microformatos.
Los microformatos son pequeños patrones a seguir al crear la maqueta html. Utilizando bien los contenedores y usando nombres de clases establecidos se informa de contenidos concretos que siempre usan las mismas unidades de información: direcciones, opiniones, productos, eventos, noticas. Las informaciones más usuales de las páginas web tienen un microformato asociado que permite indicar exactamente que representa cada linea de nuestro contenido.
Google está haciendo un esfuerzo por adoptarlos y para ello sacó en su día la Rich Snippets Testing Tool y lo que es mejor, una documentación sobre como crear los microformatos elaborada por ellos mismos. Esto, que nació como una anécdota cada vez empieza a ser más patente en los SERPS (Search Engine Results Pages) y es hora de que todos los adoptemos. La maquetación semántica ya no basta, usemos los microformatos de una vez por todas.
Con los microformatos obtendrás (o te será más fácil obtener):
Una línea extra en tu resultado resumiendo el microformato principal:
Usando hcard o hreview añadimos una línea gris antes de la descripción de tu resultado. Esta resume los datos principales del hcard o la puntuación (con estrellas y todo) y el votante de la opinión/revisión.
Indicando la fecha de publicación:
Ayudando a Google a entender que existe una fecha en el post (con hnews o simplemente usando la clase suelta) forzamos que aparezca la fecha al principio de nuestra descripción (aunque esto también se consigue por otros medios como por el rss).
Link de resultados a eventos:
Como acabamos de ver, google ofrece/ofrecerá links directos a los eventos que se indiquen como microformatos
Pero esto seguramente no acabará aquí. Si seguimos este patrón podríamos terminar con cosas como estas (son ideas, no me toméis demasiado en serio):
hproduct mostraría también descripciones de productos de una tienda directamente. De hecho algunos agregadotes ya disponen de funcionalidades parecidas
hnews debería ayudar a clasificar mejor las noticias y los posts de un blog y por ejemplo, ofrecer sus categorías
hcard podría llegar a tener un formato de tarjeta de visita o responder mejor al posicionamiento por nombres propios de personas
hreview por el momento solo muestra la primera opinión que se encuentra en el html, pero podría llegar a desglosarse para webs de opiniones
Y a saber que más... lo importante es que ya no solo sabemos que Google entiende los microformatos, sino que empieza a ser palpable su uso.
Cuando trabajamos el SEO On Page terminaos llegando -siempre- a la conclusión de que lo mejor que podemos hacer para asegurarnos buenas posiciones es escoger una keyword concreta para cada una de las páginas únicas de nuestro site. A partir de ahí nuestro trabajo pasa por dar la autoridad suficiente a cada una de estas páginas y de optimizarlas semánticamente hacia la keyword que les hemos escogido.
Este trabajo se hace principalmente mediante 2 técnicas: enviando links internos y externos con las keywords oportunas hacia estas paginas y manipulando la semántica -densidad de keyword dirían algunos- de la propia página. Este post hablará de esta segunda parte.
En este blog ya hemos hablado de dos temas relacionados con este. Por un lado vimos los peligros de la sobreoptimización semántica y por otro en la guia de maquetación había una parte que resumía este trabajo. Pasaremos a ver que aspectos fundamentales pueden ayudarnos a optimizar semáticamente una página hacia su keyword mediante el aumento de densidad de keyword.
Después de la elección de palabras clave y la estructura web creo que la maquetación es el tercero de los puntos más importantes en el SEO. Y lo es porque esta es una de las partes menos visibles por el usuario en una web, maquetas muy distintas pueden dar lugar a webs exactamente iguales y eso históricamente ha llevado a que la mayor parte de las webs estén realmente mal maquetadas. Cómo SEOs y a sabiendas de que todo esto no es más que una competencia entre webs por ser mejor que las demás este es un punto en el que es posible e importante destacar.
En este post intentaré hacer un resumen sobre los puntos más importantes a tener en cuenta en la maquetación seo... es un post, no puedo explicarlo todo ni entrar a discutir porque una opción es mejor que otra pero espero al menos marcar el camino para aquellos que estén interesados en el tema. Empecemos...
En una correcta maquetación web los distintos elementos de una página se indican con etiquetas html que informan de que tipo de elemento es el que debe mostrarse. Así para incluir imágenes usamos la etiqueta "img", para links la "a", etc. Estas etiquetas, cuando son bien usadas, son tenidas en cuenta por los buscadores que las usan para averiguar que es lo que realmente representa cada texto de la página.
Esta forma de entender las páginas es lo que usamos en Seo OnPage para "manipular" lo que entiende el buscador sobre la página y hacerle creer que la página trata realmente sobre un término concreto (la keyword posicionada) de lo que puede entender si analiza todo el texto por igual de la página. Para ello el primer paso a dar es manipular las etiquetas "title" y "h1" que representan el nombre de la página y el titular principal de esta. Sobre el uso de estas etiquetas hay mucha documentación y posts escritos.
Yo voy a tratar el tema de los titulares de segundo y tercer nivel, que no son ni mucho menos tan importantes como los de primer nivel pero que nos ayudan a redondear un poco más la página...
Este es pequeño listado para ayudarnos a clasificar las distintas técnicas seo que existen. La clasificación se le puede antojar extraña a alguno pero tal y como yo lo veo es la mejor forma de clasificar las acciones que hacemos de cara a ver los límites de nuestra estrategia.
Esto no va a ser una descripción de como llevar a cabo todas las técnicas. Simplemente un resumen en el que tampoco vamos a hablar de técnicas Black Hat.
¿Qué es html semántico? ¿No es todo el html igual? Cuando hablamos de html semántico no nos referimos a ninguna nueva tecnología, ni siquiera aportamos ninguna regla nueva al html. Simplemente nos referimos a una página web en la que la estructura html está bien hecha, aprovechando la semántica que brinda el html, y por tanto dota por si sola a los contenidos de significado.
En las especificaciones html del W3C se nos indica una colección de etiquetas que podemos usar a la hora de generar nuestra web. Pero estas etiquetas historicamente se han usado más por la apariencia que adquirían en la pantalla de los navegadores que por su significado real. Así, la web vivió muchos años con maquetas llenas de tablas y atributos que permitían a los diseñadores y maquetadores colocar cada elemento donde les apetecía.
Más adelante, cuando el uso del css 2.1 empezó a hacerse común estas tablas pasaron a ser sustituidas por divs, un elementeo sin ningún significado semántico que solo debe usarse como bloque agrupador de otros.
El html semántico se hace posible en un tiempo en el que la información sobre el propio html y el css en los distintos navegadores ha llegado a ser tan completa que nos permite, con algo de experiencia, empezar a preocuparnos por que nuestro código use realmente las etiquetas html que aportan al contenido el significado real que tienen. En una página con html semántico las tablas solo tienen sentido para mostrar datos tabulados, los divs solo se usan como bloques contenedores como pueden ser la cabecera o pie de la página, la barra lateral, etc... El resto de elementos deben incluirse con las etiquetas html que los representan: titulares, parrafos, listas, citas, estilos de letra, etc...
Seguidamente una mini guía muy básica de como representar con etiquetas html distintos elementos en una web.
Bloques bien diferenciados en la página (Cabecera, barra lateral, etc... ) : Único caso en el que contendremos los elementos dentro de una etiqueta <div/>.
Titulares, titulos de sección, subtitulos : Usaremos las etiquetas <hX/> que nos permiten marcar titulos. El titular principal de la página será la etiqueta <h1/>, los titulos de secciones los <h2/>, distintos titulos de partes del contenido los <h3/>, subtutitulos <h4/>, etc... y así hasta el nivel de títulos que necesitemos.
Menús, Pestañas, listas de links, footers de links, etc. : Usaremos las etiquetas de listado no numerado <ul/> para contener el elemento y luego para cada link usaremos <li><a/><li> marcando que cada link es en realidad un elemento de listado que solo contiene un link.
Contenido : Para redactar el contenido debemos usar etiquetas enfunción de lo escrito en el contenido. Para parrafos normales, usaremos <p/>para cada parrafo. Para listados ordenados <ol/>, sin orden definido <ul/>. Aparte tenemos la posibilidad de usar otras etiquetas para contenidos especiales: <pre/>, <blockquote/>, etc.
Si te gusta lo que lees y crees que podría ser aplicable a tu negocio debes saber que ofrezco mis servicios como Consultor Independiente en Marketing Online, especialmente focalizado en SEO y Analítica Web
Si quieres que hablemos sobre tu proyecto, tan solo házmelo saber y me pondré en contacto contigo lo antes posible
