From 88dd4b3bc7e52695e4cf6f1b17437ad0d07e251a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 10 Jun 2026 04:45:05 +0000
Subject: [PATCH] chore: publish from staged

---
 website/README.md        | 45 ++++++++++++++++++++++++++++++++++++++++
 website/astro.config.mjs | 20 ++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 website/README.md

diff --git a/website/README.md b/website/README.md
new file mode 100644
index 00000000..f64dccb3
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,45 @@
+# Awesome GitHub Copilot website
+
+Astro + Starlight site published to <https://awesome-copilot.github.com/>.
+
+## Local development
+
+Run these from the **repository root** (they generate the data the site needs first):
+
+```bash
+npm run website:data    # generate public/data/*.json from repo content
+npm run website:dev     # generate data + start the dev server
+npm run website:build   # full production build
+```
+
+## Social preview cards (LinkedIn, etc.)
+
+Shared links render as large preview cards driven by Open Graph / Twitter meta tags.
+LinkedIn (and most platforms) read **Open Graph** — primarily `og:image` — while Twitter/X
+also uses `twitter:card=summary_large_image`. Most tags are produced automatically:
+
+- **Starlight defaults** emit `og:title`, `og:description`, `og:url`, `og:type`,
+  `og:site_name`, and `twitter:card=summary_large_image`.
+- **`astro.config.mjs`** (global `head`) emits the shared image tags: `og:image`,
+  `og:image:width`, `og:image:height`, `og:image:alt`, and `twitter:image`.
+- **`src/components/Head.astro`** adds `twitter:title`/`description`, `og:image:secure_url`,
+  `og:image:type`, and `twitter:image:alt`.
+
+Each page's `title` and `description` (StarlightPage frontmatter) flow into the card text,
+so keep them clear and benefit-focused.
+
+### The image-dimension invariant
+
+`og:image:width` / `og:image:height` in `astro.config.mjs` describe `public/images/social-image.png`
+(currently **2400×1260**, ~1.91:1). Crawlers use these dimensions to understand the image and
+may use them when selecting/rendering the preview. If you swap the image or add a per-page image
+override, update the **full** image set so every tag stays consistent: `og:image`,
+`og:image:width`, `og:image:height`, `og:image:alt`, and `twitter:image` (the last one matters
+because `Head.astro` derives `og:image:secure_url` from `twitter:image` first).
+
+### After deploying
+
+LinkedIn caches scrapes aggressively. To force a refresh and confirm the card renders, run the
+changed URL through the [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/).
+HTML output alone doesn't prove the live card — verify the deployed image returns HTTP 200 over
+HTTPS with `Content-Type: image/png` and no auth.
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 2b1b8d73..bec1e33b 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -6,7 +6,13 @@ 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";
+// Social preview image used for all Open Graph / Twitter cards (e.g. LinkedIn, which is
+// Open Graph-driven). socialImageWidth/Height MUST match the actual pixels of social-image.png.
+// If a page ever overrides og:image, also override og:image:width/height and twitter:image
+// (Head.astro derives og:image:secure_url from twitter:image first).
 const socialImageUrl = new URL("/images/social-image.png", site).toString();
+const socialImageWidth = "2400";
+const socialImageHeight = "1260";
 
 // https://astro.build/config
 export default defineConfig({
@@ -27,6 +33,20 @@ export default defineConfig({
             content: socialImageUrl,
           },
         },
+        {
+          tag: "meta",
+          attrs: {
+            property: "og:image:width",
+            content: socialImageWidth,
+          },
+        },
+        {
+          tag: "meta",
+          attrs: {
+            property: "og:image:height",
+            content: socialImageHeight,
+          },
+        },
         {
           tag: "meta",
           attrs: {