Principios SEO para Desarrolladores Web

Hoy te traigo una Guía SEO para Desarrolladores Web con recomendaciones valiosas para optimizar la página para buscadores. Es muy importante que antes y durante el desarrollo de un sitio web tengamos claros cuáles son los factores relevantes que influirán en el posicionamiento de la web en los resultados de búsqueda. Así evitarás que, una vez terminado el trabajo, el profesional SEO te obligue a reprogramar gran parte de tu precioso sitio web, con el coste en tiempo y dinero que eso supondría. ¡Y eso sí que no!

SEO para desarrolladores web. Ilustración

En esta presentación* tienes un resumen de los principios SEO para Desarrolladores Web más importantes en la optimización del sitio para los buscadores, con los que podrás crear un diseño web potente en SEO:

Iniciación al SEO para Desarrolladores Web

Ver más presentaciones de CORBAX

El diseño cuenta.

Aunque te lo pueda parecer, el diseño y el SEO no están reñidos, sino que ambos deben ir de la mano para cumplir los ojetivos de cualquier sitio web: ¡Obtener ganancias!

El diseño general del sitio web es muy importante para el SEO, ya que es lo primero que ven los usuarios y ello influye mucho en el porcentaje de abandonos, el número de páginas vistas y las conversiones.

Si no eres experto en diseño gráfico, (también), encarga el logotipo a un profesional ya que es una parte importante del diseño.

Hoy día la mayoría de CMS están diseñados para facilitar nuestro SEO, en lugar de dificultarlo. Aunque algunos generan demasiado código innecesario, lo que es malo para el rendimiento. Si vas a trabajar con un CMS, elige bien. Uno de los que mejor evolucionan en estos aspectos es WordPress.

Aparte de elegir un buen CMS y una buena plantilla, estas recomendaciones SEO para desarrolladores web te serán muy valiosas para crear un diseño web potente en SEO.

Contenido de calidad: Claridad, Naturalidad y Rapidez

