feat: og image and meta description (#538)

Author: canerakdas

src/generators/web/template.html

@@ -6,7 +6,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" href="https://nodejs.org/static/images/favicons/favicon.png"/>
   <title>{{title}}</title>
+  <meta name="description" content="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.">
   <link rel="stylesheet" href="styles.css" />
+  <meta property="og:title" content="{{ogTitle}}">
+  <meta property="og:description" content="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.">
+  <meta property="og:image" content="https://nodejs.org/en/next-data/og/announcement/Node.js%20%E2%80%94%20Run%20JavaScript%20Everywhere" />
+  <meta property="og:type" content="website">
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/generators/web/utils/processing.mjs

@@ -111,14 +111,16 @@ export async function processJSXEntries(
   // Step 3: Create final HTML (could be parallelized in workers)
   const results = entries.map(({ data: { api, heading } }) => {
     const fileName = `${api}.js`;
+    const title = `${heading.data.name} | ${titleSuffix}`;
 
     // Replace template placeholders with actual content
     const renderedHtml = template
-      .replace('{{title}}', `${heading.data.name} | ${titleSuffix}`)
+      .replace('{{title}}', title)
       .replace('{{dehydrated}}', serverBundle.pages.get(fileName) ?? '')
       .replace('{{importMap}}', clientBundle.importMap ?? '')
       .replace('{{entrypoint}}', `./${fileName}?${randomUUID()}`)
-      .replace('{{speculationRules}}', SPECULATION_RULES);
+      .replace('{{speculationRules}}', SPECULATION_RULES)
+      .replace('{{ogTitle}}', title);
 
     // Minify HTML (input must be a Buffer)
     const { code: html } = minifySync(renderedHtml);