fix: restore RSS and metadata parity

Author: aurorascharff

package.json

@@ -9,7 +9,7 @@
     "predev": "node scripts/buildRscWorker.mjs",
     "dev": "next dev",
     "prebuild:rsc": "node scripts/buildRscWorker.mjs",
-    "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs && node ./scripts/generateOgImages.mjs && node ./scripts/validateMetadata.mjs",
+    "build": "node scripts/buildRscWorker.mjs && node scripts/generateRss.js && next build && node --experimental-modules ./scripts/downloadFonts.mjs && node ./scripts/generateOgImages.mjs && node ./scripts/validateMetadata.mjs",
     "lint": "eslint \"{src,plugins}/**/*.{js,jsx,ts,tsx}\" && eslint \"src/content/**/*.md\"",
     "lint:fix": "eslint --fix \"{src,plugins}/**/*.{js,jsx,ts,tsx}\" && eslint --fix \"src/content/**/*.md\"",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",

scripts/validateMetadata.mjs

@@ -36,6 +36,10 @@ const pages = walk(appDir).filter(
 );
 const errors = [];
 
+if (!fs.existsSync(path.join(root, 'public', 'rss.xml'))) {
+  errors.push('public/rss.xml: missing generated RSS feed');
+}
+
 for (const file of pages) {
   const head = getHead(fs.readFileSync(file, 'utf8'));
   const relative = path.relative(appDir, file);
@@ -49,7 +53,6 @@ for (const file of pages) {
     if (!head.includes('<meta name="robots" content="noindex"')) {
       errors.push(`${relative}: missing noindex metadata`);
     }
-    continue;
   }
 
   const required = [
@@ -68,6 +71,24 @@ for (const file of pages) {
     }
   }
 
+  if (
+    relative === 'index.html' &&
+    !head.includes('<link rel="canonical" href="https://react.dev/"')
+  ) {
+    errors.push(
+      `${relative}: homepage canonical URL is missing trailing slash`
+    );
+  }
+
+  if (
+    file.endsWith('_not-found.html') &&
+    !head.includes(
+      '<meta property="og:image" content="https://react.dev/images/og-unknown.png"'
+    )
+  ) {
+    errors.push(`${relative}: incorrect not-found OG image`);
+  }
+
   const ogImageTag = head.match(/<meta property="og:image"[^>]*>/)?.[0];
   const ogImage = ogImageTag && getAttribute(ogImageTag, 'content');
   if (ogImage) {

src/app/community/not-found.tsx

@@ -8,6 +8,10 @@
 import sidebarCommunity from '../../sidebarCommunity.json';
 import {NotFoundContent} from 'components/Layout/NotFoundContent';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
+import type {Metadata} from 'next';
+import {buildNotFoundMetadata} from 'lib/buildPageMetadata';
+
+export const metadata: Metadata = buildNotFoundMetadata();
 
 export default function NotFound() {
   return (

src/app/learn/not-found.tsx

@@ -8,6 +8,10 @@
 import sidebarLearn from '../../sidebarLearn.json';
 import {NotFoundContent} from 'components/Layout/NotFoundContent';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
+import type {Metadata} from 'next';
+import {buildNotFoundMetadata} from 'lib/buildPageMetadata';
+
+export const metadata: Metadata = buildNotFoundMetadata();
 
 export default function NotFound() {
   return (

src/app/not-found.tsx

@@ -11,10 +11,9 @@ import Link from 'components/MDX/Link';
 import sidebarLearn from '../sidebarLearn.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import type {Metadata} from 'next';
+import {buildNotFoundMetadata} from 'lib/buildPageMetadata';
 
-export const metadata: Metadata = {
-  title: 'Not Found – React',
-};
+export const metadata: Metadata = buildNotFoundMetadata();
 
 export default function NotFound() {
   return (

src/app/page.tsx

@@ -10,7 +10,7 @@ import {notFound} from 'next/navigation';
 import sidebarHome from '../sidebarHome.json';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {readMarkdownPage} from 'lib/readMarkdownPage';
-import {buildPageMetadata} from 'lib/buildPageMetadata';
+import {buildPageMetadata, getPageUrls} from 'lib/buildPageMetadata';
 import {DocsPage} from './DocsPage';
 import {HomeContent} from 'components/Layout/HomeContent';
 
@@ -20,16 +20,32 @@ export async function generateMetadata(): Promise<Metadata> {
   return buildPageMetadata({data, pathname: '/', section: 'home'});
 }
 
+function HomePageUrlMetadata() {
+  const {canonicalUrl, languages} = getPageUrls('/');
+  return (
+    <>
+      <link rel="canonical" href={canonicalUrl} />
+      {Object.entries(languages).map(([language, url]) => (
+        <link key={language} rel="alternate" hrefLang={language} href={url} />
+      ))}
+      <meta property="og:url" content={canonicalUrl} />
+    </>
+  );
+}
+
 export default async function HomePage() {
   const data = await readMarkdownPage([]);
   if (!data) notFound();
   return (
-    <DocsPage
-      data={data}
-      pathname="/"
-      section="home"
-      routeTree={sidebarHome as RouteItem}>
-      <HomeContent />
-    </DocsPage>
+    <>
+      <HomePageUrlMetadata />
+      <DocsPage
+        data={data}
+        pathname="/"
+        section="home"
+        routeTree={sidebarHome as RouteItem}>
+        <HomeContent />
+      </DocsPage>
+    </>
   );
 }

src/app/reference/not-found.tsx

@@ -8,6 +8,10 @@
 import sidebarReference from '../../sidebarReference.json';
 import {NotFoundContent} from 'components/Layout/NotFoundContent';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
+import type {Metadata} from 'next';
+import {buildNotFoundMetadata} from 'lib/buildPageMetadata';
+
+export const metadata: Metadata = buildNotFoundMetadata();
 
 export default function NotFound() {
   return (

src/lib/buildPageMetadata.ts

@@ -17,14 +17,30 @@ function getDomain(languageCode: string): string {
   return subdomain + 'react.dev';
 }
 
+export function getPageUrls(pathname: string): {
+  canonicalUrl: string;
+  languages: Record<string, string>;
+  siteDomain: string;
+} {
+  const siteDomain = getDomain(siteConfig.languageCode);
+  const canonicalUrl = `https://${siteDomain}${pathname}`;
+  const languages: Record<string, string> = {
+    'x-default': canonicalUrl.replace(siteDomain, getDomain('en')),
+  };
+  for (const code of finishedTranslations) {
+    languages[code] = canonicalUrl.replace(siteDomain, getDomain(code));
+  }
+  return {canonicalUrl, languages, siteDomain};
+}
+
 export function buildPageMetadata({
   data,
   pathname,
   section,
   routeTree,
   title: titleOverride,
 }: {
-  data: PageData;
+  data: Pick<PageData, 'meta'>;
   pathname: string;
   section: PageSection;
   title?: string;
@@ -48,27 +64,23 @@ export function buildPageMetadata({
     ? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
     : 'The library for web and native user interfaces';
 
-  const siteDomain = getDomain(siteConfig.languageCode);
-  const canonicalUrl = `https://${siteDomain}${pathname}`;
+  const {canonicalUrl, languages, siteDomain} = getPageUrls(pathname);
   // OG images are generated per page at build time by
   // scripts/generateOgImages.mjs. Pages without a generated card
-  // (home, errors) fall back to the static section image.
+  // (home, errors, 404, 500) fall back to the static section image.
   const ogImage =
-    isHomePage || !title || pathname.startsWith('/errors')
+    isHomePage ||
+    !title ||
+    pathname.startsWith('/errors') ||
+    pathname === '/404' ||
+    pathname === '/500'
       ? `https://${siteDomain}/images/og-${
           section === 'unknown' ? 'unknown' : section
         }.png`
       : `https://${siteDomain}/images/og/${pathname
           .slice(1)
           .replace(/\//g, '-')}.png`;
 
-  const languages: Record<string, string> = {
-    'x-default': canonicalUrl.replace(siteDomain, getDomain('en')),
-  };
-  for (const code of finishedTranslations) {
-    languages[code] = canonicalUrl.replace(siteDomain, getDomain(code));
-  }
-
   // Match the Pages Router behavior: emit `algolia-search-order` on Learn
   // pages and Blog post pages (not the Blog index) so Algolia can preserve
   // the docs sidebar ordering in search results.
@@ -86,13 +98,17 @@ export function buildPageMetadata({
   return {
     title: pageTitle,
     description: isHomePage ? description : undefined,
-    alternates: {
-      canonical: canonicalUrl,
-      languages,
-    },
+    // Next serializes the root URL as its bare origin. The home page renders
+    // these URL tags directly so its canonical URL keeps the trailing slash.
+    alternates: isHomePage
+      ? undefined
+      : {
+          canonical: canonicalUrl,
+          languages,
+        },
     openGraph: {
       type: 'website',
-      url: canonicalUrl,
+      url: isHomePage ? undefined : canonicalUrl,
       title: pageTitle,
       description,
       images: [{url: ogImage}],
@@ -108,3 +124,11 @@ export function buildPageMetadata({
     other: Object.keys(other).length > 0 ? other : undefined,
   };
 }
+
+export function buildNotFoundMetadata(): Metadata {
+  return buildPageMetadata({
+    data: {meta: {title: 'Not Found'}},
+    pathname: '/404',
+    section: 'unknown',
+  });
+}