misc(seo) add canonical to the pages html, use trailing slash for con… (#2999)

EugeneHlushko · montogeek · commit cac1fe19b7d6 · 2019-05-08T18:04:50.000+02:00
* misc(seo) add canonical to the pages html, use trailing slash for consistency with github pages

* misc(seo) fix sitemap to not mention index.html for each page
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "lint:prose": "cp .proselintrc ~/ && proselint src/content",
     "lint:links": "hyperlink -r dist/index.html --canonicalroot https://webpack.js.org/ -i --todo https://img.shields.io --todo https://codecov.io/gh --todo 'content-type-mismatch https://travis-ci.org' --todo 'Asset is used as both Html and Image' | tee internal-links.tap | tap-spot",
     "linkcheck": "hyperlink -r dist/index.html --canonicalroot https://webpack.js.org/ --skip support__ --skip sidecar.gitter.im --skip vimdoc.sourceforge.net --skip img.shields.io --skip npmjs.com/package/ --skip opencollective.com/webpack --todo external-redirect | tee external-links.tap | tap-spot",
-    "sitemap": "cd dist && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml",
+    "sitemap": "cd dist && sitemap-static --pretty --prefix=https://webpack.js.org/ > sitemap.xml",
     "serve": "npm run build && sirv start ./dist --port 4000",
     "deploy": "gh-pages -d dist"
   },
diff --git a/src/server.jsx b/src/server.jsx
@@ -20,6 +20,12 @@ const bundles = [
   '/index.bundle.js'
 ];
 
+// As github pages uses trailing slash, we need to provide it to canonicals for consistency
+// between canonical href and final url served by github pages.
+function enforceTrailingSlash (url) {
+  return url.replace(/\/?$/, '/');
+}
+
 // Export method for `SSGPlugin`
 export default locals => {
   let { assets } = locals.webpackStats.compilation;
@@ -49,6 +55,7 @@ export default locals => {
             <link key={ path } rel="stylesheet" href={ `/${path}` } />
           ))}
           <link rel="manifest" href="/manifest.json" />
+          <link rel="canonical" href={enforceTrailingSlash(locals.path)} />
         </head>
         <body>
           <div id="root">
