Metadata gambar OpenGraph pada generator situs statis Hugo

Bagaimana cara menambahkan metadata opengraph ke hugo?

Konten Halaman

Metadata gambar Opengraph adalah properti meta og:image. Secara dasar, kita ingin tag <meta property="og:image" content="https://....jpg"> yang benar tergenerasi untuk setiap halaman di situs berbasis Hugo kita.

Logo dan slogan Hugo

Bagaimana metadata OpenGraph dimasukkan

Cari di kode tema Anda untuk

{{ template "_internal/opengraph.html" . }}

Mungkin sudah termasuk. Jika tidak ditemukan di mana pun, Anda dapat mencoba memasukkan sendiri.

  • Buat atau salin dari tema Anda layouts/_default/baseof.html
  • Tambahkan di bagian dalam head:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Selesai? Sekarang generate situs Anda dengan perintah hugo dan periksa file index.html yang dihasilkan untuk beberapa halaman.

hugo
head -100 public/post/test/index.html

Anda tidak melihat <meta property="og:image"... di sana, benar?

Baiklah… ada beberapa kondisi tambahan dalam implementasi standar.

Dokumentasi resmi Hugo

https://gohugo.io/templates/embedded/#open-graph

  1. Secara dasar Anda perlu menentukan di frontmatter halaman gambar yang ingin dipublikasikan dalam meta, misalnya
---
title: "Judul halaman uji coba Hugo saya"
description: "Deskripsi halaman uji coba Hugo saya"

date: "2025-07-15"
lastmod: "2025-07-15"

tags:
  - Hugo
  - Gambar

images:
  - post-cover1.png
  - post-cover2.png
---

Namun ini mungkin terlambat karena Anda sudah memiliki situs dengan seribu halaman. Jangan khawatir, ada opsi lain.

  1. Simpan gambar di dalam bundle halaman dengan nama khusus.

_internal/opengraph.html memanggil _funcs/get-page-images.html yang mencari file gambar di bundle halaman Anda yang mengandung feature (seperti feature.png), lalu, jika gambar fitur tidak ditemukan, akan mencari gambar dengan nama yang mengandung cover atau thumbnail.

Bagian dari 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 }}
  1. Jika tidak ditemukan, fallback ke parameter global situs - hanya mengambil gambar pertama saja.

Di mana pun dalam hugo.toml

[params]
  description = 'Situs saya yang luar biasa'
  images = ['default-feature-image.jpg']

atau dalam hugo.yaml jika Anda menggunakan format tersebut

params:
  description: 'Situs saya yang luar biasa'
  images:
  - default-feature-image.jpg

Anda dapat menemukan kode tersebut di sana, dalam get-page-images.html:

{{- if and (not $imgParams) (not $imgs) }}
  {{- with site.Params.images }}
    {{- $imgParams = first 1 . }}
  {{- end }}
{{- end }}

Situs ini

Situs ini, seperti yang Anda tebak dan lihat, juga menggunakan Hugo. Di sini saya memiliki gambar thumbnail yang dirujuk dalam frontmatter halaman dengan cara standar Hugo/MainRoad:

thumbnail: this-page-thumbnail.jpg

Namun thumbnail saya sudah diperbesar dengan baik ke lebar 235px… Oh, tapi itu tidak cukup untuk gambar sampul halaman. Dan gambar lainnya memiliki nama yang berbeda semua…

Saya memperbaikinya dengan cara mudah - saya hanya menambahkan parameter gambar default ke konfigurasi situs. Dan sekarang semua halaman sebelum posting ini memiliki gambar dari kluster Kubernetes kecil ini sebagai meta opengraph mereka:

dell usff stack

Mungkin di masa depan saya akan mengubah sesuatu, seperti menulis skrip otomatis untuk memperbarui bagian frontmatter semua halaman, tetapi untuk sekarang ini sudah cukup baik.

Tautan yang berguna