diff --git a/web/components/SEO.tsx b/web/components/SEO.tsx
new file mode 100644
index 00000000..6e4b76b6
--- /dev/null
+++ b/web/components/SEO.tsx
@@ -0,0 +1,40 @@
+import Head from 'next/head'
+
+export function SEO(props: {
+  title: string
+  description: string
+  url?: string
+  children?: any[]
+}) {
+  const { title, description, url, children } = props
+
+  return (
+    <Head>
+      <title>{title} | Mantic Markets</title>
+
+      <meta
+        property="og:title"
+        name="twitter:title"
+        content={title}
+        key="title"
+      />
+      <meta name="description" content={description} key="description1" />
+      <meta
+        property="og:description"
+        name="twitter:description"
+        content={description}
+        key="description2"
+      />
+
+      {url && (
+        <meta
+          property="og:url"
+          content={'https://mantic.markets' + url}
+          key="url"
+        />
+      )}
+
+      {children}
+    </Head>
+  )
+}
diff --git a/web/pages/[username]/[contractId].tsx b/web/pages/[username]/[contractId].tsx
index 7a317ea5..c97b1482 100644
--- a/web/pages/[username]/[contractId].tsx
+++ b/web/pages/[username]/[contractId].tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Head from 'next/head'
 import clsx from 'clsx'
 
 import { useContractWithPreload } from '../../hooks/use-contract'
@@ -15,13 +14,15 @@ import { Title } from '../../components/title'
 import { Spacer } from '../../components/layout/spacer'
 import { User } from '../../lib/firebase/users'
 import { Contract, getContract } from '../../lib/firebase/contracts'
+import { SEO } from '../../components/SEO'
 
 export async function getStaticProps(props: { params: any }) {
-  const { contractId } = props.params
+  const { username, contractId } = props.params
   const contract = (await getContract(contractId)) || null
 
   return {
     props: {
+      username,
       contractId,
       contract,
     },
@@ -37,6 +38,7 @@ export async function getStaticPaths() {
 export default function ContractPage(props: {
   contract: Contract | null
   contractId: string
+  username: string
 }) {
   const user = useUser()
 
@@ -51,26 +53,11 @@ export default function ContractPage(props: {
 
   return (
     <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-      <Head>
-        <title>{contract.question} | Mantic Markets</title>
-        <meta
-          property="og:title"
-          name="twitter:title"
-          content={contract.question}
-          key="title"
-        />
-        <meta
-          name="description"
-          content={contract.description}
-          key="description1"
-        />
-        <meta
-          property="og:description"
-          name="twitter:description"
-          content={contract.description}
-          key="description2"
-        />
-      </Head>
+      <SEO
+        title={contract.question}
+        description={contract.description}
+        url={`/${props.username}/${props.contractId}`}
+      />
 
       <Header />
 
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 8d121566..1448a27e 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -17,13 +17,15 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta
           name="description"
           content="Mantic Markets is creating better forecasting through user-created prediction markets."
+          key="description1"
         />
         <meta
           property="og:description"
           name="twitter:description"
           content="Mantic Markets is creating better forecasting through user-created prediction markets."
+          key="description2"
         />
-        <meta property="og:url" content="https://mantic.markets" />
+        <meta property="og:url" content="https://mantic.markets" key="url" />
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:site" content="@manticmarkets" />
         <meta
