My thumbnail image and summary doesn't show up in links

support
1

When I want to share my post on telegram or twitter my thumbnail for the post doesn’t show up.
What should I do?

2

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

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.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

Sorry my repo is private and I don’t want it to be cloned. I am running my website for more than a year now. I have thumbnail, summary and description in my front-matter but it doesn’t show up in link previews.

4

Without something to look at, I would just be guessing.

5

It’s not really a Hugo related question. You can have an image when you share a link if your theme offers “Open Graph Tags”. Check the docs and add these tags.

6

I actually made the theme myself ,
The thumbnail and summary does show up in LinkedIn but not in twitter!
I can’t put a pin on it.

7

Back to my answer :wink: LinkedIn uses the first image in your content and the description tag. Twitter uses Open Graph Tags.

1 Like
8

So I need to insert open graph metatags all over my theme.

9

I had the same issue. Solved it with gpt and then looked here to see how I would have done it the old way.. I prefer showing inline instructions which are more obvious for helping people. I’m not sure why ananke does not have this baked in. I blindly copied this to my personal layouts and bing! it worked after deployment. public code is located here for this website

:white_check_mark: Best Choice (minimal, clean, works for both WhatsApp and Twitter):

:wrench: Step 1: Create layouts/_internal/opengraph.html

html

CopyEdit

{{ $image := .Params.featured_image | default .Params.image }}
{{ $absImage := $image | absURL }}

<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ with .Params.description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}">
<meta property="og:type" content="article">
<meta property="og:url" content="{{ .Permalink }}">
{{ if $absImage }}
<meta property="og:image" content="{{ $absImage }}">
{{ end }}

:wrench: Step 2: Create layouts/_internal/twitter_cards.html

html

CopyEdit

{{ $image := .Params.featured_image | default .Params.image }}
{{ $absImage := $image | absURL }}

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:description" content="{{ with .Params.description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}">
{{ if $absImage }}
<meta name="twitter:image" content="{{ $absImage }}">
{{ end }}
10

Why? These templates already exist! You can call them using {{ template "_internal...." }} for Hugo versions below v0.146.0 or {{ partial "template-name.html" . }} after that version.

11

I doubt if I pasted your code it would work.
However, if you paste my code, it works.
I think the HUGO community assumes everyone who uses HUGO knows what they are doing. So they refer people to superfluous code documentation links.

12

That’s not ‘my’ code. That’s Hugo code. It is even documented Embedded partial templates. And it works! What you did is override this code.

I assume you didn’t do your research well gohugo-theme-ananke/layouts/_default/baseof.html at main · theNewDynamic/gohugo-theme-ananke · GitHub

Calling the documentation useless insults and demeans the work put in making the documentation as usable as possible, by unpaid volunteers!

1 Like
13

I never said documentation was useless.
I said that someone asked a simple question. They were sent to the documentation link which has more information than they asked for (superfluous) . the response given was “RTFM”.
and yes.. that is the attitude here.. RTFM.
But the HUGO docs say this is not for the beginner.
Instead, someone can paste code that works, and tell people where to paste it.
I came here after I solved my problem to see if the old way would help me, just out of curiosity.

14

And if you had followed the context of the conversation, OP was asked to share there site but they refused. So, they could not be assisted by guesswork, hence the direction to check the docs.

With that attitude and language, I doubt anyone here would be willing to help you. The docs are a reference point, and Hugo encourages users to learn by trial and error Requesting Help.

It is, if the beginner is willing to put in the work. It is even stated in the requesting help guidelines. I don’t know why your choice, as you said, is to copy code blindly.

And I told you that you were just overriding internal templates while the simpler way is to just call them directly in your templates (even though you ignored looking at the theme you are using to see that the code was indeed there). But you chose to ignore my advice and instead rant about other things :backhand_index_pointing_down:

I doubt if I pasted your code it would work.

Anyway, I would advise you to open a new topic if you have a problem with anything Hugo, as this is an old topic that is about to be archived.

1 Like