Open graph template not picking global resource

support
1

The image is referenced in front matter and stored in assets folder. But the embedded open graph template returns a “page not found” error.

+++
[params]
  images = ['images/post-7/cover.jpg']
+++
2

We have been there.

  • basic hugo setup
  • basic image as in your missing image post
  • plugin opengraph
<meta property="og:url" content="http://localhost:1313/posts/post-7/">
  <meta property="og:site_name" content="My New Hugo Site">
  <meta property="og:title" content="Post 7">
  <meta property="og:description" content="Text about this post">
  <meta property="og:locale" content="en_US">
  <meta property="og:type" content="article">
    <meta property="article:section" content="posts">
    <meta property="article:published_time" content="2023-02-15T10:00:00-07:00">
    <meta property="article:modified_time" content="2023-02-15T10:00:00-07:00">
    <meta property="og:image" content="http://localhost:1313/images/post-7/cover.jpg">
        <meta property="fb:admins" content="jsmith">

No such message on my side

3

Embedded means it’s Hugo’s own open graph template. So running a quick site build is enough and adding the referenced code. Anyway, the test site is still up GitHub - tikenak-20/quicktest. Check source code of Post 1 and copy the og image link.

4

I suggest you take a look at the source code for the OpenGraph template yourself. Then you can figure out where the images are expected to be. In particular, hugo/tpl/tplimpl/embedded/templates/_partials/_funcs/get-page-images.html at master · gohugoio/hugo · GitHub is worth checking out.

5

incl. the necessary configuration: Embedded partial templates

handled by

just a brief look at the code - looks like only page resources get published

p.s. not sure if I’m missing something but docs seem incomplete …

1 Like
6

The code needs just a minor addition according to grok AI (it works) just after this line.

_funcs/get-page-images.html

{{/* Check if the image is in the assets folder */}}
    {{- $asset := resources.Get $img }}
    {{- if $asset }}
      {{/* Image is in assets folder */}}
      {{- $imgs = $imgs | append (dict
        "Image" $asset
        "RelPermalink" $asset.RelPermalink
        "Permalink" $asset.Permalink) 
}}

cc @jmooring

7

Of course, but does that make sense? In general, the SEO metadata are page-related, and the images related to a page are in general stored in the page bundle. That’s not an obligation, but considered best practice here. So, instead of modifying the default template, putting the images in the page bundle might be an easier solution.

8

I disagree with your assessment because you make an assumption that everyone begins with Hugo afresh. My sites were converted directly from WP by a WP to markdown plugin and it placed all images in static and the links to them in front matter.

For image processing these pages, I had to either move them to assets or mount static to assets. I did the former, and since the embedded opengraph template does not pick these images up, it is necessary to have this issue addressed in the template itself.

Of course even before I asked this question I had checked the templates you both referred to me, but I couldn’t yet figure out from them what was missing. After prompting Grok, it spit out a solution that worked.

9

I don’t assume anything and I can’t here from WP myself. I just said that what is done generally in the Hugo world. You can of course take a different path.

10

I know what is done in the Hugo world. And there is a reason why I suggest the change as you can infer from the previous comments. Anyway, I copied the _funcs/get-page-images.html and added the change, but it would be better if it is supported internally.

11

I think this is a reasonable change, aligning the behavior of the embedded _funcs/get-page-images.html partial with other embedded templates:

See https://github.com/gohugoio/hugo/issues/14062.

2 Likes
12

cool.

Analysis already done, showing what you know, and what you did would be a valuable addition to such issues and save time and effort on both sides. Maybe the title could have been “unable to reference static/global resources for opwngraph template in page front matter”

there’s a reason for that section in the Requesting Help topic

1 Like
13

TBH, I was seeking help from @jmooring due to his familiarity with the code in question, so either way, this to and fro responses made his work easier. I appreciate the help though. Cheers!

14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.