Hugo 검색최적화를 위한 title, description 설정관련 소스 수정

 2026년 8월 20일에 게시됨  |  2 분  |  411 단어

이 웹페이지는 hugo로 만든 웹페이지이다. 오랫동안 잘 쓰고 있긴한데 하나 단점은 구글 검색이 거의 안된다는 것이다. 저품질인지 웹페이지의 검색최적화를 위한 셋팅이 엉망인건지 원인을 알기 어렵다. 그나마 조금은 gemini 의 도움을 빌어 셋팅을 바꿔보기로 했다.

웹페이지의 title, description 정보가 정확한지 체크

사실 잘안되있었다. 웹페이지 대문인 https://sourcebox.dev 에도 전혀 head 태크내 title 및 description 정보가 없었다. 그나마 네이버 서치어드바이저에서 검토를 할수 있었는데, 아래의 결과가 나왔다.

사이트 메인 페이지의 title 태그는, 사이트의 성격을 잘 표현할 수 있는 브랜드명으로 기입해야 합니다. 사이트의 개설 목적에 맞는 브랜드 키워드를 활용하는 것이 좋으며 상호명, 서비스명, 제품명 등의 고유명사를 사용하는 것을 권장합니다. 또한, 검색 노출만을 위하여 제목을 자주 변경하는 경우, 제목이 과도하게 길어서 사용자가 쉽게 사이트를 파악하지 못하는 경우 등은 검색 노출에 불이익을 받을 수 있습니다.

페이지의 description 태그는 페이지의 콘텐츠에 대한 간략한 설명으로 1-2개의 문장으로 구성된 짧은 단락을 사용할 수 있습니다. 단, 2회 이상 반복적인 키워드, 스팸성 키워드, 사이트와 연관이 없는 키워드가 있는 경우 검색 노출에 불이익을 받을 수 있습니다. 또한, 검색 노출만을 위하여 사이트 메인 페이지의 description 태그 내용을 자주 변경하거나 과도하게 길어서 사용자가 쉽게 사이트를 파악하지 못하는 경우도 불이익 대상에 포함될 수 있습니다.

간혹 페이지 내의 전체 내용을 복사해서 붙여넣거나, 제목과 동일한 경우, 사이트 내 다른 페이지들의 태그가 모두 동일한 경우, 단순히 키워드만 나열하는 경우 등이 있습니다. 이런 경우 검색 노출에 불이익을 받을 수 있으니 콘텐츠에 맞는 필요한 문구만을 간추려서 넣어주세요.

결국 hugo 스크립트를 분석해야 했다.

hugo 에서 자동으로 태그를 만들어주는 프로그래밍 부분이 있기 때문에, 그 부분을 검토해봐야 했다. title 관련 소스를 먼저 찾아봤다. homeTitle 이름으로 hugo.toml 에 셋팅하면 된다는 걸 확인했다.

{{ if .IsHome }}
    {{- with .Site.Params.homeTitle }}
      <title>{{ . }}</title>
    {{- end }}
  {{ else }}
    {{- with ($.Scratch.Get "Title") }}
      <title>{{ . }}</title>
    {{- end }}
{{ end }}

두번째로 descrition 관련 소스는 조금 복잡하긴 했는데 확인해보니, .Params.subtitle 셋팅이 되있거나, .Summary 가 있으면 셋팅이 되는데, 메인페이지는 이부분이 전혀 없어서 비어 있었다. .Summary 는 참고로 블로그 포스팅마다 <!--more--> 태그까지의 텍스트를 의미했다.

// layouts/partials/head.html 변경전
{{- else }}
  {{- $.Scratch.Set "Description" ( .Description | default .Params.subtitle | default .Summary ) }}
  {{- $.Scratch.Set "Title" ( .Title | default .Site.Title ) }}
{{- end }}

default .Site.Params.description 을 뒤에 추가해서, 메인페이지에도 나올 수 있도록 했다.

// layouts/partials/head.html 변경후
{{- $.Scratch.Set "Description" ( .Description | default .Params.subtitle | default .Summary | default .Site.Params.description ) }}

이제 title, description 내용을 적어준다.

hugo.toml 에 내용을 추가만 하면 된다.

[Params]
  homeTitle = "SOURCE BOX"
  description = "R프로그래밍, ggplot2 그래프, AI, 경제 관련 블로그입니다."

head 태그내에 잘 적용된것을 확인했다.

<title>SOURCE BOX</title>
<meta name="description" content="R프로그래밍, ggplot2 그래프, AI, 경제 관련 블로그입니다.">
hugo