1. Nombra tres servicios web o aplicaciones que estén de moda actualmente.
2. ¿Qué es twitter? ¿Tienes cuenta en twitter?
3. ¿Qué blogs sobre Social Media sigues?
4. ¿Cuales son las estrategias de linkbuilding además de linkbaiting y enlaces naturales?
5. ¿Cómo obtendrías los enlaces entrantes a un página web?
6. ¿Que es Google caffeine?
7. Ordena las etiquetas HTML según su importancia en el posicionamiento: title, keywords, description, h1, h2, h3, strong, b, em, a
8. Escribe una description para posicionar una página por “collares para perros”.
9. ¿Qué blogs o publicaciones sobre SEO sigues?
10. ¿Cómo tratan los buscadores las páginas con el mismo contenido y con distinta URLs?
11. ¿Cuándo aparecen resultados anidados en los resultados de búsqueda?

Así que ahora además de preocuparnos del SEO de nuestras páginas, deberíamos prestar atención a las capturas de pantalla que genere Google para evitar que nuestra página aparezca deslucida. ¿Cómo debemos preparar nuestra web para Google Instant Preview?

Contenido Flash

Instant Preview no interpreta contenido en Flash. Sólo hay que buscar un vídeo de Youtube en el buscador y ver la captura de pantalla. Vemos que aparece el mensaje de aviso de que es necesario instalar el pulgin de Flash para visualizar el vídeo.

Para los navegadores que no tienen Flash instalado, lo que deberíamos hacer siempre es mostrar un contenido alternativo en HTML. Por ejemplo, la página principal de la web de Renfe lo hace en su sección central si accedemos desde un navegador. Sin embargo, la previsualización de Google no es capaz de mostrar ese contenido, generando una captura con un espacio en blanco.

Revisa el contenido Flash de la web y asegúrate de que el contenido alternativo se previsualiza correctamente.

JavaScript

Parece que el robot de indexación que genera las capturas de pantalla de Instant Preview no soporta código JavaScript. Por ejemplo, Amazon ofrece dos visualizaciones distintas dependiendo de si el navegador del usuario tiene JavaScript habilitado o no. Según podemos ver en la imagen inferior, la previsualización de la web de Amazon muestra el diseño preparado para navegadores que tienen JavaScript desactivado.

Comprueba que tu web con JavaScript deshabilitado se muestra correctamente, y haz uso de la etiqueta <noscript> para mostrar contenido alternativo.

Lazy Loading

Si utilizas técnicas de Lazy Loading para cargar recursos en una página, puede que Instant Preview no recoja esos cambios. Por ejemplo, el blog Mashable utiliza Lazy Loading para cargar las imágenes a medida que el usuario hace scroll y estas imágenes no aparecen en la previsualización de Google.

Uso de @import para cargar CSS

Una forma de cargar achivos CSS en nuestro código es utilizar @import url('estilos.css') en el código de otras CSS o en el HTML dentro de la etiqueta <style>. Si ya había desventajas al usar @import para cargar hojas de estilos, ahora tienes una más.

La sección de libros de El Corte Inglés lo hace así para la cabecera, y los estilos no aparecen en la previsualización.

Tipografías: Cufon, sIFR, Google Fonts, @font-face

Dos técnicas habituales para cargar tipografías poco comunes y que no se encuentran disponibles en todos los navegadores son Cufon y sIFR. He encontrado una demo de uso de Cufon y otra demo sobre sIFR, y en ninguna de las dos la previsualización de Google es capaz de mostrar la tipografía correcta.

Os dejo unas capturas de la demo de sIFR con y sin Flash habilitado y su previsualización.

Si utilizas tipografías no estándar, o haces uso de @font-face o Google Font Api deberías comprobar si la previsualización de Instant Peview carga realmente el tipo de fuente que te interesa. Si no lo hace, comprueba que con la tipografía alternativa la visualización es correcta.

Por las pruebas que he podido hacer, con estos métodos para utilizar tipografías no estándar, la previsualización no es capaz de reconocer los tipos de fuentes.

Otras pruebas

