From 6e79d0882a13dade0f85010ca5303f17e1574c6f Mon Sep 17 00:00:00 2001
From: Monica Powell <monica@aboutmonica.com>
Date: Wed, 29 May 2019 14:30:56 -0400
Subject: [PATCH] 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 <lex61rus@gmail.com>

* mark english hreflang as x-default

* make english the default on the languages page

* rethink default-x
---
 .../TitleAndMetaTags/TitleAndMetaTags.js      | 37 +++++++++++++++++++
 src/pages/languages.js                        |  6 ++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/components/TitleAndMetaTags/TitleAndMetaTags.js b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
index 3310e01ed48..facc5da7f8c 100644
--- a/src/components/TitleAndMetaTags/TitleAndMetaTags.js
+++ b/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>
   );
 };
diff --git a/src/pages/languages.js b/src/pages/languages.js
index ba5af1bbc2d..f0309a3bb1c 100644
--- a/src/pages/languages.js
+++ b/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>
         )}