add default preview (#1213)

SaladTechnologies · Oct 23, 2024 · b04e24e · b04e24e
1 parent 9086993
commit b04e24e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 20 deletions.
diff --git a/packages/web-app/public/index.html b/packages/web-app/public/index.html
@@ -13,7 +13,14 @@
     <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#53a626" />
     <meta name="msapplication-TileColor" content="#53a626" />
     <meta name="theme-color" content="#ffffff" />
-    <meta site_name="og:site_name" content="Salad" />
+    <meta property="og:site_name" content="Salad" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Salad - Official Store" />
+    <meta property="og:description" content="Salad helps you earn your way to new Steam Games, Discord Nitro, gift cards, and more from the Salad Storefront. You can even send Salad Balance to PayPal and redeem digital Visa and Mastercard that can be used worldwide!">
+    <meta property="og:image" content="%PUBLIC_URL%/og-official-store.png" />
+    <meta property="og:image:alt" content="Salad - Official Store" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
     <title>Salad</title>
   </head>
   <body>

diff --git a/packages/web-app/src/hooks/useAddOgMetaTags.tsx b/packages/web-app/src/hooks/useAddOgMetaTags.tsx
@@ -1,18 +1,10 @@
 import { useEffect } from 'react'
 
-const defaultOgMetaTags: Record<string, string> = {
-  url: window.location.href,
-  type: 'website',
-  image: `${window.location.origin}/og-official-store.png`,
-  'image:alt': 'Salad',
-}
-
 export const useAddOgMetaTags = (ogMetaTags: Record<string, string>) => {
   useEffect(() => {
-    const combinedOgMetaTags = { ...defaultOgMetaTags, ...ogMetaTags }
-    Object.keys(combinedOgMetaTags).forEach((ogMetaTagPropertyName) => {
+    Object.keys(ogMetaTags).forEach((ogMetaTagPropertyName) => {
       const ogMetaTag = document.querySelector(`meta[property='og:${ogMetaTagPropertyName}']`)
-      const ogMetaTagContent = combinedOgMetaTags[ogMetaTagPropertyName] as string
+      const ogMetaTagContent = ogMetaTags[ogMetaTagPropertyName] as string
 
       if (ogMetaTag) {
         ogMetaTag.setAttribute('content', ogMetaTagContent)

diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontPage.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontPage.tsx
@@ -1,7 +1,6 @@
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import { Head, Scrollbar } from '../../../components'
-import { useAddOgMetaTags } from '../../../hooks/useAddOgMetaTags'
 import { NotificationBannerContainer } from '../../home-views/NotificationBannerContainer'
 import type {
   StorefrontCommunityChallengeProps,
@@ -32,14 +31,6 @@ interface Props extends WithStyles<typeof styles> {
 }
 
 const _StorefrontPage = ({ data, classes }: Props) => {
-  const ogMetaTags = {
-    title: 'Salad - Official Store',
-    description:
-      'Salad helps you earn your way to new Steam Games, Discord Nitro, gift cards, and more from the Salad Storefront. You can even send Salad Balance to PayPal and redeem digital Visa and Mastercard that can be used worldwide!',
-    'image:alt': 'Salad - Official Store',
-  }
-  useAddOgMetaTags(ogMetaTags)
-
   return (
     <Scrollbar>
       <Head title="Official Store" />