A gameplay still for the social card

When someone shares a link to Words Are Snake, the platform shows a preview card built from an image on the site. That image was a title card: the wordmark on a dark background, with nothing of the game in it. This change replaces it with a still from the game itself.

Why the card showed no game#

The old card was an SVG that a small script regenerated. Its only job was that one title card, so once the card changed, the script had nothing left to do and was removed along with it.

A still from the recordings#

The new card is 1200 by 630 pixels. It uses a combo still taken from the gameplay recordings the project already makes for its videos, with the wordmark and the tagline “Type words. Steer the snake.” set over it in the game’s dark palette and fonts. Reusing the recording pipeline meant the still shows the game as it plays, not a mock-up.

before   og-image.svg   title card, generated by a script
after    og-image.png   1200×630, combo still from the recordings

Keeping the same URL#

The image kept its filename, so the address that social platforms already know stays the same. The cost is that a platform which cached the old card keeps showing it until its cache expires. Each platform has its own re-scrape tool for refreshing sooner. The alt text for the Open Graph and Twitter image tags now uses the wording of the page description, so the text a screen reader or a card shows matches the page.

Rendered outside the live site#

The card was rendered from a standalone HTML page with Playwright, so the image is a fixed capture rather than a live render of the app. Its layout has been checked as an image file. It has not yet been checked in a live social share preview, which waits until the site has deployed.