twitter card images not working on subpages

[jlewi]

Using opengraph to check

On the main page it works https://www.opengraph.xyz/url/https%3A%2F%2Ffoyle.io

If we look at the source for foyle.io we see the tag

<meta name=twitter:image content="https://foyle.io/featured-background.jpg">

This is at commit https://github.com/jlewi/foyle/tree/40a7633449f47db408b2b7e0bf2ae921ad16760e

Notable images isn't being set https://github.com/jlewi/foyle/blob/40a7633449f47db408b2b7e0bf2ae921ad16760e/docs/hugo.toml#L90

So that's not where its coming from.

I'm not seeing any references in my code to "featured-background.jpg" so maybe its coming from the template? or Hugo?

I think this is the Hugo template for twitter cards https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/twitter_cards.html

[jlewi]

https://foyle.io/docs/getting-started/

There isn't twitter:image

<meta name=twitter:card content="summary"><meta name=twitter:title content="Getting Started"><meta name=twitter:description content="Getting started with Foyle">

[jlewi]

the twitter_cards.html template is getting the first image from the images dictionary https://github.com/gohugoio/hugo/blob/196132753649e6e714f05c83122737cabd0da310/tpl/tplimpl/embedded/templates/twitter_cards.html#L2

The images dictionary is from get-pages-html.html template https://github.com/gohugoio/hugo/blob/196132753649e6e714f05c83122737cabd0da310/tpl/tplimpl/embedded/templates/partials/_funcs/get-page-images.html#L4 it looks like that logic does the following methods to find an image

• Check if there is an images parameter in the front matter
• If there is no image in front matter look at resources for an image with "featured" in its nmae
  • I think this is an example of specifying resources in the front matter
• Final fallback is to the images defined in the hugo.toml

[jlewi]

If I sent the front matter like so

images: 
  - title: "cellids.svg"
    link: "http://foyle.io/featured-background.jpg"
    permalink: "https://foyle.io/"

I get the following

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content=""/>

Which suggests we are filling out the template https://github.com/gohugoio/hugo/blob/196132753649e6e714f05c83122737cabd0da310/tpl/tplimpl/embedded/templates/twitter_cards.html#L2

but permalink isn't getting set.

[jlewi]

I think there is login in get-func images for setting Permalink https://github.com/gohugoio/hugo/blob/196132753649e6e714f05c83122737cabd0da310/tpl/tplimpl/embedded/templates/partials/_funcs/get-page-images.html#L22

It looks like that template expects the images parameter to be a list of images. So it looks like the syntax should be the following

images: 
  - "https://foyle.io/someother.jpg"

It looks like depending on the scheme it will try to determine whether its a relative or absolute path.

[jlewi]

Here's an example of a relative path

images: 
  - "/featured-background.jpg"

Path should be relative to how its HTML path e.g. the following gets mapped to

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://localhost:1313/featured-background.jpg"/>

when running hugo locally.

[jlewi]

With https://github.com/jlewi/foyle/pull/74/commits/81a1395f042a82426af863f5eccbfc908b9abe89 The metadata in the preview is

But in opengraph it still complains https://www.opengraph.xyz/url/https%3A%2F%2Fdeploy-preview-74--foyle.netlify.app%2Fdocs%2Fblog%2Fobservability%2F

[jlewi]

I think opengraph might be wrong I tried it in LinkedIn and it showed up https://deploy-preview-74--foyle.netlify.app/docs/blog/observability/

[jlewi]

Looks like a caching issue potentially client side. When I opened up chrome in guest and tried it everything looked good

[jlewi]

Here's how it ended up in twitter https://x.com/jeremylewi/status/1783635172224848107

Didn't work as expected.