Add og-image, update meta tags, and set background color in document

Anupam-pandey · Feb 23, 2023 · ff78dc5 · ff78dc5
1 parent bfc5989
commit ff78dc5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,6 +31,7 @@ yarn-error.log*
 # vercel
 .vercel
 
+/.vscode
 # typescript
 *.tsbuildinfo
 next-env.d.ts

diff --git a/README.md b/README.md
@@ -6,14 +6,14 @@
 - [x] Redo README
 - [x] Fix issue with generations not working
 - [x] Add two dropdowns for what kind of room it is + dropdown for themes
-- [ ] Deploy, assign domain, fix meta tags, add OG image with one of the genrated pics
+- [x] Use new redis db for rate limiting
+- [x] Deploy, assign domain, fix meta tags, add OG image with one of the genrated pics
 - [ ] Make all dropdowns same length as upload box in /restore
 - [ ] Send it to team/ai channel for feedback + tweet out a screenshot for hype
 - [ ] Let replicate team know to keep it on when I launch
 
 ## Todos v1.5
 
-- [ ] Use new redis db for rate limiting
 - [ ] Some visual indication that it takes ~25s
 - [ ] Sharability features - look at Replicate's project for inspo
   - [ ] Add ability to generate shareable links

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -2,36 +2,26 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
 
 class MyDocument extends Document {
   render() {
+    let description = "Generate your dream room in seconds.";
+    let ogimage = "https://www.roomGPT.com/og-image.png";
+    let sitename = "roomGPT.com";
+    let title = "Dream Room Generator";
+
     return (
       <Html lang="en">
         <Head>
           <link rel="icon" href="/favicon.ico" />
-          <meta
-            name="description"
-            content="Restore your old face photos and keep the memories alive."
-          />
-          <meta property="og:site_name" content="restorePhotos.io" />
-          <meta
-            property="og:description"
-            content="Restore your old face photos and keep the memories alive."
-          />
-          <meta property="og:title" content="Face Photo Restorer" />
+          <meta name="description" content={description} />
+          <meta property="og:site_name" content={sitename} />
+          <meta property="og:description" content={description} />
+          <meta property="og:title" content={title} />
           <meta name="twitter:card" content="summary_large_image" />
-          <meta name="twitter:title" content="Face Photo Restorer" />
-          <meta
-            name="twitter:description"
-            content="Restore your old photos and keep the memories alive."
-          />
-          <meta
-            property="og:image"
-            content="https://restore-photos.vercel.app/og-image.png"
-          />
-          <meta
-            name="twitter:image"
-            content="https://restore-photos.vercel.app/og-image.png"
-          />
+          <meta name="twitter:title" content={title} />
+          <meta name="twitter:description" content={description} />
+          <meta property="og:image" content={ogimage} />
+          <meta name="twitter:image" content={ogimage} />
         </Head>
-        <body className="bg-[#17181C] text-white">
+        <body className="bg-black text-white">
           <Main />
           <NextScript />
         </body>

diff --git a/public/og-image.png b/public/og-image.png