Antes de comenzar a leer sobre estas dos palabras, pongamos en contexto que significa cada una de ellas y que es lo que podemos llegar a crear.

HTML

HyperText Markup Language significa Lenguaje de Marcado de Hipertexto, es un estándar manejado por la organización w3c y permite la creación y estructuración de páginas y aplicaciones web.

SEO

Search Engine Optimization significa Optimización de Motores de Búsqueda, es el proceso de mejorar la visibilidad de un sitio web en los resultados de los diferentes buscadores(Google, Yahoo, Bing). Wikipedia

Bien, una vez entendido el significado de estas palabras es necesario aclarar algunos puntos importantes que debemos de saber antes de continuar leyendo:

  • Para entender esté tema debemos comprender como funciona la sintaxis de HTML.
  • Debemos de tener algún editor de código instalado en nuestro espacio de trabajo. Algunas recomendaciones gratuitas VSC, Atom, Sublime Text.
  • NO es necesario entender alguna lógica de lenguaje de programación
  • Tenemos que tener en cuenta que para un buen posicionamiento de un sitio o aplicación web es necesario saber a profundidad diferentes estrategias de SEO.

Conseguir buena visibilidad en motores de búsqueda

En estos últimos meses que llevo trabajando de diseñador y desarrollador Front-end, he realizado sitios para clientes en donde he aplicado algunas estrategias de SEO que sirven para mejorar la visibilidad de su negocio.

En esté tema compartiré algunas estrategias de forma orgánica que me han servido para mejorar la presentación en la búsqueda de una web.

¿Que hacen las etiquetas HTML en los motores de búsqueda?

Algunas de las etiquetas HTML interactúan con los motores de búsqueda, ya que estás le dicen cómo leer correctamente su contenido e indexarlo con palabras clave. Esto significa que cuando se rastrea una web, estás palabras son categorizadas para que luego cuando un usuario haga una búsqueda aparezca nuestro sitio web en los primeros resultados.

Algunas de esas etiquetas también mejoran la forma en que los visitantes ven el contenido en esos motores. Y esto se suma a cómo las redes sociales utilizan etiquetas de contenido para mostrar artículos ó productos, por ejemplo: 👇🏽

1. Etiqueta título

Una de las etiquetas más importantes es el título, ya que se usa para definir cómo los motores de búsqueda la identifican.

Refleja el título del artículo o pagina en sí. Y si no se coloca se perderá la oportunidad de encontrar tu sitio web.

Título de etiqueta normal:

Etiqueta title

A continuación algunos aspectos a considerar cuando se escribe el título:

  • Crear un título único
  • Usar solo una etiqueta <title>...</title> por página
  • Legible
  • Usar fechas, numero y preguntas, solamente si es relevante
  • Usar entre 50 a 60 caracteres

Ejemplo de resultados de búsqueda en Google:

El titulo de la página es "Creative Society: Somos una Growth Hacking Agency"

2. Etiqueta de descripción

Tener etiquetas de descripción es muy útil para presentar una página a una gama mas amplia de búsquedas además del título y se define de la siguiente manera:

Ejemplo de resultados de búsqueda en Google:

La descripción es la que se encuentra debajo del título, de esta manera se mostrara organizada la presentación del sitio web en los motores de búsqueda.

3. Etiquetas para encabezados

Se utilizan para dividir el contenido y también ayudan a tener un texto coherente. Imaginemos leer una página o un articulo web con un solo tamaño de letra, no sería muy legible a la vista del usuario. 😖

Estas etiquetas son las siguientes:

  • <h1></h1> - Se utilizan para títulos de páginas web
  • <h2></h2> - Destaca el tema del contenido
  • <h3></h3> - Hace referencia con respecto a puntos específicos
  • <h4></h4> - Hace referencia a puntos del <h3></h3>
  • <h5></h5> - No se utilizan frecuentemente

4. Atributo alt para imágenes

Esta es la parte más importante de una etiqueta de imagen no solo para SEO sino también para accesibilidad. Esté atributo se muestra cuando una imagen no se encuentra disponible dentro del servidor. Se debe colocar una descripción de la imagen de la siguiente manera:

Esta etiqueta con su atributo alt, indicará a los motores de búsqueda a identificar correctamente de que trata la imagen. También servirá para mostrar esta imagen cuando alguien intente buscar "Paisajes de Morelos" usando imágenes de Google, por ejemplo.

5. Etiquetas de metadatos para redes sociales

Estas etiquetas son excelentes para mostrar una versión compacta de un sitio web en las diferentes redes sociales. Esto es muy frecuente verlo cuando compartimos un articulo o un video por las redes. Se muestra un recuadro como el siguiente 👇🏽.

A continuación se muestra un ejemplo de una etiqueta de Open Graph:

Ahora, si este sitio se comparte en Facebook, la red social extraerá el título directamente de esta etiqueta. Como se vio en el tweet que compartí anteriormente👆🏽, Open Graph también admite cosas como descripciones e imágenes.

Nota: Open Graph es un protocolo que permite que cualquier web se convierta en un gráfico social, para más información acceda a su documentación oficial en ogp.me.

6. Etiqueta para sitios adaptables

Hoy en día es sumamente importante presentar un diseño adaptable, los motores de búsqueda identifican con mayor rapidez a los sitios web que tienen un diseño adaptado a diferentes tamaños de pantalla, esto asegurará que la página aparezca en los primeros lugares si un usuario está buscando a través de un dispositivo móvil.

7. Compresión de archivos

Cuando estamos trabajando en el desarrollo de un sitio web, a menudo se utilizan archivos multimedia ya sea videos o imágenes y cuando finalizamos el sitio, se suben los archivos al servidor con el tamaño de imagen original.

Esto causa que el sitio cargue muy lento o simplemente con una conexión de internet baja no abra  por el exceso de peso de archivos.

Una página que tarda en cargar mas de 3s, Google no la posiciona en los primeros lugares, para eso se tiene que comprimir los archivos multimedia utilizados en el proyecto y también comprimir los archivos de los estilos y los scripts insertados.

Algunas herramientas para comprimir imágenes y archivos:

Conclusión

Ahora ya entendemos como funcionan algunas etiquetas de HTML, que sirven para mejorar el SEO de una manera orgánica.

Aclarando los puntos iniciales: estas son solo algunas estrategias o consejos para que los motores de búsqueda nos encuentre a la hora de que un usuario escriba una palabra clave que tenga nuestro sitio web, esto quiere decir que usando únicamente estos pasos nuestro sitio ya sea el primer lugar de todos, para ello se necesita profundizar más sobre el tema SEO.