✨ Add missing head tags #994

equinor · Apr 19, 2022 · 319ebef · 319ebef
1 parent 813554e
commit 319ebef
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 24 deletions.
diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
@@ -13,6 +13,9 @@ import { languages, defaultLanguage } from '../../languages'
 import { FormattedMessage } from 'react-intl'
 import { Icon } from '@equinor/eds-core-react'
 import { search } from '@equinor/eds-icons'
+import { getLocaleFromName } from '../../lib/localization'
+import Head from 'next/head'
+import getConfig from 'next/config'
 
 const StyledSearchButton = styled(Button)`
   color: var(--default-text);
@@ -99,8 +102,35 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
     </NextLink>
   )
 
+  /* Filter objects that have translations but no routes */
+  const validSlugs = slugs.filter((obj) => obj.slug)
+
+  const { publicRuntimeConfig } = getConfig()
+
+  const HeadTags = () => {
+    const defaultSlug = slugs.find((slug) => slug.lang === defaultLanguage.name)?.slug
+    return (
+      <Head>
+        {slugs.map((slug) => {
+          const locale = getLocaleFromName(slug.lang)
+          return (
+            <link
+              key={locale}
+              rel="alternate"
+              hrefLang={locale}
+              href={`${publicRuntimeConfig.domain}/${locale}${slug.slug}`}
+            />
+          )
+        })}
+        <link rel="alternate" hrefLang="x-default" href={`${publicRuntimeConfig.domain}${defaultSlug}`} />
+        <link rel="canonical" href={`${publicRuntimeConfig.domain}${defaultSlug}`} />
+      </Head>
+    )
+  }
+
   return (
     <HeaderRelative>
+      <HeadTags />
       <TopbarOffset />
       <Topbar>
         <TopbarContainer>
@@ -121,7 +151,9 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
                 </NextLink>
               </ControlChild>
             )}
-            {hasMoreThanOneLanguage && <LocalizationSwitch activeLocale={localization.activeLocale} allSlugs={slugs} />}
+            {hasMoreThanOneLanguage && (
+              <LocalizationSwitch activeLocale={localization.activeLocale} allSlugs={validSlugs} />
+            )}
             {shouldDisplayAllSites ? (
               <AllSites />
             ) : menuData && isGlobal ? (

diff --git a/web/pageComponents/shared/LocalizationSwitch.tsx b/web/pageComponents/shared/LocalizationSwitch.tsx
@@ -103,35 +103,30 @@ const LocaleLink: React.FC<LocaleLinkProps> = ({ href, title, locale, active, wi
   return null
 }
 
-export const LocalizationSwitch = ({ allSlugs, activeLocale, ...rest }: LocalizationSwitchProps) => {
+export const LocalizationSwitch = ({ allSlugs: slugs, activeLocale, ...rest }: LocalizationSwitchProps) => {
   const { width } = useWindowSize()
 
-  /* Filter objects that have translations but no routes */
-  const slugs = allSlugs.filter((obj) => obj.slug)
-
   if (slugs.length < 1) return null
 
   return (
     <Wrapper {...rest}>
-      <>
-        {slugs.map((obj, key) => {
-          const language = languages.find((lang) => lang.name === obj.lang)
-          return (
-            <StyledDiv key={obj.lang}>
-              <LocaleLink
-                href={obj.slug}
-                title={`Switch to ${language?.title}`}
-                locale={`${language?.locale}`}
-                active={activeLocale === `${language?.locale}`}
-                width={width}
-              >
-                <span style={{ textTransform: 'uppercase' }}>{language?.locale}</span>
-              </LocaleLink>
-              {key + 1 < slugs.length && width > BREAKPOINT && '|'}
-            </StyledDiv>
-          )
-        })}
-      </>
+      {slugs.map((obj, key) => {
+        const language = languages.find((lang) => lang.name === obj.lang)
+        return (
+          <StyledDiv key={obj.lang}>
+            <LocaleLink
+              href={obj.slug}
+              title={`Switch to ${language?.title}`}
+              locale={`${language?.locale}`}
+              active={activeLocale === `${language?.locale}`}
+              width={width}
+            >
+              <span style={{ textTransform: 'uppercase' }}>{language?.locale}</span>
+            </LocaleLink>
+            {key + 1 < slugs.length && width > BREAKPOINT && '|'}
+          </StyledDiv>
+        )
+      })}
     </Wrapper>
   )
 }