Configuración de SEO para un sitio web multilingüe con Hugo

¿Qué hacer con `canonical`, `lang` y `hreflang`?

Índice

Traducir tu sitio web con Hugo puede mejorar tu clasificación en Google y Bing, pero solo si el contenido traducido es de alta calidad, localizado y estructurado adecuadamente para el SEO multilingüe.

Las páginas localizadas (no solo traducidas, sino adaptadas culturalmente) suelen reducir las tasas de rebote, aumentar el tiempo en el sitio y mejorar las conversiones. Estos son señales de comportamiento de los usuarios que pueden afectar positivamente tus clasificaciones en SEO.

muchas banderas de diferentes países frente a un edificio administrativo

Hugo es un generador de sitios web estáticos. En esencia, convierte los archivos Markdown a páginas HTML de una manera muy configurable y es bastante rápido. Para más detalles, por favor ve aquí Hugo Cheat Sheet, también estás invitado a explorar la lista de artículos relacionados con Hugo en la parte inferior de esta página.

Pregunta principal: ¿Deberías traducir para SEO?

Escenario La traducción ayuda al SEO? Notas
Traducción humana + localizada + estructurada para SEO ✅ Sí, beneficio fuerte Mejor opción
Traducción de alta calidad con IA + edición + hreflang ✅ Potencialmente Puede clasificarse si la calidad es buena
Traducción automática solo + canonical ❌ No No se clasificará — se usa solo para UX
Traducción automática + sin canonical o hreflang ⚠️ Riesgo Puede provocar penalizaciones por duplicados

HTML requerido para sitios con traducciones literales (automatizadas)

  1. Cada página debe tener el atributo lang en la etiqueta html, por ejemplo:
<html lang="de">
  1. Cada página debe tener una lista de enlaces alternativos para esta página en otros idiomas, por ejemplo, el HTML siguiente describe enlaces alternativos para la misma o una página similar en tres idiomas:
<link rel="alternate" hreflang="en" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">
<link rel="alternate" hreflang="de" href="https://www.glukhov.org/de/post/2025/10/multi-language-website-seo-with-hugo/">
<link rel="alternate" hreflang="ru" href="https://www.glukhov.org/ru/post/2025/10/multi-language-website-seo-with-hugo/">
  1. Cada página del sitio web traducida debe especificar la URL canónica para esta página (la del primer idioma o del idioma original), por ejemplo:
<link rel="canonical" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">

Esto le indicará a los motores de búsqueda que ignoren el índice de páginas no canónicas. Algunos motores de búsqueda, por supuesto, pueden ignorar esto e indexar todas las páginas.

Para páginas web traducidas profesionalmente / manualmente

No especificar <link rel="canonical" puede causar que los motores de búsqueda impongan penalizaciones por duplicados. Pero si traduces manualmente las páginas de tu sitio web, o encargas una traducción profesional, puedes esperar que los motores de búsqueda acepten tu página no canónica como original.

Plantillas de Hugo para sitios web localizados

Debemos tener en cuenta que el tema del sitio web de Hugo puede estar ya soportando todo esto.

<html lang=…

Abre el archivo layouts/_default/baseof.html ya sea en tu carpeta del sitio web de Hugo o en la carpeta de tu tema y asegúrate de que haya algo como:

<!DOCTYPE html>
<html class="no-js" lang="{{ .Site.Language.Lang }}">
<head>
...
	{{ partial "seo-localise.html" . }}	
</head>
...

Ahora abre el archivo layouts/partials/seo-localise.html y coloca allí este código de plantilla HTML:

{{ $defaultLang := .Site.Params.defaultContentLanguage | default "en" }}
{{ $canonical := .Permalink }}

{{ if .IsTranslated }}
  {{ $original := .Translations.GetByLang $defaultLang }}
  {{ if $original }}
    {{ $canonical = $original.Permalink }}
  {{ end }}

{{ end }}

<!-- URL canónica -->
<link rel="canonical" href="{{ $canonical }}">

<!-- Etiquetas de alternativas hreflang -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

Si traduces manualmente tu sitio web, este código podría verse así:

{{ $canonical := .Permalink }}

<!-- URL canónica -->
<link rel="canonical" href="{{ $canonical }}">

<!-- Etiquetas de alternativas hreflang -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

config.toml

En tu config.toml, asegúrate de configurar:

# configure languages on your website

defaultContentLanguage = "en"

[languages]
  [languages.en]
    weight = 1
    languageName = "Inglés"

  [languages.es]
    weight = 2
    languageName = "Español"

  [languages.fr]
    weight = 3
    languageName = "Francés"

Ajusta lo anterior según los idiomas de tu sitio.

Ahora ejecuta el comando hugo para generar un sitio web, luego hugo serve para ejecutar el servidor web de desarrollo, abre el sitio web y ve el código fuente de una página. Asegúrate de que todas esas etiquetas <html> y <link> tengan atributos adecuados.

Enlaces útiles: Generador de sitio web estático Hugo

Enlaces útiles: Markdown