feat: update pages meta & og image

Author: xiaoyu2er

apps/docs/src/app/(home)/blog/[slug]/page.tsx

@@ -47,10 +47,13 @@ export async function generateMetadata(props: {
   const page = blog.getPage([params.slug]);
 
   if (!page) notFound();
+  const url = page.url;
 
   return createMetadata({
     title: page.data.title,
     description: page.data.description,
+    pathname: url,
+    image: page.data.image,
   });
 }
 

apps/docs/src/app/(home)/blog/page.tsx

@@ -1,4 +1,6 @@
+import { createMetadata } from '@/lib/metadata';
 import { blog } from '@/lib/source';
+import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
 
 export default function Page(): React.ReactElement {
@@ -41,3 +43,11 @@ export default function Page(): React.ReactElement {
     </main>
   );
 }
+
+export async function generateMetadata() {
+  const t = await getTranslations('baseOptions');
+  return createMetadata({
+    title: t('blog'),
+    pathname: '/blog',
+  });
+}

apps/docs/src/app/(home)/learn/page.tsx

@@ -1,5 +1,7 @@
 import { getLearnTabs } from '@/lib/learn';
+import { createMetadata } from '@/lib/metadata';
 import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
 
 export default function LearnIndexPage() {
@@ -38,3 +40,12 @@ export default function LearnIndexPage() {
     </main>
   );
 }
+
+export async function generateMetadata() {
+  const t = await getTranslations('baseOptions');
+  return createMetadata({
+    title: t('learn'),
+    pathname: '/learn',
+    image: 'https://nextjs.org/learn/opengraph-image-r39hrb.jpg',
+  });
+}

apps/docs/src/app/(home)/page.tsx

@@ -1,4 +1,6 @@
+import { createMetadata } from '@/lib/metadata';
 import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
 
 export default function HomePage() {

apps/docs/src/app/docs/[[...slug]]/page.tsx

@@ -124,7 +124,9 @@ export async function generateMetadata(props: {
   if (!page) notFound();
 
   return createMetadata({
-    title: page.data.nav_title || page.data.title,
+    title: page.data.title,
     description: page.data.description,
+    pathname: page.url,
+    image: `https://nextjs.org/api/docs-og?title=${page.data.title}`,
   });
 }

apps/docs/src/app/learn/[...slug]/page.tsx

@@ -55,5 +55,7 @@ export async function generateMetadata(props: {
   return createMetadata({
     title: page.data.headline || page.data.title,
     description: page.data.description,
+    pathname: page.url,
+    image: page.data.image,
   });
 }

apps/docs/src/lib/metadata.ts

@@ -1,13 +1,21 @@
+import { SITES } from '@next-i18n/const';
 import type { Metadata } from 'next/types';
 
-export function createMetadata(override: Metadata): Metadata {
+export function createMetadata(
+  override: Metadata & { pathname?: string; image?: string },
+): Metadata {
   return {
     ...override,
     openGraph: {
       title: override.title ?? undefined,
       description: override.description ?? undefined,
       images: '/twitter-card.png',
       siteName: 'nextjs.im',
+      ...(override.image
+        ? {
+            images: override.image,
+          }
+        : {}),
       ...override.openGraph,
     },
     twitter: {
@@ -16,8 +24,25 @@ export function createMetadata(override: Metadata): Metadata {
       title: override.title ?? undefined,
       description: override.description ?? undefined,
       images: '/twitter-card.png',
+      ...(override.image
+        ? {
+            images: override.image,
+          }
+        : {}),
       ...override.twitter,
     },
+    ...(override.pathname
+      ? {
+          alternates: {
+            canonical: baseUrl.origin + override.pathname,
+            languages: {
+              'en-US': SITES.en + override.pathname,
+              'zh-Hans': SITES['zh-hans'] + override.pathname,
+              'zh-Hant': SITES['zh-hant'] + override.pathname,
+            },
+          },
+        }
+      : {}),
   };
 }
 

packages/const/package.json

@@ -21,5 +21,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "next-intl": "^4.1.0"
   }
 }

packages/const/src/index.ts

@@ -1 +1,2 @@
 export * from './language';
+export * from './sites';

packages/const/src/sites.ts

@@ -0,0 +1,7 @@
+import type { Locale } from 'next-intl';
+
+export const SITES: Record<Locale, string> = {
+  en: 'https://en.nextjs.im',
+  'zh-hans': 'https://zh-hans.nextjs.im',
+  'zh-hant': 'https://zh-hant.nextjs.im',
+};