Hugo를 사용한 다국어 웹사이트 SEO 설정

`canonical`, `lang` 및 `hreflang`을 어떻게 사용해야 할까요?

Page content

귀하의 Hugo 웹사이트를 번역 는 Google 및 Bing의 순위를 향상시킬 수 있지만, 번역된 콘텐츠가 고급 품질이며, 지역화되고, 다국어 SEO에 적절하게 구조화되어 있어야 합니다.

지역화된 페이지(단순 번역이 아닌 문화적으로 적응된 페이지)는 종종 이탈률을 줄이고, 사이트 내 머무는 시간을 늘리며, 전환율을 개선합니다. 이러한 사용자 행동 신호는 SEO 순위에 긍정적인 영향을 줄 수 있습니다.

여러 국가의 깃발이 행정 건물 앞에 있는 모습

Hugo는 정적 웹사이트 생성기입니다. 본질적으로 Markdown 파일을 매우 유연하게 HTML 페이지로 변환하며, 매우 빠릅니다. 자세한 내용은 여기에서 확인할 수 있습니다 Hugo 체크리스트, 이 페이지 하단에 있는 Hugo 관련 기사 목록도 참고하시기 바랍니다.

주요 질문: SEO를 위해 번역해야 할까요?

시나리오 번역이 SEO에 도움이 되나요? 비고
인간 번역 + 지역화 + SEO 구조화 ✅ 예, 강력한 이점 최선의 선택
고품질 AI 번역 + 편집 + hreflang ✅ 잠재적으로 품질이 좋으면 순위를 얻을 수 있음
자동 번역만 + canonical ❌ 아니요 순위를 얻지 못함 - UX에만 사용
자동 번역 + canonical 또는 hreflang 없음 ⚠️ 위험 중복 벌금을 유발할 수 있음

리터럴(자동) 번역 사이트에 필요한 HTML

  1. 각 페이지는 html 태그에 lang 속성이 있어야 합니다. 예시:
<html lang="de">
  1. 각 페이지는 이 페이지의 다른 언어 버전에 대한 대체 링크 목록이 있어야 합니다. 예시: 아래 HTML은 동일하거나 유사한 페이지의 세 언어 버전에 대한 대체 URL을 설명합니다.
<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. 각 번역된 웹사이트 페이지는 이 페이지의 canonical URL을 명시해야 합니다(원본 페이지의 첫 번째 언어 또는 언어로 표시된 페이지). 예시:
<link rel="canonical" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">

이로 인해 검색 엔진은 canonical이 아닌 페이지의 인덱싱을 건너뛸 것을 권장합니다. 일부 검색 엔진은 이 명령을 무시하고 모든 페이지를 인덱싱할 수 있습니다.

전문적으로/수동으로 번역된 웹 페이지

<link rel="canonical"을 명시하지 않으면 검색 엔진이 중복 벌금을 부과할 수 있습니다. 그러나 웹사이트 페이지를 수동으로 번역하거나 전문 번역을 주문하는 경우, 검색 엔진이 non-canonical 페이지를 원본으로 인식할 수 있기를 기대할 수 있습니다.

지역화된 웹사이트를 위한 Hugo 템플릿

Hugo 웹사이트 테마 가 이미 이 모든 기능을 지원하고 있을 수 있음을 기억해야 합니다.

<html lang=…

Hugo 웹사이트 폴더 또는 테마 폴더의 layouts/_default/baseof.html 파일을 열고, 다음과 같은 내용이 포함되어 있는지 확인하세요:

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

이제 layouts/partials/seo-localise.html 파일을 열고, 다음 HTML 템플릿 코드를 추가하세요:

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

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

{{ end }}

<!-- Canonical URL -->
<link rel="canonical" href="{{ $canonical }}">

<!-- Hreflang Alternate Tags -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

수동으로 웹사이트를 번역하는 경우, 이 코드는 다음과 같을 수 있습니다:

{{ $canonical := .Permalink }}

<!-- Canonical URL -->
<link rel="canonical" href="{{ $canonical }}">

<!-- Hreflang Alternate Tags -->
{{ range .AllTranslations }}
    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}

config.toml

config.toml 파일에서 다음 설정을 확인하세요:

# 웹사이트의 언어를 구성합니다

defaultContentLanguage = "en"

[languages]
  [languages.en]
    weight = 1
    languageName = "English"

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

  [languages.fr]
    weight = 3
    languageName = "Français"

위 설정을 사이트의 언어에 맞게 조정하세요.

이제 hugo 명령을 실행하여 웹사이트를 생성하고, hugo serve 명령을 실행하여 개발용 웹사이트 호스팅을 시작하세요. 웹사이트를 열고 페이지 소스를 확인하여 <html> 및 <link> 태그가 올바른 속성을 가지고 있는지 확인하세요.

유용한 링크: Hugo 정적 웹사이트 생성기

유용한 링크: Markdown