Add social preview image and page titles

[vipulpandey21]

What I found

I was checking what podman.io sends to crawlers and noticed no page sets og:image. I checked the live site directly:

$ curl -s https://podman.io/ | grep -c "og:image"
0

Same result on /get-started, /features, /community, /docs/installation and /blogs. So any link to podman.io shared on Slack, X, LinkedIn, Discord or Mastodon unfurls with no picture.

The part that made me look closer is that Docusaurus already writes this on every page:

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

That asks the platform for the large image layout, but there is no image to put in it. The site is requesting the frame and not supplying anything to fill it. themeConfig in docusaurus.config.js has no image key, and git log -S "image:" -- docusaurus.config.js comes back empty, so it looks like it was never set rather than removed at some point.

While confirming that I also noticed the four custom pages all render the same title:

$ for p in "" get-started features community; do curl -s https://podman.io/$p | grep -o "<title[^>]*>[^<]*"; done
Podman
Podman
Podman
Podman

They all call a bare <Layout>, so there is no per-page title and no description either. Docs and blog pages do get a description because Docusaurus derives one from the content, but the four main pages get nothing.

What this changes

themeConfig.image now points at a card, which gives og:image and twitter:image on every page. I also added title and description to the four custom pages.

For the card I stayed with things already in the repo rather than introducing anything new:

• the gray-900 to purple-900 gradient used by TestimonialSection/index.tsx:17
• Montserrat, the display font in tailwind.config.js
• static/logos/raw/podman-logo-dark.png, the variant meant for dark backgrounds
• the headline from static/data/home.ts:4

I first tried the brand purple background but the purple "pod" in the wordmark disappeared into it, which is why the darker gradient is there.

That image is a mockup I generated to show the difference side by side. It is not a screenshot from any particular platform, and the "before" panel is text only because that is what platforms fall back to when there is no og:image.

The descriptions are taken from copy already in the repo (home.ts, features.ts, community.ts) rather than written from scratch. The homepage keeps its current title and only gains a description, otherwise it renders as "Podman | Podman".

Checks

yarn build passes. In the build output:

$ grep -rl "og:image" build --include=*.html | wc -l
523
$ find build -name "*.html" | wc -l
523

Titles now come out as Get Started | Podman, Features | Podman, Community | Podman, homepage still Podman.

yarn typecheck reports only the pre-existing get-started.tsx:102 error, which is #537 and not touched here.

The card is 1200x630 and 82 KB.

Notes

• I searched issues and PRs for og:image, opengraph, social card and twitter:card and found nothing, so I do not think this overlaps existing work.
• The real unfurl can only be confirmed once this is deployed, since og:image is absolute and resolves to podman.io. Happy to check it against a validator after merge.
• robots.txt returns 404 while sitemap.xml is fine. Different concern so I left it out, but I can open a separate issue if that is useful.
• I used an LLM to refine this description from my own notes into a more presentable PR body. The investigation, implementation, and the underlying changes are entirely my own, and I can explain any part of them in detail.