Link previews should show a meaningful title and description instead of a blank card.
🧠 Context
index.html currently has a <title> and a viewport meta tag but no description or Open Graph tags. This means when someone shares the URL, chat apps show no preview text. The file to edit is index.html at the project root — add tags inside <head>, after the existing <title> line.
🛠️ Implementation Plan
-
Open index.html and add the following inside <head>, after the <title> line:
<meta name="description"> — use something like: "Explore Carleton CS course prerequisites and plan your degree term by term."- Open Graph tags:
og:type (website), og:title (Carleton CS Course Graph), og:description (same as above), og:url — leave a TODO comment with a placeholder (real URL filled in at deploy time), og:image — leave a TODO comment with a placeholder, a preview image will be created separately. You may need to comment the lines for the two placeholders out for now if you get any errors.
<meta name="theme-color"> set to #ef1a1a or some shade of red similar to Carleton's colors
-
Run pnpm dev and verify the tags are present by inspecting <head> in browser DevTools. There is no visible UI change.
✅ Acceptance Criteria
Link previews should show a meaningful title and description instead of a blank card.
🧠 Context
index.htmlcurrently has a<title>and a viewport meta tag but no description or Open Graph tags. This means when someone shares the URL, chat apps show no preview text. The file to edit isindex.htmlat the project root — add tags inside<head>, after the existing<title>line.🛠️ Implementation Plan
Open
index.htmland add the following inside<head>, after the<title>line:<meta name="description">— use something like: "Explore Carleton CS course prerequisites and plan your degree term by term."og:type(website),og:title(Carleton CS Course Graph),og:description(same as above),og:url— leave aTODOcomment with a placeholder (real URL filled in at deploy time),og:image— leave aTODOcomment with a placeholder, a preview image will be created separately. You may need to comment the lines for the two placeholders out for now if you get any errors.<meta name="theme-color">set to#ef1a1aor some shade of red similar to Carleton's colorsRun
pnpm devand verify the tags are present by inspecting<head>in browser DevTools. There is no visible UI change.✅ Acceptance Criteria
<meta name="description">is present with a meaningful descriptionog:title,og:description,og:type,og:url, andog:imagetags are present (og:urlandog:imagehave TODO comments noting they need the real deployed URL and a preview image respectively)theme-coloris set to#ef1a1aor some shade of redcharset,viewport,title, SPA decode script) are unchangedpnpm buildandpnpm typecheckstill pass