feat: implement Open Graph Tags for rich link previews

[Muneerali199]

fix #207

Summary

• Added Open Graph meta tags (og:title, og:description, og:image, og:url, og:type) to public/index.html
• Added Twitter Card meta tags for rich link previews on Twitter/X
• Updated Content Security Policy img-src to allow external og:image loading

Motivation

When the website link is shared on Twitter, LinkedIn, or Discord, it will now appear as a rich card with an image instead of a plain link, increasing click-through rates significantly.

Testing

You can verify the OG tags using:

• Twitter Card Validator: https://cards-dev.twitter.com/validator
• Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
• LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/

Checklist

• I have tested my changes locally
• My code follows the existing code style
• My changes generate no new warnings

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ee414c2c-d023-43ce-840f-728f27da50b8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}