Unable to get default post image working (ie. og:image tag)

support
1

I have a Hugo blog, using the Mainroad theme.

Despite having my og:image tags being rendered correctly, when sharing a post on social media, such as LinkedIn, its not detecting the correct image. Its merely choosing the first image that appears within the blog post.

Within the rendered HTML, I have:

<meta property="og:image" content="https://leebrownhill.github.io/img/featured/post_logo.png">
<meta property="og:image:type" content="img/png">

However, when I use the LinkedIn Post Inspector, it shows just the first image detected in the main body of the blog post.

Within my hugo.toml file, I have opengraph = true.

I am clearly missing something, so any help would be really appreciated.

2

Not in the code I’m seeing:

Bildschirmfoto 2025-05-10 um 10.20.20
Bildschirmfoto 2025-05-10 um 10.20.201364×262 36.1 KB

Your meta elements for the image are in the body of the HTML where they have no place. You should fix your templates/partials so that all the meta elements are output in the head.

3

Thanks @chrillek, I am not sure how I didnt notice this!

However, I am a little confused as to why this is happening.

This is how I have my copied versions of my layout files (from the theme directory):

image
image347×232 7.08 KB

Within the header.html file, I have made the changes:

<header class="header">
	<!--Google Analytics-->
  	{{ template "_internal/google_analytics.html" . }}

	<div class="container header__container">
		{{ partial "logo.html" . }}
		{{ partial "menu.html" . }}
	</div>

	<meta name="author" content="{{ .Params.author | default .Site.Params.Author }}">
	
	<meta property="og:description" content="{{ .Params.description }}">
	
	<meta property="og:image" content="{{ .Params.og_image | absURL }}">
	<meta property="og:image:type" content="img/png">
</header>

I have not specified any of these parameters in other files (to my knowledge).

Thanks again

4

<header> is NOT <head>. It’s a visual heading on your site. Your meta tags go into the <head> tag. Check out your single.html, it might have to go there.

2 Likes
5

the papermod theme includes the head literally in the baseof.html.

might want to copy baseof to local layouts and add a custom-head.html partial to keep the change to baseof simple.