Add custom meta tags for social-media seo (#1755)

common/index.html

@@ -5,8 +5,16 @@
   <meta charset="utf-8">
   <title>MyCrypto</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="description" content="">
+  <meta name="description" content="MyCrypto is a free, open-source interface for interacting with the blockchain.">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta property="og:title" content="<%= htmlWebpackPlugin.options.title %>">
+  <meta property="og:url" content="<%= htmlWebpackPlugin.options.appUrl %>">
+  <meta property="og:description" content="<%= htmlWebpackPlugin.options.appDescription %>">
+  <meta property="og:site_name" content="<%= htmlWebpackPlugin.options.title %>">
+  <meta property="og:type" content="<%= htmlWebpackPlugin.options.type %>">
+  <meta property="og:image" content="<%= htmlWebpackPlugin.options.image %>">
+  <meta name="twitter:site" content="<%= htmlWebpackPlugin.options.twitter.site %>">
+  <meta name="twitter:creator" content="<%= htmlWebpackPlugin.options.twitter.creator %>">
   <link rel="manifest" href="/manifest.json">
 </head>
 
@@ -32,16 +40,17 @@
     <div class="BadBrowser-content">
       <h2>Your Browser is Out of Date</h2>
       <p class="is-desktop">
-        MyCrypto requires certain features that your browser doesn't offer. Your browser may also be missing security updates
-        that could open you up to vulnerabilities. Please update your browser, or switch to one of the following browsers
-        to continue using MyCrypto.
+        MyCrypto requires certain features that your browser doesn't offer. Your browser may also be missing security updates that
+        could open you up to vulnerabilities. Please update your browser, or switch to one of the following browsers to continue
+        using MyCrypto.
       </p>
       <p class="is-mobile">
-        MyCrypto requires certain features that your browser doesn't offer. Please use your device's default browser, or switch
-        to a laptop or desktop computer to continue using MyCrypto.
+        MyCrypto requires certain features that your browser doesn't offer. Please use your device's default browser, or switch to
+        a laptop or desktop computer to continue using MyCrypto.
       </p>
       <div class="BadBrowser-content-browsers is-desktop">
-        <a class="BadBrowser-content-browsers-browser firefox" href="https://www.mozilla.org/en-US/firefox/new/" rel="noopener noreferrer" target="_blank">
+        <a class="BadBrowser-content-browsers-browser firefox" href="https://www.mozilla.org/en-US/firefox/new/" rel="noopener noreferrer"
+          target="_blank">
           <span class="BadBrowser-content-browsers-browser-name">
             Firefox
           </span>
@@ -97,4 +106,4 @@
   </script>
 </body>
 
-</html>
+</html>

webpack_config/config.js

@@ -9,13 +9,22 @@ const paths = {
   static: path.join(__dirname, '../static'),
   electron: path.join(__dirname, '../electron-app'),
   shared: path.join(__dirname, '../shared'),
-  modules: path.join(__dirname, '../node_modules'),
-}
+  modules: path.join(__dirname, '../node_modules')
+};
 
 module.exports = {
   // Configuration
   port: process.env.HTTPS ? 3443 : 3000,
   title: 'MyCrypto',
+  // description < 200 characters
+  description: 'MyCrypto is a free, open-source interface for interacting with the blockchain.',
+  url: 'https://mycrypto.com/',
+  type: 'website',
+  // img < 5MB
+  img: path.join(paths.assets, 'images/link-preview.png'),
+  twitter: {
+    creator: '@MyCrypto'
+  },
   path: paths,
 
   // Typescript rule config
@@ -31,11 +40,7 @@ module.exports = {
   // File resolution
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.css', '.json', '.scss'],
-    modules: [
-      paths.src,
-      paths.modules,
-      paths.root,
-    ]
+    modules: [paths.src, paths.modules, paths.root]
   },
 
   // Vendor modules

webpack_config/makeConfig.js

@@ -77,18 +77,11 @@ module.exports = function(opts = {}) {
     rules.push(
       {
         test: /\.css$/,
-        use: [
-          MiniCSSExtractPlugin.loader,
-          'css-loader'
-        ]
+        use: [MiniCSSExtractPlugin.loader, 'css-loader']
       },
       {
         test: /\.scss$/,
-        use: [
-          MiniCSSExtractPlugin.loader,
-          'css-loader',
-          sassLoader
-        ]
+        use: [MiniCSSExtractPlugin.loader, 'css-loader', sassLoader]
       }
     );
   } else {
@@ -161,9 +154,17 @@ module.exports = function(opts = {}) {
   // ====================
   const plugins = [
     new HtmlWebpackPlugin({
-      title: config.title,
       template: path.resolve(config.path.src, 'index.html'),
-      inject: true
+      inject: true,
+      title: config.title,
+      appDescription: config.description,
+      appUrl: config.url,
+      image: config.img,
+      type: config.type,
+      twitter: {
+        site: config.twitter.creator,
+        creator: config.twitter.creator
+      }
     }),
 
     new CopyWebpackPlugin([
@@ -171,6 +172,10 @@ module.exports = function(opts = {}) {
         from: config.path.static,
         // to the root of dist path
         to: './'
+      },
+      {
+        from: path.resolve(config.path.assets, 'images/link-preview.png'),
+        to: './common/assets/images'
       }
     ]),