What this is. Visual mock of what LinkedIn, X / Twitter, and Facebook will display when each public page URL is shared, side-by-side : the CURRENT rendering (with the OG tags as they exist today) vs. the PROPOSED rendering after we ship the fix.
Image strategy. Shipped /assets/img/og-card.jpg — a proper 1200×630 landscape generated from hero.jpg (square 1600×1600 letterboxed on a black canvas, since the source is on a black background the bars are invisible). LinkedIn previously had to crop + downscale + re-encode the square → blurry preview. With the dedicated 1200×630 file, no crop, no scaling — sharp result. Used by all 5 pages with OG tags.
Source of truth. Each card uses the exact og:title / og:description we'd write into the page's <head>. What you see here is what LinkedIn will scrape after deploy + Post Inspector refresh.
Next steps if you validate this preview :
1. I prepare the diff on eliteoutsiders-site (4 files : trauma-map.html, library.html, frameworks.html, workwithalex.html) — adds og:title, og:description, og:image, plus the matching twitter:title/description/image.
2. You review the diff, schedule the deploy in your Gantt (/public-site-deploy-process rule).
3. After ship : I run the URLs through LinkedIn Post Inspector, Twitter Card Validator, Facebook Sharing Debugger to force a re-scrape so the new previews show up.
4. Optional later : create 4 dedicated 1200×630 landscape images (one per page) and swap the og:image URLs — no other change needed.