Por último, en algunas pruebas más que he hecho veo que los frames, iframes y publicidad de AdWords se previsualizan correctamente. A los contenidos con Silverlight o QuickTime les pasa lo mismo que con Flash: no aparecen en las previsualizaciones. Seguro que me dejo muchas cosas por probar que pueden dar problemas con Google Instant Peview. ¿Se te ocurre algo más por lo que puedan fallar?

Puedes consultar más información técnica sobre Google Instant Peview en The official Google Code blog.

El SEO es uno de los temas de moda de los últimos años. ¿Cómo conseguir engañar a los buscadores para que nos coloquen en las primeras posiciones de los resultados de búsquedas para las palabras clave que a nosotors nos interesa? Todos lo hemos intentado hacer. Colocamos nuestras palabras clave repetidas varias veces en nuestras páginas para obtener una densidad óptima con esas keywords. Y por último, ponemos esas palabras clave elegidas por nosotros en la etiqueta meta keywords, para decirle a los buscadores por qué palabras queremos que nos encuentren los usuarios.

Pero, ¿no es demasiado fácil? Tú como webmaster le estás diciendo a un motor de búsqueda en qué resultados de búsqueda quieres aparecer. Y si ahora viene Google, buscador por excelencia en España, y te dice que ni se fija en la etiqueta meta keywords, ¿cómo te lo tomarías? Todo tu esfuerzo en crear contenido optimizado para esas keywords y ahora resulta que ni las miran.

No te preocupes, porque aunque Google no las tenga en cuenta, otros buscadores puede que sí utilicen la meta etiqueta keywords. Sigue creando contenido de la misma forma en que lo estabas haciendo, pero ahora teniendo mucho más presente que Google se basa en el contenido de tu página para posicionarla.

Actualmente todo el mundo hace SEO, y Google y otros van evolucionando y cambiando sus estrategias para que nadie se aproveche de ellos. Primero aportaron el nofollow, luego las etiquetas canonical, más tarde te dicen que el nofollow si que afecta a la hora de traspasar el PageRank… ¿Quién decía que el SEO había muerto? Y lo que nos queda por descubrir…

Vía: Google Webmaster Central Blog.

Keywords

Las keywords son las palabras clave por las que queremos aparecer primeros en las páginas de resultado de búsqueda (en adelante llamadas SERPs, por Search Engines Results Pages). Cada página de nuestra web debería estar optimizada para keywords diferentes, para así tener un abanico mayor de palabras por las que ser localizados. Por ejemplo, si queremos posicionar una página de venta de billetes de avión a Bali, quizás nuestras palabras clave deberían ser “vuelos baratos bali” o “billetes avión bali”. Pero no es tan sencillo, porque el mercado de keywords está muy disputado, y quizás nos sea más interesante y efectivo seleccionar términos como “circuitos turísticos bali” o “excursiones bali”, ya que puede que tengamos mucha menos competencia y nos sea más facil posicionar la página con esos términos.

Etiquetas meta de la página

Nuestra página web a posicionar debería tener tres etiquetas meta dentro del header: title, keywords y description. Estas etiquetas indicarán el título de la página, las keywords o palabras clave por las que queremos posicionar la página y una descripción del contenido de la página. Un ejemplo de estas tres etiquetas para nuestra página de viajes a Bali sería:

<title>Circuitos turísticos en Bali</title>
<meta name="keywords" content="bali,circuitos turísticos,excursiones,vuelos,turismo" />
<meta name="description" content="Circuitos turísticos por Bali con guías locales" />

La etiquetas title y description suelen aparecen en los SERPs cuando aparece nuestra página, y digo suelen porque la descripción de nuestra página que apere en los SERPs dependerá de las palabras de búsqueda que se hayan usado al hacer la búsqueda. Tenlo en cuenta a la hora de elegir el título y descripción óptimos. Una buena práctica a la hora de escribir los títulos es realizar una búsqueda del título que tienes pensado y analizar la competencia con la que te encontrarás. Aquí tienes una captura de los resultados de búsqueda para una misma página utilizando distintas palabras de búsqueda. Como puedes ver, la descripción de la página varía en función de los términos de búsqueda que se hayan empleado.