Calidad y Claridad

  • Asegura una buena experiencia para tus visitantes: No diseñes contra el usuario: Combina creatividad y usabilidad eligiendo siempre la función sobre la forma. En esta Lista de control de usabilidad explico las pautas de usabilidad necesarias, por lo que no las voy a repetir aquí, pero con ellas tendrás buena parte del éxito garantizado.
  • El código limpio es nuestro mejor aliado: Código bien estructurado y correcto semánticamente. Validar el código XHTML con el validador XHTML del W3C, te ayudará a corregir errores y conseguir un código limpio y ligero.
  • Estructura lógica, en HTML – Formatos en una hoja de estilos CSS vinculada: Separar el contenido de la presentación mediante CSS genera un HTML más limpio y con menos líneas de código. Utiliza HTML sólo para la estructura y el contenido. El aspecto trabájalo con las reglas de estilos CSS. En lugar de utilizar estilos en línea, crea reglas CSS en una hoja de estilos vinculada: un archivo externo .css enlazado desde el head (<link href=»estilos.css» rel=»stylesheet» type=»text/css» />). Así tendrás un código más limpio y ligero.
  • Prohibido maquetar con tablas. ¡Las tablas son para mostrar tablas! No las uses jamás para maquetar: generan mucho código inútil que ralentiza la velocidad de carga, además de otros inconvenientes. Usa tablas sólo en caso necesario y optimizadas para los buscadores, (etiquetas caption, etc.) Sustitúyelas por divs.
  • Estructura lógica en los Encabezados: Es importante que sigas la jerarquía correcta: Un sólo h1 para el título principal, h2 para subtítulos, h3 dentro de h2, h4 dentro de h3… Puedes poner la palabra clave principal en h1, secundaria en h2, ciudad en h3…
  • Utiliza tecnologías compatibles, ligeras y sencillas. Muchas de las maravillas que encontramos en Flash, JavaScript… etc., se pueden hacer con HTML5 y CSS.
  • Haz un uso útil de Ajax, Flash, JavaScript, Iframes. Ante la duda, usa texto.
  • Prohibido usar frames, o marcos. Son una puñalada trapera para tus preciosas páginas y desaparecerán para los robots.
  • Dale a cada página su propio enfoque. Cada archivo debe optimizarse individualmente. Puedes crear una página para cada palabra clave importante y optimizarla por separado.
  • Títulos únicos para cada página. No repitas los títulos, procura incluir las palabras clave de cada página en el título. Alrededor de 60 caracteres es lo recomendable para el tag <tittle>, o no aparecerá entero en las páginas de resultados.
  • Metaetiqueta Description adecuada, precisa y atractiva: Redacta una descripción de la empresa o productoque invite a pulsar. Ten en cuenta que es lo que verá el usuario en la página de resultados de Google, entre otras nueve opciones. Tienes que convencer de que buscan la tuya.
  • Haz buen uso de las palabras clave: En este artículo: Palabras clave: la base del diseño web encontrarás lo que necesitas saber en cuanto a las palabras clave, uno de los factores más importantes para el buen SEO de tu sitio web.
  • Enlaza el logotipo a la página de inicio.
  • Menús CSS: Navegación indexable para los robots. No utilces imágenes para los menús, ni Flash… Utiliza texto y dales el aspecto que quieras con las CSS. Hay muchos menús CSS ya disponibles, desplegables, impactantes. Con las CSS se pueden hacer tantas virguerías como en Flash, JavaScript, etc. No más de 7 enlaces por menú.
  • Si tienes enlaces en JavaScript, inclúyelos también en HTML. Javascript no debe ser una barrera de acceso para los contenidos de la página.
  • Texto alternativo (alt) en las imágenes. Necesario. Ha de ser descriptivo y conciso. Tiene mucho sentido desde el punto de vista del SEO porque es la información que dice a los motores de búsqueda y otras tecnologías lo que la imagen representa. Te recomiendo mantenerlo por debajo de los 140 caracteres.
  • El nombre del archivo de imagen: El nombre del archivo también es información útil para los buscadores. Esfuérzate un poco y evita cosas como «imagen-01», «imagen-02″…
  • Títulos (title) en los enlaces y en las imágenes. Añade la etiqueta (title) a las imágenes y a los enlaces, (con palabras clave, mejor).
  • El texto que rodea las imágenes y los enlaces. El texto alrededor de una imagen es importante para el SEO porque dice mucho sobre la propia imagen.
  • Optimiza tus Formularios para mejorar las conversiones: Mejorar la usabilidad de los formularios en tu sitio web puede tener un gran impacto positivo en el aumento de las tasas de conversión.
  • Optimiza los Documentos PDF. Google valora los PDF como contenido de calidad. Optimízalos también aplicándoles los principios SEO.
  • Optimiza los vídeosLos vídeos son una buena baza para tu sitio web. Ten en cuenta que el vídeo se ha convertido en uno de los formatos de contenido más potente en los últimos años.
  • URL amigables. Procurar utilizar URL cortas y sin caracteres especiales.
  • Palabras clave en nombres de archivos y directorios: (midominio.com/embalajes/bolsas-ecologicas.html)
  • Mapa del sitio para los usuarios. Los mapas del sitio mejoran la Usabilidad, proporcionando una vista global del sitio, y ayudan en la indexación.
  • Rastro de migas de pan (breadcrumbs) El rastro de migas de pan es una herramienta de navegación jerarquizada que representa la ruta de navegación y realiza funciones esenciales para la usabilidad y el SEO: facilita la navegación a los usuarios y ayudan a los motores de búsqueda a categorizar el contenido. Muy recomendable.
  • Validar el código XHTML y las hojas de estilo CSS con los Validadores del W3C, no es necesario pero es recomendable y útil para el desarrollo web.
  • Pruebas invisibles a los buscadores. Analiza el sitio con las herramientas de rastreo antes de publicarlo. Hay muchas herramientas en el mercado, como Browser.com.

Calidad y Naturalidad

  • Por favor escribe para humanos. Contenido creado para los usuarios y optimizado para los buscadores (SEO).
  • Corrección sintáctica, semántica y ortográfica: Contenido fresco, bien redactado y útil, con buena ortografía, con enlaces pertinentes. Google está dando importancia a estas cosas.
  • Crea contenido original. No copies. Google está potenciando a los sitios con contenido original y penalizando a los sitios que solo copian contenido.
  • Añade contenido orgánico a tu sitio de forma regular: Tanto para alentar a los visitantes a volver más a menudo a tu sitio web como para que los robots rastreen tu página frecuentemente y atraer más enlaces entrantes de calidad. Crea un blog en el mismo dominio y actualízalo frecuentemente.
  • No seas tramposo. Evita texto invisible o diminuto, enlaces escondidos, exceso de palabras clave…

Calidad y Rapidez

