Opengraph help

support
1

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/ ) 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.

2

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.

1 Like
3

This is my opengraph.html file.

<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 }}
4

I can make out that the issue is here:

{{- $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’.

1 Like
5

sure. Typically something like this.

+++
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
+++
6

Great.

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:

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

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

content/ └── posts/

└── _index.md

└── post1.md

└── post2.md

static/

└── header_image1.webp

└── header_image2.webp

8

You can bundle your page assets with the content using page bundles, specifically a leaf bundle.

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…

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

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:

10

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

Your opengraph template has this filter:

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

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:

<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

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