add opengraph media previews

src/app/about/page.tsx

@@ -5,9 +5,15 @@ import styles from '@/styles/about.module.css'
 import ButtonAppBar from '@/components/appBar';
 
 export const metadata: Metadata = {
-    title: 'UA',
-    description: 'Urban Analyses for the world',
+    title: 'UA | About',
+    description: 'About Urban Analyst',
     icons: '/ua.ico',
+    openGraph: {
+        title: 'Urban Analyst | About',
+        description: 'About Urban Analyst — interactive visualisation and comparison of cities worldwide.',
+        url: 'https://urbananalyst.city/about',
+        images: [{ url: '/og-map.png', width: 1200, height: 630, alt: 'Urban Analyst' }],
+    },
 }
 
 export const viewport: Viewport = {

src/app/compare/page.tsx

@@ -6,9 +6,15 @@ import ButtonAppBar from '@/components/appBar';
 import ComparePage from '@/components/compare/comparePage';
 
 export const metadata: Metadata = {
-    title: 'UA',
+    title: 'UA | Compare',
     description: 'Compare cities for Urban Analyst',
     icons: '/ua.ico',
+    openGraph: {
+        title: 'Urban Analyst | Compare',
+        description: 'Compare statistics and relationships across all Urban Analyst cities.',
+        url: 'https://urbananalyst.city/compare',
+        images: [{ url: '/og-compare.png', width: 1200, height: 630, alt: 'Urban Analyst Compare' }],
+    },
 }
 
 export const viewport: Viewport = {

src/app/layout.tsx

@@ -9,11 +9,25 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 const junctionFont = localFont({ src: './junction-light.woff' })
 
 export const metadata: Metadata = {
-    title: 'UA',
+    title: 'Urban Analyst',
     description: 'Urban Analyses for the World',
+    metadataBase: new URL(
+        process.env.VERCEL_URL
+            ? `https://${process.env.VERCEL_URL}`
+            : 'https://urbananalyst.city'
+    ),
     icons: {
         icon: '/favicon.ico',
     },
+    openGraph: {
+        title: 'Urban Analyst',
+        description: 'Urban Analyses for the World',
+        url: 'https://urbananalyst.city',
+        siteName: 'Urban Analyst',
+        images: [{ url: '/og-map.png', width: 1200, height: 630, alt: 'Urban Analyst' }],
+        locale: 'en_US',
+        type: 'website',
+    },
 }
 
 export default function RootLayout({

src/app/map/page.tsx

@@ -4,9 +4,15 @@ import type { Metadata, Viewport } from 'next';
 import ButtonAppBar from '@/components/appBar';
 
 export const metadata: Metadata = {
-    title: 'UA',
-    description: 'Maps for Urban Analyst',
+    title: 'UA | Map',
+    description: 'Interactive city maps for Urban Analyst',
     icons: '/ua.ico',
+    openGraph: {
+        title: 'Urban Analyst | Map',
+        description: 'Interactive spatial maps of cities analysed by Urban Analyst.',
+        url: 'https://urbananalyst.city/map',
+        images: [{ url: '/og-map.png', width: 1200, height: 630, alt: 'Urban Analyst Map' }],
+    },
 }
 
 export const viewport: Viewport = {

src/app/page.tsx

@@ -17,9 +17,15 @@ import UABarChart from '@/components/main/uaindexBarChart';
  * NextJS metadata for main page
  */
 export const metadata: Metadata = {
-    title: 'UA',
+    title: 'Urban Analyst',
     description: 'Urban Analyses for the world',
     icons: '/ua.ico',
+    openGraph: {
+        title: 'Urban Analyst',
+        description: 'Interactive visualisation and comparison of cities worldwide.',
+        url: 'https://urbananalyst.city',
+        images: [{ url: '/og-map.png', width: 1200, height: 630, alt: 'Urban Analyst' }],
+    },
 }
 
 /**

src/app/summarise/page.tsx

@@ -6,9 +6,15 @@ import ButtonAppBar from '@/components/appBar';
 import SummarisePage from '@/components/summarise/summarisePage';
 
 export const metadata: Metadata = {
-    title: 'UA',
-    description: 'Urban Analyses for the world',
+    title: 'UA | Summarise',
+    description: 'City summaries for Urban Analyst',
     icons: '/ua.ico',
+    openGraph: {
+        title: 'Urban Analyst | Summarise',
+        description: 'Read detailed summaries of Urban Analyst analyses for any city.',
+        url: 'https://urbananalyst.city/summarise',
+        images: [{ url: '/og-map.png', width: 1200, height: 630, alt: 'Urban Analyst Summarise' }],
+    },
 }
 
 export const viewport: Viewport = {

src/app/transform/page.tsx

@@ -4,9 +4,15 @@ import type { Metadata, Viewport } from 'next';
 import ButtonAppBar from '@/components/appBar';
 
 export const metadata: Metadata = {
-    title: 'UA',
-    description: 'Maps for Urban Analyst',
+    title: 'UA | Transform',
+    description: 'Transform cities with Urban Analyst',
     icons: '/ua.ico',
+    openGraph: {
+        title: 'Urban Analyst | Transform',
+        description: 'Analyse how any city could be transformed to become more like another.',
+        url: 'https://urbananalyst.city/transform',
+        images: [{ url: '/og-map.png', width: 1200, height: 630, alt: 'Urban Analyst Transform' }],
+    },
 }
 
 export const viewport: Viewport = {