Blogpost cover image not rendering in links

[abrahamalen]

The cover image I added for the blogposts is not rendering when I share the link of the blogpost on some other websites like Twitter or LinkedIn or when I share with someone via chats. Instead of a cover image, the website preview image is being rendered in the links shared in place of that.

Did anyone get an idea on this issue? @luizdepra website-repo-link website-link

[abrahamalen]

any idea on this issue..? @luizdepra

[Shbu]

Hi @abrahamalen It looks like hugo comes with internal templates to support twitter cards and Opengraph. They are available under hugo-coder/layouts/_default/baseof.html file, line 17 and 18. Link to the file.

I think we just need to add relevant tags in the config files or in the front matter of the blog post .md files to make it happen. Do you want to try adding Images tag to the page front matter and see if it is working. Like so ..

[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']

If it didn't work, here's a note I saw on the hugo help section.

If images aren’t specified in the page front-matter, then hugo searches for [image page resources](https://gohugo.io/content-management/image-processing/) with feature, cover, or thumbnail in their name. If no image resources with those names are found, the images defined in the [site config](https://gohugo.io/getting-started/configuration/) are used instead. If no images are found at all, then an image-less Twitter summary card is used instead of summary_large_image.

Try it out, and let me know if it didn't work.

References: https://gohugo.io/templates/internal/#configure-twitter-cards

[abrahamalen]

Hi @abrahamalen It looks like hugo comes with internal templates to support twitter cards and Opengraph. They are available under hugo-coder/layouts/_default/baseof.html file, line 17 and 18. Link to the file.

I think we just need to add relevant tags in the config files or in the front matter of the blog post .md files to make it happen. Do you want to try adding Images tag to the page front matter and see if it is working. Like so ..

[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']

If it didn't work, here's a note I saw on the hugo help section.

If images aren’t specified in the page front-matter, then hugo searches for [image page resources](https://gohugo.io/content-management/image-processing/) with feature, cover, or thumbnail in their name. If no image resources with those names are found, the images defined in the [site config](https://gohugo.io/getting-started/configuration/) are used instead. If no images are found at all, then an image-less Twitter summary card is used instead of summary_large_image.

Try it out, and let me know if it didn't work.

References: https://gohugo.io/templates/internal/#configure-twitter-cards

thanks, @Shbu for the tip will try it out and let you know..!

[abrahamalen]

issue not yet resolved @luizdepra

[luizdepra]

@Shbu is right, OG and Twitter Cards are features provided by Hugo, and hugo-coder just inherit it. You should have read the Hugo's documentation our friend mentioned. The answer to your problem is there.

But, to be 100% sure, I just tested and succeeded to use a different cover image in one of my blog posts. So, there is no issue with this theme and nor with Hugo itself.

Your current cover image when sharing links is this one, right?

As the Hugo's OG/Twitter Card documentation says, if you want to have a different cover image on your shared links, you need to put the images configuration into your post's front-matter. If you wish to use the same image you put in the featuredImage, just add images: ["/images/what-is-github-actions/cover-image.png" ].

Moreover, I don't want to be rude but don't tag me in every comment you add. This is really annoying.