diff --git a/apps/guides/app/layout.og-metadata.test.ts b/apps/guides/app/layout.og-metadata.test.ts new file mode 100644 index 0000000000..739c808389 --- /dev/null +++ b/apps/guides/app/layout.og-metadata.test.ts @@ -0,0 +1,16 @@ +import { describe, expect, it } from 'vitest'; +import { siteConfig } from '../lib/config'; +import { metadata } from './metadata'; + +describe('guides metadata', () => { + it('sets absolute og/twitter image metadata', () => { + const expected = new URL('/opengraph-image', siteConfig.url).toString(); + expect(metadata.openGraph?.images?.[0]).toMatchObject({ + url: expected, + width: 1200, + height: 630, + alt: 'PackRat Guides | Hiking & Outdoor Adventures', + }); + expect(metadata.twitter?.images).toEqual([expected]); + }); +}); diff --git a/apps/guides/app/layout.tsx b/apps/guides/app/layout.tsx index eb159f716b..3801080a1f 100644 --- a/apps/guides/app/layout.tsx +++ b/apps/guides/app/layout.tsx @@ -3,10 +3,9 @@ import Footer from 'guides-app/components/footer'; import Header from 'guides-app/components/header'; import { QueryProvider } from 'guides-app/components/providers/query-provider'; import { ThemeProvider } from 'guides-app/components/theme-provider'; -import { siteConfig } from 'guides-app/lib/config'; -import type { Metadata } from 'next'; import { Mona_Sans as FontSans } from 'next/font/google'; import type React from 'react'; +import { metadata as appMetadata } from './metadata'; import './globals.css'; const fontSans = FontSans({ @@ -15,46 +14,7 @@ const fontSans = FontSans({ weight: ['400', '500', '600', '700'], }); -export const metadata: Metadata = { - title: { - default: 'PackRat Guides | Hiking & Outdoor Adventures', - template: '%s | PackRat Guides', - }, - description: 'Expert hiking and outdoor guides to help you prepare for your next adventure', - keywords: [ - 'hiking guides', - 'outdoor adventures', - 'trail guides', - 'camping', - 'backpacking', - 'gear reviews', - 'wilderness skills', - 'outdoor planning', - ], - authors: [{ name: 'PackRat Team', url: 'https://packrat.world' }], - creator: 'PackRat Team', - metadataBase: new URL(siteConfig.url), - openGraph: { - type: 'website', - locale: 'en_US', - url: siteConfig.url, - siteName: 'PackRat Guides', - title: 'PackRat Guides | Hiking & Outdoor Adventures', - description: 'Expert hiking and outdoor guides to help you prepare for your next adventure', - }, - twitter: { - card: 'summary_large_image', - title: 'PackRat Guides | Hiking & Outdoor Adventures', - description: 'Expert hiking and outdoor guides to help you prepare for your next adventure', - creator: '@packratai', - }, - icons: { - icon: [{ url: '/PackRatGuides.ico', type: 'image/x-icon' }], - shortcut: '/favicon-16x16.png', - apple: '/apple-touch-icon.png', - }, -}; - +export const metadata = appMetadata; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/apps/guides/app/metadata.ts b/apps/guides/app/metadata.ts new file mode 100644 index 0000000000..2a63221b27 --- /dev/null +++ b/apps/guides/app/metadata.ts @@ -0,0 +1,51 @@ +import type { Metadata } from 'next'; +import { siteConfig } from '../lib/config'; + +export const metadata: Metadata = { + title: { + default: 'PackRat Guides | Hiking & Outdoor Adventures', + template: '%s | PackRat Guides', + }, + description: 'Expert hiking and outdoor guides to help you prepare for your next adventure', + keywords: [ + 'hiking guides', + 'outdoor adventures', + 'trail guides', + 'camping', + 'backpacking', + 'gear reviews', + 'wilderness skills', + 'outdoor planning', + ], + authors: [{ name: 'PackRat Team', url: 'https://packrat.world' }], + creator: 'PackRat Team', + metadataBase: new URL(siteConfig.url), + openGraph: { + type: 'website', + locale: 'en_US', + url: siteConfig.url, + siteName: 'PackRat Guides', + title: 'PackRat Guides | Hiking & Outdoor Adventures', + description: 'Expert hiking and outdoor guides to help you prepare for your next adventure', + images: [ + { + url: new URL('/opengraph-image', siteConfig.url).toString(), + width: 1200, + height: 630, + alt: 'PackRat Guides | Hiking & Outdoor Adventures', + }, + ], + }, + twitter: { + card: 'summary_large_image', + title: 'PackRat Guides | Hiking & Outdoor Adventures', + description: 'Expert hiking and outdoor guides to help you prepare for your next adventure', + creator: '@packratai', + images: [new URL('/opengraph-image', siteConfig.url).toString()], + }, + icons: { + icon: [{ url: '/PackRatGuides.ico', type: 'image/x-icon' }], + shortcut: '/favicon-16x16.png', + apple: '/apple-touch-icon.png', + }, +}; diff --git a/apps/landing/app/layout.og-metadata.test.ts b/apps/landing/app/layout.og-metadata.test.ts new file mode 100644 index 0000000000..fb6bc9b7fb --- /dev/null +++ b/apps/landing/app/layout.og-metadata.test.ts @@ -0,0 +1,16 @@ +import { describe, expect, it } from 'vitest'; +import { siteConfig } from '../config/site'; +import { metadata } from './metadata'; + +describe('landing metadata', () => { + it('sets absolute og/twitter image metadata', () => { + const expected = new URL(siteConfig.ogImage, siteConfig.url).toString(); + expect(metadata.openGraph?.images?.[0]).toMatchObject({ + url: expected, + width: 1200, + height: 630, + alt: siteConfig.name, + }); + expect(metadata.twitter?.images).toEqual([expected]); + }); +}); diff --git a/apps/landing/app/layout.tsx b/apps/landing/app/layout.tsx index beb509206a..f68021a3d0 100644 --- a/apps/landing/app/layout.tsx +++ b/apps/landing/app/layout.tsx @@ -2,10 +2,9 @@ import { cn } from '@packrat/web-ui/lib/utils'; import MainNav from 'landing-app/components/main-nav'; import SiteFooter from 'landing-app/components/site-footer'; import { ThemeProvider } from 'landing-app/components/theme-provider'; -import { siteConfig } from 'landing-app/config/site'; -import type { Metadata } from 'next'; import { Mona_Sans as FontSans } from 'next/font/google'; import type React from 'react'; +import { metadata as appMetadata } from './metadata'; import './globals.css'; const fontSans = FontSans({ @@ -14,38 +13,7 @@ const fontSans = FontSans({ weight: ['400', '500', '600', '700'], }); -export const metadata: Metadata = { - title: { - default: siteConfig.name, - template: `%s | ${siteConfig.name}`, - }, - description: siteConfig.description, - keywords: siteConfig.keywords, - authors: [{ name: siteConfig.author, url: siteConfig.url }], - creator: siteConfig.author, - metadataBase: new URL(siteConfig.url), - openGraph: { - type: 'website', - locale: 'en_US', - url: siteConfig.url, - title: siteConfig.name, - description: siteConfig.description, - siteName: siteConfig.name, - }, - twitter: { - card: 'summary_large_image', - title: siteConfig.name, - description: siteConfig.description, - creator: siteConfig.twitterHandle, - }, - icons: { - icon: '/PackRat.ico', - shortcut: '/favicon-16x16.png', - apple: '/apple-touch-icon.png', - }, - manifest: `${siteConfig.url}/site.webmanifest`, -}; - +export const metadata = appMetadata; export default function RootLayout({ children, }: Readonly<{ diff --git a/apps/landing/app/metadata.ts b/apps/landing/app/metadata.ts new file mode 100644 index 0000000000..abcf3f6eb9 --- /dev/null +++ b/apps/landing/app/metadata.ts @@ -0,0 +1,43 @@ +import type { Metadata } from 'next'; +import { siteConfig } from '../config/site'; + +export const metadata: Metadata = { + title: { + default: siteConfig.name, + template: `%s | ${siteConfig.name}`, + }, + description: siteConfig.description, + keywords: siteConfig.keywords, + authors: [{ name: siteConfig.author, url: siteConfig.url }], + creator: siteConfig.author, + metadataBase: new URL(siteConfig.url), + openGraph: { + type: 'website', + locale: 'en_US', + url: siteConfig.url, + title: siteConfig.name, + description: siteConfig.description, + siteName: siteConfig.name, + images: [ + { + url: new URL(siteConfig.ogImage, siteConfig.url).toString(), + width: 1200, + height: 630, + alt: siteConfig.name, + }, + ], + }, + twitter: { + card: 'summary_large_image', + title: siteConfig.name, + description: siteConfig.description, + creator: siteConfig.twitterHandle, + images: [new URL(siteConfig.ogImage, siteConfig.url).toString()], + }, + icons: { + icon: '/PackRat.ico', + shortcut: '/favicon-16x16.png', + apple: '/apple-touch-icon.png', + }, + manifest: `${siteConfig.url}/site.webmanifest`, +};