Update SEO tags in header

components/helmet/index.js

@@ -0,0 +1,58 @@
+import NextHead from 'next/head';
+import siteConfig from 'data/site';
+
+const prepareTitle = (givenTitle) => {
+  givenTitle = givenTitle || siteConfig.title;
+  return `${givenTitle} - ${siteConfig.name}`;
+};
+
+const prepareDescription = (givenDescription) => {
+  return givenDescription || siteConfig.description;
+};
+
+const Helmet = (props) => (
+  <NextHead>
+    <meta charSet='UTF-8' />
+
+    <title>{ prepareTitle(props.title) }</title>
+    <meta name='description' content={ prepareDescription(props.description) } />
+
+    <meta name="author" content={ siteConfig.author } />
+    <meta name="keywords" content={ siteConfig.keywords.join(',') } />
+
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0" />
+    <link rel="canonical" href={ siteConfig.url } />
+    <meta httpEquiv="Content-Language" content="en" />
+
+    <meta property="og:title" content={ prepareTitle(props.title) } />
+    <meta property="og:description" content={ prepareDescription(props.description) } />
+    <meta property="og:image" content={ siteConfig.logo } />
+    <meta property="og:url" content={ siteConfig.url } />
+    <meta property="og:type" content="website" />
+    <meta property="article:publisher" content={ `https://facebook.com/${siteConfig.facebook}` } />
+    <meta property="og:site_name" content={ siteConfig.name } />
+    <meta property="article:author" content={ siteConfig.author } />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content={ `@${siteConfig.twitter}` } />
+    <meta name="twitter:title" content={ prepareTitle(props.title) } />
+    <meta name="twitter:description" content={ prepareDescription(props.description) } />
+    <meta name="twitter:image" content={ siteConfig.logo } />
+    <meta name="twitter:image:alt" content="roadmap.sh" />
+
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/manifest/apple-touch-icon.png" />
+    <meta name="msapplication-TileColor" content="#101010" />
+    <meta name="theme-color" content="#848a9a" />
+
+    <link rel="manifest" href="/static/manifest/manifest.json" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/manifest/icon32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/manifest/icon16.png" />
+    <link rel="shortcut icon" href="/static/manifest/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/static/manifest/favicon.ico" type="image/x-icon" />
+  </NextHead>
+);
+
+export default Helmet;

data/site.json

@@ -1,6 +1,31 @@
 {
-  "twitter": "roadmapsh",
+  "author": "Kamran Ahmed",
+  "title": "Roadmaps to becoming a modern developer",
+  "name": "roadmap.sh",
+  "description": "Roadmaps, articles and resources to help you choose your path, learn and improve.",
+  "twitter": "kamranahmedse",
+  "facebook": "kamranahmedse",
   "url": "https://roadmap.sh",
+  "logo": "/static/brand.png",
   "repoUrl": "https://github.com/kamranahmedse/roadmap-next",
-  "dataUrl": "/tree/master/data"
+  "dataUrl": "/tree/master/data",
+  "keywords": [
+    "roadmap",
+    "developer roadmaps",
+    "developer roadmap",
+    "frontend developer",
+    "frontend developer roadmap",
+    "frontend",
+    "frontend roadmap",
+    "backend",
+    "backend developer",
+    "backend developer roadmap",
+    "devops",
+    "devops roadmap",
+    "fullstack developer roadmap",
+    "guide to becoming a developer",
+    "sre roadmap",
+    "sre",
+    "operations roadmap"
+  ]
 }

layouts/default/head.js

@@ -1,19 +0,0 @@
-import NextHead from 'next/head';
-
-const defaultDescription = 'Roadmaps, articles and resources for modern developers';
-const defaultOgUrl = 'https://roadmap.sh';
-
-const Head = (props) => (
-  <NextHead>
-    <meta charSet='UTF-8' />
-    <title>{ props.title || '' }</title>
-    <meta name='description' content={ props.description || defaultDescription } />
-    <meta name='viewport' content='width=device-width, initial-scale=1' />
-    <meta property='og:url' content={ props.url || defaultOgUrl } />
-    <meta property='og:title' content={ props.title || '' } />
-    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
-    <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
-  </NextHead>
-);
-
-export default Head;

layouts/default/index.js

@@ -1,9 +1,9 @@
-import Head from './head';
+import Helmet from 'components/helmet';
 import './global.scss';
 
 const DefaultLayout = (props) => (
   <div>
-    <Head />
+    <Helmet />
     { props.children }
   </div>
 );

pages/guides/[guide].js

@@ -6,18 +6,20 @@ import GuideBody from 'components/guide-body';
 import ShareGuide from 'components/share-guide';
 import GuideFooter from 'components/guide-footer';
 import { getRequestedGuide } from "lib/guide";
+import Helmet from '../../components/helmet';
 
 const Guide = ({ guide }) => {
   if (!guide) {
-    return <Error statusCode={404} />
+    return <Error statusCode={ 404 } />
   }
 
   return (
     <GuideLayout>
+      <Helmet title={ guide.title } description={ guide.description } />
       <GuideHeader guide={ guide } />
       <GuideBody>
         <guide.component />
-        <ShareGuide guide={ guide }/>
+        <ShareGuide guide={ guide } />
       </GuideBody>
       <GuideFooter guide={ guide } />
     </GuideLayout>
@@ -26,7 +28,7 @@ const Guide = ({ guide }) => {
 
 Guide.getInitialProps = serverOnlyProps(({ req }) => {
   return {
-    guide: getRequestedGuide(req)
+    guide: getRequestedGuide(req),
   };
 });
 

static/manifest/manifest.json

@@ -0,0 +1,27 @@
+{
+  "dir": "ltr",
+  "lang": "en",
+  "name": "Roadmap",
+  "scope": "/",
+  "display": "standalone",
+  "start_url": "https://roadmap.sh/",
+  "short_name": "Roadmap",
+  "theme_color": "#EDD07E",
+  "description": "Roadmaps to becoming a Modern Developer – roadmap.sh",
+  "orientation": "any",
+  "background_color": "#101010",
+  "related_applications": [],
+  "prefer_related_applications": false,
+  "icons": [
+    {
+      "src": "/static/manifest/icon152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/manifest/icon196.png",
+      "sizes": "196x196",
+      "type": "image/png"
+    }
+  ]
+}