Reducir el tiempo de carga de tu sitio web, además de importante para la usabilidad, es un factor relevante para el SEO, desde marzo de 2010.

  • Minimiza el tiempo de carga: Aquí: Mejorar velocidad de carga del sitio web, tienes muchos consejos y herramientas para medir y mejorar la velocidad de carga de tu sitio web.
  • Recomiendo como Tiempo Óptimo: 2 segundos. Tiempo Máximo: 5 segundoss.
  • Con la herramienta gratuita GTMetrix o WebPagetest podemos medir la velocidad de nuestra web y recibir consejos para optimizar la página.
  • Comprime el código HTML.
  • Comprime el CSS, y colócalo todo en una sola hoja de estilos, en archivo externo vinculado.
  • JavaScript, los justos y en archivo externo siempre que se pueda…
  • Imágenes muy optimizadas, y en otro dominio: El mejor servicio para alojar las imágenes es Picasa o Google Site, las imágenes tardan menos en descargarse; los más lentos son Flickr y Dropbox.
  • Especifica las dimensiones de las imágenes: Fotos en JPG, GIFs optimizados para pequeñas imágenes y animaciones, PNG para gráficos.
  • Los mayores problemas de rendimiento los crean: Imágenes, Flash, AJAX; Marcos o Frames; Mapas de imagen; Tablas; Tamaño.

Te recomiendo también este artículo de Iniciablog: Consejos y recursos para optimizar la velocidad del blog.

Y con todo esto no tendrás excusa para no tener una web rápida.

SEO para Desarrolladores Web: Seguimiento del sitio

Algunas pautas importantes de SEO para desarrolladores web, en cuanto al seguimiento del sitio:

Crea una cuenta en Google Webmaster Tools:

Herramientas para Webmaster de Google. Son gratuitas, fáciles de utilizar y obtendrás mucha información valiosa.

Da de alta tus sitios web, verifícalos y envía el sitemap.xml o .html de cada sitio.

Incluye también un archivo robot.txt :

Es un archivo de texto con la extensión .txt, que debes poner en la raíz del sitio, sirve para decirle a los buscadores qué archivos o carpetas no deben indexar:

User Agent: *

Disallow: /archivoX

A través de las Herramientas para Webmaster, podemos hacer un seguimiento del  rendimiento del sitio, enlaces rotos, palabras clave, errores de rastreo, consultas de búsqueda, enlaces al sitio… Y obtener sugerencias para mejorar el sitio.

¡No podrás vivir sin las Webmaster Tools!

Crea una cuenta en Google Analytics:

Sigue la evolución de las visitas mediante Google Analytics. Es imprescindible saber si nos visita alguien y quién.

Añade el código que te proporciona Google Analytics para cada sitio, al final de la etiqueta <head> </head> de tus sitios web.

Recabarás muchos datos como con qué palabras clave te buscan, cuánto tiempo pasan en tu sitio, cuántas y qué páginas visitan, desde qué países, ciudades y sitios web te visitan…

Y con todas las recomendaciones SEO para desarrolladores web que te traigo aquí, ya estás preparado para crear un diseño web potente en SEO.

En otro artículo te mostraré todo lo referente a los enlaces y cómo tener una buena campaña SEO.

*La presentación «Iniciación al SEO para desarrolladores Web» es de marzo, 2011 en Adwe, Murcia.

Si te ha gustado esta entrada puedes dejar un comentario o compartirla ;)


Juana Corbalán
de Corbax

18 comentarios en “SEO para Desarrolladores: Crea un diseño web potente en SEO”

  1. Hola Juana, veo que los enlaces que introduces a sitios de refencia llevan todos la etiqueta no follow, menos los enlaces a los propios post del blog, claro está. ¿Es esto por alguna razón en especial?

    1. Para que indicar a los robots no sigan esos enlaces y evitar que se transfiera PageRank y texto de anclaje a través de ellos. El atributo nofollow evita que Google incluya los enlaces especificados en el gráfico general de mi web. Y para evitar spam en los comentarios, (que la gente acuda a mi web buscando enlaces a su sitio)

  2. Como comenta Mónica un check list que siempre hay que tener en cuenta al comenzar a trabajar en un proyecto seo.
    Por otra parte, como bien dices diseño web y posicionamiento web van cogidos de la mano. De nada o poco sirve un diseño excelente si luego no trabajas el seo de la web y le das visibilidad y malo también tener un buen posicionamiento pero mala imagen por un mal diseño.

    Enhorabuena por tu buen trabajo.

  3. zakelijke adressenbestanden

    Thank you exclusively for in which wonderful submit! I’m going to take a note of your site and appearance the moment again appropriate right here generally

  4. Muchas gracias por tus consejos. Necesitaría ayuda profesional para confeccionar mi pagina web para mi stock de muebles.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba