OG image: three variants (landscape, square, small) shipped on every page

What was done

• Three new source assets in src/assets/:
  • og-landscape.png (1200×630, source 4.2 MB)
  • og-square.png (1200×1200, source 1.9 MB)
  • og-small.png (600×315, source 2.0 MB)
• Removed src/assets/og-default.png (replaced by og-landscape.png for the same primary slot).
• src/layouts/BaseLayout.astro now imports all three, processes each via getImage({ format: "jpg" }), and emits three <meta property="og:image"> tags per page (with their dimension and alt-text companions).
• Per-page ogImage prop on BaseLayout continues to override only the primary 1200×630 landscape variant. Square + small remain site-wide fallbacks.
• Added og:image:alt and twitter:image:alt for accessibility (uses ${site.name} — ${site.tagline}).

Why platforms read this differently

Different social/messaging platforms prefer different aspect ratios for link previews:

• 1200×630 (1.91:1) — Facebook timeline, LinkedIn, X/Twitter summary_large_image, iMessage, Slack
• 1200×1200 (square) — WhatsApp, Pinterest, Discord mobile, iOS Messages thumbnail
• 600×315 (small) — low-res preview surfaces and a fast fallback

The OG protocol explicitly supports multiple og:image tags. Crawlers walk the list and pick whichever fits their card best. By shipping all three on every page, link previews look right on every surface instead of being awkwardly letterboxed or cropped.

Compression results (PNG source → JPG output)

File	Source	Built	Reduction
og-landscape	4.2 MB	65 KB	98.5%
og-square	1.9 MB	156 KB	92%
og-small	2.0 MB	28 KB	98.6%
Total	8.1 MB	249 KB	97%

JPG is the universal floor for OG (every crawler reads it; some legacy ones don’t read WebP yet). Astro’s getImage({ format: "jpg" }) does the conversion + resize at build time.

Files affected

Created

• src/assets/og-landscape.png
• src/assets/og-square.png
• src/assets/og-small.png
• src/content/devlog/2026-04-26-og-image-three-variants.md (this entry)

Modified

• src/layouts/BaseLayout.astro — three image imports, three getImage calls, three pairs of OG meta tags

Removed

• src/assets/og-default.png (replaced by og-landscape.png)

Verification

• Build verify: 20/20 PASS
• All 161 pages emit 3 og:image tags + their dimension companions (verified with grep)
• Twitter still uses the landscape variant via separate twitter:image tag
• Per-page override (ogImage prop) still works — overrides landscape only

Pending / nice-to-have

• Per-page-type overrides via path detection (parallel to the auto-emitted Service schema). Could give homepage / pillar pages / project pages their own primary OG image. Not in scope for this change but the architecture allows it without touching individual pages.
• The tagline field referenced in og:image:alt is read from src/data/site.ts (currently “Intelligence-Driven Civil Engineering”). Update there if the tagline changes.