[#114] Optimized dynamic SEO tags

annabranco · Jul 24, 2021 · 954f502 · 954f502
1 parent 1abe704
commit 954f502
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 2 deletions.
diff --git a/packages/nnk/src/components/controllers/App/index.js b/packages/nnk/src/components/controllers/App/index.js
@@ -26,7 +26,9 @@ import { MainArea } from './styles';
 const App = ({ state, actions }) => {
   const { colors, language } = state.theme;
   const data = state.source.get(state.router.link);
-
+  const now = new Date();
+  const parsedNowISOString = now.toISOString();
+  const locale = `${language}_${language.toUpperCase()}`;
   useEffect(() => {
     actions.theme.updateRead(updatedReadPosts());
   }, []);
@@ -35,12 +37,53 @@ const App = ({ state, actions }) => {
     <>
       <Title />
       <Head>
+        <html lang={language} />
+        <meta charset="UTF-8" />
+        <meta content="global" name="distribution" />
         <meta name="description" content={state.frontity.description} />
-        <html lang="en" />
+        <meta name="article:author" content="No Name Kitchen" />
+        <meta name="lang" content={language} />
+        <meta name="theme-color" content="#0c0c0c" />
+
+        <meta name="robots" content="index, follow" />
+        <meta name="googlebot" content="index, follow" />
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1.0, viewport-fit=cover"
         />
+
+        <meta name="DC.creator" content="No Name Kitchen" />
+        <meta
+          name="DC.description"
+          lang={language}
+          content={state.frontity.description}
+        />
+        <meta name="DC.date" scheme="W3CDTF" content={parsedNowISOString} />
+        <meta name="DC.date.issue" content={parsedNowISOString} />
+        <meta name="DC.language" scheme="RFC1766" content={locale} />
+        <meta name="DC.publisher" content="No Name Kitchen" />
+        <meta
+          name="DC.subject"
+          lang={language}
+          content={state.frontity.description}
+        />
+
+        <meta name="date" scheme="W3CDTF" content={parsedNowISOString} />
+        <meta itemProp="datePublished" content={parsedNowISOString} />
+        <meta name="last-modified" content={parsedNowISOString} />
+        <meta name="pageDate" content={parsedNowISOString} />
+        <meta name="pageRender" content={parsedNowISOString} />
+
+        <meta name="og:description" content={state.frontity.description} />
+        <meta property="og:locale" content={locale} />
+        <meta name="og:type" content="website" />
+        <meta name="og:url" content="http://www.nonamekitchen.org/" />
+        <meta property="og:site_name" content="No Name Kitchen" />
+
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="apple-mobile-web-app-title" content="No Name Kitchen" />
+
         <link rel="icon" type="image/png" href={Favicon} sizes="16x16" />
         <link rel="icon" type="image/png" href={Favicon} sizes="32x32" />
         <link

diff --git a/packages/nnk/src/components/core/HtmlTitle/index.js b/packages/nnk/src/components/core/HtmlTitle/index.js
@@ -1,8 +1,10 @@
 import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies
 import { Head, connect, decode } from 'frontity';
 import { StatePropType } from '../../../types';
+import { PAGES_SEO } from '../../../db';
 
 const Title = ({ state }) => {
+  const { language } = state.theme;
   const data = state.source.get(state.router.link);
   let { title } = state.frontity;
 
@@ -20,11 +22,21 @@ const Title = ({ state }) => {
     title = `${cleanTitle} - ${state.frontity.title}`;
   } else if (data.is404) {
     title = `404 Not Found - ${state.frontity.title}`;
+  } else if (state.router.link === '/') {
+    title = `${state.frontity.title} - ${
+      PAGES_SEO[language][state.router.link]
+    }`;
+  } else {
+    title = `${PAGES_SEO[language][state.router.link]} - ${
+      state.frontity.title
+    }`;
   }
 
   return (
     <Head>
       <title>{title}</title>
+      <meta name="DC.title" lang={language} content={title} />
+      <meta name="og:title" content={title} />
     </Head>
   );
 };

diff --git a/packages/nnk/src/db/index.js b/packages/nnk/src/db/index.js
@@ -7,6 +7,7 @@ export { default as HOMEPAGE_TEXTS } from './homepage.json';
 export { default as JTTF_TEXTS } from './jttf.json';
 export { default as MAIN_SECTIONS } from './nav.json';
 export { default as NEWS_SECTIONS } from './news.json';
+export { default as PAGES_SEO } from './pages.json';
 export { default as PRIVACY_TEXTS } from './privacy.json';
 export { default as VOLUNTEER_TEXTS } from './volunteer.json';
 export { default as WHAT_TEXTS } from './what.json';

diff --git a/packages/nnk/src/db/pages.json b/packages/nnk/src/db/pages.json
@@ -0,0 +1,20 @@
+{
+  "en": {
+    "/": "Supporting people on the move",
+    "/help-us/": "Support the movement",
+    "/join-us/": "Volunteer - Jump to the field",
+    "/news/": "No Name News",
+    "/what/": "What? Our projects to fight injustice",
+    "/where/": "Where? Where we are",
+    "/why/": "Why? Disobey injustice"
+  },
+  "es": {
+    "/": "Supporting people on the move",
+    "/help-us/": "Apoya el movimiento",
+    "/join-us/": "Voluntariado - Yendo al terreno",
+    "/news/": "No Name News - Noticias",
+    "/what/": "¿Qué? Nuestros programas contra la injusticia",
+    "/where/": "¿Dónde? Dónde estamos",
+    "/why/": "¿Por qué? Desobedecer a la injusticia"
+  }
+}