Given / When / Then
Given ApexYard's marketing site (site/index.html, site/architecture.html, site/skills.html)
When anyone shares any of those URLs in Twitter / X / LinkedIn / Slack / Discord / iMessage / WhatsApp
Then the share preview renders with no image because all three pages lack an og:image meta tag (verified by SEO audit at origin/dev 9170ed2 — finding S8).
This is the single highest-impact SEO/social finding because the preview image is the primary visual hook in every share UI — sharing without one looks unfinished and trips the recipient's spam-radar.
Repro
Expected behaviour
Every page in site/ has an og:image meta tag pointing at a 1200×630 PNG that visually communicates what the page is about:
site/index.html — the apexyard logo + "where projects get forged" taglinesite/architecture.html — the 5-layer architecture diagram or a stylised version of itsite/skills.html — a small montage / wordcloud of skill names, or the apexyard logo + "51 skills"
Plus the matching twitter:image for clean Twitter cards (the audit's finding S9 — bundles with this ticket since og:image and twitter:image are usually the same asset).
Suggested implementation
- Design / commission three 1200×630 PNGs at
site/og/{index,architecture,skills}.png — keep file size under 200KB each (LinkedIn and Slack truncate large images)
- Add to each HTML's
<head>:
<meta property="og:image" content="https://<marketing-site>/og/<page>.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:image" content="https://<marketing-site>/og/<page>.png">
<meta name="twitter:card" content="summary_large_image">
- Upgrade
twitter:card from summary (small thumbnail) to summary_large_image (full-width card) — better social engagement
- Smoke-test all three previews via opengraph.xyz / linkedin post-inspector / twitter card validator before closing
Acceptance Criteria
Refs SEO-audit 2026-05-20T07-00-36Z findings S8 + S9 (persisted at projects/apexyard/audits/seo-audit/)
Given / When / Then
Given ApexYard's marketing site (
site/index.html,site/architecture.html,site/skills.html)When anyone shares any of those URLs in Twitter / X / LinkedIn / Slack / Discord / iMessage / WhatsApp
Then the share preview renders with no image because all three pages lack an
og:imagemeta tag (verified by SEO audit at origin/dev9170ed2— finding S8).This is the single highest-impact SEO/social finding because the preview image is the primary visual hook in every share UI — sharing without one looks unfinished and trips the recipient's spam-radar.
Repro
/architecture.htmland/skills.html— same resultgrep -c '<meta property="og:image"' site/*.html→ returns 0 for all threeExpected behaviour
Every page in
site/has anog:imagemeta tag pointing at a 1200×630 PNG that visually communicates what the page is about:site/index.html— the apexyard logo + "where projects get forged" taglinesite/architecture.html— the 5-layer architecture diagram or a stylised version of itsite/skills.html— a small montage / wordcloud of skill names, or the apexyard logo + "51 skills"Plus the matching
twitter:imagefor clean Twitter cards (the audit's finding S9 — bundles with this ticket sinceog:imageandtwitter:imageare usually the same asset).Suggested implementation
site/og/{index,architecture,skills}.png— keep file size under 200KB each (LinkedIn and Slack truncate large images)<head>:twitter:cardfromsummary(small thumbnail) tosummary_large_image(full-width card) — better social engagementAcceptance Criteria
og:image,og:image:width,og:image:height,twitter:imagemeta tagssite/og/, are 1200×630, and under 200KB eachtwitter:cardupgraded tosummary_large_imageon all three pagesog:title,og:description,og:url,og:type) preservedRefs SEO-audit
2026-05-20T07-00-36Zfindings S8 + S9 (persisted atprojects/apexyard/audits/seo-audit/)