Estructura de las URLs

Mantener una estructura organizada en las URLs, además facilitar las tareas de administración, ayuda a la indexación de tus documentos por parte de los motores de búsqueda. Y para los usuarios es más amigable y accesible si nuestra web tiene urls que no sean crípticas o llenas de parámetros y caracteres sin sentido. Además, las direcciones de tus páginas deberían contener keywords por las que quieras posicionar esa página. Un ejemplo de URL optimizada:

URL original: http://misitio.es/viajes?usr=3512&dest=bali
URL optimizada: http://misitio.es/viajes/circuitos-turisticos/bali/

Si en las direcciones quieres usar varias palabras, no deben estar separadas por espacios, sino por guiones medios ‘-’. De esta forma, los robots de búsqueda interpretan mejor las palabras clave. Las URLs aparecen también en los SERPS, por tanto, el usuario puede sacar información sobre el contenido de la página simplemente viendo la estructura de la URL sin necesidad de abrir el enlace. Por ejemplo, para http://www.ttt.rr/blog/economia/2001/03/nuevas-ayudas-para-pymes.html podemos deducir que ese enlace lleva a un blog, clasificado bajo la categoría economía, y que hace referencia a ayudas fiscales para pymes. En este ejemplo, incluso podemos ver la fecha de publicación, por lo que el usuario puede detectar cómo de interesante puede ser el contenido de la página si lo que está buscando en información actual o si está buscando información de hace tiempo. Se ofrece mucha información en algo tan sencillo como la dirección de una página como para no aprovecharla para hacer SEO.

Intenta utilizar una URL única (permalink) para cada página y usa ese permalink en tus enlaces internos. Así evitas que los buscadores indexen contenido duplicado en tu web. Para remediar ésto, puedes usar en el head la etiqueta meta canonical. Insertamos esta etiqueta en todas las páginas que tengan distinta URL pero el mismo contenido, y en el href ponemos la URL que queremos que los buscadores consideren como con contenido original.

<link rel="canonical" href="http://www.weterede.com/2009/06/nuevas-funcionalidades-de-firefox-35/" />

En la próxima entrada sobre SEO trataré el uso de los archivos sitemap y robots y cómo usar las Webmaster Tools de Google para ayudarnos a detectar errores que puedan afectar a la indexación de nuestra web. Y si teneis dudas, preguntas o correcciones que hacer, no dudeis en dejar un comentario o contactar conmigo.

Uno de los factores por los que nuestros visitantes pueden abandonar nuestra web es el tiempo de carga de las páginas. Un tiempo de carga excesivo, aparte de producir una mala experiencia de usuario, puede hacer que nuestros visitantes se aburran mientras esperan que se renderice la página mientras navegan por nuestra web. Así que os dejo una pequeña recopilación de consejos básicos para mejorar el rendimiento de nuestras páginas, muchos de ellos ayudan también a obtener un código más SEO-friendly.

Usa páginas de tamaños moderados. Si alguna página tuya ocupa mucho tamaño, tardará mucho en descargarse. A veces es mejor dividir el contenido en varias páginas, de forma que el tamaño de cada una sea menor y cargen de forma más rápida. Lo ideal es que tus páginas no lleguen a 500KB, pero como esto es a veces dificil de conseguir, mantente por debajo de 1MB por página.

Utiliza hojas de estilo CSS. En vez de incrustar los estilos dentro del código, mantén en archivos externos todo el código que definan el estilo de los elementos de tu web. Así el código de estilos no se descarga en cada visualización de página, la página pesa menos yse aprovecha la caché del navegador. Consejo SEO.

Minimiza el número de peticiones de archivos externos. Si puedes, agrupa todos los archivos .css o los archivos .js en uno sólo. Así reduces el número de peticiones HTTP y la carga de la página se realiza más rápidamente.

No uses javascript dentro del código. Agrupa y mete el código javascript en un archivo y enlázalo. Así el visitante descarga el archivo .js en la primera visualización, y para las siguientes ya tiene ese código descargado (caché).

