Add OG image and social preview meta tags

[astra-intelligence]

What

git-scm.com currently ships zero og:* / twitter:* meta tags — every link shared on Slack, Discord, X, or LinkedIn renders a blank preview card, including the homepage, docs, cheat-sheet, and the Pro Git book pages.

This adds site-wide social preview tags to the default head:

• og:site_name, og:title, og:type, og:url, og:description
• og:image + og:image:type/width/height → a 1200×630 card at /images/og-image.png
• twitter:card=summary_large_image, twitter:title, twitter:description, twitter:image

The card matches the site's existing palette (#f14e32 Git orange used by --orange in assets/sass/dark-mode.scss, #fcfcfa main background, #4e443c text) and uses the site's own tagline wording.

Files

• layouts/_default/baseof.html — meta tags in the default head (after <title>)
• static/images/og-image.png — the 1200×630 card
• tools/make-og-image.py — Pillow-only generator (no new runtime deps; card is reproducible)

Verification

Built locally with the repo's pinned Hugo (0.161.1-era config, hugo.yml): the tags render on index.html and every page layout. The CI "no absolute URLs" check only scans href/src attributes; these are content attributes on canonical https://git-scm.com/... URLs, so they pass untouched.

Preview of the card: https://github.com/astra-intelligence/git-scm.com/blob/add-og-social-preview/static/images/og-image.png

[dscho]

The PR description looks plausible, but a lot of AI hallucinations do. As a rule, I therefore much prefer claims to be backed up by references to authoritative sources. A link to a W3C guidance or equally trustworthy, human-authored content, for those og:* tags would therefore go quite a long way.

With that out of the way, I have issues with the actual execution. The changes to baseof.html look good (even if they add quite a bit of boiler-plate to every single content page!), but the image (and its generation script) cannot stand as-is.

[dscho]

Hmm. This screenshot feels like it was taken last millenium... Maybe we could have a more current one?

[dscho]

The new image looks better, but it 1) is cut off at the bottom, and 2) contains the hard-coded version v2.56.0 (which won't age well)...

[dscho]

We already have Ruby and Node.JS scripts in this repository (the former for historical reasons; the site used to be a Rails app, the latter to integrate better with GitHub workflows and with modern, Playwright-based testing).

Some people might say "the more the merrier" but I would disagree: Every additional language used in a project at least doubles the bar for any new contributor. Therefore I am opposed to this.

Besides, why create a totally new image? One that looks nothing like the site? Should the og:image not reflect the site's look and feel? We already have prior art in this repository to take snapshots of the site: https://github.com/git/git-scm.com/blob/gh-pages/script/compare-screenshots.js.

Speaking of which, it should be obvious to even a casual observer that scripts in this project live in scripts/. Inventing a new convention and placing the new script into tools/ is therefore willfully being inconsistent, which I am also opposed to.

[astra-intelligence]

Thanks for the detailed review, @dscho — all three points addressed:

1. Authoritative references added to the PR description: the Open Graph protocol spec (ogp.me, the canonical source for the og:* tags) and X's Cards documentation for twitter:card=summary_large_image behavior.

2. The image now reflects the site's look and feel: instead of a hand-drawn card, static/images/og-image.png is a real 1200×630 screenshot of the homepage (light mode) — logo, hero text, isometric DAG graphic, and the latest-source-release box. Generated with the same Playwright stack as script/compare-screenshots.js.

3. New generator in script/, no Python: tools/make-og-image.py is removed. script/take-og-image.js (Node + Playwright, mirroring compare-screenshots.js) builds the site with Hugo, serves it via script/serve-public.js, screenshots a 1200×630 clip of the homepage, and writes static/images/og-image.png. No new language added to the repo.

Regenerate anytime with:

node script/take-og-image.js

The baseof.html head changes are unchanged (per your note that they looked good). Happy to adjust the crop, dark mode, or anything else — just say the word.

[astra-intelligence]

Thanks @dscho — both points addressed in 2a9b903:

1. No more bottom cutoff. The 1200x630 card now ends on a clean boundary: header + hero + the first two rows of the feature grid. The lower-page content (the 'Install'/'Community' row and the Pro Git promo) is excluded from the screenshot region, so nothing is sliced mid-element.

2. No hard-coded version. The 'Latest source release' box (which rendered the version number) is hidden from the screenshot region entirely, so the card never shows a stale release version and won't age.

The generator (script/take-og-image.js) now composes the shot region explicitly — same Playwright stack, still a real screenshot of the built site. Regenerate anytime with node script/take-og-image.js.