Fix website social metadata (#1054)

Add default Starlight description metadata and wire the existing social image into Open Graph and Twitter tags so shared links render a proper preview.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

website/astro.config.mjs

@@ -3,14 +3,20 @@ import starlight from "@astrojs/starlight";
 import { defineConfig } from "astro/config";
 import pagefindResources from "./src/integrations/pagefind-resources";
 
+const site = "https://awesome-copilot.github.com/";
+const siteDescription =
+  "Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience";
+const socialImageUrl = new URL("/images/social-image.png", site).toString();
+
 // https://astro.build/config
 export default defineConfig({
-  site: "https://awesome-copilot.github.com/",
+  site,
   base: "/",
   output: "static",
   integrations: [
     starlight({
       title: "Awesome GitHub Copilot",
+      description: siteDescription,
       social: [
         {
           icon: "github",
@@ -18,6 +24,29 @@ export default defineConfig({
           href: "https://github.com/github/awesome-copilot",
         },
       ],
+      head: [
+        {
+          tag: "meta",
+          attrs: {
+            property: "og:image",
+            content: socialImageUrl,
+          },
+        },
+        {
+          tag: "meta",
+          attrs: {
+            property: "og:image:alt",
+            content: siteDescription,
+          },
+        },
+        {
+          tag: "meta",
+          attrs: {
+            name: "twitter:image",
+            content: socialImageUrl,
+          },
+        },
+      ],
       customCss: ["./src/styles/starlight-overrides.css", "./src/styles/global.css"],
       editLink: {
         baseUrl:

website/src/pages/index.astro

@@ -5,7 +5,28 @@ import Modal from '../components/Modal.astro';
 const base = import.meta.env.BASE_URL;
 ---
 
-<StarlightPage frontmatter={{ title: 'Awesome GitHub Copilot', template: 'splash', pagefind: false, prev: false, next: false, editUrl: false }} hasSidebar={false}>
+<StarlightPage
+  frontmatter={{
+    title: 'Awesome GitHub Copilot',
+    description:
+      'Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience',
+    template: 'splash',
+    pagefind: false,
+    prev: false,
+    next: false,
+    editUrl: false,
+    head: [
+      {
+        tag: 'meta',
+        attrs: {
+          property: 'og:type',
+          content: 'website',
+        },
+      },
+    ],
+  }}
+  hasSidebar={false}
+>
   <div id="main-content">
     <!-- Hero Section -->
     <section class="hero" aria-labelledby="hero-heading">