Add OpenGraph tags & SVGs

[sitiom]

Add OpenGraph tags for "link previews" on sites. Here's what it should look like, for example, in Discord:

Notes:

• I wasn't able to find an SVG version of the Scoop logo, so I had to recreate it myself (Icon-Logo Proposal Scoop#2261 (comment)).
• Social card is in the standard 1200px x 630px resolution, and the font used is "Segoe UI Variable" (The signature Windows 11 font)
• The tags/preview would always be the same, regardless of the page/URL. This is the best that I can do, since this is a static SPA site 😅

[coderabbitai]

Walkthrough

Adds Open Graph and Twitter meta tags to the HTML document's head section to enhance social media sharing previews. The additions include metadata for title, description, URL, image properties, card type, and site attribution without functional changes.

Changes

Cohort / File(s)	Summary
Social Media Metadata index.html	Added Open Graph meta tags (og:title, og:description, og:url, og:image, og:image:width, og:image:height, og:type) and Twitter Card meta tags (twitter:card, twitter:image, twitter:title, twitter:site) to enable rich preview generation when content is shared on social platforms.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A hop through meta tags so fine,
Open Graph and Twitter align,
Social previews now shine so bright,
Shared across the web tonight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add OpenGraph tags & SVGs' accurately summarizes the main changes: adding Open Graph meta tags and SVG assets (social card image) to the HTML head for social media previews.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ec0249b and 2910508.

⛔ Files ignored due to path filters (1)

• public/social-card.png is excluded by !**/*.png

📒 Files selected for processing (1)

• index.html

🔇 Additional comments (1)

index.html (1)

15-21: OpenGraph and Twitter Card tags are correctly implemented.

The social-card.png file exists at public/social-card.png and will be served at the correct URL. The meta tags are properly structured with the appropriate OpenGraph properties, Twitter Card attributes, and image dimensions (1200×630) matching standard social media requirements.

[sitiom]

I've now added the logo and social card SVGs for official references (optimized with SVGO).