Enlaza los archivos javascript desde el footer, no desde el header. Los archivos .js se descargan uno detrás de otro, no de forma paralela. Si los enlazamos en el header, el navegador no puede empezar a renderizar la página hasta que no ha descargado todos los archivos. Poniendo los .js en el footer, hacemos que se descarguen cuando la página ya se ha visualizado por completo. Aunque el tiempo de carga de la página es el mismo, la sensación de velocidad es distinta, ya que dejamos el trabajo pesado de descarga para el final. Esto se puede hacer siempre que no usemos funciones javascript que sean necesarias durante la carga de la página.

Descarga en serie de archivos javascript

No uses @import en los archivos CSS. Es preferible que utilices varios enlaces “link” desde el código de la página (descarga en paralelo), que importar hojas de estilo desde otras hojas de estilo (descarga en serie).

Usa el formato correcto en tus imágenes. Juega con archivos gif, png y jpg en las imágenes que subas a la web. Usa jpg para imágenes con mucha gama de colores, como fotos, y gif o png para aquellas que necesiten transparencias o tengan una gama de colores menor.

Usa image sprites. Para imágenes comunes en el diseño del sitio o que se repitan en muchas páginas, es conveniente usar image sprites. Por ejemplo, si todas tus webs hacen X peticiones de imágenes para colocar iconos decorativos, es más eficiente combinar esas imágenes en una sola y por CSS asignar al elemento de la web que queramos el fragmento de la imagen que queremos mostrar. Las imágenes se pueden descargar en paralelo, por eso sólo debemos usar esta técnica para imágenes comunes en el template del sitio.

Descarga en paralelo de imágenes

No uses redimensionamiento de imágenes dentro del código. ¿Para qué descargar una imagen a 1024×768 si luego le vas a poner una anchura de 300px? Utiliza imágenes del tamaño real que vayan a tener a la hora de visualizarlas. Si vas a usar algún tipo de galería con thumbnails, conviene usar imágenes pequeñas en los thumbnails para que la página cargue rápidamente, y descargar las imágenes a tamaño real en background, aunque con esto implique aumentar el tamaño de la página.

Evita contenido de más dentro del código. Una cosa es tener el código bien identado, y otra es que tengamos secciones con más de 100 líneas en blanco. Si eres muy purista, puedes pasar un compactador a tus archivos .css y .js para reducir el tamaño del archivo resultante. Eso sí, mantén siempre una copia sin compactar para trabajar con ella, porque editar un archivo compactado puede ser horrible. Puedes usar aplicaciones online como CSS Compressor o CSS Formatter and Optimiser para compactar tus CSS, o Yahoo! UI Library: YUI Compressor y Online Javascript compressor para los archivos javascript.

Evita enlazar contenido de otros dominios. Incluir información que esté alojada en otro dominio implica que la carga de nuestra página dependerá del estado del servidor de destino y de su tiempo de respuesta. Por ejemplo, en mi sidebar yo cargo mis dos últimos comentarios en Twitter, y cuando su sistema está muy saturado, la carga de mi web se ralentiza. Si haces algo de este estilo, no lo pongas en el header, ponlo en el sidebar derecho o footer. Así si tarda en cargar ese contenido, el header y la parte central de la web ya estará renderizado y el “atasco” se notará menos.

Nunca uses frames. No tiene nada que ver con el rendimiento, pero conviene que no uses frames por muchos otros motivos. Los frames era como se diseñaban las webs en 1995. Consejo SEO.

Por último, asegurate de que todo lo que has hecho funcione. Haz pruebas y mide los tiempos de carga, para descubrir dónde se pueden producir cuellos de botella o ver qué partes puedes modificar para aumentar el rendimiento. Yo uso la extensión Firebug para Firefox junto con YSlow, pero existen muchas otras herremientas de medición online.

Aclaración: por si te da por revisar el código de mi blog, todavía no está optimizado. Como con WordPress se pueden utilizar muchos puglins, cada uno lleva sus propios archivos .js, .css o imágenes. Todavía estoy trabajando en su optimización, lo que requiere en muchos casos que tenga que modificar el propio código de los plugins.