Opengraph-bildmetadata i Hugo-statisk webbplatsgenerator

Hur man lägger till OpenGraph-metadata i Hugo?

Sidinnehåll

Opengraph bildmetadata är metaegenskapen og:image. Grundläggande vill vi ha korrekt genererad tagg <meta property="og:image" content="https://....jpg"> för varje sida på vår webbplats baserad på Hugo.

Hugo logotyp och slogan

Hur OpenGraph metadata inkluderas

Sök i din temakod efter

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

Det är troligtvis redan inkluderat. Om det inte hittas någonstans - kan du försöka inkludera det själv

  • Skapa eller kopiera från ditt tema layouts/_default/baseof.html
  • Lägg till någonstans i head:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Klart? Generera nu din webbplats med Hugo-kommandot och kontrollera den producerade index.html för någon sida.

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

Du ser inte <meta property="og:image"... där, eller?

Okej… det finns några fler villkor i standardimplementeringen.

Hugo officiella dokumentation

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

  1. Grundläggande måste du ange i sidans frontmatter de bilder du vill ska publiceras i meta, till exempel
---
title: "Min Hugo test-sida titel"
description: "Beskrivning av min Hugo test-sida"

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

tags:
  - Hugo
  - Bilder

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

Men detta kan vara för sent eftersom du redan har en webbplats med tusen sidor. Oroa dig inte, det finns en annan alternativ.

  1. Lagra bilder i ditt sidpaket med specialnamn.

Den _internal/opengraph.html som anropar _funcs/get-page-images.html söker i ditt sidpaket efter bildfiler som innehåller feature (som feature.png), sedan, om ingen feature-bild hittas, för bildfiler med namn som innehåller cover eller thumbnail.

Del av 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. Fallback till globala webbplatsparametrar - kommer att ta första bilden.

Någonstans i hugo.toml

[params]
  description = 'Min fantastiska webbplats'
  images = ['standard-feature-bild.jpg']

eller i hugo.yaml om du använder det

params:
  description: Min fantastiska webbplats'
  images:
  - standard-feature-bild.jpg

Du kan hitta den koden där, i get-page-images.html:

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

Den här webbplatsen

Den här webbplatsen, som du har gissat och sett, använder också Hugo. Här har jag miniatyrbilder refererade i sidans frontmatter på det standard Hugo/MainRoad sättet:

thumbnail: denna-sida-miniatyr.jpg

Men mina miniatyrer är redan fint skalade till bredden 235px… Ops… det räcker inte för sidans omslagsbild. Och andra bilder har alla olika namn…

Jag gjorde fixen på det enkla sättet - jag har bara lagt till standardbildparametrar i webbplatskonfigurationen. Och nu har alla sidor innan den här inlägget bilden av den här lilla kubernetes-klustret som deras OpenGraph-meta:

dell usff stack

Jag kan ändra något i framtiden, kanske skriva ett automatiskt skript för att uppdatera alla sidor frontmatter-sektioner, men för tillfället är det tillräckligt.

Användbara länkar