Merge pull request #14 from mobeigi/more-seo-changes

Improve management of links and canonicals
mobeigi · Aug 20, 2024 · cd37e0f · cd37e0f
2 parents 4302d6e + 0cd21f7
commit cd37e0f
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/app/index.html b/app/index.html
@@ -22,6 +22,7 @@
       name="description"
       content="Chessort is a Chess puzzle game where you sort moves based on the chess engine's evaluation."
     />
+    <meta name="keywords" content="chessort, chess, puzzle, sort, sorting, order, ordering, game, engine, evaluation, lichess, stockfish">
     <meta property="og:title" content="Chessort" />
     <meta
       property="og:description"
@@ -59,7 +60,7 @@
     <!-- Misc end -->
 
     <!-- Header includes end -->
-    <title>Chessort</title>
+    <title>Chessort: The Chess Puzzle Sorting Game</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/nginx.conf b/app/nginx.conf
@@ -2,8 +2,15 @@ server {
     listen 80;
     server_name chessort.com;
 
+    absolute_redirect off;
+
     root /usr/share/nginx/html;
 
+    # Add trailing slash to /game/
+	if ($request_uri ~* ^/game/[^/]+$) {
+		return 301 $request_uri/;
+	}
+
     # React SPA
     # Redirect all routes to index.html
     location / {

diff --git a/app/src/constants/app.ts b/app/src/constants/app.ts
@@ -1,2 +1,3 @@
 export const APP_NAME = 'Chessort';
+export const APP_TAGLINE = 'The Chess Puzzle Sorting Game';
 export const CHESSORT_APP_BASE_URL = import.meta.env.VITE_CHESSORT_APP_BASE_URL;
diff --git a/app/src/containers/App/App.tsx b/app/src/containers/App/App.tsx
@@ -22,7 +22,7 @@ import {
 } from '../../constants/analytics';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { useEffect } from 'react';
-import { APP_NAME } from '../../constants/app';
+import { APP_NAME, APP_TAGLINE, CHESSORT_APP_BASE_URL } from '../../constants/app';
 
 // Set modal element
 Modal.setAppElement('#root');
@@ -56,7 +56,10 @@ const AppContainer = () => {
         <Header />
         <ToastContainer />
         <Helmet>
-          <title>{APP_NAME}</title>
+          <title>
+            {APP_NAME}: {APP_TAGLINE}
+          </title>
+          <link rel="canonical" href={`${CHESSORT_APP_BASE_URL}/`} />
         </Helmet>
         <Routes>
           <Route path="/" element={<Game />} />

diff --git a/app/src/containers/App/NotFoundPage/NotFoundPage.tsx b/app/src/containers/App/NotFoundPage/NotFoundPage.tsx
@@ -8,7 +8,7 @@ export const NotFoundPage = () => {
     <>
       <Helmet>
         <title>{APP_NAME}: 404 Not Found</title>
-        <link rel="canonical" href={`${CHESSORT_APP_BASE_URL}/404`} />
+        <link rel="canonical" href={`${CHESSORT_APP_BASE_URL}/404/`} />
       </Helmet>
       <NotFoundContainer>
         <h1>404 Not Found</h1>

diff --git a/app/src/containers/Panel/Panel.tsx b/app/src/containers/Panel/Panel.tsx
@@ -81,8 +81,8 @@ export const Panel = () => {
    * To support back/forward browser navigation.
    */
   useEffect(() => {
-    // Don't rewrite url for the very first game
-    if (isFirstGame) {
+    // Don't rewrite url for the very first game on homepage
+    if (isFirstGame && location.pathname === '/') {
       return;
     }
 
@@ -319,6 +319,12 @@ export const Panel = () => {
   if (isInitLoadCompleted && initError) {
     return (
       <PanelContainer>
+        <Helmet>
+          <title>
+            {APP_NAME}: Failed to load game (#{gameId})
+          </title>
+          <link rel="canonical" href={`${CHESSORT_APP_BASE_URL}/game/${gameId}/`} />
+        </Helmet>
         <div>
           <i className="bx bx-error"></i> <span>Failed to load game.</span>
         </div>
@@ -333,7 +339,9 @@ export const Panel = () => {
           <title>
             {APP_NAME} (#{gameId})
           </title>
-          <link rel="canonical" href={`${CHESSORT_APP_BASE_URL}/game/${gameId}`} />
+          {!(isFirstGame && location.pathname === '/') && (
+            <link rel="canonical" href={`${CHESSORT_APP_BASE_URL}/game/${gameId}/`} />
+          )}
         </Helmet>
       )}
       <PanelContainer>