diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 3a4b2d08..935c5e23 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -39,6 +39,7 @@ jobs:
             -e HOME_REDIRECT \
             -e INLINE_IMAGES_ORIGIN \
             -e EDIT_ORIGIN \
+            -e NEXT_PUBLIC_URL \
             ghcr.io/pmndrs/docs:app-router npm run build
         env:
           BASE_PATH: ${{ steps.configurepages.outputs.base_path }}
@@ -47,6 +48,7 @@ jobs:
           HOME_REDIRECT: ${{ inputs.home_redirect }}
           INLINE_IMAGES_ORIGIN: ${{ inputs.inline_images_origin }}/${{ inputs.mdx }}
           EDIT_ORIGIN: 'https://github.com/${{ github.repository }}/edit/${{ github.ref_name }}/${{ inputs.mdx }}'
+          NEXT_PUBLIC_URL: ${{ steps.configurepages.outputs.base_url }}
 
       - uses: actions/upload-pages-artifact@v3
         with:
diff --git a/README.md b/README.md
index 4f310c60..468c8bb4 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@
 | `HOME_REDIRECT`         | Where the home should redirect                                                                                                                                           | `/getting-started/introduction`                                                          | none    |
 | `INLINE_IMAGES_ORIGIN`  | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for inlining relative images                                                                       | `http://localhost:60141`or `https://github.com/pmndrs/react-three-fiber/raw/master/docs` | none    |
 | `EDIT_ORIGIN`           | [Origin](https://developer.mozilla.org/en-US/docs/Web/API/URL/origin) for displaying "Edit this page" URLs                                                               | `https://github.com/pmndrs/react-three-fiber/edit/master/docs`                           | none    |
+| `NEXT_PUBLIC_URL`       | Final URL of the published website                                                                                                                                       | `https://pmndrs.github.io/react-three-fiber`                                             | none    |
 
 \* Required
 
@@ -51,6 +52,7 @@ $ (
   export HOME_REDIRECT=/getting-started/introduction
   export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
   export EDIT_ORIGIN="vscode://file/$MDX"
+  export NEXT_PUBLIC_URL=
 
   kill $(lsof -ti:"$_PORT")
   npx serve $MDX -p $_PORT --no-port-switching --no-clipboard &
@@ -84,6 +86,7 @@ $ (
   export HOME_REDIRECT=/getting-started/introduction
   export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
   export EDIT_ORIGIN=
+  export NEXT_PUBLIC_URL=
 
   npm run build
 
@@ -118,6 +121,7 @@ $ (
   export HOME_REDIRECT=/getting-started/introduction
   export INLINE_IMAGES_ORIGIN=http://localhost:$_PORT
   export EDIT_ORIGIN=
+  export NEXT_PUBLIC_URL=
 
   rm -rf "$MDX/out"
 
@@ -131,6 +135,7 @@ $ (
     -e HOME_REDIRECT \
     -e INLINE_IMAGES_ORIGIN \
     -e EDIT_ORIGIN \
+    -e NEXT_PUBLIC_URL \
     pmndrs-docs npm run build
 
   kill $(lsof -ti:"$_PORT")
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index 4c2051cc..45d246f2 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import Post from '@/components/Post'
 import { getData, getDocs } from '@/utils/docs'
 
@@ -6,6 +7,27 @@ export type Props = {
   params: { slug: string[] }
 }
 
+export async function generateMetadata({ params }: Props) {
+  const slug = params.slug
+
+  const { doc } = await getData(...slug)
+
+  const title = `${doc.title} - ${process.env.NEXT_PUBLIC_LIBNAME}`
+  const description = doc.description
+  const url = doc.url
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      url,
+      type: 'article',
+    },
+  }
+}
+
 export default async function Page({ params }: Props) {
   // console.log('page', params)
 
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fea..00000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/icon.svg b/src/app/icon.svg
new file mode 100644
index 00000000..49fb9fe7
--- /dev/null
+++ b/src/app/icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text x="50" y="50" font-size="100" dominant-baseline="central" baseline-shift="-0%" text-anchor="middle">🖨️</text>
+</svg>
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e894af81..d007bcaa 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,9 +4,39 @@ import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
+const NEXT_PUBLIC_URL = process.env.NEXT_PUBLIC_URL
+const NEXT_PUBLIC_LIBNAME = process.env.NEXT_PUBLIC_LIBNAME
+
+const title = NEXT_PUBLIC_LIBNAME
+const description = `Documentation for ${NEXT_PUBLIC_LIBNAME}`
+const url = NEXT_PUBLIC_URL
+const siteName = NEXT_PUBLIC_LIBNAME
+
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  metadataBase: NEXT_PUBLIC_URL ? new URL(NEXT_PUBLIC_URL) : undefined,
+  title,
+  description: `Documentation for ${NEXT_PUBLIC_LIBNAME}`,
+  openGraph: {
+    title,
+    description,
+    url,
+    siteName,
+    // images: [
+    //   {
+    //     url: 'https://nextjs.org/og.png', // Must be an absolute URL
+    //     width: 800,
+    //     height: 600,
+    //   },
+    //   {
+    //     url: 'https://nextjs.org/og-alt.png', // Must be an absolute URL
+    //     width: 1800,
+    //     height: 1600,
+    //     alt: 'My custom alt',
+    //   },
+    // ],
+    locale: 'en_US',
+    type: 'website',
+  },
 }
 
 export default function RootLayout({