Add canonical url to the head section (#1987)

Author: george-veras

src/components/MarkdownPage/MarkdownPage.js

@@ -15,7 +15,7 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import findSectionForPath from 'utils/findSectionForPath';
 import toCommaSeparatedList from 'utils/toCommaSeparatedList';
 import {sharedStyles} from 'theme';
-import createOgUrl from 'utils/createOgUrl';
+import createCanonicalUrl from 'utils/createCanonicalUrl';
 
 import type {Node} from 'types';
 
@@ -74,7 +74,7 @@ const MarkdownPage = ({
       }}>
       <TitleAndMetaTags
         ogDescription={ogDescription}
-        ogUrl={createOgUrl(markdownRemark.fields.slug)}
+        canonicalUrl={createCanonicalUrl(markdownRemark.fields.slug)}
         title={`${titlePrefix}${titlePostfix}`}
       />
       <div css={{flex: '1 0 auto'}}>

src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -13,21 +13,22 @@ const defaultDescription = 'A JavaScript library for building user interfaces';
 type Props = {
   title: string,
   ogDescription: string,
-  ogUrl: string,
+  canonicalUrl: string,
 };
 
-const TitleAndMetaTags = ({title, ogDescription, ogUrl}: Props) => {
+const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
   return (
     <Helmet title={title}>
       <meta property="og:title" content={title} />
       <meta property="og:type" content="website" />
-      {ogUrl && <meta property="og:url" content={ogUrl} />}
+      {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
       <meta property="og:image" content="/logo-og.png" />
       <meta
         property="og:description"
         content={ogDescription || defaultDescription}
       />
       <meta property="fb:app_id" content="623268441017527" />
+      {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
     </Helmet>
   );
 };

src/pages/acknowledgements.html.js

@@ -21,7 +21,7 @@ const Acknowlegements = ({data, location}) => (
         <div css={sharedStyles.articleLayout.content}>
           <Header>Acknowledgements</Header>
           <TitleAndMetaTags
-            ogUrl={`${urlRoot}/acknowledgements.html`}
+            canonicalUrl={`${urlRoot}/acknowledgements.html`}
             title="React - Acknowledgements"
           />
 

src/pages/blog/all.html.js

@@ -30,7 +30,7 @@ const AllBlogPosts = ({data, location}: Props) => (
         <div css={sharedStyles.articleLayout.content}>
           <Header>All Posts</Header>
           <TitleAndMetaTags
-            ogUrl={`${urlRoot}/blog/all.html`}
+            canonicalUrl={`${urlRoot}/blog/all.html`}
             title="React - All Posts"
           />
           <ul

src/pages/index.js

@@ -15,7 +15,7 @@ import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import Layout from 'components/Layout';
 import {colors, media, sharedStyles} from 'theme';
 import loadScript from 'utils/loadScript';
-import createOgUrl from 'utils/createOgUrl';
+import createCanonicalUrl from 'utils/createCanonicalUrl';
 import {babelURL} from 'site-constants';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
@@ -51,7 +51,7 @@ class Home extends Component {
       <Layout location={location}>
         <TitleAndMetaTags
           title="React &ndash; A JavaScript library for building user interfaces"
-          ogUrl={createOgUrl('index.html')}
+          canonicalUrl={createCanonicalUrl('/')}
         />
         <div css={{width: '100%'}}>
           <header

src/pages/languages.js

@@ -10,6 +10,7 @@ import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import React from 'react';
+import {urlRoot} from 'site-constants';
 import {media, sharedStyles} from 'theme';
 
 // $FlowFixMe This is a valid path
@@ -47,7 +48,10 @@ const Languages = ({location}: Props) => (
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
           <Header>Languages</Header>
-          <TitleAndMetaTags title="React - Languages" />
+          <TitleAndMetaTags
+            canonicalUrl={`${urlRoot}/languages/`}
+            title="React - Languages"
+          />
 
           <div css={sharedStyles.markdown}>
             <p>

src/pages/versions.js

@@ -10,6 +10,7 @@ import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import React from 'react';
+import {urlRoot} from 'site-constants';
 import {sharedStyles} from 'theme';
 
 // $FlowFixMe This is a valid path
@@ -25,7 +26,10 @@ const Versions = ({location}: Props) => (
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
           <Header>React Versions</Header>
-          <TitleAndMetaTags title="React - Versions" />
+          <TitleAndMetaTags
+            canonicalUrl={`${urlRoot}/versions/`}
+            title="React - Versions"
+          />
           <div css={sharedStyles.markdown}>
             <p>
               A complete release history for React is available{' '}