og:image support

[awhitford]

Is your feature request related to a problem?

I am trying to make my blog posts friendly to share on X, etc. I specify the cover information in the frontmatter. I am using 1200 x 630 jpg files, and they appear fine on my site. However, when I test the blog links using https://www.opengraph.xyz/ it reports that the image is missing. Of course, I can confirm that by inspecting the HTML source too.

Describe the solution you'd like

I would like the cover image information to create og:image and og:image:alt tags. (This seems in line with how og:title and og:description are controlled through frontmatter.)

Describe alternatives you've considered

I haven't tried adding this information through head frontmatter, but this seems unnecessarily repetitive when cover exists.

Additional Context

Note that according to Cards Markup Tag Reference, twitter:image will leverage the og:image tag.

[HiDeoo]

Thanks for the feedback.

Unfortunately, automatically defining the Open Graph images based on the blog cover images is not really doable as I know some projects (some of my own projects too) where the cover images are not suitable for Open Graph images as they are totally different. One thing to also notice is that cover images uses Astro’s built-in optimized asset support which is something that we wouldn't probably want to use for Open Graph images.

Moreover, the Open Graph images story in Starlight is still not the best at the moment. I'm hoping this is something we can revisit in the future for the plugin when the upstream story is improved.

[awhitford]

So what is the alternative? My Starlight Blog posts have no og:image or twitter:image data which is bad.

Could we get new frontmatter for og:image? And suggest that people serve them through public instead of assets?

[HiDeoo]

My main point is more that I am not convinced that this plugin should be the one to handle this feature. I believe that documentation pages deserve proper social images as much as blog posts do, and this is something that should be handled at the Starlight level.

Until this is something properly implemented in Starlight, any method to add social images to Starlight documentation pages would also work for blog posts as well, e.g. generating them with astro-og-canvas as described in this guide (that's the approach used by Astro Docs for example) or any other method of your choice. The blog does not have to be different from the documentation in this regard.

[awhitford]

Sharing that using the head frontmatter and moving the blog covers to public works. For example:

cover:
  alt: Helping Hands
  image: public/blog_covers/helping-hands.jpg
head:
  - tag: meta
    attrs: 
      property: og:image
      content: /blog_covers/helping-hands.jpg
  - tag: meta
    attrs:
      property: og:image:alt
      content: Helping Hands

I don't love how repetitive this is, but at least it works.