Merge pull request #109 from cohstats/improve-desktop-page-description

Add more info and transform the image types
cohstats · Mar 12, 2023 · ee3536a · ee3536a
2 parents e336c3d + da54599
commit ee3536a
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 7 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -100,6 +100,10 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
           content="Company of Heroes 3 Stats. Leaderboards, Player Card, Past Matches, Unit stats and much more"
         />
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+        <meta
+          name="keywords"
+          content="Company of Heroes 3, COH3, COH3 Stats, COH3 Leaderboards, COH3 Player Cards, COH3 Info"
+        />
         <link rel="shortcut icon" href="/logo/favicon.ico" />
       </Head>
       <Script

diff --git a/pages/desktop-app.tsx b/pages/desktop-app.tsx
@@ -18,24 +18,29 @@ import Head from "next/head";
 import React from "react";
 
 const App: NextPage = ({ downloadURL, downloadCount, version }: any) => {
+  const desktopAppDescription = `Download COH3 Stats Desktop app ${version}. No configuration required. OBS Overlay feature. Detailed info on your current match opponents. Sound notifications of new game and more.`;
+
   return (
     <>
       <Head>
         <title>Desktop App from COH3 Stats</title>
+        <meta name="description" content={desktopAppDescription} />
         <meta
-          name="description"
-          content={`Download COH3 Stats Desktop app v${version}. No configuration required.
-          OBS Overlay feature. Detailed info on your current match opponents.
-           Sound notifications of new game and more.`}
+          name="keywords"
+          content={
+            "coh3, coh3 stats, coh3 desktop app, coh3 OBS overlay, company of heroes realtime info"
+          }
         />
+        <meta property="og:image" content="/desktop-app/desktop-app-main-500x281.webp" />
       </Head>
       <Container fluid>
         <Image
-          src="/statsapp.png"
+          src="/desktop-app/desktop-app-main.webp"
           alt={"coh3 stats desktop app"}
           radius="md"
           mx="auto"
           maw={900}
+          mah={506}
         />
         <Paper radius="md" mt="md" p="lg">
           <Stack align="center" spacing={5} mb={30}>

diff --git a/pages/leaderboards.tsx b/pages/leaderboards.tsx
@@ -176,8 +176,13 @@ const Leaderboards = ({
         <title>{pageTitle}</title>
         <meta
           name="description"
-          content={`COH3 Ranked leaderboards for faction ${localizedRace} and game type ${localizedType}.`}
+          content={`Ranked leaderboards for faction ${localizedRace} and game type ${localizedType}. Company of Heroes 3`}
         />
+        <meta
+          name="keywords"
+          content={`coh3, coh3 leaderboards, coh3 ${raceToFetch} leaderboards, coh3 live leaderboards, coh3 stats`}
+        />
+        <meta property="og:image" content={`/icons/general/${raceToFetch}.webp`} />
       </Head>
       <Container fluid>
         <Container fluid>

diff --git a/pages/players/[playerID].tsx b/pages/players/[playerID].tsx
@@ -63,8 +63,13 @@ const PlayerCard = ({
         <title>{pageTitle}</title>
         <meta
           name="description"
-          content={`COH3 Stats - player card for player ${playerData.info.name}.`}
+          content={`Player card for player ${playerData.info.name}. COH3 Stats`}
         />
+        <meta
+          name="keywords"
+          content={`coh3, coh3stats,${playerData.info.name} stats, ${playerData.info.name} matches`}
+        />
+        <meta property="og:image" content={playerData.steamData.avatarmedium} />
       </Head>
       <Container fluid>
         <Container fluid>

diff --git a/public/desktop-app/desktop-app-main-500x281.webp b/public/desktop-app/desktop-app-main-500x281.webp
diff --git a/public/desktop-app/desktop-app-main.webp b/public/desktop-app/desktop-app-main.webp
diff --git a/public/statsapp.png b/public/statsapp.png