As a contributor, I want the handbook’s SEO preview to use the official CCSS branding image instead of the default Docusaurus image, so that links look more polished and consistent with the rest of our web presence.

🧠 Context

Right now, the CCSS Handbook is using the default Docusaurus image for its SEO/Open Graph preview. This doesn’t match our branding and looks generic when shared on platforms like Discord, Twitter, or Facebook.

We should update the default SEO image to match the one used on the main CCSS website.

See how the default image is set in the main site here:
layouts/partials/head.html

🛠️ Implementation Plan

1. Find the image used for the CCSS website preview

   • It’s defined in layouts/partials/head.html
   • The image is typically stored under /static/images/ or equivalent

2. Add that image to the handbook repo

   • Save it in static/images/ (e.g. static/images/social-preview.jpg)

3. Update the Docusaurus config

   • In docusaurus.config.ts, update the metadata, themeConfig, or headTags to include the new image:

     metadata: [
       { name: 'og:image', content: '/images/social-preview.jpg' },
       { name: 'twitter:image', content: '/images/social-preview.jpg' },
     ],

4. Test the update

   • Push to a preview branch and test the preview using https://ogp.me/ or https://cards-dev.twitter.com/validator

✅ Acceptance Criteria

• The default Docusaurus Open Graph image is no longer used
• The handbook uses the same preview image as the main CCSS website
• The image is hosted in static/images/ and linked via docusaurus.config.ts