✨ Add canonical url tag

Asing1001 · Nov 1, 2023 · 156d7ec · 156d7ec
1 parent da57c1a
commit 156d7ec
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 48 deletions.
diff --git a/src/app/components/movieDetailTabs.tsx b/src/app/components/movieDetailTabs.tsx
@@ -118,6 +118,7 @@ export default class MovieDetailTabs extends React.PureComponent<any, MovieDetai
     document['meta'] = {
       image: posterUrl,
       description: generateMovieDescription(movie),
+      canonicalUrl: `https://www.mvrater.com/movie/${movie.movieBaseId}`,
     };
     return (
       <Paper zDepth={2}>

diff --git a/src/index.html b/src/index.html
@@ -1,51 +1,64 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({
+          'gtm.start': new Date().getTime(),
+          event: 'gtm.js',
+        });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', 'GTM-P8CBJKP');
+    </script>
+    <script
+      data-ad-client="ca-pub-6735629726636183"
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
+    ></script>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/public/favicons/apple-touch-icon.png?v=20170417" />
+    <link rel="icon" type="image/png" href="/public/favicons/favicon-32x32.png?v=20170417" sizes="32x32" />
+    <link rel="icon" type="image/png" href="/public/favicons/favicon-16x16.png?v=20170417" sizes="16x16" />
+    <link rel="manifest" href="/public/favicons/manifest.json?v=20170417" />
+    <link rel="mask-icon" href="/public/favicons/safari-pinned-tab.svg?v=20170417" color="#263238" />
+    <link rel="shortcut icon" href="/public/favicons/favicon.ico?v=20170417" />
+    <meta name="msapplication-config" content="/public/favicons/browserconfig.xml?v=20170417" />
+    <meta name="theme-color" content="#263238" />
+    <meta name="description" content="{{ meta.description }}" />
+    <meta name="keywords" content="Movie, 電影, 評價, 時刻表, IMDB, PTT, Yahoo電影, 評分, 好雷" />
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="{{ meta.image }}" />
+    <meta property="og:description" content="{{ meta.description }}" />
+    {% if meta.canonicalUrl %}
+    <link rel="canonical" href="{{ meta.canonicalUrl }}" />
+    {% endif %}
+    <title>{{ title }}</title>
+  </head>
 
-<head>
-  <script>
-    (function (w, d, s, l, i) {
-    w[l] = w[l] || []; w[l].push({
-      'gtm.start':
-      new Date().getTime(), event: 'gtm.js'    
-}); var f = d.getElementsByTagName(s)[0],
-      j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
-        'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-P8CBJKP');
-  </script>
-  <script data-ad-client="ca-pub-6735629726636183" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <link rel="apple-touch-icon" sizes="180x180" href="/public/favicons/apple-touch-icon.png?v=20170417">
-  <link rel="icon" type="image/png" href="/public/favicons/favicon-32x32.png?v=20170417" sizes="32x32">
-  <link rel="icon" type="image/png" href="/public/favicons/favicon-16x16.png?v=20170417" sizes="16x16">
-  <link rel="manifest" href="/public/favicons/manifest.json?v=20170417">
-  <link rel="mask-icon" href="/public/favicons/safari-pinned-tab.svg?v=20170417" color="#263238">
-  <link rel="shortcut icon" href="/public/favicons/favicon.ico?v=20170417">
-  <meta name="msapplication-config" content="/public/favicons/browserconfig.xml?v=20170417">
-  <meta name="theme-color" content="#263238">
-  <meta name="description" content="{{ meta.description }}">
-  <meta name="keywords" content="Movie, 電影, 評價, 時刻表, IMDB, PTT, Yahoo電影, 評分, 好雷">
-  <meta property="og:title" content="{{ title }}" />
-  <meta property="og:type" content="website" />
-  <meta property="og:image" content="{{ meta.image }}" />
-  <meta property="og:description" content="{{ meta.description }}" />
-  <title>{{ title }}</title>  
-</head>
+  <body>
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-P8CBJKP"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe>
+    </noscript>
 
-<body>
-
-  <noscript>
-    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P8CBJKP" height="0" width="0" style="display:none;visibility:hidden"></iframe>
-  </noscript>
-
-  <div id="app">
-    <div>{{ html|safe }}</div>
-  </div>
-  <script>{{ apolloState|safe }}</script>
-
-</body>
-
-</html>
+    <div id="app">
+      <div>{{ html|safe }}</div>
+    </div>
+    {{ apolloState|safe }}
+  </body>
+</html>
diff --git a/src/server.tsx b/src/server.tsx
@@ -108,7 +108,10 @@ app.use(basicCache, function (req, res, next) {
         title: global.document.title,
         meta: global.document.meta,
         html: content,
-        apolloState: `window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(/</g, '\\u003c')};`,
+        apolloState: `<script>window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(
+          /</g,
+          '\\u003c'
+        )};</script>`,
       });
       res.status(context['status'] || 200).send(page);
     },