Add lang and hreflang to language pages for screen reader UX (#2033)

* Add lang and hreflang for screen reader UX

I wanted to add `lang` and `hreflang` to the link element for translated languages.  `Lang` is used by screen readers to switch language profiles to provide the correct accent and pronunciation.

>If you have multiple versions of a page for different languages or regions, tell Google about these different variations. Doing so will help Google Search point users to the most appropriate version of your page by language or region.
> Note that even without taking action, Google might still find alternate language versions of your page, but it is usually best for you to explicitly indicate your language- or region-specific pages.

Source: https://support.google.com/webmasters/answer/189077?hl=en

* add hrefLang and Lang attributes

* add alternate pages to head

* Apply suggestions from code review

Co-Authored-By: Alexey Pyltsyn <[email protected]>

* mark english hreflang as x-default

* make english the default on the languages page

* rethink default-x

Author: M0nica

src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -7,6 +7,9 @@
 
 import Helmet from 'react-helmet';
 import React from 'react';
+import {urlRoot} from 'site-constants';
+// $FlowFixMe This is a valid path
+import languages from '../../../content/languages.yml';
 
 const defaultDescription = 'A JavaScript library for building user interfaces';
 
@@ -16,6 +19,32 @@ type Props = {
   canonicalUrl: string,
 };
 
+// only provide alternate links to pages in languages where 95-100% of core content has been translated
+// which is determined by status enum of 2
+const completeLanguages = languages.filter(language => {
+  return language.status == 2;
+});
+
+const alternatePages = canonicalUrl => {
+  return completeLanguages.map(language => (
+    <link
+      key={('alt-', language.code)}
+      rel="alternate"
+      hreflang={language.code}
+      href={canonicalUrl.replace(
+        urlRoot,
+        `https://${
+          language.code === 'en' ? '' : `${language.code}.`
+        }reactjs.org`,
+      )}
+    />
+  ));
+};
+
+const defaultPage = canonicalUrl => {
+  return canonicalUrl.replace(urlRoot, 'https://reactjs.org');
+};
+
 const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
   return (
     <Helmet title={title}>
@@ -29,6 +58,14 @@ const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
       />
       <meta property="fb:app_id" content="623268441017527" />
       {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+      {canonicalUrl && (
+        <link
+          rel="alternate"
+          href={defaultPage(canonicalUrl)}
+          hreflang="x-default"
+        />
+      )}
+      {canonicalUrl && alternatePages(canonicalUrl)}
     </Helmet>
   );
 };

src/pages/languages.js

@@ -140,7 +140,11 @@ const Language = ({code, name, status, translatedName}) => {
         }}>
         {status === 0 && translatedName}
         {status > 0 && (
-          <a href={`https://${prefix}reactjs.org/`} rel="nofollow">
+          <a
+            href={`https://${prefix}reactjs.org/`}
+            rel="nofollow"
+            lang={code}
+            hrefLang={code}>
             {translatedName}
           </a>
         )}