feat(generated-card): Added meta tags to enhance the generated card (#86) (#96)

README.md

@@ -149,6 +149,17 @@ services:
       - POLYWORK=https://www.polywork.com/
       - SIGNAL=https://signal.org/
       - INSTANTGAMING=https://www.instant-gaming.com/
+      - OG_SITE_NAME=Techno Tim Live (OG)
+      - OG_TITLE=Techno Tim (OG)
+      - OG_DESCRIPTION=Techno Tim Link page (OG)
+      - OG_URL=https://technotim.live/
+      - OG_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - OG_IMAGE_WIDTH=400
+      - OG_IMAGE_HEIGHT=400
+      - TWITTER_CARD=summary_large_image
+      - TWITTER_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - TWITTER_SITE=@TechnoTimLive
+      - TWITTER_CREATOR=@TechnoTimLive
     ports:
       - 8080:3000
     restart: unless-stopped

docker-compose.yml

@@ -76,6 +76,17 @@ services:
       - UNTAPPD=https://untappd.com/
       - BUTTON_TARGET=_blank
       - INSTANTGAMING=https://www.instant-gaming.com/
+      - OG_SITE_NAME=Techno Tim Live (OG)
+      - OG_TITLE=Techno Tim (OG)
+      - OG_DESCRIPTION=Techno Tim Link page (OG)
+      - OG_URL=https://technotim.live/
+      - OG_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - OG_IMAGE_WIDTH=400
+      - OG_IMAGE_HEIGHT=400
+      - TWITTER_CARD=summary_large_image
+      - TWITTER_IMAGE=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
+      - TWITTER_SITE=@TechnoTimLive
+      - TWITTER_CREATOR=@TechnoTimLive
     ports:
       - 8080:3000
     restart: unless-stopped

src/config.js

@@ -277,4 +277,37 @@ export const runtimeConfig =
         INSTANTGAMING: nodeIsProduction
           ? process.env.INSTANTGAMING
           : process.env.RAZZLE_INSTANTGAMING,
+        OG_SITE_NAME: nodeIsProduction
+          ? process.env.OG_SITE_NAME
+          : process.env.RAZZLE_OG_SITE_NAME,
+        OG_TITLE: nodeIsProduction
+          ? process.env.OG_TITLE
+          : process.env.RAZZLE_OG_TITLE,
+        OG_DESCRIPTION: nodeIsProduction
+          ? process.env.OG_DESCRIPTION
+          : process.env.RAZZLE_OG_DESCRIPTION,
+        OG_URL: nodeIsProduction
+          ? process.env.OG_URL
+          : process.env.RAZZLE_OG_URL,
+        OG_IMAGE: nodeIsProduction
+          ? process.env.OG_IMAGE
+          : process.env.RAZZLE_OG_IMAGE,
+        OG_IMAGE_WIDTH: nodeIsProduction
+          ? process.env.OG_IMAGE_WIDTH
+          : process.env.RAZZLE_OG_IMAGE_WIDTH,
+        OG_IMAGE_HEIGHT: nodeIsProduction
+          ? process.env.OG_IMAGE_HEIGHT
+          : process.env.RAZZLE_OG_IMAGE_HEIGHT,
+        TWITTER_CARD: nodeIsProduction
+          ? process.env.TWITTER_CARD
+          : process.env.RAZZLE_TWITTER_CARD,
+        TWITTER_IMAGE: nodeIsProduction
+          ? process.env.TWITTER_IMAGE
+          : process.env.RAZZLE_TWITTER_IMAGE,
+        TWITTER_SITE: nodeIsProduction
+          ? process.env.TWITTER_SITE
+          : process.env.RAZZLE_TWITTER_SITE,
+        TWITTER_CREATOR: nodeIsProduction
+          ? process.env.TWITTER_CREATOR
+          : process.env.RAZZLE_TWITTER_CREATOR,
       };

src/server.js

@@ -81,6 +81,65 @@ server
           runtimeConfig.META_INDEX_STATUS || 'noindex'
         }">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${
+          runtimeConfig.OG_SITE_NAME
+            ? `<meta property="og:site_name" content="${runtimeConfig.OG_SITE_NAME}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_TITLE
+            ? `<meta property="og:title" content="${runtimeConfig.OG_TITLE}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_DESCRIPTION
+            ? `<meta property="og:description" content="${runtimeConfig.OG_DESCRIPTION}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_URL
+            ? `<meta property="og:url" content="${runtimeConfig.OG_URL}" />`
+            : ''
+        }
+        <meta property="og:type" content="siteweb" />
+        ${
+          runtimeConfig.OG_IMAGE
+            ? `
+                <meta property="og:image" content="${runtimeConfig.OG_IMAGE}" />
+                <meta property="og:image:secure_url" content="${runtimeConfig.OG_IMAGE}" />
+            `
+            : ''
+        }
+        ${
+          runtimeConfig.OG_IMAGE_WIDTH
+            ? `<meta property="og:image:width" content="${runtimeConfig.OG_IMAGE_WIDTH}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.OG_IMAGE_HEIGHT
+            ? `<meta property="og:image:height" content="${runtimeConfig.OG_IMAGE_HEIGHT}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_CARD
+            ? `<meta property="twitter:card" content="${runtimeConfig.TWITTER_CARD}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_IMAGE
+            ? `<meta property="twitter:image" content="${runtimeConfig.TWITTER_IMAGE}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_SITE
+            ? `<meta property="twitter:site" content="${runtimeConfig.TWITTER_SITE}" />`
+            : ''
+        }
+        ${
+          runtimeConfig.TWITTER_CREATOR
+            ? `<meta property="twitter:creator" content="${runtimeConfig.TWITTER_CREATOR}" />`
+            : ''
+        }
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&amp;display=swap" rel="stylesheet">
         <link rel="stylesheet" href="css/normalize.css">
         <link rel="stylesheet" href="css/${theme}">