I can't seem to get opengraph image rendered from internal templates

support
1

I have include this default template and have page bundles setup in my project
{{ template “_internal/opengraph.html” . }}

page bundle structure

posts/post1/index.md
posts/post1/images/random-image-cover.jpeg

posts/post2/index.md
posts/post2/images/another-image-cover.jpeg

I only get the following meta tags rendered

<meta property="og:title" content="some title">
<meta property="og:description" content="some description">
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.com">
<meta property="article:published_time" content="2022-07-15T14:36:24+00:00" />
<meta property="article:modified_time" content="2022-07-15T14:36:24+00:00" />

What am I doing wrong?

2

I believe the internal template requires the cover/featured image to be in the same directory as the Markdown file, not in a subdirectory to be ‘autodetected’. You have the images in subdirectory of the page bundle.

1 Like
3

Oh Okay… Let me test it… Thank you for your reply.

4

Changing the image path fixed the issue, just as you mentioned :slight_smile: Thank you

5

I think the documentation could be updated for page bundles as it states

Where can the Resources live?
At any directory level within the leaf bundle directory.

This seems to contradict the requirement to use opengraph template as it states

Hugo uses the page title and description for the title and description metadata. The first 6 URLs from the images array are used for image metadata. If page bundles are used and the images array is empty or undefined, images with filenames matching *feature* or *cover*,*thumbnail* are used for image metadata.

I may have misunderstood it but it was confusing to me at first.

6

It doesn’t contradict. if you look at the _internal template for opengraph:

It shows how it gets the image. First, it looks to see if you have a frontmatter param defined as:

images: ['image.png']

or

images:
  - image.png

and using that, you can put the image anywhere you want in a subdirectory as long as your path there is correctly given.

If it doesn’t find anything there, then it moves on to find matches within the post’s root directory with the substring featured, etc.

That’s why it doesn’t work for you as you expect. It will, if you use the images: frontmatter.

Or you can make your own version based on the internal and have it get images however you want with whatever param key you want.

2 Likes
7

I understand the confusion. It’s difference between what the .Resources functions can use and what the internal template (that gaetawoo showed) uses in its implementation. For an end user, especially new one, “it’s all Hugo” because the difference between ‘core’ Hugo features like .Resources and convenience[1] things like the Open Graph template is not spelled out (that I recall).

[1]: The internal templates can all be replaced with your own versions and if they weren’t included in the Hugo release you would be required to supply them, instead of having a built-in version.

8

Agreed and it makes sense now, it’s just another convenient feature that Hugo offers which isn’t part of core Hugo features. Eventually i am planning to create one on my own as I would need some granular control over SEO. Whatever Hugo provides now works just fine.

1 Like
9

Hi @gaetawoo

Thank you for your reply… My confusion was “At any directory level within the leaf node”. Technically page bundles can look for resources at any directory level (including subdirectories) But that was not the same case for open graph. It is specifically looking for page resources at the parent level (leaf node) $images.GetMatch "*feature*"

I didn’t take a look at the template earlier but i am now aware that i could modify the path to $images.GetMatch "images/*feature*" to specify the sub level.

1 Like
10

There is more discussion on that here

Might be helpful

11

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