En esta segunda parte hablaremos sobre varios puntos como el uso de palabras clave, atributos necesarios en algunas etiquetas, optimizaciones en la carga de la página web en general, entre otros tips que también son muy importantes para que la página que estas desarrollando tenga un mejor alcance en los buscadores.
Para empezar te comento sobre algunas etiquetas o atributos importantes en el html de tu página web.
- Debes asegurarte de incluir las keywords mencionadas en la primera parte de este tutorial en tus etiquetas <h1> a la <h6>. Lo más óptimo en este caso sería solo utilizar una etiqueta <h1> por cada página en tu sitio web.
- En las etiquetas <img> debes incluir siempre una descripción de la imagen en el atributo “alt”. Por ejemplo:
<img src="./assets/img/RO-LOGO-BLANCO-SINSLOGAN.png" alt="Logo RO Solutions">Esto hará que google pueda indexar las imágenes de tu sitio y que puedan ser encontradas en el buscador de imágenes de google. Esto es importante por temas de accesibilidad ya que algunos lectores de pantalla para personas invidentes utilizan este atributo para describir las imágenes de las páginas.
- Asegúrate de que todos los links a páginas internas o páginas externas no estén rotos ya que googlebot hace un seguimiento de todos los enlaces de la página cada vez que revisa el contenido y es perjudicial para el SEO que tengas enlaces rotos.
- Trata de evitar todo tipo de contenido en flash y enfócate más en utilizar las etiquetas para contenido de HTML5 como por ejemplo la etiqueta <video> o <audio>.
Ahora continuamos con las optimizaciones para que tu sitio para minimizar el tiempo de carga de las páginas web.
- Optimización de imágenes: El formato de preferencia para las imágenes en general debe ser JPEG/JPG. Si una imagen la vas a insertar en un elemento como un <div> y este tiene un tamaño de 300×300 px como máximo, lo ideal sería que de ser posible, redimensiones a 300×300 px el tamaño de tu imagen. Además utiliza herramientas de compresión de imágenes como: compressor.io y compressjpeg para reducir el tamaño en Kb de tus imágenes.
- Minificar archivos HTML, CSS y JS: El proceso de minificar los archivos elimina todos los espacios en blanco en ellos, facilitando la tarea de interpretarlos a tu navegador y además al quitar los espacios también reduces el tamaño total de cada archivo. Puedes utilizar herramientas como HTMLCompressor, HTML Minifier o también extensiones de visual studio code como “minify”.
Recuerda agregar la versión minificada de tus librerías o css como bootstrap o jquery que se reconoce por terminar con la extensión .min.css o .min.js.<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> - En cuanto a los links a librerías externas de CSS como Animate css o Fontawesome no suelen ser vitales para que el contenido cargue rápidamente por lo cual puedes agregar el siguiente código a las etiquetas donde linkeas el documento:
<link rel=“stylesheet” href=“lib/animate.min.css” media=“none” onload=“if(media!=’all’)media=’all'”>
Esto hará que el css no bloque el renderizado de la página y se cargue después del contenido. Sería el equivalente a poner tus scripts antes de cerrar la etiqueta </body>.
- Los scripts los puedes colocar antes de cerrar la etiqueta </body> o también los puedes colocar dentro de las etiquetas <header> pero en este caso tendrías que usar el atributo “defer” con lo que tus scripts se deben ver así:
<script defer src="script.js"></script>
Por ultimo tenemos 2 archivos muy conocidos e importantes que debes incluir en el directorio principal de tu página web también llamado directorio raíz o root.
Robots.txt es un archivo que te permite poner restricciones a los buscadores para que no indexen contenido que no deseas que aparezca en los resultados de búsquedas. Además en este archivo se debe incluir un link a ti archivo sitemap. Ejemplo de un archivo robots.txt:
User-agent: * Disallow: /PHPMailer/ Sitemap: http://www.rosolutions.com.mx/sitemap.xml
Esta página te ayuda a generar tu propio archivo robots: Aqui.
- Sitemap.xml es una lista de todas las URLs de las páginas que deseas que los buscadores indexen y como su extensión lo indica este archivo está escrito en formato XML. Este archivo lo debes agregar en la consola de google o google search console para que sea tomado en cuenta por el buscador.
Aquí tienes una herramienta que escanea tu sitio web y te genera un sitemap Sitemap Generator
Para terminar te comento que el SEO es un tema muy grande y que implica muchos cambios al momento de desarrollar tus páginas web por lo que posiblemente en un futuro continuemos hablando de otros temas relacionados o explicando más afondo alguno de los temas de los que hablamos en las 2 partes de este tutorial.
