Fixed <head> tags, now correctly appear in <head> instead of <body>

While reviewing a SEO warning in Lighthouse I noticed that the <head> tags did not appear in the <head> but instead at the top in <body>. After some looking around it seems that specifying `<html lang="is">` in next/head <Head> is not supported. It was supported in react-helmet which was used previously. A mistake I was not careful enough to spot while migrating from react-helmet to next/head. This also fixes a next-head-count warning on the console. After some further digging it seems this is a known issue[0] with a proposed fix[1]. Since the website will only ever be in Icelandic it is enough to specify a i18n locale setting. That will then set the correct <html> lang attribute. See: [0]: vercel/next.js#20924 [1]: vercel/next.js#21080
jonrh · Apr 15, 2021 · 3a90a4d · 3a90a4d
1 parent 444660e
commit 3a90a4d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    locales: ["is"],
+    defaultLocale: 'is'
+  }
+}
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -13,7 +13,6 @@ const DefaultHtmlHead = (props) => {
 
   return (
     <Head>
-      <html lang="is" />
       <meta name="description" content={metaDescription} />
       <meta name="author" content="Jón Rúnar Helgason, jonrh.is" />