Elementos web utilizados correctamente para SEO

Última actualización el 16 de enero de 2019

La mayoría de las páginas web están compuestas por 3 elementos básicos, HTML, CSS y JavaScript. Estos bloques de construcción conforman todas las páginas web sin importar lo que usen para representarlas. Cada elemento web tiene su lugar adecuado. Si bien puede haber cierta superposición, usarlos a propósito ayuda a crear una página optimizada para SEO. Entonces, ¿cómo se deben usar estos elementos y cuáles son algunas formas en que se pueden usar de manera indebida?

Las funciones básicas del elemento web

Comparemos una página web con una casa. Una casa tiene varias partes, cada una en su lugar y sirviendo a su propósito. En nuestra casa de páginas web, el HTML se asemeja a los elementos web estructurales, las vigas, las paredes, los cimientos. HTML proporciona un diseño de contenido de página importante, delineando su orden y qué elementos aparecen y dónde.

CSS se debe utilizar para el estilo. Si nos limitamos a la ilustración de la casa, este sería el color de sus paredes, sus gabinetes, qué tipo de piso tiene, etc. Los colores de su página, los tamaños de fuente, el diseño real de la página también se pueden definir en el CSS. Pero espera, ¿no debería estar el diseño en HTML? Buena pregunta. Mientras que HTML debe diseñar los elementos que estarán en su página, CSS debe controlar cómo se mostrarán esos elementos en esa página. CSS es responsable de gran parte de la capacidad de respuesta de la web.

Ahora que su casa está construida, es hora de algunos servicios públicos, como la electricidad y el agua corriente. Debe usarse JavaScript para los elementos interactivos de su página, como cambiar elementos al hacer clic, mostrar datos, etc. JavaScript se puede usar para cambiar la apariencia completa de su página, lo que funciona bien si la está adaptando a una determinada audiencia o caso de uso.

¿Por qué separarlos?

Entonces, si puede usar HTML y CSS para el diseño y JavaScript y CSS para el estilo, ¿por qué separarlos? Cuando Google indexa su página, busca indicadores clave sobre de qué se trata su página y cómo funciona. Si usa uno de los elementos de manera inapropiada, puede enviar señales incorrectas y dañar su clasificación. Esto puede suceder a menudo cuando se trabaja con editores de CMS que usan elementos predeterminados o que ejecutan JavaScript innecesario que ralentiza las páginas para hacer cosas que se podrían hacer en CSS.

Entonces, repasemos algunos de los usos indebidos comunes.

Uso indebido de etiquetas de encabezado

Uno de los usos indebidos más comunes es el uso de etiquetas de encabezado para diseñar elementos web. Las etiquetas de encabezado describen los temas principales de una página, desde la etiqueta H1 más importante (todas las páginas deben tener) hasta la H6. Cuando se usa para diseñar elementos, le está diciendo a Google que esas palabras son de lo que trata su página. O bien, podría estar usando la etiqueta de encabezado incorrecta (como usar un h3 en lugar de un h2 porque le gusta más el tamaño de fuente). En cualquier caso, estás enviando el mensaje equivocado. En su lugar, debe usar CSS para diseñar elementos con el tamaño o la fuente adecuados que desee.

Etiquetas H1 dobles

Otro problema común es tener 2 o más etiquetas H1 en una página. Tu etiqueta H1 debe ser la idea principal de la página; debe decirles a todos (y a todos los bots de rastreo) que visiten la página de qué se trata y, como tal, solo debe tener uno. Tener dos etiquetas H1 es como enviar dos señales diferentes en la página. Algunas personas e incluso temas profesionales tienden a colocar su logotipo en una etiqueta H1. Así que esté atento para asegurarse de que solo haya uno por página.

---

---

Todas las imágenes son imágenes de fondo.

No hay nada de malo en tener una imagen de fondo. Las imágenes son llamativas y pueden agregar mucho valor a su sitio y hacer que los usuarios compren productos o servicios. Pero todas sus imágenes no deben ser imágenes de fondo. Trabajando en un sitio recientemente, encontré que el CMS convertía todas las imágenes en imágenes de fondo. La intención aquí es diseñarlos y cambiarles el tamaño más fácilmente. Si bien puede hacer que se vea mejor, pierde una parte vital del beneficio de las imágenes en su página: el texto alternativo. El texto alternativo describe lo que hay en la imagen y los lectores de pantalla lo utilizan para identificar lo que hay en una imagen. Al hacer que todas sus imágenes sean imágenes de fondo, reduce la accesibilidad de la página, lo que la hace más difícil para las personas con discapacidades y puede recibir un golpe de Google en sus clasificaciones.

Renderizar CSS con JavaScript

Servir innecesariamente CSS a través de JavaScript aumenta los tiempos de carga en las páginas. Es mucho mejor vincular el archivo CSS en el encabezado en lugar de pasar por ese paso adicional. Además, el uso de JavaScript para animaciones simples o efectos de desplazamiento aumenta el tiempo de carga cuando se puede hacer mucho más rápido a través de CSS. Incluso agregar marcos de JavaScript cuando no es necesario puede aumentar los tiempos de carga. Como cargar jQuery para animar un botón. En lugar de escribir JavaScript estándar, o incluso mejor, usar los elementos de animación en CSS o incluso una hoja de estilo de animación CSS, se carga mucho más rápido.

Estilo de elementos web en HTML

Diseñar elementos directamente en el archivo HTML es un tema controvertido. Muchos temas y complementos en WordPress y otros CMS se basan continuamente en la sobrescritura de hojas de estilo y otros complementos. Esto generalmente se ve como una mala práctica. Algunos creadores de contenido escriben estilos directamente en su contenido porque quieren cambiar los estilos de sus temas. ¿Cuál es el problema con esto? A menudo causa problemas de CSS cuando los estilos escritos directamente en los elementos HTML sobrescriben los estilos en el archivo CSS. Para evitar esto, en lugar de escribirlo directamente en el HTML, asigne una clase a los elementos web y agregue una nueva hoja de estilo a la que agregue los estilos. Esto puede evitar problemas con hojas en conflicto que pueden romper o diseñar su sitio incorrectamente.

Uso de HTML para diseñar diseños

Este es un poco complicado porque los temas a menudo combinan selectores CSS con estructura HTML. Esto hace que sea más difícil para una persona realizar cambios en la estructura HTML sin romper los estilos vitales que hacen que la página sea legible y funcional. Por ejemplo:

En el ejemplo, si cambia la estructura del HTML del primero, perdería todos los estilos de ese elemento porque dependía de la estructura. En cambio, desvincular el estilo de la estructura, como en las clases posteriores, le permitirá reutilizar su CSS incluso si cambia la estructura HTML.

Una página correctamente formateada es una página bien optimizada.

El contenido de su página es un factor muy importante en las clasificaciones. También lo es utilizar correctamente los elementos de la página web. Específicamente, HTML, CSS y JavaScript juegan un papel igualmente importante en la optimización del SEO de su página. Al conocer la función de cada elemento web y usarlo de la manera adecuada, puede aumentar su clasificación. Simplemente cree una página que sea a la vez funcional y atractiva. Si está pensando en cambiar los temas para un CMS o agregar CSS o JavaScript personalizado a sus páginas, eche un segundo vistazo y asegúrese de que está utilizando correctamente los elementos web.