add SEO tags to everything

web/pages/charity/[charitySlug].tsx

@@ -1,6 +1,9 @@
 import { sortBy, sumBy, uniqBy } from 'lodash'
 import clsx from 'clsx'
 import React, { useEffect, useRef, useState } from 'react'
+import Image from 'next/image'
+import Confetti from 'react-confetti'
+
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Page } from 'web/components/page'
@@ -16,11 +19,10 @@ import { useRouter } from 'next/router'
 import Custom404 from '../404'
 import { useCharityTxns } from 'web/hooks/use-charity-txns'
 import { useWindowSize } from 'web/hooks/use-window-size'
-import Confetti from 'react-confetti'
 import { Donation } from 'web/components/charity/feed-items'
-import Image from 'next/image'
 import { manaToUSD } from '../../../common/util/format'
 import { track } from 'web/lib/service/analytics'
+import { SEO } from 'web/components/SEO'
 
 export default function CharityPageWrapper() {
   const router = useRouter()
@@ -63,6 +65,11 @@ function CharityPage(props: { charity: Charity }) {
         />
       }
     >
+      <SEO
+        title={name}
+        description={description}
+        url="/groups"
+      />
       {showConfetti && (
         <Confetti
           width={width ? width : 500}

web/pages/charity/index.tsx

@@ -23,6 +23,7 @@ import { searchInAny } from 'common/util/parse'
 import { getUser } from 'web/lib/firebase/users'
 import { SiteLink } from 'web/components/site-link'
 import { User } from 'common/user'
+import { SEO } from 'web/components/SEO'
 
 export async function getStaticProps() {
   const txns = await getAllCharityTxns()
@@ -114,6 +115,11 @@ export default function Charity(props: {
 
   return (
     <Page>
+      <SEO
+        title="Manifold for Charity"
+        description="Donate your prediction market earnings to charity on Manifold."
+        url="/charity"
+      />
       <Col className="w-full rounded px-4 py-6 sm:px-8 xl:w-[125%]">
         <Col className="">
           <Title className="!mt-0" text="Manifold for Charity" />

web/pages/create.tsx

@@ -30,6 +30,7 @@ import { TextEditor, useTextEditor } from 'web/components/editor'
 import { Checkbox } from 'web/components/checkbox'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
 import { Title } from 'web/components/title'
+import { SEO } from 'web/components/SEO'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -63,6 +64,11 @@ export default function Create() {
 
   return (
     <Page>
+      <SEO
+        title="Create a market"
+        description="Create a play-money prediction market on any question."
+        url="/create"
+      />
       <div className="mx-auto w-full max-w-2xl">
         <div className="rounded-lg px-6 py-4 sm:py-0">
           <Title className="!mt-0" text="Create a market" />

web/pages/groups.tsx

@@ -18,6 +18,7 @@ import { Avatar } from 'web/components/avatar'
 import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
 import { UserLink } from 'web/components/user-page'
 import { searchInAny } from 'common/util/parse'
+import { SEO } from 'web/components/SEO'
 
 export async function getStaticProps() {
   const groups = await listAllGroups().catch((_) => [])
@@ -100,6 +101,11 @@ export default function Groups(props: {
 
   return (
     <Page>
+      <SEO
+        title="Groups"
+        description="Manifold Groups are communities centered around a collection of prediction markets. Discuss and compete on questions with your friends."
+        url="/groups"
+      />
       <Col className="items-center">
         <Col className="w-full max-w-2xl px-4 sm:px-2">
           <Row className="items-center justify-between">

web/pages/leaderboards.tsx

@@ -13,6 +13,7 @@ import { useEffect, useState } from 'react'
 import { Title } from 'web/components/title'
 import { Tabs } from 'web/components/layout/tabs'
 import { useTracking } from 'web/hooks/use-tracking'
+import { SEO } from 'web/components/SEO'
 
 export async function getStaticProps() {
   const props = await fetchProps()
@@ -123,6 +124,11 @@ export default function Leaderboards(_props: {
 
   return (
     <Page>
+      <SEO
+        title="Leaderboards"
+        description="Manifold's leaderboards show the top traders and market creators."
+        url="/leaderboards"
+      />
       <Title text={'Leaderboards'} className={'hidden md:block'} />
       <Tabs
         currentPageForAnalytics={'leaderboards'}

web/pages/markets.tsx

@@ -8,7 +8,7 @@ export default function Markets() {
     <Page>
       <SEO
         title="Explore"
-        description="Discover what's new, trending, or soon-to-close. Or search among our hundreds of markets."
+        description="Discover what's new, trending, or soon-to-close. Or search thousands of prediction markets."
         url="/markets"
       />
       <ContractSearch />