fix: og-image got lost ... again

eleventy.config.js

@@ -403,18 +403,19 @@ export default function (eleventyConfig) {
     if (!outputPath || !outputPath.endsWith(".html")) return content;
 
     // Derive correct page URL and OG slug from outputPath (immune to race condition)
-    // Content pages match: .../type/slug/index.html (plain URLs, no date segments)
+    // Content pages match: .../type/yyyy/mm/dd/slug/index.html
     const postMatch = outputPath.match(
-      /\/([\w-]+)\/([\w-]+)\/index\.html$/
+      /\/([\w-]+)\/(\d{4})\/(\d{2})\/(\d{2})\/([\w-]+)\/index\.html$/
     );
 
     if (postMatch) {
-      const [, type, slug] = postMatch;
-      const pageUrlPath = `/${type}/${slug}/`;
+      const [, type, year, month, day, slug] = postMatch;
+      const pageUrlPath = `/${type}/${year}/${month}/${day}/${slug}/`;
       const correctFullUrl = `${siteUrl}${pageUrlPath}`;
-      const hasOg = hasOgImage(slug);
+      const ogSlug = `${year}-${month}-${day}-${slug}`;
+      const hasOg = hasOgImage(ogSlug);
       const ogImageUrl = hasOg
-        ? `${siteUrl}/og/${slug}.png`
+        ? `${siteUrl}/og/${ogSlug}.png`
         : `${siteUrl}/images/og-default.png`;
       const twitterCard = hasOg ? "summary_large_image" : "summary";
 

lib/og.js

@@ -126,11 +126,19 @@ function formatDate(dateStr) {
 }
 
 /**
- * Use the filename (without extension) as the OG image slug.
- * Matches the last URL path segment, which Eleventy derives from the filename.
+ * Use the date+slug (e.g., 2024-03-31-my-post) as the OG image slug.
+ * Matches the canonical permalink structure.
  */
-function toOgSlug(filename) {
-  return filename;
+function toOgSlug(filePath, fm) {
+  // filePath: content/{type}/{yyyy}-{MM}-{dd}-{slug}.md
+  const filename = basename(filePath);
+  const match = filename.match(/(\d{4})-(\d{2})-(\d{2})-(.+)\.md$/);
+  if (match) {
+    const [, year, month, day, slug] = match;
+    return `${year}-${month}-${day}-${slug}`;
+  }
+  // fallback: use filename only (without extension)
+  return filename.replace(/\.md$/, "");
 }
 
 /**
@@ -453,7 +461,7 @@ export async function generateOgImages(contentDir, cacheDir, siteName, batchSize
       continue;
     }
 
-    const slug = toOgSlug(basename(filePath, ".md"));
+    const slug = toOgSlug(filePath, fm);
     const postType = detectPostType(filePath);
     const date = fm.published || fm.date || "";