El Blog para Webmasters de Google [ES] : junio 2012

Anotaciones para sitios destinados a múltiples países e idiomas

lunes, 25 de junio de 2012

En diciembre de 2011 anunciamos las anotaciones para sitios que se dirigen a usuarios de muchas lenguas y, opcionalmente, de muchos países. Estas anotaciones definen una agrupación de páginas equivalentes que se dirigen a usuarios de distintas partes del mundo, y se implementaban utilizando elementos de enlace rel-alternate-hreflang en el código HTML de cada página de la agrupación.
A petición de los webmasters y teniendo en cuenta otros factores, hoy añadimos asistencia para especificar las anotaciones rel-alternate-hreflang en los sitemaps. El uso de sitemaps en vez de elementos de enlace HTML aporta muchas ventajas, entre ellas un tamaño de página más pequeño y un despliegue más fácil de algunos sitios web.
Veamos un ejemplo para ilustrar cómo funciona. Queremos especificar que para la URL http://www.example.com/en, que se dirige a usuarios de habla inglesa, la URL equivalente dirigida a hablantes de alemán es http://www.example.com/de. Hasta ahora, la única manera de añadir este tipo de anotación era mediante un elemento de enlace, ya sea en forma de encabezado HTTP o como elementos HTML en ambas URL. Por ejemplo:<link rel="alternate" hreflang="en" href="http://www.example.com/en" > <link rel="alternate" hreflang="de" href="http://www.example.com/de" >

A partir de hoy, puedes utilizar el siguiente marcado equivalente y alternativo en sitemaps:<url> <loc>http://www.example.com/en</loc> <xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/de" /> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/en" /> </url> <url> <loc>http://www.example.com/de</loc> <xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/de" /> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/en" /> </url>

Un breve comentario. Las nuevas etiquetas de sitemaps que aparecen en negrita funcionan del mismo modo que las etiquetas de enlace HTML, y ambas utilizan los mismos atributos. En nuestro nuevo artículo del Centro de asistencia, puedes consultar todos los detalles técnicos de cómo se indican las anotaciones en los Sitemaps, incluso cómo implementar el espacio de nombre xhtml para la etiqueta de enlace.
En ese artículo también encontrarás un ejemplo más detallado y, si necesitas más ayuda, puedes preguntar en nuestro recién creado foro de ayuda sobre internacionalización.

Escrito por Pierre Far, Webmaster Trends Analyst, Publicado por Javier Pérez, equipo de Calidad de búsqueda.

Haciendo que más páginas cargen de forma instantánea

lunes, 25 de junio de 2012

En Google estamos obsesionados con la velocidad. Ya hace tiempo que sabemos que los aumentos en la velocidad, por insignificantes que parezcan, pueden tener un impacto sorprendentemente importante en la satisfacción e implicación de los usuarios. Hace un año aproximadamente lanzamos Instant Pages con ese objetivo. Instant Pages utiliza tecnología de renderización previa en Chrome para que parezca que tu sitio se carga instantáneamente en algunos casos, sin que tú tengas que hacer nada. Aquí tienes un vídeo para que veas cómo funciona:
Hemos estado observando muy de cerca el rendimiento y también tenido en cuenta los comentarios de los webmasters. Desde que lanzamos Instant Pages, hemos ahorrado más de mil años de tiempo de nuestros usuarios. Hasta el momento estamos muy satisfechos con los resultados e incrementaremos de forma gradual la frecuencia con que activamos esta función.
En la mayoría de los casos, los webmasters no tienen que hacer nada para que sus sitios funcionen correctamente con la renderización previa. Tal como mencionamos en nuestro anuncio inicial de Instant Pages, el tráfico de búsqueda se contabilizará del mismo modo que antes de implantar esta función en las Herramientas para webmasters: solo se contarán los resultados que visite el usuario. Si tu sitio realiza un seguimiento de las páginas vistas sin ayuda externa, es posible que te interese el API de visibilidad de páginas, que permite detectar cuándo se produce la renderización previa de modo que estos casos se restan de las estadísticas. Si utilizas un paquete de análisis o anuncios, comprueba si su solución ya es sensible a la renderización previa. Si lo es, en muchos casos no tendrás que hacer ningún cambio. Si te interesa activar la renderización previa de Chrome en tu sitio, consulta este artículo sobre el tema.
Instant Pages implica que los usuarios llegan a tu sitio más contentos y motivados, lo cual es bueno para todos.

Cómo ordenar y filtrar resultados en la búsqueda personalizada

viernes, 22 de junio de 2012

