[JosephDavisC]

Author: Joseph Chamdani

What changes were made?

• New public/og-image.png (1200×630, 56 KB), styled after the app: white background, the existing transp-swecc-logo.png with the same brightness(0.6) contrast(1.5) filter the nav bar uses, Interview in bold italic monospace like the header, the tagline in Inter, interview.swecc.org, and a small availability grid that echoes the signup step.
• index.html, added to <head>:
  • description: "Sign up for weekly mock interviews with other SWECC members."
  • Open Graph tags: og:type, og:site_name, og:title (same as the existing <title>, "Mock Interview Signup"), og:description, og:url, og:image with width, height and alt text.
  • twitter:card = summary_large_image, so X shows the full-width image.
  • <link rel="canonical" href="https://interview.swecc.org/">. It's a single-page app, so every route serves this same index.html, and the logged-in pages point search engines back to the signup page.

The existing <title>, favicon and app code are unchanged.

Why are these changes important/necessary?

The page only has a <title>, so an interview.swecc.org link shared in Discord, LinkedIn, iMessage or Slack shows a bare title with no description or image, and Google shows no description (see the Before screenshot). With Interview coming back this week, the signup link will get shared a lot, so it should have a proper preview card.

Same change as swecc-uw/swecc-labs#64 (live on labs.swecc.org) and swecc-uw/swecc-website#169.

Verification:

• npm run lint: 0 errors (the 8 warnings already exist on main).
• npm run spellcheck: 0 issues, including the new tags in index.html.
• npm run build: passes, and dist/og-image.png is in the output (Vite copies public/ as-is).
• Served the build with vite preview: /og-image.png returns 200 image/png (56 KB) and the page has all 12 new tags.
• Image is 1200×630 (1.91:1, the size Facebook, LinkedIn and X recommend) with an absolute https:// URL, which crawlers need.

(If applicable) Screenshots of your changes. Providing an "old vs. new" comparison would be great!

New preview image (public/og-image.png)

Before: metatags.io reading interview.swecc.org today. After: the same tool with this PR's title, description and image (the image can't be read from interview.swecc.org until this is deployed).

Before	After

---

^{Need help on this PR? Tag @codesmith-bot with what you need.}