Site clinic para sitios web de ONGs: Análisis I

martes, 8 de febrero de 2011

Siempre viene bien un poco de limpieza general cada cierto tiempo. Por este motivo hemos decidido que nuestra segunda entrada del "Site clinic para ONGs" trate sobre cómo limpiar tu código fuente. Después de analizar los sitios web de organizaciones sin ánimo de lucro recibidos, hemos observado cierta confusión en torno a qué marcas HTML, o etiquetas, deben usarse y dónde, así como qué contenido debe colocarse dentro de estas, todo lo cual puede tener un impacto importante sobre los usuarios y el aspecto del sitio web en la página de resultados de búsqueda.

Antes de atender a los detalles, préstale atención a los elementos <title>

De todos los sitios web de organizaciones sin ánimo de lucro recibidos, el 27% no utilizaban correctamente sus elementos <title>, los cuales son esenciales para dar a conocer a Google y a los usuarios el contenido del sitio web. Un motor de búsqueda suele mostrar aproximadamente 60 caracteres del elemento de título; se trata de un bien preciado, ¡úsalo! Antes de pasar al código, echemos un vistazo a cómo se muestra el título de uno de los sitios recibidos, Sharp , en la página de resultados de búsqueda:


Un buen elemento <title> debe incluir el nombre de la organización y un eslogan descriptivo. Analicemos algunos de los ejemplos enviados:

Organización
Código fuente de <title>
Utilidad
Comportamiento de la etiqueta
<title>Top San Diego Doctors and Hospitals - Sharp HealthCare</title>
Óptima
Incluye el nombre de la organización y un eslogan descriptivo.
<title>Interieur 2010 - 15-24 October Kortrijk, Belgium</title>
Buena
Incluye el nombre de la organización y un eslogan no descriptivo.
<title>Visual Arts and Music for Society | VAMS International</title>
Aceptable
Incluye únicamente el nombre de la organización.


Si no especificas una etiqueta <title>, Google creará una por ti. El título que tú crees probablemente será mejor que cualquiera que salga de nuestra cosecha, así que no lo dudes: asume el control de tu etiqueta <title>. En realidad es muy sencillo y hace una gran diferencia. También es importante usar etiquetas <title> específicas para tus URL internas. Trataremos este asunto en la próxima entrada de esta serie.

Observa tus metaetiquetas de descripción

Las metaetiquetas de descripción [ inglés ] no se usan a pleno rendimiento en el 54% de los sitios recibidos. Estas etiquetas a menudo se usan para rellenar el fragmento de dos líneas que pueden ver los usuarios en la página de resultados de búsqueda. Un fragmento contundente puede captar la atención de posibles lectores y atraerlos a la página de tu organización. Echemos un vistazo a otro ejemplo de uno los sitios web recibidos, Tales of Aussie Rescue :

Si no hay metaetiquetas de descripción presentes o no son relevantes, se elegirá automáticamente un fragmento del contenido de la página. Si tienes suerte y se elige automáticamente un buen fragmento, recuerda que los motores de búsqueda difieren en la forma en que eligen fragmentos, por que lo que resulta más conveniente mantener la coherencia y relevancia creando una metaetiqueta de descripción contundente.

Mantén tus elementos <h> en su sitio

Otra mejora rápida que puedes hacer es asegurarte de que tu sitio web hace un uso adecuado de las etiquetas de encabezado. En nuestro estudio de las webs de las ONGs enviadas, los elementos de encabezado de aproximadamente el 19% de los sitios recibidos podían mejorarse. El problema más común de las etiquetas de encabezado era la tendencia a iniciar los encabezados con la etiqueta <h2> o <h3>, sin incluir la etiqueta <h1> supuestamente por razones de estética.

A través de los encabezados se puede informar a Google y a los usuarios de lo que es relevante para ti y tu sitio web. Cuanto menor sea el número de la etiqueta de encabezado, más importante será el texto a ojos de Google y tus usuarios. ¡Saca el máximo partido a la etiqueta <h1>! Si no te gusta como se representa visualmente una etiqueta <h1>, puedes alterar su aspecto en tu CSS.

Uso de texto alternativo en imágenes

A todo el mundo le gusta enseñar sus fotos familiares durante las fiestas, pero no olvides decirnos de qué van. Más del 37% de los sitios analizados no hacen un uso adecuado del atributo alternativo para imágenes. Si se usa correctamente, este atributo puede:

  • Ayudar a Google a entender la imagen
  • Permitir a los usuarios de navegadores de texto, con problemas de accesibilidad, o de dispositivos limitados, a entender las imágenes

Recuerda, un texto alternativo descriptivo y detallado es la clave. Veamos algunos de los sitios recibidos y el uso que hacen del atributo alternativo:


Organización
Código fuente
Utilidad
Comportamiento de la etiqueta
<img alt="Sponsor a Puppy logo" src=...
Óptima: el texto alternativo especifica que la imagen es el logotipo principal de la organización.
Usa texto alternativo descriptivo y detallado para describir imágenes, botones y logotipos.
<img alt="Logo" height=...
Buena: el texto alternativo indica que la imagen es un logotipo pero no especifica la organización ni su comportamiento.
Usa texto alternativo no descriptivo en imágenes, botones y logotipos, o usa texto alternativo solo esporádicamente.
<img src="...”>
No aceptable: no hay texto alternativo.
No usa texto alternativo o usa texto que no añade ninguna información (puede verse a menudo en imágenes numeradas).


Ayuda para tus propósitos de año nuevo

Google cuenta con excelentes recursos que permiten usar prácticas recomendadas en tu código fuente. En primer lugar, puedes usar nuestra herramienta de sugerencias de HTML que encontrarás en Herramientas para webmasters de Google. Asimismo, está bien que todos los lectores puedan acceder a tu sitio web.

Publicado por Alexi Douvas y Jen Lee, equipo de Calidad de búsqueda
Colaboradores: Aditya Goradia, Brandon Falls, Charlene Perez, Diara Dankert, Michael Wyszomierski y Nelson Bradley