shareImage and thumbnail seems not working when sharing on Twitter

chipzoller / hugo-clarity

A theme for Hugo based on VMware Clarity

Other

571 stars 263 forks source link

shareImage and thumbnail seems not working when sharing on Twitter #332

Closed rverchere closed 2 years ago

rverchere commented 2 years ago

I have checked all the prerequisites below and I'm yet experiencing a problem

[X] Read the README.md
[X] Have the extended version of Hugo installed
[X] Used the exampleSite's config.toml as a reference
[X] I have included my repository link. Instead of pasting long snippets here.

Describe the bug

Hi, when sharing an article on Twitter, the image (shareImage or thumbnail) is not embedded in the link. There is the same issue in your official blog neonmirrors.net.

Desktop (please complete the following information):

OS: GNU/Linux Mint
Browser Brave Version 1.39.122 Chromium: 102.0.5005.115

chipzoller commented 2 years ago

This was very recently fixed if you can pull and update from Master.

rverchere commented 2 years ago

Hi!

I updated to the latest version. It works when sharing on LinkedIn, but not on Twitter. See on your latest blog post:

Twitter

Thanks!

rootwork commented 2 years ago

Yeah it looks like there is something wrong going on here. The OpenGraph image URL being served on that blog post is https://neonmirrors.net/post/2022-06/examining-pod-security/images/2022-06/examining-pod-security/thumbnail.png.

My guess is LinkedIn just does a better job falling-back if the OG image returns a 404, and goes and searches the page for an image to use.

chipzoller commented 2 years ago

like I said, it should be fixed in master right now. I haven't updated Clarity to include that code which is why the bug is still present.

rverchere commented 2 years ago

like I said, it should be fixed in master right now. I haven't updated Clarity to include that code which is why the bug is still present.

Before answering I've updated the master branch on my personal blog ( hugo + submodule theme @ 6347e453 ) and I still have the issue.

The page contains the correct twitter:image meta property. You can check here

rootwork commented 2 years ago

Hmm. That is strange. Running it through the Twitter Card Validator confirms this.

The only possible issue I can see is the lack of a space before the closing /> on that line in the partial. It's hard for me to believe Twitter would choke on something like that, but it'd be easy enough to fix, so let me try it.

rverchere commented 2 years ago

I'm trying to find differences from other working sites. Here there is no og:image:width, og:image:height and og:image:type meta properties.

rverchere commented 2 years ago

fyi, I've set the largeTwitterCard to true, and now the image is available in tweet cards.

rverchere commented 2 years ago

Deleted largeTwitterCard, still working. I guess there were some cache when I upgraded to the master branch.

You can close the issue.