Base Component for helmet dinamis (SEO friendly)

.gitignore

@@ -3,3 +3,27 @@ node_modules/
 
 # Build directories
 dist/
+
+# Config file
+client/src/entry/Config.js
+server/config.js
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+package-lock.json
+yarn.lock
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# production
+/build
+/public/dist
+
+# misc
+.DS_Store
+.env

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "engines": {
-    "node": "10.11.0",
+    "node": "> 10.11.0",
     "npm": "6.4.1",
     "yarn": ">= 1.9.4"
   },
@@ -62,8 +62,8 @@
     "build": "cross-env NODE_ENV=production ASSETS_URL=https://your-cdn.com/ webpack --config webpack.config.js",
     "build:local": "cross-env NODE_ENV=production LOCAL=true webpack --config webpack.config.js",
     "build:clean": "rm -rf public/dist && cd public && mkdir dist",
-    "modules:clean": "rm -rf node_modules && mkdir node_modules",
+    "modules:clean": "rm -rf node_modules && mkdir node_modules && rm -rf yarn.lock && rm -rf package-lock.json",
     "start": "node app.js",
     "dev": "node app.dev.js"
   }
-}
+}

src/components/base/js/Base.js

@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import Helmet from 'react-helmet';
+import imageDefault from 'src/views/home/img/react-logo.png';
+
+const SITE_URL =
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:8080'
+    : 'https://www.domain.com';
+
+const FACEBOOK_APP_ID = 'XXXXXXXXX';
+
+const defaultTitle = 'Server Side Rendering Starter Pack';
+const defaultDescription =
+  'This is a Server Side Rendering Starter Pack.';
+const defaultImage = `${SITE_URL}${imageDefault}`;
+const defaultTwitter = '@xyz';
+const defaultSep = ' | ';
+
+class Base extends Component {
+  getMetaTags(
+    {
+      title,
+      description,
+      image,
+      contentType,
+      twitter,
+      noCrawl,
+      published,
+      updated,
+      category,
+      tags
+    },
+    pathname
+  ) {
+    const theTitle = title
+      ? (title + defaultSep + defaultTitle).substring(0, 60)
+      : defaultTitle;
+    const theDescription = description
+      ? description.substring(0, 155)
+      : defaultDescription;
+    const theImage = image ? `${SITE_URL}${image}` : defaultImage;
+
+    const metaTags = [
+      { itemprop: 'name', content: theTitle },
+      { itemprop: 'description', content: theDescription },
+      { itemprop: 'image', content: theImage },
+      { name: 'description', content: theDescription },
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:site', content: defaultTwitter },
+      { name: 'twitter:title', content: theTitle },
+      { name: 'twitter:description', content: theDescription },
+      { name: 'twitter:creator', content: twitter || defaultTwitter },
+      { name: 'twitter:image:src', content: theImage },
+      { property: 'og:title', content: theTitle },
+      { property: 'og:type', content: contentType || 'website' },
+      { property: 'og:url', content: SITE_URL + pathname },
+      { property: 'og:image', content: theImage },
+      { property: 'og:description', content: theDescription },
+      { property: 'og:site_name', content: defaultTitle },
+      { property: 'fb:app_id', content: FACEBOOK_APP_ID }
+    ];
+
+    if (noCrawl) {
+      metaTags.push({ name: 'robots', content: 'noindex, nofollow' });
+    }
+
+    if (published) {
+      metaTags.push({ name: 'article:published_time', content: published });
+    }
+    if (updated) {
+      metaTags.push({ name: 'article:modified_time', content: updated });
+    }
+    if (category) {
+      metaTags.push({ name: 'article:section', content: category });
+    }
+    if (tags) {
+      metaTags.push({ name: 'article:tag', content: tags });
+    }
+
+    return metaTags;
+  }
+
+  render() {
+    const { children, id, className, ...rest } = this.props;
+
+    return (
+      <div id={id} className={className}>
+        <Helmet
+          htmlAttributes={{
+            lang: 'en',
+            itemscope: undefined,
+            itemtype: `http://schema.org/${rest.schema || 'WebPage'}`
+          }}
+          title={
+            rest.title ? rest.title + defaultSep + defaultTitle : defaultTitle
+          }
+          link={[
+            {
+              rel: 'canonical',
+              href: SITE_URL + this.props.location.pathname
+            }
+          ]}
+          meta={this.getMetaTags(rest, this.props.location.pathname)}
+        />
+        {children}
+      </div>
+    );
+  }
+}
+
+export default withRouter(Base);

src/views/home/js/Home.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import Image from 'src/components/image/js/Image';
+import Base from 'src/components/base/js/Base';
 
 import styles from '../css/Home.scss';
 
@@ -10,7 +11,7 @@ import ReactLogoImage from '../img/react-logo.png';
 
 const Home = () => {
   return (
-    <div className={styles.container}>
+    <Base title='Home' description='This is home page' className={styles.container}>
       <Image
         src={Cover}
         alt="cover"
@@ -33,7 +34,7 @@ const Home = () => {
           <Link to="/page2">{'Page 2'}</Link>
         </div>
       </div>
-    </div>
+    </Base>
   );
 };
 

src/views/page1/js/Page1.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import Image from 'src/components/image/js/Image';
+import Base from 'src/components/base/js/Base';
 
 import styles from '../css/Page1.scss';
 
 import Cover from '../img/cover.jpg';
 
 const Page1 = () => {
   return (
-    <div className={styles.container}>
+    <Base title='Page1' description='This is home page1' className={styles.container}>
       <Image
         src={Cover}
         alt="cover"
@@ -23,7 +24,7 @@ const Page1 = () => {
           <Link to="/">{'Back to Home'}</Link>
         </div>
       </div>
-    </div>
+    </Base>
   );
 };
 

src/views/page2/js/Page2.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import Image from 'src/components/image/js/Image';
+import Base from 'src/components/base/js/Base';
 
 import styles from '../css/Page2.scss';
 
 import Cover from '../img/cover.jpg';
 
 const Page2 = () => {
   return (
-    <div className={styles.container}>
+    <Base title='Page2' description='This is home page2' className={styles.container}>
       <Image
         src={Cover}
         alt="cover"
@@ -23,7 +24,7 @@ const Page2 = () => {
           <Link to="/">{'Back to Home'}</Link>
         </div>
       </div>
-    </div>
+    </Base>
   );
 };