# Opengraph help

**URL:** <https://discourse.gohugo.io/t/opengraph-help/44282>\
**Category:** support\
**Created:** [May 9, 2023, 2:12pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282 "2023-05-09T14:12:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![DarrenHumphrey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/darrenhumphrey/32/19400_2.png) [@DarrenHumphrey](https://discourse.gohugo.io/u/DarrenHumphrey)\
**Post date:** [May 9, 2023, 2:12pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/1 "2023-05-09T14:12:17Z")

</div>

Hi. I’ve been running a hugo-based 3D printing blog for about a month and so far I am very pleased with it compared to my previous experiences with wordpress. But I am looking for a little help with opengraph tags.

When I share the URL for a particular post (e.g.[http://localhost:1313/posts/welcome-to-the-dungeon/](http://localhost:1313/posts/welcome-to-the-dungeon/) ) I’d like the social images to be the header image for that post, but instead I get the main site image.

Is there an easy way to accomplish that? I am using the puppet theme.

---

<div class="post-metadata">

**Author:** ![Sid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sid/32/15234_2.png) [@Sid](https://discourse.gohugo.io/u/Sid)\
**Post date:** [May 9, 2023, 2:31pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/2 "2023-05-09T14:31:19Z")

</div>

Hi @DarrenHumphrey. Can you please share some code like frontmatter of you content files, head partial etc.?

From how to request help:

> ### Let us see your code
> 
> Include a **link to the source code repository** of your project, because we really need the _context_ of seeing your templates and partials to be able to help you. It is trivial to do a quick `git clone` on your repo, then run `hugo server` in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

---

<div class="post-metadata">

**Author:** ![DarrenHumphrey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/darrenhumphrey/32/19400_2.png) [@DarrenHumphrey](https://discourse.gohugo.io/u/DarrenHumphrey)\
**Post date:** [May 9, 2023, 7:05pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/3 "2023-05-09T19:05:20Z")

</div>

This is my opengraph.html file.

```auto
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
{{- with $.Params.images -}}
{{- range first 6 . }}
<meta property="og:image" content="{{ . | absURL }}" />{{ end -}}
{{- else -}}
{{- $images := $.Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}}

<meta property="og:image" content="{{ $featured.Permalink }}"/>
{{- else -}}
{{- with $.Site.Params.images }}
<meta property="og:image" content="{{ index . 0 | absURL }}"/>
{{ end -}}
{{- end -}}
{{- end -}}

{{- if .IsPage }}
{{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
<meta property="article:section" content="{{ .Section }}" />
{{ with .PublishDate }}<meta property="article:published_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{ with .Lastmod }}<meta property="article:modified_time" {{ .Format $iso8601 | printf "content=%q" | safeHTMLAttr }} />{{ end }}
{{- end -}}

{{- with .Params.audio }}<meta property="og:audio" content="{{ . }}" />{{ end }}
{{- with .Params.locale }}<meta property="og:locale" content="{{ . }}" />{{ end }}
{{- with .Site.Params.title }}<meta property="og:site_name" content="{{ . }}" />{{ end }}
{{- with .Params.videos }}{{- range . }}
<meta property="og:video" content="{{ . | absURL }}" />
{{ end }}{{ end }}

{{- /* If it is part of a series, link to related articles */}}
{{- $permalink := .Permalink }}
{{- $siteSeries := .Site.Taxonomies.series }}
{{- if $siteSeries }}
{{ with .Params.series }}{{- range $name := . }}
  {{- $series := index $siteSeries ($name | urlize) }}
  {{- range $page := first 6 $series.Pages }}
    {{- if ne $page.Permalink $permalink }}<meta property="og:see_also" content="{{ $page.Permalink }}" />{{ end }}
  {{- end }}
{{ end }}{{ end }}
{{- end }}

{{- /* Facebook Page Admin ID for Domain Insights */}}
{{- with .Site.Social.facebook_admin }}<meta property="fb:admins" content="{{ . }}" />{{ end }}

```

---

<div class="post-metadata">

**Author:** ![Sid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sid/32/15234_2.png) [@Sid](https://discourse.gohugo.io/u/Sid)\
**Post date:** [May 10, 2023, 4:46am UTC](https://discourse.gohugo.io/t/opengraph-help/44282/4 "2023-05-10T04:46:57Z")

</div>

I can make out that the issue is here:

```go
{{- $images := $.Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}}

```

Can you also share frontmatter of your post markdown files?

I need to know which parameter has the ‘header image for that post’.

---

<div class="post-metadata">

**Author:** ![DarrenHumphrey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/darrenhumphrey/32/19400_2.png) [@DarrenHumphrey](https://discourse.gohugo.io/u/DarrenHumphrey)\
**Post date:** [May 10, 2023, 12:55pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/5 "2023-05-10T12:55:32Z")

</div>

sure. Typically something like this.

```auto
+++
author = "Darren Humphrey"
description = "Round up your Dominion play"
tags = [
    "Dominion","Table Top Games","3D Printing"
]
title = "Dominion Carousel"
date = 2023-04-10T16:07:59-04:00
draft = false
categories = []
header_img = "dominion_carousel_painted_big.webp"
toc = true
+++

```

---

<div class="post-metadata">

**Author:** ![Sid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sid/32/15234_2.png) [@Sid](https://discourse.gohugo.io/u/Sid)\
**Post date:** [May 10, 2023, 2:20pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/6 "2023-05-10T14:20:56Z")

</div>

Great.

```auto
header_img = "dominion_carousel_painted_big.webp"

```

Where do you store `dominion_carousel_painted_big.webp` ?  
Is it in `assets/` or in `static/` or next to the markdown file?

Here is what I mean, when I say next to the markdown file:

```auto
content/
└── posts/
    └── post-1/          
        ├── index.md
        └── sunset.jpg <-- image next to markdown file

```

---

<div class="post-metadata">

**Author:** ![DarrenHumphrey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/darrenhumphrey/32/19400_2.png) [@DarrenHumphrey](https://discourse.gohugo.io/u/DarrenHumphrey)\
**Post date:** [May 10, 2023, 2:43pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/7 "2023-05-10T14:43:37Z")

</div>

That’s actually my other question, which is what is the best way to organize the content?

I do this, which doesn’t seem ideal. It seems neater to have the images side by side with posts, but if I do that, how do I reference the images relative to the posts? Right now I can just reference ![](https://yyz2.discourse-cdn.com/flex036/some_image.webp)

content/ └── posts/

└── \_index.md

└── post1.md

└── post2.md

static/

└── header\_image1.webp

└── header\_image2.webp

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 10, 2023, 5:07pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/8 "2023-05-10T17:07:13Z")

</div>

You can bundle your page assets with the content using [page bundles](https://gohugo.io/content-management/page-bundles/), specifically a leaf bundle.

```plaintext
content/
├── posts/
│ ├── post-1/
│ │ ├── header.webp <-- page resource
│ │ └── index.md <-- content
│ ├── post-2/
│ │ ├── header.webp
│ │ └── index.md
│ └── _index.md
└── _index.md

```

Then access the page resource with something like…

```plaintext
{{ with .Page.Resources.Get "header.webp" }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![DarrenHumphrey](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/darrenhumphrey/32/19400_2.png) [@DarrenHumphrey](https://discourse.gohugo.io/u/DarrenHumphrey)\
**Post date:** [May 11, 2023, 2:06am UTC](https://discourse.gohugo.io/t/opengraph-help/44282/9 "2023-05-11T02:06:01Z")

</div>

This is better but still a little confusing. With leaf bundles, how do I access page resources within the frontmatter?

For instance, this does not work when I put featured.webp into a subfolder alongside the post  
+++  
header\_img = “featured.webp”  
+++

Instead I have to something like:  
+++  
header\_img = “posts/this-post-name/featured.webp”\>  
+++  
It seems error prone to have to reference the folder name to access an image.

But referencing an image later after the +++ does work. i.e.

+++  
frontmatter  
+++  
Look at this picture: ![]()

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 11, 2023, 8:19pm UTC](https://discourse.gohugo.io/t/opengraph-help/44282/10 "2023-05-11T20:19:45Z")

</div>

I apologize. I specified the wrong image file name in my previous response.

Your opengraph template has this filter:

```plaintext
{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}

```

```plaintext
content/
├── posts/
│ └── post-1/
│ ├── cover.jpg <-- matches the filter above
│ └── index.md
└── _index.md

```

When rendered, you get something like this in the `head` element:

```html
<meta property="og:image" content="https://example.org/posts/post-1/cover.jpg"/>

```

And there’s no need to specify an image in front matter.

content/posts/post-1/index.md

```plaintext
+++
title = 'Post 1'
date = 2023-05-11T13:11:33-07:00
draft = false
+++

```