Saltar a contenido

Optimizar el SEO

Antes de subir cualquier proyecto a producción, es importante comprobar que el SEO (Search Engine Optimization) este correctamente construido. Mencionare una herramienta gratuita que nos ayudara a testear nuestro SEO.

Herramientas online:

  • Open Graph es una herramienta que nos permitira ver la vista previa de la url compartida
  • Squoosh es una herramienta de Google para editar y optimizar imágenes

La importancia del orden:

Para optimizar el SEO, es necesario seguir un orden específico dentro del head. Harry Roberts fue el creador de este orden. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<head>
  <meta charset | http-equiv \ viewport/>
  <title></title>
  <script src="" async></script>
  CSS that icludes @import
  Synchronous JS
  Synchronous CSS
  preload
  <script src="" defer></script>
  prefetch / prerender
  Everything else ('SEO' meta tags, icons, Open Graph, etc.)
</head>

Construcción básica del head con el SEO optimizado:

  • Aquí la configuración general del sitio web 

    1
2
3
    <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
mas...

  • Aquí la información general del sitio web 

    1
2
3
4
    <title>Documentación técnica</title>
<link rel="icon" type="image/png" href="src/img/favicon.png"/>
<meta name="description"  content="Documentación de proyectos, tutoriales de programación, guías de instalación, todo en un único lugar."/>
mas...

  • Aquí la fuente de css y js 

    1
2
3
    <link rel="stylesheet" href="src/css/custom.css"/>
<script src="src/js/custom.js"></script>
mas...

  • Aquí el protocolo general de Open Graph que genera vista previa del enlace cuando es compartido. 

    1
2
3
4
5
6
7
    <meta property="og:url" content="https://zuluta.github.io"/> <!-- url a compartir -->
<meta property="og:type" content="website"/> <!-- tipo de url a compartir -->
<meta property="og:title" content="Documentación técnica"/> <!-- título de url a compartir -->
<meta property="og:description" content="Documentación de proyectos, tutoriales de programación, guías de instalación, todo en un único lugar."/> <!-- descripción de url a compartir -->
<meta property="og:image" content="https://zuluta.github.io/og.jpg"/> <!-- imagen de url a compartir -->
<meta property="og:locale" content="es_ES"/>
mas...

Ejemplo básico con el SEO optimizado
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="es">

  <!-- información que lee el navegador -->
  <head>

    <!-- configuración general del sitio web -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- información general del sitio web -->
    <title>Documentación técnica</title>
    <link rel="icon" type="image/png" href="src/img/favicon.png"/>
    <meta name="description"  content="Documentación de proyectos, tutoriales de programación, guías de instalación, todo en un único lugar."/>

    <!-- fuente de css y js -->
    <link rel="stylesheet" href="src/css/custom.css"/>
    <script src="src/js/custom.js"></script>

    <!-- protocolo open graph -->
    <meta property="og:url" content="https://zuluta.github.io"/> <!-- url a compartir -->
    <meta property="og:type" content="website"/> <!-- tipo de url a compartir -->
    <meta property="og:title" content="Documentación técnica"/> <!-- título de url a compartir -->
    <meta property="og:description" content="Documentación de proyectos, tutoriales de programación, guías de instalación, todo en un único lugar."/> <!-- descripción de url a compartir -->
    <meta property="og:image" content="https://zuluta.github.io/docs/assets/images/og.png"/> <!-- imagen de url a compartir -->
    <meta property="og:locale" content="es_ES"/>

  </head>

  <!-- contenido que ve el usuario -->
  <body>

    <!-- Esto mejora el rendimiento de la página, primero carga el contenido HTML y luego el código JavaScript -->
    <script src="src/js/dictionary-builder.js"></script>
  </body>

</html>
Lo más normal es colocar los scripts Javascript justo antes del cierre de la etiqueta <body>