Proyecto HIVEWEB
Post anterior: Creando los primeros templates para HIVEWEB
Página web: ahiveweb.com
Post No.- 4 - Construyendo el templates baseof.html con SEO.
En el post anterior hemos creado los primeros templates para nuestra HIVEWEB. Esos templates tienen una estructura muy básica para construir un sitio web utilizando el generador de sitios estáticos HUGO. Ahora en este "post", vamos a mejorar el template baseof.html que es la base para todo el sitio web, haciendo hincapié en el SEO y en todos los aspectos técnicos que nos permitan lograr una página web rápida, segura y funcional.
Rediseñando la estructura de baseof.html
El template más importante es el baseof.html ubicado en /themes/hiveweb/layouts/_default/baseof.html, que es el template base que todos los demás templates utilizan para construir el sitio web. Desde el baseof.html se llaman o introducen los demás templates parciales, los cuales se encuentran en el directorio /themes/hiveweb/layouts/partials/nombre_del_template.html.
Para introducir un template parcial se utiliza el comando partial de GO de la siguiente forma:
{{partial "nombre_del_template.html" . }}
Es muy importante el punto '.' al final, ya que esto instruye que se introduzca todo el contenido del template indicado.
El uso de partial permite modularizar todos los templates de HUGO, logrando construir templates realmente complejos pero muy fáciles de entender. Por ejemplo, vamos a empezar a mejorar nuestro template baseof.html con la estructura que utilizamos en el "post" anterior:
<!DOCTYPE html>
<html>
{{partials "head.html" . }}
<body>
{{partials "encabezado.html" . }}
{{ block "main" . }}
{{ end }}
{{ block "footer" . }}
{{ end }}
</body>
</html>
Como vemos, es nuevamente una estructura web simple, donde hemos incluido dos nuevos templates que son head.html y encabezado.html. Estos dos nuevos templates los vamos a desarrollar más adelante. En head.html vamos a incluir todos los metadatos, script y archivos que son utilizados normalmente en la sección <head> ... </head> de los sitios web. En el template encabezado.html vamos a crear simplemente un encabezado común para toda la página web, aquí es donde comienza el trabajo de diseño web propiamente.
El SEO es fundamental en el diseño web
El SEO (searh engine optimization) para una página web no es algo que se hace al final cuando la web ya está construida, sino que se va incorporando en cada uno de los elementos y detalles que se van agregando al sitio web. Esta es la única forma de obtener una página web que esté realmente optimizada desde el punto de vista del SEO. Por ello, de ahora en adelante, cada vez que introducimos un nuevo elemento, tenemos que analizar su incorporación desde el punto de vista del SEO, de manera que el diseño final sea lo más perfecto posible desde el punto de vista técnico.
Así, la estructura de baseof.html tiene que ser analizada desde la perspectiva del SEO, y ésta estará en constante evolución a medida que vayamos construyendo nuestro sitio web. El primer objetivo que debo cumplir con este template es que su estructura se corresponda con las nuevas estructuras de la Web Semántica y del HTML5. Así, de acuerdo con las mejores prácticas en el diseño visual y estructural de un sitio web, nuestra página debería ser algo parecido a lo que se muestra en el siguiente esquema:
En este esquema no me estoy refiriendo al aspecto visual del diseño de la página web, sino a su diseño semántico, donde lo importante es el tipo de etiquetas que debe tener el sitio web. Esas etiquetas normalmente no son vistas por los visitantes, al menos no los visitantes humanos.
Los visitantes del sitio web
Todo sitio web tiene dos tipos de visitantes: las personas y los robots del internet. El diseño visual se hace exclusivamente pensando en las personas. Sus colores, organización y estética en general solo sirve para llamar la atención y ser del agrado de los visitantes humanos. Una página web bonita y bien organizada probablemente recibirá mucho más visitas humanas que una web fea y desprolija. Sin embargo, los humanos solo llegan a esa página web porque previamente fue visitada por cientos o miles de robots, que construyen con la información que encuentran en ese sitio web sus índices, para luego organizar esa información y ser presentada a los humanos que la buscan a través de los buscadores. Por tanto, los visitante más numerosos de nuestro sitio web son robots y no humanos. Si nuestro sitio web no puede ser entendido por esos robots, entonces es muy poco probable que los visitantes humanos encuentren nuestra web. De eso se trata el SEO, de que los robots entiendan el contenido e información de nuestro sitio web para que puedan mostrarlo a los humanos que buscan esa información. Ese es objetivo que se busca con las etiquetas que se muestran en el esquema anterior, que los robots entienda la estructura de nuestra web.
Diseñando la web para los robots
Para que un robot pueda entender un sitio web debe poder leer la información y entenderla. Para eso es que se utilizan las etiquetas HTML. Actualmente se utiliza el HTML5 que es semántical; eso quiere decir que las etiquetas tiene un nombre que indican su función principal, de manera que los desarrolladores puedan saber claramente qué es lo que se le está informando a los robots. Así, la etiqueta <nav> por ejemplo, le indica a los robots que esos son enlaces de navegación de esa página web. Pero no solo es importante dar las etiquetas adecuadas, sino que su organización es también importante para que los robots entiendan nuestro sitio web. Si por ejemplo, utilizamos más de un <h1> en una página web, le estamos indicando a los robots que nuestra páginas tiene varios títulos principales, y en ese caso, ¿Cuál debe tomar como título de la página? ¿El primero que aparece o el último? o ¿Debe asumir que se trata de diferentes páginas web anidadas? Simples detalles, como que un <h3> debe ser precedido por <h2>, y que un <h2> tiene que ser precedido por un <h1> son esenciales para que los robots entiendan claramente la estructura e información de nuestro sitio web.
Tomando en cuenta la semántica para los robots, nuestro baseof.html debe contener los siguientes elementos semanticales, lo cual se hace con las etiquetas adecuadas del HTML5:
<header>El encabezado de la página web</header>
<nav>Menú de navegación, o cualquier enlace que ayude en la navegación en el sitio</nav>
<main>
Entre las etiquetas main es donde se le indica a los navegadores que está lo más importante y realmente útil de nuestra página web. Lo que queremos que ellos resalten y donde queremos que centren su atención.
<section>
Podemos dividir nuestro contenido principal en varias secciones si es necesario. Cada sección se identifica con la etiqueta section.
<article>
Contenidos individuales de la página web. Puede ser uno solo o múltiples artículos. Los artículos pueden ser fotografías, post, productos, etc.
</article>
<article>
Más contenido principal de la página web. Puede ser uno solo o múltiples
</article>
</section>
</main>
<aside >
contenido secundario, generalmente dinámico que se repite a lo largo del web pero no es el contenido principal de esa página web en particular.
</aside>
<footer>El pié de página de nuestra sitio web.</footer>
Con esta estructura del contenido principal de nuestro sitio web, le estamos dando la información a los robots en un formato que pueden comprender fácilmente.
Pero esta no es toda la información que se le puede pasar a los robots. Hay una enorme cantidad de metadatos que ayudan a explicar la estructura de nuestro sitio web a los robots, y estos se colocan en la etiqueta <head> del sitio. Estos metadatos los iré incorporando poco a poco a medida que avance en el desarrollo de nuestra HIVEWEB.
El baseof.html con SEO
Los templates se pueden volver muy complejos rápidamente, por ello, voy a ir haciendo los cambios paso a paso para que se puedan entender todos los detalles de como construir una HIVEWEB con HUGO. Lo primero es que voy a introducir las etiquetas semánticas principales en el template, e introducir la sección <head> del sitio y un encabezado. El código del nuevo baseof.html es el siguiente:
<!DOCTYPE html>
<html>
{{partial "head.html" . }}
<body>
{{partial "encabezado.html" . }}
<main>
<section class="section">
<p>Aquí va el contenido importante</p>
{{ block "main" . }}
{{ end }}
</section>
</main>
<aside>
<section>
<p class="aside">Algún texto que corresponde con el aside</p>
</section>
</aside>
<footer>
{{ block "footer" . }}
{{ end }}
</footer>
</body>
</html>
El template head.html
El template head.html se guarda en el directorio /themes/hiveweb/layouts/partials/head.html y el contenido que he colocado en dicho archivo es el siguiente:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="{{ .Permalink }}" />
<link rel="icon" type="image/png" href="{{ .Site.BaseURL }}imagenes/favicon.ico">
<title>
{{- if not .IsHome }}
{{ with .Title | title }}{{ . }} | {{ end }}
{{ end }}
{{- .Site.Title -}}
</title>
{{ if .Params.description }}
<meta name="description" content="{{ .Params.description | safeHTML }}">
{{ else if .Site.Params.description }}
<meta name="description" content="{{ .Site.Params.description | safeHTML }}">
{{ end }}
{{ $bulma := resources.Get "estilo.scss" | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
<link rel="stylesheet" href="{{ $bulma.Permalink }}">
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
</head>
Este template es el que contiene todos los metadatos del sitio web que se colocan en la etiqueta <head>, de allí surge el nombre que le he asignado a dicho template.
¿Cuáles son los metadatos que he definido?
meta charset="utf-8"
El primer metadato corresponde con el tipo de codificación web que estamos utilizando y es la UTF-8. Los protocolos de internet requieren que se indique el tipo de codificación que se está utilizando y aquí es donde se define dicha codificación.
meta http-equiv="X-UA-Compatible
Este metadato es para elegir en cuales de los navegadores antiguos de Microsoft (Internet Explorer) se puede mostrar la página web adecuadamente. Se coloca por razones de validación de la página web y en un futuro muy próximo no va a ser necesaria.
viewport" content="width=device-width, initial-scale=1
Este es uno de los metadatos más importantes porque convierte nuestra web en una web "responsive", es decir, que se adapta a los distintos dispositivos electrónicos que existen hoy día como son los "tablets", "smartphones" y para el internet de las cosas, como refrigeradores, tv, etc.
link rel="canonical"
Este metadato le indica a los robots que esta dirección URL de la página es la principal y la más importante de todas las posibles copias que puedan existir en el sitio web. Con este metadado se evitan muchas penalizaciones en los buscadores ya que le indica que no está creando contenidos duplicados o copias.
link rel="icon"
Define el ícono (favicon) que se mostrara en los distintos navegadores.
title
Este metadado define el título de la página web. Es tal vez la información más importante que requieren los robots para entender el contenido de tu página web. En este caso utilizo comandos de golang (GO) para indicar que si no es la "home page" coloque el título definido en el archivo Markdown y cree un título con el formato "Titulo colocado en Markdow | Título principal del sitio web". Si es la "home page" el título es "Título del Sitio Web". Nunca se debe dejar vacío este metadato por razones de SEO.
meta name="description" content=""
En este metadato se coloca la descripción de la página web o del sitio web. Es otro de los metadatos fundamentales del SEO y siempre se debe colocar en todas y cada una de las páginas de tu sitio web. En este metadato utilizo comandos de GO para rellenar la descripción bien sea con la descripción definida en el archivo Markdown, o con la descripción general del sitio web. Esta descripción es la que suele aparecer como extracto en los resultados de búsqueda de los buscadores como Google y Bing.
link rel="stylesheet" href=
Esto define el archivo donde se encuentran todas las clases de CSS de nuestro sitio web. Aquí le indicamos con lenguaje GO que el enlace lo obtenga de $bulma.Permalink. La variable $bulma es el resultado de procesar el archivo estilo.scss con resources de HUGO, comprimirlo y crear un "fingerprint" para el archivo final de CSS.
meta name="robots" content="index,follow"
meta name="googlebot" content="index,follow"
Se le indica a las "arañas" de los buscadores que procedan a la indexación y rastreo de esta página web.
Aún falta definir muchos más metadatos pero lo haremos más adelante cuando ya estemos más avanzados en el proyecto y sea necesario definir esos nuevos metadatos específicos.
El template encabezado.html
Ahora debemos definir el template encabezado.html pero esto lo dejaremos para los siguietes "post", porque vamos necesitar crear un programa en python para comenzar a extraer información de la cadena de bloques de HIVE para incorporarla en nuestro template.
Resumiendo, a lo largo de este artículo hemos modificado el template baseof.html para incorporar elementos semánticos a través de la estructura de la web y de los metadatos con el template head.html. Ahora debemos crear el template encabezado.html para construir nuestra primera HIVEWEB y subirla a internet.
Espero que les haya gustado el "post", y no duden en hacer cualquier pregunta y sobre todo agradezco sus comentarios.
Saludos.