translate metadata

src/components/seo.js

@@ -3,30 +3,29 @@ import * as React from "react"
 import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 
 function Seo({ description, lang, meta, imageURL, title, author }) {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-            url
-          }
+  const { site } = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+          description
+          author
+          url
         }
       }
-    `
-  )
+    }
+  `)
+
+  const { t } = useTranslation()
 
   const metaAuthor = author || site.siteMetadata.author
-  const metaDescription = description || site.siteMetadata.description
+  const metaDescription =
+    description || t("header.text", site.siteMetadata.description)
   const defaultTitle = site.siteMetadata?.title
 
-  const jsonLdDescription =
-    "UiO Gaming sitt formål er å fremme gaming, brettspill og andre spillrelaterte interesser/kulturer ved UiO. I tillegg til dette vil vi lage et sosialt miljø som tilrettelegger alle former for aktivitet rundt spill. Foreningen har derfor som mål å arrangere spillkvelder, turneringer, LAN og andre spillrelaterte aktiviteter åpent for alle som er interesserte" // I shouldn't hardcode this but whatever
-
   const jsonLd = {
     "@context": "https://schema.org",
     "@type": "Organization",
@@ -40,7 +39,7 @@ function Seo({ description, lang, meta, imageURL, title, author }) {
       "https://github.com/UiO-Gaming",
     ],
     name: site.siteMetadata.title,
-    description: jsonLdDescription,
+    description: t("longDescription"),
     email: "styret@uiogaming.no",
     address: {
       "@type": "PostalAddress",
@@ -91,7 +90,7 @@ function Seo({ description, lang, meta, imageURL, title, author }) {
         },
         {
           property: `og:locale`,
-          content: `nb_NO`,
+          content: lang,
         },
         {
           name: `twitter:creator`,

src/pages/404.js

@@ -8,11 +8,11 @@ import Layout from "../components/layout"
 import Seo from "../components/seo"
 
 const NotFoundPage = () => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
 
   return (
     <Layout>
-      <Seo title="404: Not found" />
+      <Seo title="404: Not found" description="Uh oh :(" lang={i18n.language} />
       <div className={styles.container}>
         <h1 className={styles.centeredText}>{t("title")}</h1>
         <p className={styles.centeredText}>
@@ -34,7 +34,7 @@ export default NotFoundPage
 export const query = graphql`
   query ($language: String!) {
     locales: allLocale(
-      filter: { ns: { in: ["404"] }, language: { eq: $language } }
+      filter: { ns: { in: ["404", "seo"] }, language: { eq: $language } }
     ) {
       edges {
         node {

src/pages/eventPost.js

@@ -21,7 +21,7 @@ export const query = graphql`
       description
     }
     locales: allLocale(
-      filter: { ns: { in: ["common"] }, language: { eq: $language } }
+      filter: { ns: { in: ["common", "seo"] }, language: { eq: $language } }
     ) {
       edges {
         node {
@@ -47,6 +47,7 @@ const Event = ({ data }) => {
       <Seo
         title={data.sanityEvent.title}
         description={`Tidspunkt: ${time}\nSted: ${data.sanityEvent.location}\n\n${data.sanityEvent.description}`}
+        lang={i18n.language}
       />
       <div className={styles.container}>
         <Back />

src/pages/index.js

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { graphql } from "gatsby"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 import "../index.css"
 
 import Layout from "../components/layout"
@@ -14,21 +15,24 @@ import BoardMembers from "../components/sections/boardMembers"
 import Contact from "../components/sections/contact"
 import Footer from "../components/sections/footer"
 
-const IndexPage = () => (
-  <>
-    <Layout>
-      <Seo />
-      <Header />
-      <About />
-      <Events />
-      <Office />
-      <BoardMembers />
-      <Contact />
-      <Footer />
-    </Layout>
-    <LanguageSelector />
-  </>
-)
+const IndexPage = () => {
+  const { t, i18n } = useTranslation()
+  return (
+    <>
+      <Layout>
+        <Seo lang={i18n.language} />
+        <Header />
+        <About />
+        <Events />
+        <Office />
+        <BoardMembers />
+        <Contact />
+        <Footer />
+      </Layout>
+      <LanguageSelector />
+    </>
+  )
+}
 
 export default IndexPage
 
@@ -36,7 +40,7 @@ export const query = graphql`
   query ($language: String!) {
     locales: allLocale(
       filter: {
-        ns: { in: ["common", "index", "altText"] }
+        ns: { in: ["common", "index", "altText", "seo"] }
         language: { eq: $language }
       }
     ) {