Diseño Web SEO

Lección 4 de la Guía SEO para Principiantes

¿Qué es el Diseño Web SEO?

El diseño web SEO consiste en la diagramación, marcado y/o maquetación de una página web con el fin de que esta sea rastreada por los motores de búsqueda e indexada en posiciones privilegiadas de los resultados de un buscador para una palabra clave consultada.

Aunque la estética de una página tiene gran valor para el usuario, el diseño web SEO centra sus esfuerzos en la experiencia del usuario (UE) y usabilidad.

En su más pura esencia el diseño web SEO es el resultado de la integración de 4 elementos.

  1. Marcado
  2. Maquetado
  3. Estructura de Navegación
  4. Diseño Adaptable

¿Cuál es la razón?

Como el navegador se ejecuta en el dispositivo de un usuario sea una computadora, movil o tableta se requerirán recursos del equipo, en especial, memoria RAM. Entre más memoria RAM consuma una página web para mostrarse correctamente, más tardará en cargarse y en la mayor parte de los casos la experiencia del usuario será menos agradable.

Por lo tanto se recomienda a los diseñadores gráficos y a los desarrolladores Font-End crear interfaces visuales sencillas, sacrificando en la menor medida posible la estética.

Marcado

El lenguaje de marcado que se utiliza para definir la estructura visual que se mostrará en una página web es el HTML. La codificación HTML se encarga de indicarle a un navegador (Chrome, Edge, Firefox, etc.) cómo debe "lucir" una página web.

Con el pasar de los años el HTML ha evolucionado a HTML5 una forma de HTML más funcional; que facilita la interacción entre el usuario y elementos de un sitio web sin tener que utilizar lenguajes adicionales.

Un ejemplo de código HTML sería el utilizado para definir un párrafo: <p></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque justo nisi, vel euismod orci pulvinar a. Nunc feugiat massa id quam dignissim condimentum. Maecenas scelerisque orci at efficitur facilisis. Nam congue quis ipsum eleifend accumsan. </p>

Pero, ¿qué tiene que ver el HTML con el SEO?

Cuando un motor de búsqueda rastrea un sitio web, no solo "lee" el texto visible a un usuario, sino la codificación. En el código HTML se incluyen señales importantes que le señalan a un motor de búsqueda, no solo la relevancia y jerarquía de temas dentro del contenido, sino la estructura en sí.

Esto sin pasar por alto títulos del documento, versiones y meta etiquetas.

Por ejemplo:

Título <title>Lorem ipsum dolor</title>
Meta Descripción <meta name="description" content="Lorem ipsum dolor" />
Etiquetas de Encabezado <h1>Lorem ipsum dolor</h1>
Listas <ul><li>Lorem ipsum dolor</li></ul>
Etc...

Con el fin de mantener velocidades aceptables de carga se recomienda que la relación contenido:html sea alta; es decir, más contenido, menos HTML.

Maquetado

Maquetar es el proceso de definir estilos, diagramar y organizar los elementos visuales que componen una página web.

El maquetado se puede realizar con código puro HTML, pero en términos generales se refiere al uso de hojas de estilos, en su mayoría externas, llamadas .CSS que se valen de identificadores y clases para enlazarse a elementos del HTML.

En la hoja de estilos asignamos características a un párrafo con una clase:

<style>
.parrafo {
color: #000;
font-size: 12px;}
</style>

Esto significa que el color del texto del párrafo siguiente será negro y su tamaño de letra de 12 pixeles,

<p class="parrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque justo nisi, vel euismod orci pulvinar a. Nunc feugiat massa id quam dignissim condimentum. Maecenas scelerisque orci at efficitur facilisis. Nam congue quis ipsum eleifend accumsan<p>.

La finalidad de maquetar páginas utilizando hojas de estilos es reducir los costos de computación y desarrollo.

Una utopía SEO sería utilizar solamentes elementos HTML para definir estilos porque mejoraría la velocidad de carga de un sitio web; sin embargo, los excesivos costos no compensarán los esfuerzos de optimización.

¿Qué tan importante es el maquetado para el SEO?

La optimización para motores de búsqueda moderna toma en cuenta la experiencia del usuario (UE), parte de esa UE satisfactoria será el resultado de aplicación de estilos agradables y con dirección a la adaptabilidad multidisposivito que faciliten el consumo del contenido sin importar desde dónde se haga (laptop, móviles, etc).

Estructura de Navegación

La estructura de navegación es la organización de los enlaces a las páginas que componen cada una de las secciones de un sitio web.

Construir una estructura de navegación es uno de los aspectos fundamentales en el diseño web SEO, considerando que un robot rastrea un sitio web a partir de los enlaces que va "encontrando en el camino".

Durante el proceso de desarrollo de un sitio web es muy conveniente crear un esquema donde se enumeren las secciones más importantes de un sitio web (aquellas a las cuales queremos dirigir nuestro tráfico). Valerse de "menús" en la cabecera, barras laterales y pies de página es fundamental.

Veamos un ejemplo de un menú de navegación y pie de página para un sitio web estándar:

Menú Principal (o Cabecera)

  • Inicio
  • Sobre Nosotros
    • Mision y Visión
    • Historia
  • Servicios 1
    • Servicio 1A
    • Servicio 1B
  • Servicios 2
    • Servicio 2A
    • Servicio 2B
  • Blog
  • Contacto
    • Información
    • Sucursales

Pie de Página

  • Mapa de Sitio
  • Afiliados
  • Términos y Condiciones
  • Políticas de Privacidad

En la publicación ¿Qué Secciones debe Tener una Página Web? encontrarás información que respalda esta explicación.

Diseño Adaptable

A pesar de que el 50% de las consultas diarias se realizan a través de dispositivos móviles muchos sitios web aún no han adecuado su diseño a las exigencias del mercado; es decir, no ajustan su tamaño a la pantalla de navegación de forma automática.

Los buscadores, entre ellos Google (el que tiene mayor cuota de mercado) afirman que la adaptabilidad de una página web a la pantalla de navegación es un factor relevante en el posicionamiento.

Adaptar una página web a dispositivos móviles se puede hacer de las siguientes formas:

  1. Mediante estilos adaptables (en la hoja .css) que se ajustan al tamaño del navegador.
  2. Detectando el dispositivo desde el cual es accedida la página y posteriormente, el servidor muestra la versión más adecuada a la pantalla.

¿Tienes preguntas?

[vivafbcomment]