Con el motor de búsqueda personalizado (CSE), puedes crear experiencias de búsqueda completas para que los usuarios puedan encontrar la información que buscan en tu sitio con mayor facilidad. Hoy presentamos dos mejoras relativas a la ordenación y al filtrado de los resultados de la búsqueda en el motor de búsqueda personalizado.

En primer lugar, CSE ahora admite la ordenación de resultados basada en IU, que puedes activar en la pestaña de información básica del panel de control del motor de búsqueda personalizado. Cuando hayas actualizado el código de elemento del motor de búsqueda personalizado en tu sitio, verás un selector para “ordenar” en la parte superior de la sección de resultados.

De forma predeterminada, el motor admite la ordenación por fecha y por relevancia. En el panel de control, puedes especificar claves de “ordenación” basadas en la estructura del contenido de tu sitio. De esta forma, los usuarios dispondrán de más opciones para encontrar los resultados que les sean más relevantes. Por ejemplo, si has marcado páginas para fragmentos enriquecidos de productos, puedes activar la ordenación basada en el precio, como se muestra a continuación:

En segundo lugar, presentamos consultas compactas para filtrar por atributo. Actualmente, puedes emitir una consulta como

[more:pagemap:product-description:search more:pagemap:product-description:engine]

[more:pagemap:product-description:search more:pagemap:product-description:engine], que solo mostrará páginas con un atributo ‘product-description’ que contenga tanto ‘search’ como ‘engine’. Con una consulta compacta, puedes emitir exactamente la misma solicitud de esta forma:

[more:p:product-description:search*engine]

Esperamos que estas funciones nuevas te ayuden a crear experiencias de búsqueda más completas y más útiles para tus visitantes. Como siempre, si tienes preguntas o comentarios, te agradecemos que nos los hagas llegar a través del Foro de ayuda.

Escrito por Roger Wang, Software Engineer, Publicado por Javier Pérez, equipo de Calidad de búsqueda.

La navegación, el Panel de control y la Página principal

miércoles, 20 de junio de 2012

Tras el anuncio de la limpieza primaveral de Herramientas para webmasters de Google que hicimos a principios de este trimestre, ahora toca llevarlo a cabo.
Estamos preparando unos cuantos cambios: una navegación actualizada, un panel de control reformado y una vista compacta para la lista de sitios de la página principal.

Aquí tienes una muestra del nuevo Panel de control de Herramientas para webmasters de Google para www.example.com

Hemos reagrupado las funciones de Herramientas para webmasters de Google para crear una estructura de navegación mejorada (se muestra en el lado izquierdo de la imagen que se encuentra más arriba). Hemos diferenciado los grupos siguientes: Configuración, Estado, Tráfico y Optimización. Cada grupo representa un conjunto relacionado de funcionalidades:

Configuración: todo lo que configuras y que no acostumbras a cambiar.

Estado: donde debes mirar para asegurarte de que todo funciona correctamente.

Tráfico: donde vas para comprobar el rendimiento de tu sitio en la búsqueda de Google, quién está vinculado; donde podrás explorar los datos sobre tu sitio.

Optimización: donde encontrarás ideas para mejorar el sitio, lo cual nos ayudará a comprender y representar mejor tu sitio en la búsqueda y en el resto de servicios.

Si tienes un momento, familiarízate con la nueva navegación de Herramientas para webmasters de Google. Hemos cambiado ligeramente el nombre a algunas funciones; de este modo, por ejemplo, Sugerencias HTML pasa a ser Mejoras HTML, pero la funcionalidad sigue siendo la misma.
Esperamos que la nueva navegación te parezca útil, y por eso creemos que posiblemente también de gustará el nuevo Panel de control. En la parte superior del Panel de control, encontrarás mensajes recientes, importantes y prioritarios relacionados con tu sitio. Justo debajo, encontrarás otra sección que te proporcionará un breve resumen del estado actual del sitio. Verás tres widgets: Errores de rastreo, Consultas de búsqueda y Mapas del sitio; cada uno representa un grupo de navegación distinto: Estado, Tránsito y Optimización (respectivamente).
Sabemos que tu tiempo es valioso. Con el nuevo Panel de control, te mostramos más mensajes y más gráficos para que te sea más fácil comprobar el rendimiento de tu sitio. Echa un vistazo antes de entrar en más detalles
Finalmente, para aquellos que gestionáis un gran número de sitios, podéis seleccionar la opción para ver la lista de sitios en un diseño "compacto", sin las miniaturas de previsualización de páginas. Tranquilo, si prefieres el diseño ampliado, podrás volver a establecerlo siempre que quieras.

Diseño compacto de la página principal

Si tienes preguntas o comentarios relacionados con estos cambios, publícalos en el foro de ayuda.
Kamila PrimkeJavier Pérez

Marcas de autoría y búsqueda web de Google

domingo, 17 de junio de 2012

Las marcas de autoría son una forma de conectar a los autores con su contenido en la web y en Google estamos experimentando con el uso de estos datos para ayudar a la gente a encontrar contenido creado por grandes autores en nuestros resultados de búsqueda.
Ahora admitimos las marcas que permiten a los sitios web vincular públicamente su contenido con las páginas del autor correspondiente. Por ejemplo, imaginemos que un autor del New York Times ha escrito docenas de artículos. Usando estas marcas, el webmaster puede conectar esos artículos con una página de autor del New York Times. La página de autor describe e identifica al autor, y puede incluir cosas como la biografía del autor, su foto, artículos y otros enlaces.
Si estás a cargo de un sitio web con contenido realizado por autores, te interesará la información sobre las marcas de autoría de nuestro Centro de asistencia. Las marcas usan estándares existentes como HTML5 (rel="author") y XFN (rel="me") para permitir a los motores de búsqueda y otros servicios web identificar los trabajos de un mismo autor por toda la Web. Si ya dispones de marcas estructuradas de datos usando los microdatos de schema.org, también podremos interpretar la información sobre autoría.
Queríamos asegurarnos de que las marcas sean tan fáciles de implementar como sea posible. Para ello, ya hemos trabajado con varios sitios para marcar sus páginas, entre ellos el New York Times, The Washington Post, CNET, Entertainment Weekly, The New Yorker y otros. Además, hemos dado el paso adicional de añadir esta marcación a todo el material albergado en YouTube y Blogger. En el futuro, ambas plataformas incluirán automáticamente estas marcas al publicar contenido.
Sabemos que el contenido excelente procede de autores excelentes y por este motivo buscamos con atención formas de que estas marcas puedan ayudarnos a resaltar los autores y clasificar los resultados de las búsquedas.
Publicado por Othar Hansson, Ingeniero de software, Publicado por Javier Pérez, equipo de Calidad de búsqueda.

Diseños adaptables: cómo aprovechar las posibilidades que ofrecen las consultas de medios

miércoles, 13 de junio de 2012

Nos encantan los datos y pasamos mucho tiempo analizando las estadísticas de nuestros sitios web. Cualquier desarrollador web que haga lo mismo se habrá dado cuenta del reciente aumento del tráfico de los dispositivos móviles. En el último año, hemos observado que muchos sitios importantes reciben un porcentaje considerable de visitas a sus páginas desde smartphones y tablets. Esto representa un gran número de visitantes que utilizan navegadores avanzados compatibles con las últimas características de los lenguajes HTML, CSS y JavaScript, pero que disponen de un espacio en pantalla limitado cuyo ancho, en ocasiones, no supera los 320 píxeles.

Nuestro compromiso con la accesibilidad nos impulsa a esforzarnos por ofrecer una buena experiencia de navegación a todos los usuarios. Nos enfrentamos a una difícil decisión cuando tuvimos que elegir entre crear sitios web específicos para móviles y adaptar los sitios existentes y los nuevos lanzamientos para que los contenidos se viesen bien tanto en ordenadores como en dispositivos móviles. Crear dos sitios nos permitiría adaptar mejor el producto a cada tipo de hardware, pero el mantenimiento de un único sitio compartido conserva una URL canónica, lo cual evita complicadas redirecciones y hace que compartir direcciones web sea más fácil. Pensando en la facilidad de mantenimiento, nos decantamos por usar las mismas páginas para ambos medios, y ahora nos estamos planteando cómo satisfacer las siguientes condiciones:

Que las páginas se puedan leer con cualquier resolución de pantalla

Que los conjuntos de contenidos que marquemos se puedan ver en cualquier dispositivo

Que, sea cual sea el tamaño de la ventana, nunca aparezca una barra de desplazamiento horizontal

Contenido comprimido, retoque en la navegación e imágenes redimensionadas - Chromebooks

Implementación

Para empezar, un marcado semántico simple crea páginas mucho más flexibles y fáciles de reorganizar si se necesita modificar el diseño. Al garantizar que la hoja de estilo permita adoptar un diseño líquido, ya estamos en camino de adaptarnos al mundo de los móviles. En lugar de especificar un valor en el parámetro width, para los elementos contenedores, empezamos a usar un valor de max-width. En lugar de height indicamos la min-height, para que las fuentes más grandes y los textos de varias líneas no superen los límites del contenedor. Para evitar que las imágenes con ancho fijo se salgan de las columnas líquidas, aplicamos la regla CSS siguiente:

img {

  max-width: 100%;
}

El diseño líquido es un buen comienzo, pero es algo tosco. Afortunadamente, las consultas de medios ya son compatibles con los navegadores modernos, incluidos IE9+ y la mayoría de los dispositivos móviles. Esto es lo que marca la diferencia entre un sitio que se puede visualizar de forma aproximada en un navegador móvil y un sitio mejorado para aprovechar al máximo la interfaz de usuario optimizada. Pero primero debemos tomar en consideración cómo se representan los smartphones en los servidores web. Viewports ¿Cuándo deja un píxel de ser un píxel? Cuando se ve en un smartphone. De forma predeterminada, los navegadores de los smartphones intentan imitar a los navegadores de ordenador de alta resolución y muestran las páginas como si se estuviesen viendo en un monitor de ordenador. Este es el motivo por el que se ve el texto diminuto en el “modo de vista global”, un texto imposible de leer si no se aumenta. El ancho predeterminado de ventana gráfica en el navegador de Android predeterminado es de 800 px, y en el de iOS es de 980 px, independientemente del número de píxeles físicos reales que haya en la pantalla.
Para que el navegador muestre la página a una escala más fácil de leer, debes usar el metaelemento de ventana gráfica "viewport":

<meta name="viewport" content="width=device-width, initial-scale=1">

Las resoluciones de pantalla de móviles varían ampliamente, pero casi todos los navegadores de smartphones modernos tienen un device-width estándar de unos 320 px. Si, por ejemplo, tu dispositivo móvil tiene un ancho de 640 píxeles físicos, una imagen de 320 píxeles de ancho ocuparía todo el ancho de la pantalla usando, para ello, el doble de píxeles. Esto explica también por qué el texto aparece tan nítido en las pantallas pequeñas: la densidad de píxeles es el doble en comparación con un monitor de ordenador normal.
Lo más útil de establecer el width al device-width en la metaetiqueta de ventana gráfica es que se actualiza cuando el usuario cambia la orientación del smartphone o el tablet. Combinar esto con las consultas de medios te permite girar el diseño cuando el usuario gira el dispositivo:

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

Contenido comprimido, imágenes más pequeñas - Cultural Institute

En realidad, puede que necesites usar varios puntos de ruptura según la forma en que se distribuya el contenido del sitio y según cómo se vea en diferentes dispositivos. También puedes usar la consulta de medio de orientation para adaptarte a orientaciones concretas sin especificar las dimensiones en píxeles cuando sea posible.

Ejemplo de media queries

Acabamos de actualizar la página Acerca de Google. Aparte de establecer un diseño líquido, hemos añadido algunas media queries para ofrecer una experiencia mejorada en pantallas pequeñas, como las de los tablets y los smartphones.
En lugar de adaptarnos a resoluciones de dispositivos concretas, definimos un conjunto relativamente amplio de puntos de ruptura. Para una resolución de pantalla de más de 1024 píxeles de ancho, la página se ve con su diseño original de acuerdo con nuestra cuadrícula de 12 columnas. Con resoluciones de entre 801 px y 1024 px, verás una versión ligeramente comprimida debido al diseño líquido.
Solo cuando la resolución de la pantalla sea de 800 píxeles, el contenido que no se considere esencial se enviará a la parte inferior de la página:

@media screen and (max-width: 800px) {
  /* specific CSS */
}

Con una consulta de medios final, entramos en el territorio de los smartphones:

@media screen and (max-width: 479px) {

  /* specific CSS */
}

Llegados a este punto, la imagen grande deja de cargarse y apilamos los bloques de contenido. También hemos añadido espacio en blanco extra entre los elementos de contenido para que las distintas secciones se diferencien mejor.
Con estas simples medidas, garantizamos que el sitio se pueda usar en muchos dispositivos diferentes.

Contenido comprimido y imagen grande eliminada – About Google

Conclusión

Recuerda que no existe ninguna solución sencilla cuando se quiere facilitar el acceso a los sitios web en dispositivos móviles y ventanas gráficas estrechas. Los diseños líquidos son un buen comienzo, pero a veces será necesario adaptar el diseño. Las consultas de medios son una forma útil de refinar la visualización en muchos dispositivos, pero no olvides que el 25% de las visitas se hacen desde navegadores de ordenador que, actualmente, no son compatibles con la técnica y que existen implicaciones de rendimiento. Si tienes un widget interesante en tu sitio, puede funcionar muy bien con el ratón, pero es difícil manejarlo en un dispositivo táctil, ya que este no permite un control tan preciso.
La clave está en hacer pruebas frecuentes desde el principio. Todo el tiempo que pases navegando en tus sitios con un smartphone o un tablet tendrá su recompensa. Si no puedes hacer pruebas en dispositivos reales, usa el SDK de Android o iOS Simulator. Pídeles a tus amigos y compañeros de trabajo que vean tus sitios en sus dispositivos y fíjate en cómo navegan por ellos.
Los navegadores móviles representan una gran fuente de tráfico nuevo y aprender a adaptarse a ellos de la mejor forma constituye una nueva área pujante de desarrollo profesional.
Otros ejemplos de diseños adaptables de Google:

www.google.com/about

www.google.com/goodtoknow

www.google.com/culturalinstitute

www.google.com/events/sciencefair

www.google.com/intl/es/chrome/devices

picasa.google.com

Escrito por Rupert Breheny, Edward Jung, Matt Zürrer, equipo de webmasters de Google, Publicado por Javier Pérez, equipo de Calidad de búsqueda.

Directrices de codificación para HTML y CSS

viernes, 8 de junio de 2012

El código óptimo tiene muchas cualidades. Es efectivo, eficaz, sostenible y elegante. Cuando se trabaja con código con distintos desarrolladores, distintos equipos e incluso distintas empresas, el código óptimo debe ser fácil de comprender y el formato debe ser coherente. Por ese motivo existen las guías de estilo. Usamos guías de estilo para muchos idiomas, y nuestra guía de estilo pública más reciente es la Guía de estilo de Google para HTML y CSS.
En nuestra guía de estilo para HTML y CSS, como en otras guías de estilo de Google, se cubren muchos aspectos relacionados con el formato. También se indican prácticas recomendadas para animar a los desarrolladores a ir más allá de las sangrías. Muchos autores de guías de estilo conocen el trasfondo de la pregunta sobre si se debe describir el código que escriben (o prescribir qué código quieren escribir). Por ello, no es extraño que en nuestra guía de estilo para HTML y CSS encuentres ambas opciones (así como también muchos estilos de desarrollo distintos en nuestra base de código, que no es precisamente pequeña).
Llegados a este punto, queremos presentarte esta nueva guía de estilo. Esperamos poder compartir contigo más información acerca de decisiones relativas al diseño, así como futuras actualizaciones. Mientras, comparte tus ideas y experiencias y, como con el resto de guías de estilo, no dudes en usarla para tus proyectos, como creas conveniente.
Escrito por Jens O. Meiert, Senior Web Architect, Publicado por Javier Pérez, equipo de Calidad de búsqueda.

Todavía más datos sobre las consultas de búsqueda más habituales

miércoles, 6 de junio de 2012

Recientemente hemos actualizado los datos de las consultas de búsqueda más habituales para que se tenga en cuenta la posición principal media, hemos activado las descargas automatizadas y nos hemos asegurado de que puedas seguir recibiendo todas las consultas que dirigen tráfico a tu sitio. Pues bien, es hora de proporcionarte más datos sobre las consultas de búsqueda.
En primer lugar (y lo que es más importante), puedes ver hasta 90 días de datos históricos. Si haces clic en el selector de fechas que se encuentra en el extremo superior derecho de las consultas de búsqueda, puedes retroceder tres meses en lugar de limitarte a los 35 días anteriores.

Una vez hayas hecho clic:

Para ver 90 días, la opción para ver con cambios se desactivará. Si quieres ver los cambios con relación al periodo de tiempo anterior, el límite sigue siendo de 30 días. Los cambios están desactivados de forma predeterminada, pero puedes activarlos y desactivarlos con el botón que se encuentra entre el gráfico y la tabla. Los datos de las consultas de búsqueda más habituales normalmente están disponibles en un plazo de dos o tres días.

Otra gran mejora en las Herramientas para webmasters de Google es que ahora puedes ver datos básicos de las consultas de búsqueda desde el momento en que verificas la propiedad de un sitio. De esta forma, ya no tendrás que esperar para ver tu información.
Por último, ahora recopilamos datos de las 2.000 consultas más habituales por las que tu sitio recibe clics. Es posible que veas menos de 2.000 si no registramos ningún clic para una consulta concreta en un día determinado, o si los datos de tu consulta figuran en varios países o usan distintos idiomas. Por ejemplo, una consulta de búsqueda para el término “flores” en Google Canadá se cuenta de forma independiente a una consulta de “flores” realizada en Google EE. UU. Sin embargo, con este cambio el 98% de los sitios tendrá cobertura completa. Haznos llegar tu opinión. Esperamos que los nuevos datos te sean útiles.
Javier TordableJavier Pérez