Hugo 정적 사이트 생성기에서의 Opengraph 이미지 메타데이터
Hugo에 opengraph 메타데이터를 추가하는 방법은?
Opengraph 이미지 메타데이터
는 메타 속성 og:image입니다.
기본적으로, 우리의 Hugo 기반 웹사이트의 각 페이지에 대해 올바르게 생성된 태그 <meta property="og:image" content="https://....jpg">가 필요합니다.
OpenGraph 메타데이터 포함 방법
테마 코드에서 다음을 검색해 보세요:
{{ template "_internal/opengraph.html" . }}
이미 포함되어 있을 가능성이 높습니다. 만약 찾을 수 없다면 직접 포함해 보세요.
- 테마의
layouts/_default/baseof.html을 생성하거나 복사하세요. - 그 안의
<head>태그 내부에 다음을 추가하세요:
<head>
.....
{{ template "_internal/opengraph.html" . }}
완료하셨나요? 이제 hugo 명령어로 사이트를 생성하고 생성된 index.html 파일에서 일부 페이지를 확인해 보세요.
hugo
head -100 public/post/test/index.html
<meta property="og:image"... 태그가 보이지 않나요?
아니요… 표준 구현에는 몇 가지 더 조건이 있습니다.
Hugo 공식 문서
https://gohugo.io/templates/embedded/#open-graph
- 기본적으로 페이지의 frontmatter에 메타에 게시할 이미지를 지정해야 합니다. 예를 들어 다음과 같이:
---
title: "My hugo test page title"
description: "Description of my hugo test page"
date: "2025-07-15"
lastmod: "2025-07-15"
tags:
- Hugo
- Images
images:
- post-cover1.png
- post-cover2.png
---
하지만 이미 수천 개의 페이지가 있는 웹사이트라면 이 방법은 너무 늦을 수 있습니다. 걱정하지 마세요, 다른 방법도 있습니다.
- 페이지 번들에 특별한 이름의 이미지를 저장하세요.
이 _internal/opengraph.html은 _funcs/get-page-images.html을 호출하며, 이 파일은 페이지 번들에서 feature를 포함한 이미지 파일(예: feature.png)을 검색합니다. feature 이미지가 없을 경우 cover 또는 thumbnail을 포함한 이미지 파일을 검색합니다.
get-page-images.html의 일부:
{{- $featured := $resources.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $resources.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured }}
{{- $imgs = $imgs | append (dict
"Image" .
"RelPermalink" .RelPermalink
"Permalink" .Permalink) }}
{{- end }}
- 전역 웹사이트 파라미터로 대체 - 첫 번째 이미지만 사용합니다.
hugo.toml의 일부:
[params]
description = 'My awesome website'
images = ['default-feature-image.jpg']
혹은 hugo.yaml을 사용하는 경우:
params:
description: My awesome website'
images:
- default-feature-image.jpg
이 코드는 get-page-images.html에서 다음과 같이 찾을 수 있습니다:
{{- if and (not $imgParams) (not $imgs) }}
{{- with site.Params.images }}
{{- $imgParams = first 1 . }}
{{- end }}
{{- end }}
이 웹사이트
이 웹사이트는 예상하셨겠지만, Hugo를 사용하고 있습니다. 여기서 저는 표준 Hugo/MainRoad 방식으로 페이지 frontmatter에 썸네일 이미지를 참조하고 있습니다:
thumbnail: this-page-thumbnail.jpg
하지만 제 썸네일 이미지는 이미 예쁘게 리사이즈되어 235px 너비로 설정되어 있습니다… 아, 이건 페이지 커버 이미지에 부족합니다. 다른 이미지들은 모두 이름이 달라요…
이 문제를 쉽게 해결했습니다. 웹사이트 설정에 기본 이미지 파라미터를 추가했고, 이로 인해 이 게시물 이전의 모든 페이지는 이 작은 Kubernetes 클러스터 이미지를 Opengraph 메타로 사용하고 있습니다:
앞으로는 자동 스크립트를 작성해 모든 페이지의 frontmatter 섹션을 업데이트하는 방법을 고려할 수도 있지만, 지금은 충분합니다.
