From 925d0252959413772717c1b8e641d4390c1b5ac6 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 17 Jul 2018 12:23:14 -0700
Subject: [PATCH 01/17] updated serve and show urls in publish response

---
 server/controllers/api/claim/publish/index.js          | 10 ++++++----
 .../api/claim/publish/parsePublishApiRequestFiles.js   |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/server/controllers/api/claim/publish/index.js b/server/controllers/api/claim/publish/index.js
index 51e6e9be..b43995f5 100644
--- a/server/controllers/api/claim/publish/index.js
+++ b/server/controllers/api/claim/publish/index.js
@@ -27,6 +27,7 @@ const claimPublish = ({ body, files, headers, ip, originalUrl, user, tor }, res)
     ip,
     headers,
     body,
+    files,
   });
   // check for disabled publishing
   if (disabled) {
@@ -36,14 +37,14 @@ const claimPublish = ({ body, files, headers, ip, originalUrl, user, tor }, res)
     });
   }
   // define variables
-  let  channelName, channelId, channelPassword, description, fileName, filePath, fileType, gaStartTime, license, name, nsfw, thumbnail, thumbnailFileName, thumbnailFilePath, thumbnailFileType, title;
+  let  channelName, channelId, channelPassword, description, fileName, filePath, fileExtension, fileType, gaStartTime, license, name, nsfw, thumbnail, thumbnailFileName, thumbnailFilePath, thumbnailFileType, title;
   // record the start time of the request
   gaStartTime = Date.now();
   // validate the body and files of the request
   try {
     // validateApiPublishRequest(body, files);
     ({name, nsfw, license, title, description, thumbnail} = parsePublishApiRequestBody(body));
-    ({fileName, filePath, fileType, thumbnailFileName, thumbnailFilePath, thumbnailFileType} = parsePublishApiRequestFiles(files));
+    ({fileName, filePath, fileExtension, fileType, thumbnailFileName, thumbnailFilePath, thumbnailFileType} = parsePublishApiRequestFiles(files));
     ({channelName, channelId, channelPassword} = body);
   } catch (error) {
     return res.status(400).json({success: false, message: error.message});
@@ -76,8 +77,9 @@ const claimPublish = ({ body, files, headers, ip, originalUrl, user, tor }, res)
         data   : {
           name,
           claimId : result.claim_id,
-          url : `${host}/${result.claim_id}/${name}`,
-          embedUrl: `${host}/asset/${name}/${result.claim_id}`,
+          url : `${host}/${result.claim_id}/${name}`, // for backwards compatability with app
+          showUrl : `${host}/${result.claim_id}/${name}`,
+          serveUrl: `${host}/${result.claim_id}/${name}${fileExtension}`,
           lbryTx  : result,
         },
       });
diff --git a/server/controllers/api/claim/publish/parsePublishApiRequestFiles.js b/server/controllers/api/claim/publish/parsePublishApiRequestFiles.js
index 66f57be9..3e99ad20 100644
--- a/server/controllers/api/claim/publish/parsePublishApiRequestFiles.js
+++ b/server/controllers/api/claim/publish/parsePublishApiRequestFiles.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const validateFileTypeAndSize = require('./validateFileTypeAndSize.js');
 
 const parsePublishApiRequestFiles = ({file, thumbnail}) => {
@@ -33,6 +34,7 @@ const parsePublishApiRequestFiles = ({file, thumbnail}) => {
   return {
     fileName         : file.name,
     filePath         : file.path,
+    fileExtension    : path.extname(file.path),
     fileType         : file.type,
     thumbnailFileName: (thumbnail ? thumbnail.name : null),
     thumbnailFilePath: (thumbnail ? thumbnail.path : null),

From 4cd3eb851af18af880d6cef678ac369da8aa73d9 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 17 Jul 2018 14:44:15 -0700
Subject: [PATCH 02/17] updated response type decision tree

---
 .../assets/constants/request_types.js         |  6 +--
 .../controllers/assets/serveByClaim/index.js  |  4 +-
 .../assets/serveByIdentifierAndClaim/index.js |  4 +-
 .../assets/utils/determineRequestType.js      | 50 ++-----------------
 4 files changed, 10 insertions(+), 54 deletions(-)

diff --git a/server/controllers/assets/constants/request_types.js b/server/controllers/assets/constants/request_types.js
index 22f0d0ce..f2e4c7b0 100644
--- a/server/controllers/assets/constants/request_types.js
+++ b/server/controllers/assets/constants/request_types.js
@@ -1,9 +1,7 @@
 const EMBED = 'EMBED';
-const BROWSER = 'BROWSER';
-const SOCIAL = 'SOCIAL';
+const SHOW = 'SHOW';
 
 module.exports = {
   EMBED,
-  BROWSER,
-  SOCIAL,
+  SHOW,
 };
diff --git a/server/controllers/assets/serveByClaim/index.js b/server/controllers/assets/serveByClaim/index.js
index 6e0e9e40..208bc46a 100644
--- a/server/controllers/assets/serveByClaim/index.js
+++ b/server/controllers/assets/serveByClaim/index.js
@@ -6,7 +6,7 @@ const lbryUri = require('../utils/lbryUri.js');
 const determineRequestType = require('../utils/determineRequestType.js');
 const getClaimIdAndServeAsset = require('../utils/getClaimIdAndServeAsset.js');
 
-const { EMBED } = require('../constants/request_types.js');
+const { SHOW } = require('../constants/request_types.js');
 
 /*
 
@@ -25,7 +25,7 @@ const serveByClaim = (req, res) => {
   }
   // determine request type
   let requestType = determineRequestType(hasFileExtension, headers);
-  if (requestType !== EMBED) {
+  if (requestType === SHOW) {
     return handleShowRender(req, res);
   }
   // parse the claim
diff --git a/server/controllers/assets/serveByIdentifierAndClaim/index.js b/server/controllers/assets/serveByIdentifierAndClaim/index.js
index 609a1256..33dbe82c 100644
--- a/server/controllers/assets/serveByIdentifierAndClaim/index.js
+++ b/server/controllers/assets/serveByIdentifierAndClaim/index.js
@@ -7,7 +7,7 @@ const determineRequestType = require('../utils/determineRequestType.js');
 const getClaimIdAndServeAsset = require('../utils/getClaimIdAndServeAsset.js');
 const flipClaimNameAndId = require('../utils/flipClaimNameAndId.js');
 
-const { EMBED } = require('../constants/request_types.js');
+const { SHOW } = require('../constants/request_types.js');
 
 /*
 
@@ -26,7 +26,7 @@ const serverByIdentifierAndClaim = (req, res) => {
   }
   // determine request type
   let requestType = determineRequestType(hasFileExtension, headers);
-  if (requestType !== EMBED) {
+  if (requestType === SHOW) {
     return handleShowRender(req, res);
   }
   // parse the claim
diff --git a/server/controllers/assets/utils/determineRequestType.js b/server/controllers/assets/utils/determineRequestType.js
index afc5574f..4ca2b4ed 100644
--- a/server/controllers/assets/utils/determineRequestType.js
+++ b/server/controllers/assets/utils/determineRequestType.js
@@ -1,28 +1,5 @@
 const logger = require('winston');
-const { EMBED, BROWSER, SOCIAL } = require('../constants/request_types.js');
-
-function headersMatchesSocialBotList (headers) {
-  const userAgent = headers['user-agent'];
-  const socialBotList = [
-    'facebookexternalhit',
-    'Twitterbot',
-  ];
-  for (let i = 0; i < socialBotList.length; i++) {
-    if (userAgent.includes(socialBotList[i])) {
-      logger.debug('request is from social bot:', socialBotList[i]);
-      return true;
-    }
-  }
-  return false;
-}
-
-function clientAcceptsHtml ({accept}) {
-  return accept && accept.match(/text\/html/);
-}
-
-function requestIsFromBrowser (headers) {
-  return headers['user-agent'] && headers['user-agent'].match(/Mozilla/);
-}
+const { EMBED, SHOW } = require('../constants/request_types.js');
 
 function clientWantsAsset ({accept, range}) {
   const imageIsWanted = accept && accept.match(/image\/.*/) && !accept.match(/text\/html/) && !accept.match(/text\/\*/);
@@ -31,30 +8,11 @@ function clientWantsAsset ({accept, range}) {
 }
 
 const determineRequestType = (hasFileExtension, headers) => {
-  let responseType;
   logger.debug('headers:', headers);
-  // return early with 'show' if headers match the list
-  if (headersMatchesSocialBotList(headers)) {
-    return SOCIAL;
+  if (hasFileExtension || clientWantsAsset(headers)) {
+    return EMBED;
   }
-  // if request is not from a social bot...
-  if (hasFileExtension) {
-    // assume embed,
-    responseType = EMBED;
-    // but change to browser if client accepts html.
-    if (clientAcceptsHtml(headers)) {
-      responseType = BROWSER;
-    }
-  // if request does not have file extentsion...
-  } else {
-    // assume browser,
-    responseType = BROWSER;
-    // but change to embed if someone embeded a show url...
-    if (clientWantsAsset(headers) && requestIsFromBrowser(headers)) {
-      responseType = EMBED;
-    }
-  }
-  return responseType;
+  return SHOW;
 };
 
 module.exports = determineRequestType;

From ce26bc89b843173704b6c58f4f86637d6b6b3f47 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 17 Jul 2018 14:53:26 -0700
Subject: [PATCH 03/17] replaced all /asset/ urls with .ext urls

---
 client/build/containers/AssetDisplay/view.js | 7 ++++---
 client/build/utils/metaTags.js               | 2 +-
 client/src/containers/AssetDisplay/view.jsx  | 7 ++++---
 client/src/utils/metaTags.js                 | 2 +-
 server/routes/assets/index.js                | 2 --
 server/views/embed.handlebars                | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/build/containers/AssetDisplay/view.js b/client/build/containers/AssetDisplay/view.js
index c0d1f013..d8e5620c 100644
--- a/client/build/containers/AssetDisplay/view.js
+++ b/client/build/containers/AssetDisplay/view.js
@@ -60,6 +60,7 @@ function (_React$Component) {
           contentType = _this$props$asset$cla2.contentType,
           fileExt = _this$props$asset$cla2.fileExt,
           thumbnail = _this$props$asset$cla2.thumbnail;
+      var sourceUrl = "/".concat(claimId, "/").concat(name, ".").concat(fileExt);
       return _react.default.createElement("div", {
         className: 'asset-display'
       }, status === _asset_display_states.LOCAL_CHECK && _react.default.createElement("div", null, _react.default.createElement("p", null, "Checking to see if Spee.ch has your asset locally...")), status === _asset_display_states.UNAVAILABLE && _react.default.createElement("div", null, _react.default.createElement("p", null, "Sit tight, we're searching the LBRY blockchain for your asset!"), _react.default.createElement(_ProgressBar.default, {
@@ -82,7 +83,7 @@ function (_React$Component) {
           case 'image/gif':
             return _react.default.createElement("img", {
               className: "asset-image",
-              src: "/asset/".concat(name, "/").concat(claimId),
+              src: sourceUrl,
               alt: name
             });
 
@@ -92,11 +93,11 @@ function (_React$Component) {
               controls: true,
               poster: thumbnail
             }, _react.default.createElement("source", {
-              src: "/asset/".concat(name, "/").concat(claimId)
+              src: sourceUrl
             }), _react.default.createElement("p", null, "Your browser does not support the ", _react.default.createElement("code", null, "video"), " element."));
 
           default:
-            return _react.default.createElement("p", null, "Unsupported file type");
+            return _react.default.createElement("p", null, "Unsupported content type");
         }
       }());
     }
diff --git a/client/build/utils/metaTags.js b/client/build/utils/metaTags.js
index 9713f663..59c7d5f5 100644
--- a/client/build/utils/metaTags.js
+++ b/client/build/utils/metaTags.js
@@ -103,7 +103,7 @@ var createAssetMetaTags = function createAssetMetaTags(_ref3) {
   var contentType = claimData.contentType;
   var videoEmbedUrl = "".concat(siteHost, "/video-embed/").concat(claimData.name, "/").concat(claimData.claimId);
   var showUrl = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name);
-  var source = "".concat(siteHost, "/asset/").concat(claimData.name, "/").concat(claimData.claimId);
+  var source = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name, ".").concat(claimData.fileExt);
   var ogTitle = claimData.title || claimData.name;
   var ogDescription = claimData.description || defaultDescription;
   var ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
diff --git a/client/src/containers/AssetDisplay/view.jsx b/client/src/containers/AssetDisplay/view.jsx
index c742c851..e07bfa78 100644
--- a/client/src/containers/AssetDisplay/view.jsx
+++ b/client/src/containers/AssetDisplay/view.jsx
@@ -9,6 +9,7 @@ class AssetDisplay extends React.Component {
   }
   render () {
     const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
+    const sourceUrl = `/${claimId}/${name}.${fileExt}`;
     return (
       <div className={'asset-display'}>
         {(status === LOCAL_CHECK) &&
@@ -39,7 +40,7 @@ class AssetDisplay extends React.Component {
               return (
                 <img
                   className='asset-image'
-                  src={`/asset/${name}/${claimId}`}
+                  src={sourceUrl}
                   alt={name}
                 />
               );
@@ -50,14 +51,14 @@ class AssetDisplay extends React.Component {
                   controls poster={thumbnail}
                 >
                   <source
-                    src={`/asset/${name}/${claimId}`}
+                    src={sourceUrl}
                   />
                   <p>Your browser does not support the <code>video</code> element.</p>
                 </video>
               );
             default:
               return (
-                <p>Unsupported file type</p>
+                <p>Unsupported content type</p>
               );
           }
         })()
diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
index c5b9df34..0bc3effa 100644
--- a/client/src/utils/metaTags.js
+++ b/client/src/utils/metaTags.js
@@ -48,7 +48,7 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
   const { contentType } = claimData;
   const videoEmbedUrl = `${siteHost}/video-embed/${claimData.name}/${claimData.claimId}`;
   const showUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`;
-  const source = `${siteHost}/asset/${claimData.name}/${claimData.claimId}`;
+  const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
   const ogTitle = claimData.title || claimData.name;
   const ogDescription = claimData.description || defaultDescription;
   const ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
diff --git a/server/routes/assets/index.js b/server/routes/assets/index.js
index 5d4f92d1..ef70ea3f 100644
--- a/server/routes/assets/index.js
+++ b/server/routes/assets/index.js
@@ -1,9 +1,7 @@
 const serveByClaim = require('../../controllers/assets/serveByClaim');
 const serveByIdentifierAndClaim = require('../../controllers/assets/serveByIdentifierAndClaim');
-const serveAsset = require('../../controllers/assets/serveAsset');
 
 module.exports = (app) => {
-  app.get('/asset/:claimName/:claimId/', serveAsset);
   app.get('/:identifier/:claim', serveByIdentifierAndClaim);
   app.get('/:claim', serveByClaim);
 };
diff --git a/server/views/embed.handlebars b/server/views/embed.handlebars
index c0b2e4f5..eb6c4839 100644
--- a/server/views/embed.handlebars
+++ b/server/views/embed.handlebars
@@ -1 +1 @@
-<video width="100%" controls src="{{host}}/asset/{{name}}/{{claimId}}" type="video/mp4"></video>
+<video width="100%" controls src="{{host}}/{{claimId}}/{{name}}.mp4" type="video/mp4"></video>

From 004770587a5eb6e58e5e4d9f867b35498fe5284f Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 17 Jul 2018 15:42:51 -0700
Subject: [PATCH 04/17] updated embed link in asset preview

---
 client/build/components/AssetPreview/index.js | 8 ++++----
 client/src/components/AssetPreview/index.jsx  | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/build/components/AssetPreview/index.js b/client/build/components/AssetPreview/index.js
index 994b75ce..1d044764 100644
--- a/client/build/components/AssetPreview/index.js
+++ b/client/build/components/AssetPreview/index.js
@@ -19,10 +19,10 @@ var AssetPreview = function AssetPreview(_ref) {
       fileExt = _ref$claimData.fileExt,
       contentType = _ref$claimData.contentType,
       thumbnail = _ref$claimData.thumbnail;
-  var directSourceLink = "asset/".concat(name, "/").concat(claimId);
-  var showUrlLink = "/".concat(claimId, "/").concat(name);
+  var embedUrl = "/".concat(claimId, "/").concat(name, ".").concat(fileExt);
+  var showUrl = "/".concat(claimId, "/").concat(name);
   return _react.default.createElement(_reactRouterDom.Link, {
-    to: showUrlLink
+    to: showUrl
   }, function () {
     switch (contentType) {
       case 'image/jpeg':
@@ -31,7 +31,7 @@ var AssetPreview = function AssetPreview(_ref) {
       case 'image/gif':
         return _react.default.createElement("img", {
           className: 'asset-preview-image',
-          src: directSourceLink,
+          src: embedUrl,
           alt: name
         });
 
diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx
index e9e10cef..be09c200 100644
--- a/client/src/components/AssetPreview/index.jsx
+++ b/client/src/components/AssetPreview/index.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail } }) => {
-  const directSourceLink = `asset/${name}/${claimId}`;
-  const showUrlLink = `/${claimId}/${name}`;
+  const embedUrl = `/${claimId}/${name}.${fileExt}`;
+  const showUrl = `/${claimId}/${name}`;
   return (
-    <Link to={showUrlLink} >
+    <Link to={showUrl} >
       {(() => {
         switch (contentType) {
           case 'image/jpeg':
@@ -15,7 +15,7 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
             return (
               <img
                 className={'asset-preview-image'}
-                src={directSourceLink}
+                src={embedUrl}
                 alt={name}
               />
             );

From 2311d4c70d4a08af35eb7025aef4eece69736a33 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 17 Jul 2018 16:07:50 -0700
Subject: [PATCH 05/17] added check for channel request on raw claim url

---
 server/controllers/assets/serveByClaim/index.js        | 10 ++++++++++
 .../controllers/assets/utils/determineRequestType.js   |  3 +++
 2 files changed, 13 insertions(+)

diff --git a/server/controllers/assets/serveByClaim/index.js b/server/controllers/assets/serveByClaim/index.js
index 208bc46a..fdabdc96 100644
--- a/server/controllers/assets/serveByClaim/index.js
+++ b/server/controllers/assets/serveByClaim/index.js
@@ -16,6 +16,16 @@ const { SHOW } = require('../constants/request_types.js');
 
 const serveByClaim = (req, res) => {
   const { headers, ip, originalUrl, params } = req;
+  // return early if channel request
+  let isChannel = false;
+  try {
+    ({ isChannel } = lbryUri.parseIdentifier(params.claim));
+  } catch (error) {
+    return res.status(400).json({success: false, message: error.message});
+  }
+  if (isChannel) {
+    return handleShowRender(req, res);
+  }
   // decide if this is a show request
   let hasFileExtension;
   try {
diff --git a/server/controllers/assets/utils/determineRequestType.js b/server/controllers/assets/utils/determineRequestType.js
index 4ca2b4ed..e3ee5448 100644
--- a/server/controllers/assets/utils/determineRequestType.js
+++ b/server/controllers/assets/utils/determineRequestType.js
@@ -8,10 +8,13 @@ function clientWantsAsset ({accept, range}) {
 }
 
 const determineRequestType = (hasFileExtension, headers) => {
+  logger.debug('hasFileExtension:', hasFileExtension);
   logger.debug('headers:', headers);
   if (hasFileExtension || clientWantsAsset(headers)) {
+    logger.debug('client wants direct asset');
     return EMBED;
   }
+  logger.debug('client wants show page');
   return SHOW;
 };
 

From df623bb84aee9bfcbdf1d2a3bd33010a2981b1fd Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 17 Jul 2018 16:55:03 -0700
Subject: [PATCH 06/17] troubleshooting meta tags

---
 client/build/containers/AssetInfo/view.js | 6 +++---
 client/build/utils/metaTags.js            | 1 +
 client/src/containers/AssetInfo/view.jsx  | 8 ++++----
 client/src/utils/metaTags.js              | 1 +
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/build/containers/AssetInfo/view.js b/client/build/containers/AssetInfo/view.js
index 55eefee1..8a968a42 100644
--- a/client/build/containers/AssetInfo/view.js
+++ b/client/build/containers/AssetInfo/view.js
@@ -89,7 +89,7 @@ function (_React$Component) {
         }),
         content: _react.default.createElement(_ClickToCopy.default, {
           id: 'short-link',
-          value: "".concat(host, "/").concat(shortId, "/").concat(name, ".").concat(fileExt)
+          value: "".concat(host, "/").concat(shortId, "/").concat(name)
         })
       })), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
         label: _react.default.createElement(_Label.default, {
@@ -102,9 +102,9 @@ function (_React$Component) {
           id: 'embed-text-image',
           value: "<img src=\"".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/>")
         }))
-      })), _react.default.createElement(_Row.default, null, _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement(_reactRouterDom.Link, {
+      })), _react.default.createElement(_Row.default, null, _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement("a", {
         className: "link--primary",
-        to: "/".concat(shortId, "/").concat(name, ".").concat(fileExt)
+        href: "".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt)
       }, "Direct Link"), _react.default.createElement("a", {
         className: 'link--primary',
         href: "".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt),
diff --git a/client/build/utils/metaTags.js b/client/build/utils/metaTags.js
index 59c7d5f5..9c55fe9b 100644
--- a/client/build/utils/metaTags.js
+++ b/client/build/utils/metaTags.js
@@ -203,6 +203,7 @@ var createAssetMetaTags = function createAssetMetaTags(_ref3) {
     });
   }
 
+  console.log('metaTags:', metaTags);
   return metaTags;
 };
 
diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx
index e251e81d..ccf88fbd 100644
--- a/client/src/containers/AssetInfo/view.jsx
+++ b/client/src/containers/AssetInfo/view.jsx
@@ -50,7 +50,7 @@ class AssetInfo extends React.Component {
             content={
               <ClickToCopy
                 id={'short-link'}
-                value={`${host}/${shortId}/${name}.${fileExt}`}
+                value={`${host}/${shortId}/${name}`}
               />
             }
           />
@@ -81,12 +81,12 @@ class AssetInfo extends React.Component {
 
         <Row>
           <SpaceBetween>
-            <Link
+            <a
               className='link--primary'
-              to={`/${shortId}/${name}.${fileExt}`}
+              href={`${host}/${claimId}/${name}.${fileExt}`}
             >
               Direct Link
-            </Link>
+            </a>
             <a
               className={'link--primary'}
               href={`${host}/${claimId}/${name}.${fileExt}`}
diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
index 0bc3effa..eec16369 100644
--- a/client/src/utils/metaTags.js
+++ b/client/src/utils/metaTags.js
@@ -82,6 +82,7 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     metaTags.push({property: 'og:type', content: 'article'});
     metaTags.push({property: 'twitter:card', content: 'summary_large_image'});
   }
+  console.log('metaTags:', metaTags);
   return metaTags;
 };
 

From 1651c24529aa28791b085518392f5ad0302b0576 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 18 Jul 2018 14:49:22 -0700
Subject: [PATCH 07/17] added default thumb to channel meta tags

---
 client/build/utils/metaTags.js | 26 +++++++++++++++-----------
 client/src/utils/metaTags.js   |  5 ++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/client/build/utils/metaTags.js b/client/build/utils/metaTags.js
index 8bdb7067..1573eb96 100644
--- a/client/build/utils/metaTags.js
+++ b/client/build/utils/metaTags.js
@@ -43,10 +43,8 @@ var createBasicMetaTags = function createBasicMetaTags(_ref) {
   }, {
     property: 'twitter:title',
     content: siteTitle
-  }, {
-    property: 'og:url',
-    content: siteHost
-  }, {
+  }, // {property: 'og:url', content: siteHost},
+  {
     property: 'og:site_name',
     content: siteTitle
   }, {
@@ -77,7 +75,8 @@ var createChannelMetaTags = function createChannelMetaTags(_ref2) {
   var siteHost = _ref2.siteHost,
       siteTitle = _ref2.siteTitle,
       siteTwitter = _ref2.siteTwitter,
-      channel = _ref2.channel;
+      channel = _ref2.channel,
+      defaultThumbnail = _ref2.defaultThumbnail;
   var name = channel.name,
       longId = channel.longId;
   return [{
@@ -86,10 +85,8 @@ var createChannelMetaTags = function createChannelMetaTags(_ref2) {
   }, {
     property: 'twitter:title',
     content: "".concat(name, " on ").concat(siteTitle)
-  }, {
-    property: 'og:url',
-    content: "".concat(siteHost, "/").concat(name, ":").concat(longId)
-  }, {
+  }, // {property: 'og:url', content: `${siteHost}/${name}:${longId}`},
+  {
     property: 'og:site_name',
     content: siteTitle
   }, {
@@ -101,6 +98,12 @@ var createChannelMetaTags = function createChannelMetaTags(_ref2) {
   }, {
     property: 'twitter:card',
     content: 'summary'
+  }, {
+    property: 'og:image',
+    content: defaultThumbnail
+  }, {
+    property: 'twitter:image',
+    content: defaultThumbnail
   }];
 };
 
@@ -128,7 +131,7 @@ var createAssetMetaTags = function createAssetMetaTags(_ref3) {
     content: ogTitle
   }, {
     property: 'og:url',
-    content: showUrl
+    content: source
   }, {
     property: 'og:site_name',
     content: siteTitle
@@ -259,7 +262,8 @@ var createMetaTags = function createMetaTags(_ref4) {
       siteHost: siteHost,
       siteTitle: siteTitle,
       siteTwitter: siteTwitter,
-      channel: channel
+      channel: channel,
+      defaultThumbnail: defaultThumbnail
     });
   }
 
diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
index 1496c30c..909874c0 100644
--- a/client/src/utils/metaTags.js
+++ b/client/src/utils/metaTags.js
@@ -34,7 +34,7 @@ const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter,
   ];
 };
 
-const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel}) => {
+const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => {
   const { name, longId } = channel;
   return [
     {property: 'og:title', content: `${name} on ${siteTitle}`},
@@ -44,6 +44,8 @@ const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel}) => {
     {property: 'og:description', content: `${name}, a channel on ${siteTitle}`},
     {property: 'twitter:site', content: siteTwitter},
     {property: 'twitter:card', content: 'summary'},
+    {property: 'og:image', content: defaultThumbnail},
+    {property: 'twitter:image', content: defaultThumbnail},
   ];
 };
 
@@ -111,6 +113,7 @@ export const createMetaTags = ({ siteDescription, siteHost, siteTitle, siteTwitt
       siteTitle,
       siteTwitter,
       channel,
+      defaultThumbnail,
     });
   }
   return createBasicMetaTags({

From 651f90cad960e7f0acf65608a0a2527671222265 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 18 Jul 2018 15:33:11 -0700
Subject: [PATCH 08/17] fixed client wants asset override

---
 client/build/utils/metaTags.js                    | 15 +++++++++------
 client/src/utils/metaTags.js                      |  1 -
 .../assets/serveByIdentifierAndClaim/index.js     | 13 +++++++++++++
 .../assets/utils/determineRequestType.js          | 12 ++++++------
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/client/build/utils/metaTags.js b/client/build/utils/metaTags.js
index 1573eb96..7bcf305e 100644
--- a/client/build/utils/metaTags.js
+++ b/client/build/utils/metaTags.js
@@ -43,8 +43,10 @@ var createBasicMetaTags = function createBasicMetaTags(_ref) {
   }, {
     property: 'twitter:title',
     content: siteTitle
-  }, // {property: 'og:url', content: siteHost},
-  {
+  }, {
+    property: 'og:url',
+    content: siteHost
+  }, {
     property: 'og:site_name',
     content: siteTitle
   }, {
@@ -85,8 +87,10 @@ var createChannelMetaTags = function createChannelMetaTags(_ref2) {
   }, {
     property: 'twitter:title',
     content: "".concat(name, " on ").concat(siteTitle)
-  }, // {property: 'og:url', content: `${siteHost}/${name}:${longId}`},
-  {
+  }, {
+    property: 'og:url',
+    content: "".concat(siteHost, "/").concat(name, ":").concat(longId)
+  }, {
     property: 'og:site_name',
     content: siteTitle
   }, {
@@ -131,7 +135,7 @@ var createAssetMetaTags = function createAssetMetaTags(_ref3) {
     content: ogTitle
   }, {
     property: 'og:url',
-    content: source
+    content: showUrl
   }, {
     property: 'og:site_name',
     content: siteTitle
@@ -232,7 +236,6 @@ var createAssetMetaTags = function createAssetMetaTags(_ref3) {
     });
   }
 
-  console.log('metaTags:', metaTags);
   return metaTags;
 };
 
diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
index 909874c0..aad1de30 100644
--- a/client/src/utils/metaTags.js
+++ b/client/src/utils/metaTags.js
@@ -92,7 +92,6 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     metaTags.push({property: 'og:type', content: 'article'});
     metaTags.push({property: 'twitter:card', content: 'summary_large_image'});
   }
-  console.log('metaTags:', metaTags);
   return metaTags;
 };
 
diff --git a/server/controllers/assets/serveByIdentifierAndClaim/index.js b/server/controllers/assets/serveByIdentifierAndClaim/index.js
index 33dbe82c..b89f5c56 100644
--- a/server/controllers/assets/serveByIdentifierAndClaim/index.js
+++ b/server/controllers/assets/serveByIdentifierAndClaim/index.js
@@ -1,3 +1,5 @@
+const logger = require('winston');
+
 const { sendGAServeEvent } = require('../../../utils/googleAnalytics');
 const handleShowRender = require('../../../render/build/handleShowRender.js');
 
@@ -26,6 +28,17 @@ const serverByIdentifierAndClaim = (req, res) => {
   }
   // determine request type
   let requestType = determineRequestType(hasFileExtension, headers);
+
+  /* test logging */
+  logger.info('serveByIdentifierAndClaim', {
+    headers,
+    ip,
+    originalUrl,
+    params,
+    response: requestType,
+  });
+  /* end test logging */
+
   if (requestType === SHOW) {
     return handleShowRender(req, res);
   }
diff --git a/server/controllers/assets/utils/determineRequestType.js b/server/controllers/assets/utils/determineRequestType.js
index e3ee5448..cd2121ac 100644
--- a/server/controllers/assets/utils/determineRequestType.js
+++ b/server/controllers/assets/utils/determineRequestType.js
@@ -2,19 +2,19 @@ const logger = require('winston');
 const { EMBED, SHOW } = require('../constants/request_types.js');
 
 function clientWantsAsset ({accept, range}) {
-  const imageIsWanted = accept && accept.match(/image\/.*/) && !accept.match(/text\/html/) && !accept.match(/text\/\*/);
-  const videoIsWanted = accept && range;
+  const imageIsWanted = accept && accept.match(/image\/.*/) && !accept.match(/text\/html/);
+  const videoIsWanted = accept && accept.match(/video\/.*/) && !accept.match(/text\/html/);
   return imageIsWanted || videoIsWanted;
 }
 
 const determineRequestType = (hasFileExtension, headers) => {
-  logger.debug('hasFileExtension:', hasFileExtension);
-  logger.debug('headers:', headers);
+  logger.info('determineRequestType', {
+    hasFileExtension,
+    headers,
+  });
   if (hasFileExtension || clientWantsAsset(headers)) {
-    logger.debug('client wants direct asset');
     return EMBED;
   }
-  logger.debug('client wants show page');
   return SHOW;
 };
 

From 7dea5d5cd4b964fb48fa7a4d55609242c098c349 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 18 Jul 2018 16:05:50 -0700
Subject: [PATCH 09/17] updated short url route

---
 .../controllers/assets/serveByClaim/index.js  | 57 +++++++++----------
 .../assets/serveByIdentifierAndClaim/index.js | 14 +----
 .../assets/utils/determineRequestType.js      |  5 --
 3 files changed, 29 insertions(+), 47 deletions(-)

diff --git a/server/controllers/assets/serveByClaim/index.js b/server/controllers/assets/serveByClaim/index.js
index fdabdc96..bd3b2a21 100644
--- a/server/controllers/assets/serveByClaim/index.js
+++ b/server/controllers/assets/serveByClaim/index.js
@@ -1,3 +1,5 @@
+const logger = require('winston');
+
 const { sendGAServeEvent } = require('../../../utils/googleAnalytics');
 const handleShowRender = require('../../../render/build/handleShowRender.js');
 
@@ -16,39 +18,36 @@ const { SHOW } = require('../constants/request_types.js');
 
 const serveByClaim = (req, res) => {
   const { headers, ip, originalUrl, params } = req;
-  // return early if channel request
-  let isChannel = false;
+
   try {
-    ({ isChannel } = lbryUri.parseIdentifier(params.claim));
+    // return early if channel request
+    const { isChannel } = lbryUri.parseIdentifier(params.claim);
+    if (isChannel) {
+      logger.info('channel request:', { headers, ip, originalUrl, params });
+      return handleShowRender(req, res);
+    }
+
+    // decide if this is a show request
+    const { hasFileExtension } = lbryUri.parseModifier(params.claim);
+    if (determineRequestType(hasFileExtension, headers) === SHOW) {
+      logger.info('show request:', { headers, ip, originalUrl, params });
+      return handleShowRender(req, res);
+    }
+
+    // parse the claim
+    const { claimName } = lbryUri.parseClaim(params.claim);
+
+    // send google analytics
+    sendGAServeEvent(headers, ip, originalUrl);
+
+    // get the claim Id and then serve the asset
+    logger.info('embed request:', { headers, ip, originalUrl, params });
+    getClaimIdAndServeAsset(null, null, claimName, null, originalUrl, ip, res);
+
   } catch (error) {
     return res.status(400).json({success: false, message: error.message});
   }
-  if (isChannel) {
-    return handleShowRender(req, res);
-  }
-  // decide if this is a show request
-  let hasFileExtension;
-  try {
-    ({ hasFileExtension } = lbryUri.parseModifier(params.claim));
-  } catch (error) {
-    return res.status(400).json({success: false, message: error.message});
-  }
-  // determine request type
-  let requestType = determineRequestType(hasFileExtension, headers);
-  if (requestType === SHOW) {
-    return handleShowRender(req, res);
-  }
-  // parse the claim
-  let claimName;
-  try {
-    ({claimName} = lbryUri.parseClaim(params.claim));
-  } catch (error) {
-    return res.status(400).json({success: false, message: error.message});
-  }
-  // send google analytics
-  sendGAServeEvent(headers, ip, originalUrl);
-  // get the claim Id and then serve the asset
-  getClaimIdAndServeAsset(null, null, claimName, null, originalUrl, ip, res);
+
 };
 
 module.exports = serveByClaim;
diff --git a/server/controllers/assets/serveByIdentifierAndClaim/index.js b/server/controllers/assets/serveByIdentifierAndClaim/index.js
index b89f5c56..029f76e0 100644
--- a/server/controllers/assets/serveByIdentifierAndClaim/index.js
+++ b/server/controllers/assets/serveByIdentifierAndClaim/index.js
@@ -27,19 +27,7 @@ const serverByIdentifierAndClaim = (req, res) => {
     return res.status(400).json({success: false, message: error.message});
   }
   // determine request type
-  let requestType = determineRequestType(hasFileExtension, headers);
-
-  /* test logging */
-  logger.info('serveByIdentifierAndClaim', {
-    headers,
-    ip,
-    originalUrl,
-    params,
-    response: requestType,
-  });
-  /* end test logging */
-
-  if (requestType === SHOW) {
+  if (determineRequestType(hasFileExtension, headers) === SHOW) {
     return handleShowRender(req, res);
   }
   // parse the claim
diff --git a/server/controllers/assets/utils/determineRequestType.js b/server/controllers/assets/utils/determineRequestType.js
index cd2121ac..c170c3dc 100644
--- a/server/controllers/assets/utils/determineRequestType.js
+++ b/server/controllers/assets/utils/determineRequestType.js
@@ -1,4 +1,3 @@
-const logger = require('winston');
 const { EMBED, SHOW } = require('../constants/request_types.js');
 
 function clientWantsAsset ({accept, range}) {
@@ -8,10 +7,6 @@ function clientWantsAsset ({accept, range}) {
 }
 
 const determineRequestType = (hasFileExtension, headers) => {
-  logger.info('determineRequestType', {
-    hasFileExtension,
-    headers,
-  });
   if (hasFileExtension || clientWantsAsset(headers)) {
     return EMBED;
   }

From 792fd0ab06c5b42fd8f9ff8f2a131cb191fb7235 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 18 Jul 2018 16:17:20 -0700
Subject: [PATCH 10/17] updated long url routes

---
 .../controllers/assets/serveByClaim/index.js  |  2 +-
 .../assets/serveByIdentifierAndClaim/index.js | 54 +++++++++----------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/server/controllers/assets/serveByClaim/index.js b/server/controllers/assets/serveByClaim/index.js
index bd3b2a21..205bb8de 100644
--- a/server/controllers/assets/serveByClaim/index.js
+++ b/server/controllers/assets/serveByClaim/index.js
@@ -41,7 +41,7 @@ const serveByClaim = (req, res) => {
     sendGAServeEvent(headers, ip, originalUrl);
 
     // get the claim Id and then serve the asset
-    logger.info('embed request:', { headers, ip, originalUrl, params });
+    logger.info('serve request:', { headers, ip, originalUrl, params });
     getClaimIdAndServeAsset(null, null, claimName, null, originalUrl, ip, res);
 
   } catch (error) {
diff --git a/server/controllers/assets/serveByIdentifierAndClaim/index.js b/server/controllers/assets/serveByIdentifierAndClaim/index.js
index 029f76e0..f96ecad4 100644
--- a/server/controllers/assets/serveByIdentifierAndClaim/index.js
+++ b/server/controllers/assets/serveByIdentifierAndClaim/index.js
@@ -19,39 +19,35 @@ const { SHOW } = require('../constants/request_types.js');
 
 const serverByIdentifierAndClaim = (req, res) => {
   const { headers, ip, originalUrl, params } = req;
-  // parse request
-  let hasFileExtension;
+
   try {
-    ({ hasFileExtension } = lbryUri.parseModifier(params.claim));
+    // decide if this is a show request
+    const { hasFileExtension } = lbryUri.parseModifier(params.claim);
+    if (determineRequestType(hasFileExtension, headers) === SHOW) {
+      logger.info('show request:', { headers, ip, originalUrl, params });
+      return handleShowRender(req, res);
+    }
+
+    // parse the indentifier and claim
+    let { claimName } = lbryUri.parseClaim(params.claim);
+    let { isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(params.identifier);
+
+    // for backwards compatability, flip claim name and claim id if necessary
+    if (!isChannel) {
+      [claimId, claimName] = flipClaimNameAndId(claimId, claimName);
+    }
+
+    // send google analytics
+    sendGAServeEvent(headers, ip, originalUrl);
+
+    // get the claim Id and then serve the asset
+    logger.info('serve request:', { headers, ip, originalUrl, params });
+    getClaimIdAndServeAsset(channelName, channelClaimId, claimName, claimId, originalUrl, ip, res);
+
   } catch (error) {
     return res.status(400).json({success: false, message: error.message});
   }
-  // determine request type
-  if (determineRequestType(hasFileExtension, headers) === SHOW) {
-    return handleShowRender(req, res);
-  }
-  // parse the claim
-  let claimName;
-  try {
-    ({ claimName } = lbryUri.parseClaim(params.claim));
-  } catch (error) {
-    return res.status(400).json({success: false, message: error.message});
-  }
-  // parse the identifier
-  let isChannel, channelName, channelClaimId, claimId;
-  try {
-    ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(params.identifier));
-  } catch (error) {
-    return res.status(400).json({success: false, message: error.message});
-  }
-  // for backwards compatability, flip claim name and claim id if necessary
-  if (!isChannel) {
-    [claimId, claimName] = flipClaimNameAndId(claimId, claimName);
-  }
-  // send google analytics
-  sendGAServeEvent(headers, ip, originalUrl);
-  // get the claim Id and then serve the asset
-  getClaimIdAndServeAsset(channelName, channelClaimId, claimName, claimId, originalUrl, ip, res);
+
 };
 
 module.exports = serverByIdentifierAndClaim;

From 9df3d68cf0afc8aa56c7c3c0244d5394d1efd546 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 18 Jul 2018 16:23:58 -0700
Subject: [PATCH 11/17] hoisted variables

---
 .../controllers/assets/serveByClaim/index.js  | 24 ++++++++-----------
 .../assets/serveByIdentifierAndClaim/index.js | 21 +++++++---------
 2 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/server/controllers/assets/serveByClaim/index.js b/server/controllers/assets/serveByClaim/index.js
index 205bb8de..1ca0be13 100644
--- a/server/controllers/assets/serveByClaim/index.js
+++ b/server/controllers/assets/serveByClaim/index.js
@@ -20,30 +20,26 @@ const serveByClaim = (req, res) => {
   const { headers, ip, originalUrl, params } = req;
 
   try {
-    // return early if channel request
-    const { isChannel } = lbryUri.parseIdentifier(params.claim);
+    let isChannel, hasFileExtension, claimName;
+
+    ({ isChannel } = lbryUri.parseIdentifier(params.claim));
     if (isChannel) {
-      logger.info('channel request:', { headers, ip, originalUrl, params });
+      logger.debug('channel request:', { headers, ip, originalUrl, params });
       return handleShowRender(req, res);
     }
 
-    // decide if this is a show request
-    const { hasFileExtension } = lbryUri.parseModifier(params.claim);
+    ({ hasFileExtension } = lbryUri.parseModifier(params.claim));
     if (determineRequestType(hasFileExtension, headers) === SHOW) {
-      logger.info('show request:', { headers, ip, originalUrl, params });
+      logger.debug('show request:', { headers, ip, originalUrl, params });
       return handleShowRender(req, res);
     }
 
-    // parse the claim
-    const { claimName } = lbryUri.parseClaim(params.claim);
-
-    // send google analytics
-    sendGAServeEvent(headers, ip, originalUrl);
-
-    // get the claim Id and then serve the asset
-    logger.info('serve request:', { headers, ip, originalUrl, params });
+    ({ claimName } = lbryUri.parseClaim(params.claim));
+    logger.debug('serve request:', { headers, ip, originalUrl, params });
     getClaimIdAndServeAsset(null, null, claimName, null, originalUrl, ip, res);
 
+    sendGAServeEvent(headers, ip, originalUrl);
+
   } catch (error) {
     return res.status(400).json({success: false, message: error.message});
   }
diff --git a/server/controllers/assets/serveByIdentifierAndClaim/index.js b/server/controllers/assets/serveByIdentifierAndClaim/index.js
index f96ecad4..34434f5b 100644
--- a/server/controllers/assets/serveByIdentifierAndClaim/index.js
+++ b/server/controllers/assets/serveByIdentifierAndClaim/index.js
@@ -21,29 +21,26 @@ const serverByIdentifierAndClaim = (req, res) => {
   const { headers, ip, originalUrl, params } = req;
 
   try {
-    // decide if this is a show request
-    const { hasFileExtension } = lbryUri.parseModifier(params.claim);
+    let hasFileExtension, claimName, isChannel, channelName, channelClaimId, claimId;
+
+    ({ hasFileExtension } = lbryUri.parseModifier(params.claim));
     if (determineRequestType(hasFileExtension, headers) === SHOW) {
-      logger.info('show request:', { headers, ip, originalUrl, params });
+      logger.debug('show request:', { headers, ip, originalUrl, params });
       return handleShowRender(req, res);
     }
 
-    // parse the indentifier and claim
-    let { claimName } = lbryUri.parseClaim(params.claim);
-    let { isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(params.identifier);
+    ({ claimName } = lbryUri.parseClaim(params.claim));
+    ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(params.identifier));
 
-    // for backwards compatability, flip claim name and claim id if necessary
     if (!isChannel) {
       [claimId, claimName] = flipClaimNameAndId(claimId, claimName);
     }
 
-    // send google analytics
-    sendGAServeEvent(headers, ip, originalUrl);
-
-    // get the claim Id and then serve the asset
-    logger.info('serve request:', { headers, ip, originalUrl, params });
+    logger.debug('serve request:', { headers, ip, originalUrl, params });
     getClaimIdAndServeAsset(channelName, channelClaimId, claimName, claimId, originalUrl, ip, res);
 
+    sendGAServeEvent(headers, ip, originalUrl);
+
   } catch (error) {
     return res.status(400).json({success: false, message: error.message});
   }

From 195d22becee1679e6805ff8f14f6c6dc1ffec5b0 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 19 Jul 2018 08:55:47 -0700
Subject: [PATCH 12/17] changed "embed" to "serve" for terminology accuracy

---
 server/controllers/assets/constants/request_types.js    | 4 ++--
 server/controllers/assets/utils/determineRequestType.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/server/controllers/assets/constants/request_types.js b/server/controllers/assets/constants/request_types.js
index f2e4c7b0..4c32b6f1 100644
--- a/server/controllers/assets/constants/request_types.js
+++ b/server/controllers/assets/constants/request_types.js
@@ -1,7 +1,7 @@
-const EMBED = 'EMBED';
+const SERVE = 'SERVE';
 const SHOW = 'SHOW';
 
 module.exports = {
-  EMBED,
+  SERVE,
   SHOW,
 };
diff --git a/server/controllers/assets/utils/determineRequestType.js b/server/controllers/assets/utils/determineRequestType.js
index c170c3dc..02e08fbc 100644
--- a/server/controllers/assets/utils/determineRequestType.js
+++ b/server/controllers/assets/utils/determineRequestType.js
@@ -1,4 +1,4 @@
-const { EMBED, SHOW } = require('../constants/request_types.js');
+const { SERVE, SHOW } = require('../constants/request_types.js');
 
 function clientWantsAsset ({accept, range}) {
   const imageIsWanted = accept && accept.match(/image\/.*/) && !accept.match(/text\/html/);
@@ -8,7 +8,7 @@ function clientWantsAsset ({accept, range}) {
 
 const determineRequestType = (hasFileExtension, headers) => {
   if (hasFileExtension || clientWantsAsset(headers)) {
-    return EMBED;
+    return SERVE;
   }
   return SHOW;
 };

From 1dcb0aea8cd743b94ebb9093cb0d888d1387a439 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 19 Jul 2018 10:30:08 -0700
Subject: [PATCH 13/17] added image size to homepage and channel

---
 client/src/utils/metaTags.js | 62 +++++++++++++++++++++++++++---------
 1 file changed, 47 insertions(+), 15 deletions(-)

diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
index aad1de30..2c4fbd3e 100644
--- a/client/src/utils/metaTags.js
+++ b/client/src/utils/metaTags.js
@@ -1,10 +1,14 @@
-const determineOgThumbnailContentType = (thumbnail) => {
+const VIDEO = 'VIDEO';
+const IMAGE = 'IMAGE';
+const GIF = 'GIF';
+
+const determineContentTypeFromExtension = (thumbnail) => {
   if (thumbnail) {
     const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
     switch (fileExt) {
       case 'jpeg':
       case 'jpg':
-        return 'image/jpeg';
+        return 'image/jpg';
       case 'png':
         return 'image/png';
       case 'gif':
@@ -12,12 +16,28 @@ const determineOgThumbnailContentType = (thumbnail) => {
       case 'mp4':
         return 'video/mp4';
       default:
-        return 'image/jpeg';
+        return '';
     }
   }
   return '';
 };
 
+const determineMediaType = (contentType) => {
+  switch (contentType) {
+    case 'image/jpg':
+    case 'image/jpeg':
+    case 'image/png':
+      return IMAGE;
+    case 'image/gif':
+      return GIF;
+    case 'video/mp4':
+    case 'video/webm':
+      return VIDEO;
+    default:
+      return '';
+  }
+};
+
 const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
   return [
     {property: 'og:title', content: siteTitle},
@@ -29,8 +49,11 @@ const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter,
     {property: 'twitter:site', content: siteTwitter},
     {property: 'twitter:card', content: 'summary_large_image'},
     {property: 'og:image', content: defaultThumbnail},
+    {property: 'og:image:width', content: 600},
+    {property: 'og:image:height', content: 315},
+    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
     {property: 'twitter:image', content: defaultThumbnail},
-    {property: 'og:image:type', content: 'image/jpeg'},
+    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
   ];
 };
 
@@ -45,7 +68,11 @@ const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defau
     {property: 'twitter:site', content: siteTwitter},
     {property: 'twitter:card', content: 'summary'},
     {property: 'og:image', content: defaultThumbnail},
+    {property: 'og:image:width', content: 600},
+    {property: 'og:image:height', content: 315},
+    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
     {property: 'twitter:image', content: defaultThumbnail},
+    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
   ];
 };
 
@@ -57,7 +84,7 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
   const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
   const ogTitle = claimData.title || claimData.name;
   const ogDescription = claimData.description || defaultDescription;
-  const ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
+  const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
   const ogThumbnail = claimData.thumbnail || defaultThumbnail;
   const metaTags = [
     {property: 'og:title', content: ogTitle},
@@ -70,13 +97,8 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     {property: 'og:image:height', content: 315},
     {property: 'twitter:site', content: siteTwitter},
   ];
-  if (contentType === 'video/mp4' || contentType === 'video/webm') {
-    metaTags.push({property: 'og:video', content: source});
-    metaTags.push({property: 'og:video:secure_url', content: source});
-    metaTags.push({property: 'og:video:type', content: contentType});
-    metaTags.push({property: 'og:image', content: ogThumbnail});
-    metaTags.push({property: 'twitter:image', content: ogThumbnail});
-    metaTags.push({property: 'og:image:type', content: ogThumbnailContentType});
+  if (determineMediaType(contentType) === VIDEO) {
+    // card type tags
     metaTags.push({property: 'og:type', content: 'video.other'});
     metaTags.push({property: 'twitter:card', content: 'player'});
     metaTags.push({property: 'twitter:player', content: videoEmbedUrl});
@@ -85,12 +107,22 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     metaTags.push({property: 'twitter:player:height', content: 337});
     metaTags.push({property: 'twitter:player:stream', content: source});
     metaTags.push({property: 'twitter:player:stream:content_type', content: contentType});
+    // video tags
+    metaTags.push({property: 'og:video', content: source});
+    metaTags.push({property: 'og:video:secure_url', content: source});
+    metaTags.push({property: 'og:video:type', content: contentType});
+    // image tags
+    metaTags.push({property: 'og:image', content: ogThumbnail});
+    metaTags.push({property: 'og:image:type', content: ogThumbnailContentType});
+    metaTags.push({property: 'twitter:image', content: ogThumbnail});
   } else {
-    metaTags.push({property: 'og:image', content: source});
-    metaTags.push({property: 'twitter:image', content: source});
-    metaTags.push({property: 'og:image:type', content: contentType});
+    // card type tags
     metaTags.push({property: 'og:type', content: 'article'});
     metaTags.push({property: 'twitter:card', content: 'summary_large_image'});
+    // image tags
+    metaTags.push({property: 'og:image', content: source});
+    metaTags.push({property: 'og:image:type', content: contentType});
+    metaTags.push({property: 'twitter:image', content: source});
   }
   return metaTags;
 };

From fa6f9a26511aefa88b8e36b841340d7f342de47b Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 19 Jul 2018 10:56:09 -0700
Subject: [PATCH 14/17] added card type to homepage

---
 client/src/utils/metaTags.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
index 2c4fbd3e..ba04e497 100644
--- a/client/src/utils/metaTags.js
+++ b/client/src/utils/metaTags.js
@@ -40,6 +40,7 @@ const determineMediaType = (contentType) => {
 
 const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
   return [
+    // page details
     {property: 'og:title', content: siteTitle},
     {property: 'twitter:title', content: siteTitle},
     {property: 'og:url', content: siteHost},
@@ -47,7 +48,10 @@ const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter,
     {property: 'og:description', content: siteDescription},
     {property: 'twitter:description', content: siteDescription},
     {property: 'twitter:site', content: siteTwitter},
+    // card type
+    {property: 'og:type', content: 'article'},
     {property: 'twitter:card', content: 'summary_large_image'},
+    // image
     {property: 'og:image', content: defaultThumbnail},
     {property: 'og:image:width', content: 600},
     {property: 'og:image:height', content: 315},
@@ -60,13 +64,17 @@ const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter,
 const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => {
   const { name, longId } = channel;
   return [
+    // page detail tags
     {property: 'og:title', content: `${name} on ${siteTitle}`},
     {property: 'twitter:title', content: `${name} on ${siteTitle}`},
     {property: 'og:url', content: `${siteHost}/${name}:${longId}`},
     {property: 'og:site_name', content: siteTitle},
     {property: 'og:description', content: `${name}, a channel on ${siteTitle}`},
     {property: 'twitter:site', content: siteTwitter},
-    {property: 'twitter:card', content: 'summary'},
+    // card type tags
+    {property: 'og:type', content: 'article'},
+    {property: 'twitter:card', content: 'summary_large_image'},
+    // image tags
     {property: 'og:image', content: defaultThumbnail},
     {property: 'og:image:width', content: 600},
     {property: 'og:image:height', content: 315},
@@ -86,16 +94,15 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
   const ogDescription = claimData.description || defaultDescription;
   const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
   const ogThumbnail = claimData.thumbnail || defaultThumbnail;
+  // page details
   const metaTags = [
     {property: 'og:title', content: ogTitle},
     {property: 'twitter:title', content: ogTitle},
     {property: 'og:url', content: showUrl},
     {property: 'og:site_name', content: siteTitle},
+    {property: 'twitter:site', content: siteTwitter},
     {property: 'og:description', content: ogDescription},
     {property: 'twitter:description', content: ogDescription},
-    {property: 'og:image:width', content: 600},
-    {property: 'og:image:height', content: 315},
-    {property: 'twitter:site', content: siteTwitter},
   ];
   if (determineMediaType(contentType) === VIDEO) {
     // card type tags
@@ -104,7 +111,7 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     metaTags.push({property: 'twitter:player', content: videoEmbedUrl});
     metaTags.push({property: 'twitter:player:width', content: 600});
     metaTags.push({property: 'twitter:text:player_width', content: 600});
-    metaTags.push({property: 'twitter:player:height', content: 337});
+    metaTags.push({property: 'twitter:player:height', content: 350});
     metaTags.push({property: 'twitter:player:stream', content: source});
     metaTags.push({property: 'twitter:player:stream:content_type', content: contentType});
     // video tags
@@ -113,6 +120,8 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     metaTags.push({property: 'og:video:type', content: contentType});
     // image tags
     metaTags.push({property: 'og:image', content: ogThumbnail});
+    metaTags.push({property: 'og:image:width', content: 600});
+    metaTags.push({property: 'og:image:height', content: 315});
     metaTags.push({property: 'og:image:type', content: ogThumbnailContentType});
     metaTags.push({property: 'twitter:image', content: ogThumbnail});
   } else {
@@ -121,6 +130,9 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     metaTags.push({property: 'twitter:card', content: 'summary_large_image'});
     // image tags
     metaTags.push({property: 'og:image', content: source});
+    metaTags.push({property: 'og:image', content: source});
+    metaTags.push({property: 'og:image:width', content: 600});
+    metaTags.push({property: 'og:image:height', content: 315});
     metaTags.push({property: 'og:image:type', content: contentType});
     metaTags.push({property: 'twitter:image', content: source});
   }

From 62fb0477ac54183755128d47b70498ea2c367691 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 19 Jul 2018 11:09:35 -0700
Subject: [PATCH 15/17] broke meta tag functions into separate files

---
 client/src/utils/createAssetMetaTags.js       |  81 ++++++++++
 client/src/utils/createBasicMetaTags.js       |  29 ++++
 client/src/utils/createChannelMetaTags.js     |  30 ++++
 .../determineContentTypeFromExtension.js      |  21 +++
 client/src/utils/metaTags.js                  | 143 +-----------------
 5 files changed, 164 insertions(+), 140 deletions(-)
 create mode 100644 client/src/utils/createAssetMetaTags.js
 create mode 100644 client/src/utils/createBasicMetaTags.js
 create mode 100644 client/src/utils/createChannelMetaTags.js
 create mode 100644 client/src/utils/determineContentTypeFromExtension.js

diff --git a/client/src/utils/createAssetMetaTags.js b/client/src/utils/createAssetMetaTags.js
new file mode 100644
index 00000000..539e2cd3
--- /dev/null
+++ b/client/src/utils/createAssetMetaTags.js
@@ -0,0 +1,81 @@
+const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js');
+
+const VIDEO = 'VIDEO';
+const IMAGE = 'IMAGE';
+const GIF = 'GIF';
+
+const determineMediaType = (contentType) => {
+  switch (contentType) {
+    case 'image/jpg':
+    case 'image/jpeg':
+    case 'image/png':
+      return IMAGE;
+    case 'image/gif':
+      return GIF;
+    case 'video/mp4':
+    case 'video/webm':
+      return VIDEO;
+    default:
+      return '';
+  }
+};
+
+const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => {
+  const { claimData } = asset;
+  const { contentType } = claimData;
+  const videoEmbedUrl = `${siteHost}/video-embed/${claimData.name}/${claimData.claimId}`;
+  const showUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`;
+  const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
+  const ogTitle = claimData.title || claimData.name;
+  const ogDescription = claimData.description || defaultDescription;
+  const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
+  const ogThumbnail = claimData.thumbnail || defaultThumbnail;
+  const metaTags = [
+    // page details
+    {property: 'og:title', content: ogTitle},
+    {property: 'twitter:title', content: ogTitle},
+    {property: 'og:description', content: ogDescription},
+    {property: 'twitter:description', content: ogDescription},
+    // url
+    {property: 'og:url', content: showUrl},
+    // site info
+    {property: 'og:site_name', content: siteTitle},
+    {property: 'twitter:site', content: siteTwitter},
+    {property: 'fb:app_id', content: '1371961932852223'},
+  ];
+  if (determineMediaType(contentType) === VIDEO) {
+    // card type tags
+    metaTags.push({property: 'og:type', content: 'video.other'});
+    metaTags.push({property: 'twitter:card', content: 'player'});
+    metaTags.push({property: 'twitter:player', content: videoEmbedUrl});
+    metaTags.push({property: 'twitter:player:width', content: 600});
+    metaTags.push({property: 'twitter:text:player_width', content: 600});
+    metaTags.push({property: 'twitter:player:height', content: 350});
+    metaTags.push({property: 'twitter:player:stream', content: source});
+    metaTags.push({property: 'twitter:player:stream:content_type', content: contentType});
+    // video tags
+    metaTags.push({property: 'og:video', content: source});
+    metaTags.push({property: 'og:video:secure_url', content: source});
+    metaTags.push({property: 'og:video:type', content: contentType});
+    // image tags
+    metaTags.push({property: 'og:image', content: ogThumbnail});
+    metaTags.push({property: 'og:image:width', content: 600});
+    metaTags.push({property: 'og:image:height', content: 315});
+    metaTags.push({property: 'og:image:type', content: ogThumbnailContentType});
+    metaTags.push({property: 'twitter:image', content: ogThumbnail});
+  } else {
+    // card type tags
+    metaTags.push({property: 'og:type', content: 'article'});
+    metaTags.push({property: 'twitter:card', content: 'summary_large_image'});
+    // image tags
+    metaTags.push({property: 'og:image', content: source});
+    metaTags.push({property: 'og:image', content: source});
+    metaTags.push({property: 'og:image:width', content: 600});
+    metaTags.push({property: 'og:image:height', content: 315});
+    metaTags.push({property: 'og:image:type', content: contentType});
+    metaTags.push({property: 'twitter:image', content: source});
+  }
+  return metaTags;
+};
+
+module.exports = createAssetMetaTags;
diff --git a/client/src/utils/createBasicMetaTags.js b/client/src/utils/createBasicMetaTags.js
new file mode 100644
index 00000000..1eac8331
--- /dev/null
+++ b/client/src/utils/createBasicMetaTags.js
@@ -0,0 +1,29 @@
+const determineContentTypeFromExtension = require('./determineContentTypeFromExtension.js');
+
+const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
+  return [
+    // page details
+    {property: 'og:title', content: siteTitle},
+    {property: 'twitter:title', content: siteTitle},
+    {property: 'og:description', content: siteDescription},
+    {property: 'twitter:description', content: siteDescription},
+    // url
+    {property: 'og:url', content: siteHost},
+    // site id
+    {property: 'og:site_name', content: siteTitle},
+    {property: 'twitter:site', content: siteTwitter},
+    {property: 'fb:app_id', content: '1371961932852223'},
+    // card type
+    {property: 'og:type', content: 'article'},
+    {property: 'twitter:card', content: 'summary_large_image'},
+    // image
+    {property: 'og:image', content: defaultThumbnail},
+    {property: 'og:image:width', content: 600},
+    {property: 'og:image:height', content: 315},
+    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
+    {property: 'twitter:image', content: defaultThumbnail},
+    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
+  ];
+};
+
+module.exports = createBasicMetaTags;
diff --git a/client/src/utils/createChannelMetaTags.js b/client/src/utils/createChannelMetaTags.js
new file mode 100644
index 00000000..ffb82a3c
--- /dev/null
+++ b/client/src/utils/createChannelMetaTags.js
@@ -0,0 +1,30 @@
+const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js');
+
+const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => {
+  const { name, longId } = channel;
+  return [
+    // page detail tags
+    {property: 'og:title', content: `${name} on ${siteTitle}`},
+    {property: 'twitter:title', content: `${name} on ${siteTitle}`},
+    {property: 'og:description', content: `${name}, a channel on ${siteTitle}`},
+    {property: 'twitter:description', content: `${name}, a channel on ${siteTitle}`},
+    // url
+    {property: 'og:url', content: `${siteHost}/${name}:${longId}`},
+    // site info
+    {property: 'og:site_name', content: siteTitle},
+    {property: 'twitter:site', content: siteTwitter},
+    {property: 'fb:app_id', content: '1371961932852223'},
+    // card type tags
+    {property: 'og:type', content: 'article'},
+    {property: 'twitter:card', content: 'summary_large_image'},
+    // image tags
+    {property: 'og:image', content: defaultThumbnail},
+    {property: 'og:image:width', content: 600},
+    {property: 'og:image:height', content: 315},
+    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
+    {property: 'twitter:image', content: defaultThumbnail},
+    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
+  ];
+};
+
+module.exports = createChannelMetaTags;
diff --git a/client/src/utils/determineContentTypeFromExtension.js b/client/src/utils/determineContentTypeFromExtension.js
new file mode 100644
index 00000000..de2ed530
--- /dev/null
+++ b/client/src/utils/determineContentTypeFromExtension.js
@@ -0,0 +1,21 @@
+const determineContentTypeFromExtension = (thumbnail) => {
+  if (thumbnail) {
+    const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
+    switch (fileExt) {
+      case 'jpeg':
+      case 'jpg':
+        return 'image/jpg';
+      case 'png':
+        return 'image/png';
+      case 'gif':
+        return 'image/gif';
+      case 'mp4':
+        return 'video/mp4';
+      default:
+        return '';
+    }
+  }
+  return '';
+};
+
+module.exports = determineContentTypeFromExtension;
diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
index ba04e497..9dd8167d 100644
--- a/client/src/utils/metaTags.js
+++ b/client/src/utils/metaTags.js
@@ -1,143 +1,6 @@
-const VIDEO = 'VIDEO';
-const IMAGE = 'IMAGE';
-const GIF = 'GIF';
-
-const determineContentTypeFromExtension = (thumbnail) => {
-  if (thumbnail) {
-    const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
-    switch (fileExt) {
-      case 'jpeg':
-      case 'jpg':
-        return 'image/jpg';
-      case 'png':
-        return 'image/png';
-      case 'gif':
-        return 'image/gif';
-      case 'mp4':
-        return 'video/mp4';
-      default:
-        return '';
-    }
-  }
-  return '';
-};
-
-const determineMediaType = (contentType) => {
-  switch (contentType) {
-    case 'image/jpg':
-    case 'image/jpeg':
-    case 'image/png':
-      return IMAGE;
-    case 'image/gif':
-      return GIF;
-    case 'video/mp4':
-    case 'video/webm':
-      return VIDEO;
-    default:
-      return '';
-  }
-};
-
-const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
-  return [
-    // page details
-    {property: 'og:title', content: siteTitle},
-    {property: 'twitter:title', content: siteTitle},
-    {property: 'og:url', content: siteHost},
-    {property: 'og:site_name', content: siteTitle},
-    {property: 'og:description', content: siteDescription},
-    {property: 'twitter:description', content: siteDescription},
-    {property: 'twitter:site', content: siteTwitter},
-    // card type
-    {property: 'og:type', content: 'article'},
-    {property: 'twitter:card', content: 'summary_large_image'},
-    // image
-    {property: 'og:image', content: defaultThumbnail},
-    {property: 'og:image:width', content: 600},
-    {property: 'og:image:height', content: 315},
-    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
-    {property: 'twitter:image', content: defaultThumbnail},
-    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
-  ];
-};
-
-const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => {
-  const { name, longId } = channel;
-  return [
-    // page detail tags
-    {property: 'og:title', content: `${name} on ${siteTitle}`},
-    {property: 'twitter:title', content: `${name} on ${siteTitle}`},
-    {property: 'og:url', content: `${siteHost}/${name}:${longId}`},
-    {property: 'og:site_name', content: siteTitle},
-    {property: 'og:description', content: `${name}, a channel on ${siteTitle}`},
-    {property: 'twitter:site', content: siteTwitter},
-    // card type tags
-    {property: 'og:type', content: 'article'},
-    {property: 'twitter:card', content: 'summary_large_image'},
-    // image tags
-    {property: 'og:image', content: defaultThumbnail},
-    {property: 'og:image:width', content: 600},
-    {property: 'og:image:height', content: 315},
-    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
-    {property: 'twitter:image', content: defaultThumbnail},
-    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
-  ];
-};
-
-const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => {
-  const { claimData } = asset;
-  const { contentType } = claimData;
-  const videoEmbedUrl = `${siteHost}/video-embed/${claimData.name}/${claimData.claimId}`;
-  const showUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`;
-  const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
-  const ogTitle = claimData.title || claimData.name;
-  const ogDescription = claimData.description || defaultDescription;
-  const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
-  const ogThumbnail = claimData.thumbnail || defaultThumbnail;
-  // page details
-  const metaTags = [
-    {property: 'og:title', content: ogTitle},
-    {property: 'twitter:title', content: ogTitle},
-    {property: 'og:url', content: showUrl},
-    {property: 'og:site_name', content: siteTitle},
-    {property: 'twitter:site', content: siteTwitter},
-    {property: 'og:description', content: ogDescription},
-    {property: 'twitter:description', content: ogDescription},
-  ];
-  if (determineMediaType(contentType) === VIDEO) {
-    // card type tags
-    metaTags.push({property: 'og:type', content: 'video.other'});
-    metaTags.push({property: 'twitter:card', content: 'player'});
-    metaTags.push({property: 'twitter:player', content: videoEmbedUrl});
-    metaTags.push({property: 'twitter:player:width', content: 600});
-    metaTags.push({property: 'twitter:text:player_width', content: 600});
-    metaTags.push({property: 'twitter:player:height', content: 350});
-    metaTags.push({property: 'twitter:player:stream', content: source});
-    metaTags.push({property: 'twitter:player:stream:content_type', content: contentType});
-    // video tags
-    metaTags.push({property: 'og:video', content: source});
-    metaTags.push({property: 'og:video:secure_url', content: source});
-    metaTags.push({property: 'og:video:type', content: contentType});
-    // image tags
-    metaTags.push({property: 'og:image', content: ogThumbnail});
-    metaTags.push({property: 'og:image:width', content: 600});
-    metaTags.push({property: 'og:image:height', content: 315});
-    metaTags.push({property: 'og:image:type', content: ogThumbnailContentType});
-    metaTags.push({property: 'twitter:image', content: ogThumbnail});
-  } else {
-    // card type tags
-    metaTags.push({property: 'og:type', content: 'article'});
-    metaTags.push({property: 'twitter:card', content: 'summary_large_image'});
-    // image tags
-    metaTags.push({property: 'og:image', content: source});
-    metaTags.push({property: 'og:image', content: source});
-    metaTags.push({property: 'og:image:width', content: 600});
-    metaTags.push({property: 'og:image:height', content: 315});
-    metaTags.push({property: 'og:image:type', content: contentType});
-    metaTags.push({property: 'twitter:image', content: source});
-  }
-  return metaTags;
-};
+const createAssetMetaTags = require('createAssetMetaTags.js');
+const createChannelMetaTags = require('createChannelMetaTags.js');
+const createBasicMetaTags = require('createBasicMetaTags.js');
 
 export const createMetaTags = ({ siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail }) => {
   if (asset) {

From e447e16544cae7c492ffc5de92a1635231cf5af8 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 19 Jul 2018 13:37:23 -0700
Subject: [PATCH 16/17] changed SEO utils to pull info directly from config

---
 client/build/containers/SEO/index.js          |  20 +-
 client/build/containers/SEO/view.js           |  36 +--
 client/build/utils/createAssetMetaTags.js     | 192 +++++++++++++
 client/build/utils/createBasicMetaTags.js     |  79 +++++
 client/build/utils/createCanonicalLink.js     |  55 ++++
 client/build/utils/createChannelMetaTags.js   |  81 ++++++
 client/build/utils/createMetaTags.js          |  32 +++
 client/build/utils/createPageTitle.js         |  23 ++
 .../determineContentTypeFromExtension.js      |  35 +++
 client/build/utils/metaTags.js                | 271 +-----------------
 client/src/containers/SEO/index.js            |  14 +-
 client/src/containers/SEO/view.jsx            |  18 +-
 client/src/utils/canonicalLink.js             |  29 --
 client/src/utils/createAssetMetaTags.js       |  27 +-
 client/src/utils/createBasicMetaTags.js       |  39 ++-
 client/src/utils/createCanonicalLink.js       |  39 +++
 client/src/utils/createChannelMetaTags.js     |  22 +-
 client/src/utils/createMetaTags.js            |  15 +
 client/src/utils/createPageTitle.js           |  16 ++
 .../determineContentTypeFromExtension.js      |   2 +-
 client/src/utils/metaTags.js                  |  32 ---
 client/src/utils/pageTitle.js                 |   6 -
 22 files changed, 658 insertions(+), 425 deletions(-)
 create mode 100644 client/build/utils/createAssetMetaTags.js
 create mode 100644 client/build/utils/createBasicMetaTags.js
 create mode 100644 client/build/utils/createCanonicalLink.js
 create mode 100644 client/build/utils/createChannelMetaTags.js
 create mode 100644 client/build/utils/createMetaTags.js
 create mode 100644 client/build/utils/createPageTitle.js
 create mode 100644 client/build/utils/determineContentTypeFromExtension.js
 delete mode 100644 client/src/utils/canonicalLink.js
 create mode 100644 client/src/utils/createCanonicalLink.js
 create mode 100644 client/src/utils/createMetaTags.js
 create mode 100644 client/src/utils/createPageTitle.js
 delete mode 100644 client/src/utils/metaTags.js
 delete mode 100644 client/src/utils/pageTitle.js

diff --git a/client/build/containers/SEO/index.js b/client/build/containers/SEO/index.js
index 68ed79ed..bbd3c41e 100644
--- a/client/build/containers/SEO/index.js
+++ b/client/build/containers/SEO/index.js
@@ -11,24 +11,6 @@ var _view = _interopRequireDefault(require("./view"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var mapStateToProps = function mapStateToProps(_ref) {
-  var site = _ref.site;
-  var defaultDescription = site.defaultDescription,
-      defaultThumbnail = site.defaultThumbnail,
-      siteDescription = site.description,
-      siteHost = site.host,
-      siteTitle = site.title,
-      siteTwitter = site.twitter;
-  return {
-    defaultDescription: defaultDescription,
-    defaultThumbnail: defaultThumbnail,
-    siteDescription: siteDescription,
-    siteHost: siteHost,
-    siteTitle: siteTitle,
-    siteTwitter: siteTwitter
-  };
-};
-
-var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
+var _default = (0, _reactRedux.connect)(null, null)(_view.default);
 
 exports.default = _default;
\ No newline at end of file
diff --git a/client/build/containers/SEO/view.js b/client/build/containers/SEO/view.js
index 659abd7f..16b25365 100644
--- a/client/build/containers/SEO/view.js
+++ b/client/build/containers/SEO/view.js
@@ -11,11 +11,11 @@ var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _pageTitle = require("../../utils/pageTitle");
+var _createPageTitle = _interopRequireDefault(require("../../utils/createPageTitle"));
 
-var _metaTags = require("../../utils/metaTags");
+var _createMetaTags = _interopRequireDefault(require("../../utils/createMetaTags"));
 
-var _canonicalLink = require("../../utils/canonicalLink");
+var _createCanonicalLink = _interopRequireDefault(require("../../utils/createCanonicalLink"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -49,33 +49,19 @@ function (_React$Component) {
   _createClass(SEO, [{
     key: "render",
     value: function render() {
-      // props from state
+      // props from parent
       var _this$props = this.props,
-          defaultDescription = _this$props.defaultDescription,
-          defaultThumbnail = _this$props.defaultThumbnail,
-          siteDescription = _this$props.siteDescription,
-          siteHost = _this$props.siteHost,
-          siteTitle = _this$props.siteTitle,
-          siteTwitter = _this$props.siteTwitter; // props from parent
-
-      var _this$props2 = this.props,
-          asset = _this$props2.asset,
-          channel = _this$props2.channel,
-          pageUri = _this$props2.pageUri;
+          asset = _this$props.asset,
+          channel = _this$props.channel,
+          pageUri = _this$props.pageUri;
       var pageTitle = this.props.pageTitle; // create page title, tags, and canonical link
 
-      pageTitle = (0, _pageTitle.createPageTitle)(siteTitle, pageTitle);
-      var metaTags = (0, _metaTags.createMetaTags)({
-        siteDescription: siteDescription,
-        siteHost: siteHost,
-        siteTitle: siteTitle,
-        siteTwitter: siteTwitter,
+      pageTitle = (0, _createPageTitle.default)(pageTitle);
+      var metaTags = (0, _createMetaTags.default)({
         asset: asset,
-        channel: channel,
-        defaultDescription: defaultDescription,
-        defaultThumbnail: defaultThumbnail
+        channel: channel
       });
-      var canonicalLink = (0, _canonicalLink.createCanonicalLink)(asset, channel, pageUri, siteHost); // render results
+      var canonicalLink = (0, _createCanonicalLink.default)(asset, channel, pageUri); // render results
 
       return _react.default.createElement(_reactHelmet.default, {
         title: pageTitle,
diff --git a/client/build/utils/createAssetMetaTags.js b/client/build/utils/createAssetMetaTags.js
new file mode 100644
index 00000000..1a8d5476
--- /dev/null
+++ b/client/build/utils/createAssetMetaTags.js
@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
+
+var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _siteConfig$details = _siteConfig.default.details,
+    host = _siteConfig$details.host,
+    siteTitle = _siteConfig$details.title,
+    twitter = _siteConfig$details.twitter,
+    _siteConfig$assetDefa = _siteConfig.default.assetDefaults,
+    defaultDescription = _siteConfig$assetDefa.description,
+    defaultThumbnail = _siteConfig$assetDefa.thumbnail;
+var VIDEO = 'VIDEO';
+var IMAGE = 'IMAGE';
+var GIF = 'GIF';
+
+var determineMediaType = function determineMediaType(contentType) {
+  switch (contentType) {
+    case 'image/jpg':
+    case 'image/jpeg':
+    case 'image/png':
+      return IMAGE;
+
+    case 'image/gif':
+      return GIF;
+
+    case 'video/mp4':
+    case 'video/webm':
+      return VIDEO;
+
+    default:
+      return '';
+  }
+};
+
+var createAssetMetaTags = function createAssetMetaTags(asset) {
+  var claimData = asset.claimData;
+  var contentType = claimData.contentType;
+  var videoEmbedUrl = "".concat(host, "/video-embed/").concat(claimData.name, "/").concat(claimData.claimId);
+  var showUrl = "".concat(host, "/").concat(claimData.claimId, "/").concat(claimData.name);
+  var source = "".concat(host, "/").concat(claimData.claimId, "/").concat(claimData.name, ".").concat(claimData.fileExt);
+  var ogTitle = claimData.title || claimData.name;
+  var ogDescription = claimData.description || defaultDescription;
+  var ogThumbnailContentType = (0, _determineContentTypeFromExtension.default)(claimData.thumbnail);
+  var ogThumbnail = claimData.thumbnail || defaultThumbnail;
+  var metaTags = [// page details
+  {
+    property: 'og:title',
+    content: ogTitle
+  }, {
+    property: 'twitter:title',
+    content: ogTitle
+  }, {
+    property: 'og:description',
+    content: ogDescription
+  }, {
+    property: 'twitter:description',
+    content: ogDescription
+  }, // url
+  {
+    property: 'og:url',
+    content: showUrl
+  }, // site info
+  {
+    property: 'og:site_name',
+    content: siteTitle
+  }, {
+    property: 'twitter:site',
+    content: twitter
+  }, {
+    property: 'fb:app_id',
+    content: '1371961932852223'
+  }];
+
+  if (determineMediaType(contentType) === VIDEO) {
+    // card type tags
+    metaTags.push({
+      property: 'og:type',
+      content: 'video.other'
+    });
+    metaTags.push({
+      property: 'twitter:card',
+      content: 'player'
+    });
+    metaTags.push({
+      property: 'twitter:player',
+      content: videoEmbedUrl
+    });
+    metaTags.push({
+      property: 'twitter:player:width',
+      content: 600
+    });
+    metaTags.push({
+      property: 'twitter:text:player_width',
+      content: 600
+    });
+    metaTags.push({
+      property: 'twitter:player:height',
+      content: 350
+    });
+    metaTags.push({
+      property: 'twitter:player:stream',
+      content: source
+    });
+    metaTags.push({
+      property: 'twitter:player:stream:content_type',
+      content: contentType
+    }); // video tags
+
+    metaTags.push({
+      property: 'og:video',
+      content: source
+    });
+    metaTags.push({
+      property: 'og:video:secure_url',
+      content: source
+    });
+    metaTags.push({
+      property: 'og:video:type',
+      content: contentType
+    }); // image tags
+
+    metaTags.push({
+      property: 'og:image',
+      content: ogThumbnail
+    });
+    metaTags.push({
+      property: 'og:image:width',
+      content: 600
+    });
+    metaTags.push({
+      property: 'og:image:height',
+      content: 315
+    });
+    metaTags.push({
+      property: 'og:image:type',
+      content: ogThumbnailContentType
+    });
+    metaTags.push({
+      property: 'twitter:image',
+      content: ogThumbnail
+    });
+  } else {
+    // card type tags
+    metaTags.push({
+      property: 'og:type',
+      content: 'article'
+    });
+    metaTags.push({
+      property: 'twitter:card',
+      content: 'summary_large_image'
+    }); // image tags
+
+    metaTags.push({
+      property: 'og:image',
+      content: source
+    });
+    metaTags.push({
+      property: 'og:image',
+      content: source
+    });
+    metaTags.push({
+      property: 'og:image:width',
+      content: 600
+    });
+    metaTags.push({
+      property: 'og:image:height',
+      content: 315
+    });
+    metaTags.push({
+      property: 'og:image:type',
+      content: contentType
+    });
+    metaTags.push({
+      property: 'twitter:image',
+      content: source
+    });
+  }
+
+  return metaTags;
+};
+
+var _default = createAssetMetaTags;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/createBasicMetaTags.js b/client/build/utils/createBasicMetaTags.js
new file mode 100644
index 00000000..00d1709a
--- /dev/null
+++ b/client/build/utils/createBasicMetaTags.js
@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
+
+var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _siteConfig$details = _siteConfig.default.details,
+    description = _siteConfig$details.description,
+    host = _siteConfig$details.host,
+    title = _siteConfig$details.title,
+    twitter = _siteConfig$details.twitter,
+    thumbnail = _siteConfig.default.assetDefaults.thumbnail;
+
+var createBasicMetaTags = function createBasicMetaTags() {
+  return [// page details
+  {
+    property: 'og:title',
+    content: title
+  }, {
+    property: 'twitter:title',
+    content: title
+  }, {
+    property: 'og:description',
+    content: description
+  }, {
+    property: 'twitter:description',
+    content: description
+  }, // url
+  {
+    property: 'og:url',
+    content: host
+  }, // site id
+  {
+    property: 'og:site_name',
+    content: title
+  }, {
+    property: 'twitter:site',
+    content: twitter
+  }, {
+    property: 'fb:app_id',
+    content: '1371961932852223'
+  }, // card type
+  {
+    property: 'og:type',
+    content: 'article'
+  }, {
+    property: 'twitter:card',
+    content: 'summary_large_image'
+  }, // image
+  {
+    property: 'og:image',
+    content: thumbnail
+  }, {
+    property: 'og:image:width',
+    content: 600
+  }, {
+    property: 'og:image:height',
+    content: 315
+  }, {
+    property: 'og:image:type',
+    content: (0, _determineContentTypeFromExtension.default)(thumbnail)
+  }, {
+    property: 'twitter:image',
+    content: thumbnail
+  }, {
+    property: 'twitter:image:alt',
+    content: 'Spee.ch Logo'
+  }];
+};
+
+var _default = createBasicMetaTags;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/createCanonicalLink.js b/client/build/utils/createCanonicalLink.js
new file mode 100644
index 00000000..281a68e4
--- /dev/null
+++ b/client/build/utils/createCanonicalLink.js
@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var host = _siteConfig.default.details.host;
+
+var createBasicCanonicalLink = function createBasicCanonicalLink(page) {
+  return "".concat(host, "/").concat(page);
+};
+
+var createAssetCanonicalLink = function createAssetCanonicalLink(asset) {
+  var channelName, certificateId, name, claimId;
+
+  if (asset.claimData) {
+    var _asset$claimData = asset.claimData;
+    channelName = _asset$claimData.channelName;
+    certificateId = _asset$claimData.certificateId;
+    name = _asset$claimData.name;
+    claimId = _asset$claimData.claimId;
+  }
+
+  if (channelName) {
+    return "".concat(host, "/").concat(channelName, ":").concat(certificateId, "/").concat(name);
+  }
+
+  return "".concat(host, "/").concat(claimId, "/").concat(name);
+};
+
+var createChannelCanonicalLink = function createChannelCanonicalLink(channel) {
+  var name = channel.name,
+      longId = channel.longId;
+  return "".concat(host, "/").concat(name, ":").concat(longId);
+};
+
+var createCanonicalLink = function createCanonicalLink(asset, channel, page) {
+  if (asset) {
+    return createAssetCanonicalLink(asset);
+  }
+
+  if (channel) {
+    return createChannelCanonicalLink(channel);
+  }
+
+  return createBasicCanonicalLink(page);
+};
+
+var _default = createCanonicalLink;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/createChannelMetaTags.js b/client/build/utils/createChannelMetaTags.js
new file mode 100644
index 00000000..71134e84
--- /dev/null
+++ b/client/build/utils/createChannelMetaTags.js
@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.createChannelMetaTags = void 0;
+
+var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
+
+var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _siteConfig$details = _siteConfig.default.details,
+    host = _siteConfig$details.host,
+    siteTitle = _siteConfig$details.title,
+    twitter = _siteConfig$details.twitter,
+    defaultThumbnail = _siteConfig.default.assetDefaults.thumbnail;
+
+var createChannelMetaTags = function createChannelMetaTags(channel) {
+  var name = channel.name,
+      longId = channel.longId;
+  return [// page detail tags
+  {
+    property: 'og:title',
+    content: "".concat(name, " on ").concat(siteTitle)
+  }, {
+    property: 'twitter:title',
+    content: "".concat(name, " on ").concat(siteTitle)
+  }, {
+    property: 'og:description',
+    content: "".concat(name, ", a channel on ").concat(siteTitle)
+  }, {
+    property: 'twitter:description',
+    content: "".concat(name, ", a channel on ").concat(siteTitle)
+  }, // url
+  {
+    property: 'og:url',
+    content: "".concat(host, "/").concat(name, ":").concat(longId)
+  }, // site info
+  {
+    property: 'og:site_name',
+    content: siteTitle
+  }, {
+    property: 'twitter:site',
+    content: twitter
+  }, {
+    property: 'fb:app_id',
+    content: '1371961932852223'
+  }, // card type tags
+  {
+    property: 'og:type',
+    content: 'article'
+  }, {
+    property: 'twitter:card',
+    content: 'summary_large_image'
+  }, // image tags
+  {
+    property: 'og:image',
+    content: defaultThumbnail
+  }, {
+    property: 'og:image:width',
+    content: 600
+  }, {
+    property: 'og:image:height',
+    content: 315
+  }, {
+    property: 'og:image:type',
+    content: (0, _determineContentTypeFromExtension.default)(defaultThumbnail)
+  }, {
+    property: 'twitter:image',
+    content: defaultThumbnail
+  }, {
+    property: 'twitter:image:alt',
+    content: 'Spee.ch Logo'
+  }];
+};
+
+exports.createChannelMetaTags = createChannelMetaTags;
+var _default = createChannelMetaTags;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/createMetaTags.js b/client/build/utils/createMetaTags.js
new file mode 100644
index 00000000..98c33201
--- /dev/null
+++ b/client/build/utils/createMetaTags.js
@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _createAssetMetaTags = _interopRequireDefault(require("./createAssetMetaTags"));
+
+var _createChannelMetaTags = _interopRequireDefault(require("./createChannelMetaTags.js"));
+
+var _createBasicMetaTags = _interopRequireDefault(require("./createBasicMetaTags.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var createMetaTags = function createMetaTags(_ref) {
+  var asset = _ref.asset,
+      channel = _ref.channel;
+
+  if (asset) {
+    return (0, _createAssetMetaTags.default)(asset);
+  }
+
+  if (channel) {
+    return (0, _createChannelMetaTags.default)(channel);
+  }
+
+  return (0, _createBasicMetaTags.default)();
+};
+
+var _default = createMetaTags;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/createPageTitle.js b/client/build/utils/createPageTitle.js
new file mode 100644
index 00000000..72577c0e
--- /dev/null
+++ b/client/build/utils/createPageTitle.js
@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var siteTitle = _siteConfig.default.details.title;
+
+var createPageTitle = function createPageTitle(pageTitle) {
+  if (!pageTitle) {
+    return "".concat(siteTitle);
+  }
+
+  return "".concat(siteTitle, " - ").concat(pageTitle);
+};
+
+var _default = createPageTitle;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/determineContentTypeFromExtension.js b/client/build/utils/determineContentTypeFromExtension.js
new file mode 100644
index 00000000..ecaa987e
--- /dev/null
+++ b/client/build/utils/determineContentTypeFromExtension.js
@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var determineContentTypeFromExtension = function determineContentTypeFromExtension(thumbnail) {
+  if (thumbnail) {
+    var fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
+
+    switch (fileExt) {
+      case 'jpeg':
+      case 'jpg':
+        return 'image/jpg';
+
+      case 'png':
+        return 'image/png';
+
+      case 'gif':
+        return 'image/gif';
+
+      case 'mp4':
+        return 'video/mp4';
+
+      default:
+        return '';
+    }
+  }
+
+  return '';
+};
+
+var _default = determineContentTypeFromExtension;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/metaTags.js b/client/build/utils/metaTags.js
index 7bcf305e..383a32f0 100644
--- a/client/build/utils/metaTags.js
+++ b/client/build/utils/metaTags.js
@@ -5,278 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createMetaTags = void 0;
 
-var determineOgThumbnailContentType = function determineOgThumbnailContentType(thumbnail) {
-  if (thumbnail) {
-    var fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
+var createAssetMetaTags = require('createAssetMetaTags.js');
 
-    switch (fileExt) {
-      case 'jpeg':
-      case 'jpg':
-        return 'image/jpeg';
+var createChannelMetaTags = require('createChannelMetaTags.js');
 
-      case 'png':
-        return 'image/png';
+var createBasicMetaTags = require('createBasicMetaTags.js');
 
-      case 'gif':
-        return 'image/gif';
-
-      case 'mp4':
-        return 'video/mp4';
-
-      default:
-        return 'image/jpeg';
-    }
-  }
-
-  return '';
-};
-
-var createBasicMetaTags = function createBasicMetaTags(_ref) {
-  var siteHost = _ref.siteHost,
-      siteDescription = _ref.siteDescription,
-      siteTitle = _ref.siteTitle,
-      siteTwitter = _ref.siteTwitter,
-      defaultThumbnail = _ref.defaultThumbnail;
-  return [{
-    property: 'og:title',
-    content: siteTitle
-  }, {
-    property: 'twitter:title',
-    content: siteTitle
-  }, {
-    property: 'og:url',
-    content: siteHost
-  }, {
-    property: 'og:site_name',
-    content: siteTitle
-  }, {
-    property: 'og:description',
-    content: siteDescription
-  }, {
-    property: 'twitter:description',
-    content: siteDescription
-  }, {
-    property: 'twitter:site',
-    content: siteTwitter
-  }, {
-    property: 'twitter:card',
-    content: 'summary_large_image'
-  }, {
-    property: 'og:image',
-    content: defaultThumbnail
-  }, {
-    property: 'twitter:image',
-    content: defaultThumbnail
-  }, {
-    property: 'og:image:type',
-    content: 'image/jpeg'
-  }];
-};
-
-var createChannelMetaTags = function createChannelMetaTags(_ref2) {
-  var siteHost = _ref2.siteHost,
-      siteTitle = _ref2.siteTitle,
-      siteTwitter = _ref2.siteTwitter,
-      channel = _ref2.channel,
-      defaultThumbnail = _ref2.defaultThumbnail;
-  var name = channel.name,
-      longId = channel.longId;
-  return [{
-    property: 'og:title',
-    content: "".concat(name, " on ").concat(siteTitle)
-  }, {
-    property: 'twitter:title',
-    content: "".concat(name, " on ").concat(siteTitle)
-  }, {
-    property: 'og:url',
-    content: "".concat(siteHost, "/").concat(name, ":").concat(longId)
-  }, {
-    property: 'og:site_name',
-    content: siteTitle
-  }, {
-    property: 'og:description',
-    content: "".concat(name, ", a channel on ").concat(siteTitle)
-  }, {
-    property: 'twitter:site',
-    content: siteTwitter
-  }, {
-    property: 'twitter:card',
-    content: 'summary'
-  }, {
-    property: 'og:image',
-    content: defaultThumbnail
-  }, {
-    property: 'twitter:image',
-    content: defaultThumbnail
-  }];
-};
-
-var createAssetMetaTags = function createAssetMetaTags(_ref3) {
-  var siteHost = _ref3.siteHost,
-      siteTitle = _ref3.siteTitle,
-      siteTwitter = _ref3.siteTwitter,
-      asset = _ref3.asset,
-      defaultDescription = _ref3.defaultDescription,
-      defaultThumbnail = _ref3.defaultThumbnail;
-  var claimData = asset.claimData;
-  var contentType = claimData.contentType;
-  var videoEmbedUrl = "".concat(siteHost, "/video-embed/").concat(claimData.name, "/").concat(claimData.claimId);
-  var showUrl = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name);
-  var source = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name, ".").concat(claimData.fileExt);
-  var ogTitle = claimData.title || claimData.name;
-  var ogDescription = claimData.description || defaultDescription;
-  var ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
-  var ogThumbnail = claimData.thumbnail || defaultThumbnail;
-  var metaTags = [{
-    property: 'og:title',
-    content: ogTitle
-  }, {
-    property: 'twitter:title',
-    content: ogTitle
-  }, {
-    property: 'og:url',
-    content: showUrl
-  }, {
-    property: 'og:site_name',
-    content: siteTitle
-  }, {
-    property: 'og:description',
-    content: ogDescription
-  }, {
-    property: 'twitter:description',
-    content: ogDescription
-  }, {
-    property: 'og:image:width',
-    content: 600
-  }, {
-    property: 'og:image:height',
-    content: 315
-  }, {
-    property: 'twitter:site',
-    content: siteTwitter
-  }];
-
-  if (contentType === 'video/mp4' || contentType === 'video/webm') {
-    metaTags.push({
-      property: 'og:video',
-      content: source
-    });
-    metaTags.push({
-      property: 'og:video:secure_url',
-      content: source
-    });
-    metaTags.push({
-      property: 'og:video:type',
-      content: contentType
-    });
-    metaTags.push({
-      property: 'og:image',
-      content: ogThumbnail
-    });
-    metaTags.push({
-      property: 'twitter:image',
-      content: ogThumbnail
-    });
-    metaTags.push({
-      property: 'og:image:type',
-      content: ogThumbnailContentType
-    });
-    metaTags.push({
-      property: 'og:type',
-      content: 'video.other'
-    });
-    metaTags.push({
-      property: 'twitter:card',
-      content: 'player'
-    });
-    metaTags.push({
-      property: 'twitter:player',
-      content: videoEmbedUrl
-    });
-    metaTags.push({
-      property: 'twitter:player:width',
-      content: 600
-    });
-    metaTags.push({
-      property: 'twitter:text:player_width',
-      content: 600
-    });
-    metaTags.push({
-      property: 'twitter:player:height',
-      content: 337
-    });
-    metaTags.push({
-      property: 'twitter:player:stream',
-      content: source
-    });
-    metaTags.push({
-      property: 'twitter:player:stream:content_type',
-      content: contentType
-    });
-  } else {
-    metaTags.push({
-      property: 'og:image',
-      content: source
-    });
-    metaTags.push({
-      property: 'twitter:image',
-      content: source
-    });
-    metaTags.push({
-      property: 'og:image:type',
-      content: contentType
-    });
-    metaTags.push({
-      property: 'og:type',
-      content: 'article'
-    });
-    metaTags.push({
-      property: 'twitter:card',
-      content: 'summary_large_image'
-    });
-  }
-
-  return metaTags;
-};
-
-var createMetaTags = function createMetaTags(_ref4) {
-  var siteDescription = _ref4.siteDescription,
-      siteHost = _ref4.siteHost,
-      siteTitle = _ref4.siteTitle,
-      siteTwitter = _ref4.siteTwitter,
-      asset = _ref4.asset,
-      channel = _ref4.channel,
-      defaultDescription = _ref4.defaultDescription,
-      defaultThumbnail = _ref4.defaultThumbnail;
+var createMetaTags = function createMetaTags(_ref) {
+  var asset = _ref.asset,
+      channel = _ref.channel;
 
   if (asset) {
-    return createAssetMetaTags({
-      siteHost: siteHost,
-      siteTitle: siteTitle,
-      siteTwitter: siteTwitter,
-      asset: asset,
-      defaultDescription: defaultDescription,
-      defaultThumbnail: defaultThumbnail
-    });
+    return createAssetMetaTags(asset);
   }
 
   if (channel) {
-    return createChannelMetaTags({
-      siteHost: siteHost,
-      siteTitle: siteTitle,
-      siteTwitter: siteTwitter,
-      channel: channel,
-      defaultThumbnail: defaultThumbnail
-    });
+    return createChannelMetaTags(channel);
   }
 
-  return createBasicMetaTags({
-    siteDescription: siteDescription,
-    siteHost: siteHost,
-    siteTitle: siteTitle,
-    siteTwitter: siteTwitter,
-    defaultThumbnail: defaultThumbnail
-  });
+  return createBasicMetaTags();
 };
 
 exports.createMetaTags = createMetaTags;
\ No newline at end of file
diff --git a/client/src/containers/SEO/index.js b/client/src/containers/SEO/index.js
index 8a004ff6..8cec1202 100644
--- a/client/src/containers/SEO/index.js
+++ b/client/src/containers/SEO/index.js
@@ -1,16 +1,4 @@
 import { connect } from 'react-redux';
 import View from './view';
 
-const mapStateToProps = ({ site }) => {
-  const { defaultDescription, defaultThumbnail, description: siteDescription, host: siteHost, title: siteTitle, twitter: siteTwitter } = site;
-  return {
-    defaultDescription,
-    defaultThumbnail,
-    siteDescription,
-    siteHost,
-    siteTitle,
-    siteTwitter,
-  };
-};
-
-export default connect(mapStateToProps, null)(View);
+export default connect(null, null)(View);
diff --git a/client/src/containers/SEO/view.jsx b/client/src/containers/SEO/view.jsx
index 58c12cf3..85574695 100644
--- a/client/src/containers/SEO/view.jsx
+++ b/client/src/containers/SEO/view.jsx
@@ -2,30 +2,22 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import PropTypes from 'prop-types';
 
-import { createPageTitle } from '../../utils/pageTitle';
-import { createMetaTags } from '../../utils/metaTags';
-import { createCanonicalLink } from '../../utils/canonicalLink';
+import createPageTitle from '../../utils/createPageTitle';
+import createMetaTags from '../../utils/createMetaTags';
+import createCanonicalLink from '../../utils/createCanonicalLink';
 
 class SEO extends React.Component {
   render () {
-    // props from state
-    const { defaultDescription, defaultThumbnail, siteDescription, siteHost, siteTitle, siteTwitter } = this.props;
     // props from parent
     const { asset, channel, pageUri } = this.props;
     let { pageTitle } = this.props;
     // create page title, tags, and canonical link
-    pageTitle = createPageTitle(siteTitle, pageTitle);
+    pageTitle = createPageTitle(pageTitle);
     const metaTags = createMetaTags({
-      siteDescription,
-      siteHost,
-      siteTitle,
-      siteTwitter,
       asset,
       channel,
-      defaultDescription,
-      defaultThumbnail,
     });
-    const canonicalLink = createCanonicalLink(asset, channel, pageUri, siteHost);
+    const canonicalLink = createCanonicalLink(asset, channel, pageUri);
     // render results
     return (
       <Helmet
diff --git a/client/src/utils/canonicalLink.js b/client/src/utils/canonicalLink.js
deleted file mode 100644
index 3866b16f..00000000
--- a/client/src/utils/canonicalLink.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const createBasicCanonicalLink = (page, siteHost) => {
-  return `${siteHost}/${page}`;
-};
-
-const createAssetCanonicalLink = (asset, siteHost) => {
-  let channelName, certificateId, name, claimId;
-  if (asset.claimData) {
-    ({ channelName, certificateId, name, claimId } = asset.claimData);
-  };
-  if (channelName) {
-    return `${siteHost}/${channelName}:${certificateId}/${name}`;
-  };
-  return `${siteHost}/${claimId}/${name}`;
-};
-
-const createChannelCanonicalLink = (channel, siteHost) => {
-  const { name, longId } = channel;
-  return `${siteHost}/${name}:${longId}`;
-};
-
-export const createCanonicalLink = (asset, channel, page, siteHost) => {
-  if (asset) {
-    return createAssetCanonicalLink(asset, siteHost);
-  }
-  if (channel) {
-    return createChannelCanonicalLink(channel, siteHost);
-  }
-  return createBasicCanonicalLink(page, siteHost);
-};
diff --git a/client/src/utils/createAssetMetaTags.js b/client/src/utils/createAssetMetaTags.js
index 539e2cd3..c207676f 100644
--- a/client/src/utils/createAssetMetaTags.js
+++ b/client/src/utils/createAssetMetaTags.js
@@ -1,4 +1,17 @@
-const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js');
+import siteConfig from '@config/siteConfig.json';
+import determineContentTypeFromExtension from './determineContentTypeFromExtension';
+
+const {
+  details: {
+    host,
+    title: siteTitle,
+    twitter,
+  },
+  assetDefaults: {
+    description: defaultDescription,
+    thumbnail: defaultThumbnail,
+  },
+} = siteConfig;
 
 const VIDEO = 'VIDEO';
 const IMAGE = 'IMAGE';
@@ -20,12 +33,12 @@ const determineMediaType = (contentType) => {
   }
 };
 
-const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => {
+const createAssetMetaTags = (asset) => {
   const { claimData } = asset;
   const { contentType } = claimData;
-  const videoEmbedUrl = `${siteHost}/video-embed/${claimData.name}/${claimData.claimId}`;
-  const showUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`;
-  const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
+  const videoEmbedUrl = `${host}/video-embed/${claimData.name}/${claimData.claimId}`;
+  const showUrl = `${host}/${claimData.claimId}/${claimData.name}`;
+  const source = `${host}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
   const ogTitle = claimData.title || claimData.name;
   const ogDescription = claimData.description || defaultDescription;
   const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
@@ -40,7 +53,7 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
     {property: 'og:url', content: showUrl},
     // site info
     {property: 'og:site_name', content: siteTitle},
-    {property: 'twitter:site', content: siteTwitter},
+    {property: 'twitter:site', content: twitter},
     {property: 'fb:app_id', content: '1371961932852223'},
   ];
   if (determineMediaType(contentType) === VIDEO) {
@@ -78,4 +91,4 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
   return metaTags;
 };
 
-module.exports = createAssetMetaTags;
+export default createAssetMetaTags;
diff --git a/client/src/utils/createBasicMetaTags.js b/client/src/utils/createBasicMetaTags.js
index 1eac8331..a6233615 100644
--- a/client/src/utils/createBasicMetaTags.js
+++ b/client/src/utils/createBasicMetaTags.js
@@ -1,29 +1,42 @@
-const determineContentTypeFromExtension = require('./determineContentTypeFromExtension.js');
+import siteConfig from '@config/siteConfig.json';
+import determineContentTypeFromExtension from './determineContentTypeFromExtension.js';
 
-const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
+const {
+  details: {
+    description,
+    host,
+    title,
+    twitter,
+  },
+  assetDefaults: {
+    thumbnail,
+  },
+} = siteConfig;
+
+const createBasicMetaTags = () => {
   return [
     // page details
-    {property: 'og:title', content: siteTitle},
-    {property: 'twitter:title', content: siteTitle},
-    {property: 'og:description', content: siteDescription},
-    {property: 'twitter:description', content: siteDescription},
+    {property: 'og:title', content: title},
+    {property: 'twitter:title', content: title},
+    {property: 'og:description', content: description},
+    {property: 'twitter:description', content: description},
     // url
-    {property: 'og:url', content: siteHost},
+    {property: 'og:url', content: host},
     // site id
-    {property: 'og:site_name', content: siteTitle},
-    {property: 'twitter:site', content: siteTwitter},
+    {property: 'og:site_name', content: title},
+    {property: 'twitter:site', content: twitter},
     {property: 'fb:app_id', content: '1371961932852223'},
     // card type
     {property: 'og:type', content: 'article'},
     {property: 'twitter:card', content: 'summary_large_image'},
     // image
-    {property: 'og:image', content: defaultThumbnail},
+    {property: 'og:image', content: thumbnail},
     {property: 'og:image:width', content: 600},
     {property: 'og:image:height', content: 315},
-    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
-    {property: 'twitter:image', content: defaultThumbnail},
+    {property: 'og:image:type', content: determineContentTypeFromExtension(thumbnail)},
+    {property: 'twitter:image', content: thumbnail},
     {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
   ];
 };
 
-module.exports = createBasicMetaTags;
+export default createBasicMetaTags;
diff --git a/client/src/utils/createCanonicalLink.js b/client/src/utils/createCanonicalLink.js
new file mode 100644
index 00000000..d73e183d
--- /dev/null
+++ b/client/src/utils/createCanonicalLink.js
@@ -0,0 +1,39 @@
+import siteConfig from '@config/siteConfig.json';
+
+const {
+  details: {
+    host,
+  },
+} = siteConfig;
+
+const createBasicCanonicalLink = (page) => {
+  return `${host}/${page}`;
+};
+
+const createAssetCanonicalLink = (asset) => {
+  let channelName, certificateId, name, claimId;
+  if (asset.claimData) {
+    ({ channelName, certificateId, name, claimId } = asset.claimData);
+  }
+  if (channelName) {
+    return `${host}/${channelName}:${certificateId}/${name}`;
+  }
+  return `${host}/${claimId}/${name}`;
+};
+
+const createChannelCanonicalLink = (channel) => {
+  const { name, longId } = channel;
+  return `${host}/${name}:${longId}`;
+};
+
+const createCanonicalLink = (asset, channel, page) => {
+  if (asset) {
+    return createAssetCanonicalLink(asset);
+  }
+  if (channel) {
+    return createChannelCanonicalLink(channel);
+  }
+  return createBasicCanonicalLink(page);
+};
+
+export default createCanonicalLink;
diff --git a/client/src/utils/createChannelMetaTags.js b/client/src/utils/createChannelMetaTags.js
index ffb82a3c..a74548b4 100644
--- a/client/src/utils/createChannelMetaTags.js
+++ b/client/src/utils/createChannelMetaTags.js
@@ -1,6 +1,18 @@
-const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js');
+import siteConfig from '@config/siteConfig.json';
+import determineContentTypeFromExtension from './determineContentTypeFromExtension';
 
-const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => {
+const {
+  details: {
+    host,
+    title: siteTitle,
+    twitter,
+  },
+  assetDefaults: {
+    thumbnail: defaultThumbnail,
+  },
+} = siteConfig;
+
+export const createChannelMetaTags = (channel) => {
   const { name, longId } = channel;
   return [
     // page detail tags
@@ -9,10 +21,10 @@ const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defau
     {property: 'og:description', content: `${name}, a channel on ${siteTitle}`},
     {property: 'twitter:description', content: `${name}, a channel on ${siteTitle}`},
     // url
-    {property: 'og:url', content: `${siteHost}/${name}:${longId}`},
+    {property: 'og:url', content: `${host}/${name}:${longId}`},
     // site info
     {property: 'og:site_name', content: siteTitle},
-    {property: 'twitter:site', content: siteTwitter},
+    {property: 'twitter:site', content: twitter},
     {property: 'fb:app_id', content: '1371961932852223'},
     // card type tags
     {property: 'og:type', content: 'article'},
@@ -27,4 +39,4 @@ const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defau
   ];
 };
 
-module.exports = createChannelMetaTags;
+export default createChannelMetaTags;
diff --git a/client/src/utils/createMetaTags.js b/client/src/utils/createMetaTags.js
new file mode 100644
index 00000000..19287478
--- /dev/null
+++ b/client/src/utils/createMetaTags.js
@@ -0,0 +1,15 @@
+import createAssetMetaTags from './createAssetMetaTags';
+import createChannelMetaTags from './createChannelMetaTags.js';
+import createBasicMetaTags from './createBasicMetaTags.js';
+
+const createMetaTags = ({ asset, channel }) => {
+  if (asset) {
+    return createAssetMetaTags(asset);
+  }
+  if (channel) {
+    return createChannelMetaTags(channel);
+  }
+  return createBasicMetaTags();
+};
+
+export default createMetaTags;
diff --git a/client/src/utils/createPageTitle.js b/client/src/utils/createPageTitle.js
new file mode 100644
index 00000000..0093e190
--- /dev/null
+++ b/client/src/utils/createPageTitle.js
@@ -0,0 +1,16 @@
+import siteConfig from '@config/siteConfig.json';
+
+const {
+  details: {
+    title: siteTitle,
+  },
+} = siteConfig;
+
+const createPageTitle = (pageTitle) => {
+  if (!pageTitle) {
+    return `${siteTitle}`;
+  }
+  return `${siteTitle} - ${pageTitle}`;
+};
+
+export default createPageTitle;
diff --git a/client/src/utils/determineContentTypeFromExtension.js b/client/src/utils/determineContentTypeFromExtension.js
index de2ed530..cd7f85b4 100644
--- a/client/src/utils/determineContentTypeFromExtension.js
+++ b/client/src/utils/determineContentTypeFromExtension.js
@@ -18,4 +18,4 @@ const determineContentTypeFromExtension = (thumbnail) => {
   return '';
 };
 
-module.exports = determineContentTypeFromExtension;
+export default determineContentTypeFromExtension;
diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js
deleted file mode 100644
index 9dd8167d..00000000
--- a/client/src/utils/metaTags.js
+++ /dev/null
@@ -1,32 +0,0 @@
-const createAssetMetaTags = require('createAssetMetaTags.js');
-const createChannelMetaTags = require('createChannelMetaTags.js');
-const createBasicMetaTags = require('createBasicMetaTags.js');
-
-export const createMetaTags = ({ siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail }) => {
-  if (asset) {
-    return createAssetMetaTags({
-      siteHost,
-      siteTitle,
-      siteTwitter,
-      asset,
-      defaultDescription,
-      defaultThumbnail,
-    });
-  }
-  if (channel) {
-    return createChannelMetaTags({
-      siteHost,
-      siteTitle,
-      siteTwitter,
-      channel,
-      defaultThumbnail,
-    });
-  }
-  return createBasicMetaTags({
-    siteDescription,
-    siteHost,
-    siteTitle,
-    siteTwitter,
-    defaultThumbnail,
-  });
-};
diff --git a/client/src/utils/pageTitle.js b/client/src/utils/pageTitle.js
deleted file mode 100644
index 2b577c0b..00000000
--- a/client/src/utils/pageTitle.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const createPageTitle = (siteTitle, pageTitle) => {
-  if (!pageTitle) {
-    return `${siteTitle}`;
-  }
-  return `${siteTitle} - ${pageTitle}`;
-};

From 1818fd242cdabc4a762801a4795bcce9400ffb4e Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Thu, 19 Jul 2018 23:06:41 -0700
Subject: [PATCH 17/17] changed meta tags to use object

---
 client/build/utils/createAssetMetaTags.js   | 171 +++++---------------
 client/build/utils/createBasicMetaTags.js   |  80 +++------
 client/build/utils/createChannelMetaTags.js |  80 +++------
 client/build/utils/createMetaTagsArray.js   |  24 +++
 client/src/utils/createAssetMetaTags.js     |  79 +++++----
 client/src/utils/createBasicMetaTags.js     |  38 ++---
 client/src/utils/createChannelMetaTags.js   |  38 ++---
 client/src/utils/createMetaTagsArray.js     |  14 ++
 8 files changed, 211 insertions(+), 313 deletions(-)
 create mode 100644 client/build/utils/createMetaTagsArray.js
 create mode 100644 client/src/utils/createMetaTagsArray.js

diff --git a/client/build/utils/createAssetMetaTags.js b/client/build/utils/createAssetMetaTags.js
index 1a8d5476..3fb2720f 100644
--- a/client/build/utils/createAssetMetaTags.js
+++ b/client/build/utils/createAssetMetaTags.js
@@ -9,6 +9,8 @@ var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
 
 var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension"));
 
+var _createMetaTagsArray = _interopRequireDefault(require("./createMetaTagsArray"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _siteConfig$details = _siteConfig.default.details,
@@ -44,148 +46,59 @@ var determineMediaType = function determineMediaType(contentType) {
 var createAssetMetaTags = function createAssetMetaTags(asset) {
   var claimData = asset.claimData;
   var contentType = claimData.contentType;
-  var videoEmbedUrl = "".concat(host, "/video-embed/").concat(claimData.name, "/").concat(claimData.claimId);
   var showUrl = "".concat(host, "/").concat(claimData.claimId, "/").concat(claimData.name);
-  var source = "".concat(host, "/").concat(claimData.claimId, "/").concat(claimData.name, ".").concat(claimData.fileExt);
+  var serveUrl = "".concat(host, "/").concat(claimData.claimId, "/").concat(claimData.name, ".").concat(claimData.fileExt);
   var ogTitle = claimData.title || claimData.name;
   var ogDescription = claimData.description || defaultDescription;
   var ogThumbnailContentType = (0, _determineContentTypeFromExtension.default)(claimData.thumbnail);
-  var ogThumbnail = claimData.thumbnail || defaultThumbnail;
-  var metaTags = [// page details
-  {
-    property: 'og:title',
-    content: ogTitle
-  }, {
-    property: 'twitter:title',
-    content: ogTitle
-  }, {
-    property: 'og:description',
-    content: ogDescription
-  }, {
-    property: 'twitter:description',
-    content: ogDescription
-  }, // url
-  {
-    property: 'og:url',
-    content: showUrl
-  }, // site info
-  {
-    property: 'og:site_name',
-    content: siteTitle
-  }, {
-    property: 'twitter:site',
-    content: twitter
-  }, {
-    property: 'fb:app_id',
-    content: '1371961932852223'
-  }];
+  var ogThumbnail = claimData.thumbnail || defaultThumbnail; // {property: 'og:title'] = ogTitle},
+
+  var metaTags = {
+    'og:title': ogTitle,
+    'twitter:title': ogTitle,
+    'og:description': ogDescription,
+    'twitter:description': ogDescription,
+    'og:url': showUrl,
+    'og:site_name': siteTitle,
+    'twitter:site': twitter,
+    'fb:app_id': '1371961932852223'
+  };
 
   if (determineMediaType(contentType) === VIDEO) {
-    // card type tags
-    metaTags.push({
-      property: 'og:type',
-      content: 'video.other'
-    });
-    metaTags.push({
-      property: 'twitter:card',
-      content: 'player'
-    });
-    metaTags.push({
-      property: 'twitter:player',
-      content: videoEmbedUrl
-    });
-    metaTags.push({
-      property: 'twitter:player:width',
-      content: 600
-    });
-    metaTags.push({
-      property: 'twitter:text:player_width',
-      content: 600
-    });
-    metaTags.push({
-      property: 'twitter:player:height',
-      content: 350
-    });
-    metaTags.push({
-      property: 'twitter:player:stream',
-      content: source
-    });
-    metaTags.push({
-      property: 'twitter:player:stream:content_type',
-      content: contentType
-    }); // video tags
+    var videoEmbedUrl = "".concat(host, "/video-embed/").concat(claimData.name, "/").concat(claimData.claimId); // card type tags
 
-    metaTags.push({
-      property: 'og:video',
-      content: source
-    });
-    metaTags.push({
-      property: 'og:video:secure_url',
-      content: source
-    });
-    metaTags.push({
-      property: 'og:video:type',
-      content: contentType
-    }); // image tags
+    metaTags['og:type'] = 'video.other';
+    metaTags['twitter:card'] = 'player';
+    metaTags['twitter:player'] = videoEmbedUrl;
+    metaTags['twitter:player:width'] = 600;
+    metaTags['twitter:text:player_width'] = 600;
+    metaTags['twitter:player:height'] = 350;
+    metaTags['twitter:player:stream'] = serveUrl;
+    metaTags['twitter:player:stream:content_type'] = contentType; // video tags
 
-    metaTags.push({
-      property: 'og:image',
-      content: ogThumbnail
-    });
-    metaTags.push({
-      property: 'og:image:width',
-      content: 600
-    });
-    metaTags.push({
-      property: 'og:image:height',
-      content: 315
-    });
-    metaTags.push({
-      property: 'og:image:type',
-      content: ogThumbnailContentType
-    });
-    metaTags.push({
-      property: 'twitter:image',
-      content: ogThumbnail
-    });
+    metaTags['og:video'] = serveUrl;
+    metaTags['og:video:secure_url'] = serveUrl;
+    metaTags['og:video:type'] = contentType; // image tags
+
+    metaTags['og:image'] = ogThumbnail;
+    metaTags['og:image:width'] = 600;
+    metaTags['og:image:height'] = 315;
+    metaTags['og:image:type'] = ogThumbnailContentType;
+    metaTags['twitter:image'] = ogThumbnail;
   } else {
     // card type tags
-    metaTags.push({
-      property: 'og:type',
-      content: 'article'
-    });
-    metaTags.push({
-      property: 'twitter:card',
-      content: 'summary_large_image'
-    }); // image tags
+    metaTags['og:type'] = 'article';
+    metaTags['twitter:card'] = 'summary_large_image'; // image tags
 
-    metaTags.push({
-      property: 'og:image',
-      content: source
-    });
-    metaTags.push({
-      property: 'og:image',
-      content: source
-    });
-    metaTags.push({
-      property: 'og:image:width',
-      content: 600
-    });
-    metaTags.push({
-      property: 'og:image:height',
-      content: 315
-    });
-    metaTags.push({
-      property: 'og:image:type',
-      content: contentType
-    });
-    metaTags.push({
-      property: 'twitter:image',
-      content: source
-    });
+    metaTags['og:image'] = serveUrl;
+    metaTags['og:image'] = serveUrl;
+    metaTags['og:image:width'] = 600;
+    metaTags['og:image:height'] = 315;
+    metaTags['og:image:type'] = contentType;
+    metaTags['twitter:image'] = serveUrl;
   }
 
-  return metaTags;
+  return (0, _createMetaTagsArray.default)(metaTags);
 };
 
 var _default = createAssetMetaTags;
diff --git a/client/build/utils/createBasicMetaTags.js b/client/build/utils/createBasicMetaTags.js
index 00d1709a..0160e74a 100644
--- a/client/build/utils/createBasicMetaTags.js
+++ b/client/build/utils/createBasicMetaTags.js
@@ -9,6 +9,8 @@ var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
 
 var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension.js"));
 
+var _createMetaTagsArray = _interopRequireDefault(require("./createMetaTagsArray"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _siteConfig$details = _siteConfig.default.details,
@@ -19,60 +21,30 @@ var _siteConfig$details = _siteConfig.default.details,
     thumbnail = _siteConfig.default.assetDefaults.thumbnail;
 
 var createBasicMetaTags = function createBasicMetaTags() {
-  return [// page details
-  {
-    property: 'og:title',
-    content: title
-  }, {
-    property: 'twitter:title',
-    content: title
-  }, {
-    property: 'og:description',
-    content: description
-  }, {
-    property: 'twitter:description',
-    content: description
-  }, // url
-  {
-    property: 'og:url',
-    content: host
-  }, // site id
-  {
-    property: 'og:site_name',
-    content: title
-  }, {
-    property: 'twitter:site',
-    content: twitter
-  }, {
-    property: 'fb:app_id',
-    content: '1371961932852223'
-  }, // card type
-  {
-    property: 'og:type',
-    content: 'article'
-  }, {
-    property: 'twitter:card',
-    content: 'summary_large_image'
-  }, // image
-  {
-    property: 'og:image',
-    content: thumbnail
-  }, {
-    property: 'og:image:width',
-    content: 600
-  }, {
-    property: 'og:image:height',
-    content: 315
-  }, {
-    property: 'og:image:type',
-    content: (0, _determineContentTypeFromExtension.default)(thumbnail)
-  }, {
-    property: 'twitter:image',
-    content: thumbnail
-  }, {
-    property: 'twitter:image:alt',
-    content: 'Spee.ch Logo'
-  }];
+  var metaTags = {
+    // page details
+    'og:title': title,
+    'twitter:title': title,
+    'og:description': description,
+    'twitter:description': description,
+    // url
+    'og:url': host,
+    // site id
+    'og:site_name': title,
+    'twitter:site': twitter,
+    'fb:app_id': '1371961932852223',
+    // card type
+    'og:type': 'article',
+    'twitter:card': 'summary_large_image',
+    // image
+    'og:image': thumbnail,
+    'og:image:width': 600,
+    'og:image:height': 315,
+    'og:image:type': (0, _determineContentTypeFromExtension.default)(thumbnail),
+    'twitter:image': thumbnail,
+    'twitter:image:alt': 'Spee.ch Logo'
+  };
+  return (0, _createMetaTagsArray.default)(metaTags);
 };
 
 var _default = createBasicMetaTags;
diff --git a/client/build/utils/createChannelMetaTags.js b/client/build/utils/createChannelMetaTags.js
index 71134e84..9abc6902 100644
--- a/client/build/utils/createChannelMetaTags.js
+++ b/client/build/utils/createChannelMetaTags.js
@@ -9,6 +9,8 @@ var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
 
 var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension"));
 
+var _createMetaTagsArray = _interopRequireDefault(require("./createMetaTagsArray"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _siteConfig$details = _siteConfig.default.details,
@@ -20,60 +22,30 @@ var _siteConfig$details = _siteConfig.default.details,
 var createChannelMetaTags = function createChannelMetaTags(channel) {
   var name = channel.name,
       longId = channel.longId;
-  return [// page detail tags
-  {
-    property: 'og:title',
-    content: "".concat(name, " on ").concat(siteTitle)
-  }, {
-    property: 'twitter:title',
-    content: "".concat(name, " on ").concat(siteTitle)
-  }, {
-    property: 'og:description',
-    content: "".concat(name, ", a channel on ").concat(siteTitle)
-  }, {
-    property: 'twitter:description',
-    content: "".concat(name, ", a channel on ").concat(siteTitle)
-  }, // url
-  {
-    property: 'og:url',
-    content: "".concat(host, "/").concat(name, ":").concat(longId)
-  }, // site info
-  {
-    property: 'og:site_name',
-    content: siteTitle
-  }, {
-    property: 'twitter:site',
-    content: twitter
-  }, {
-    property: 'fb:app_id',
-    content: '1371961932852223'
-  }, // card type tags
-  {
-    property: 'og:type',
-    content: 'article'
-  }, {
-    property: 'twitter:card',
-    content: 'summary_large_image'
-  }, // image tags
-  {
-    property: 'og:image',
-    content: defaultThumbnail
-  }, {
-    property: 'og:image:width',
-    content: 600
-  }, {
-    property: 'og:image:height',
-    content: 315
-  }, {
-    property: 'og:image:type',
-    content: (0, _determineContentTypeFromExtension.default)(defaultThumbnail)
-  }, {
-    property: 'twitter:image',
-    content: defaultThumbnail
-  }, {
-    property: 'twitter:image:alt',
-    content: 'Spee.ch Logo'
-  }];
+  var metaTags = {
+    // page detail tags
+    'og:title': "".concat(name, " on ").concat(siteTitle),
+    'twitter:title': "".concat(name, " on ").concat(siteTitle),
+    'og:description': "".concat(name, ", a channel on ").concat(siteTitle),
+    'twitter:description': "".concat(name, ", a channel on ").concat(siteTitle),
+    // url
+    'og:url': "".concat(host, "/").concat(name, ":").concat(longId),
+    // site info
+    'og:site_name': siteTitle,
+    'twitter:site': twitter,
+    'fb:app_id': '1371961932852223',
+    // card type tags
+    'og:type': 'article',
+    'twitter:card': 'summary_large_image',
+    // image tags
+    'og:image': defaultThumbnail,
+    'og:image:width': 600,
+    'og:image:height': 315,
+    'og:image:type': (0, _determineContentTypeFromExtension.default)(defaultThumbnail),
+    'twitter:image': defaultThumbnail,
+    'twitter:image:alt': 'Spee.ch Logo'
+  };
+  return (0, _createMetaTagsArray.default)(metaTags);
 };
 
 exports.createChannelMetaTags = createChannelMetaTags;
diff --git a/client/build/utils/createMetaTagsArray.js b/client/build/utils/createMetaTagsArray.js
new file mode 100644
index 00000000..21fa19ef
--- /dev/null
+++ b/client/build/utils/createMetaTagsArray.js
@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var createMetaTagsArray = function createMetaTagsArray(metaTagsObject) {
+  var metaTagsArray = [];
+
+  for (var key in metaTagsObject) {
+    if (metaTagsObject.hasOwnProperty(key)) {
+      metaTagsArray.push({
+        property: key,
+        content: metaTagsObject[key]
+      });
+    }
+  }
+
+  return metaTagsArray;
+};
+
+var _default = createMetaTagsArray;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/src/utils/createAssetMetaTags.js b/client/src/utils/createAssetMetaTags.js
index c207676f..531df9e3 100644
--- a/client/src/utils/createAssetMetaTags.js
+++ b/client/src/utils/createAssetMetaTags.js
@@ -1,5 +1,6 @@
 import siteConfig from '@config/siteConfig.json';
 import determineContentTypeFromExtension from './determineContentTypeFromExtension';
+import createMetaTagsArray from './createMetaTagsArray';
 
 const {
   details: {
@@ -36,59 +37,57 @@ const determineMediaType = (contentType) => {
 const createAssetMetaTags = (asset) => {
   const { claimData } = asset;
   const { contentType } = claimData;
-  const videoEmbedUrl = `${host}/video-embed/${claimData.name}/${claimData.claimId}`;
   const showUrl = `${host}/${claimData.claimId}/${claimData.name}`;
-  const source = `${host}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
+  const serveUrl = `${host}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
   const ogTitle = claimData.title || claimData.name;
   const ogDescription = claimData.description || defaultDescription;
   const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
   const ogThumbnail = claimData.thumbnail || defaultThumbnail;
-  const metaTags = [
-    // page details
-    {property: 'og:title', content: ogTitle},
-    {property: 'twitter:title', content: ogTitle},
-    {property: 'og:description', content: ogDescription},
-    {property: 'twitter:description', content: ogDescription},
-    // url
-    {property: 'og:url', content: showUrl},
-    // site info
-    {property: 'og:site_name', content: siteTitle},
-    {property: 'twitter:site', content: twitter},
-    {property: 'fb:app_id', content: '1371961932852223'},
-  ];
+  // {property: 'og:title'] = ogTitle},
+  const metaTags = {
+    'og:title'           : ogTitle,
+    'twitter:title'      : ogTitle,
+    'og:description'     : ogDescription,
+    'twitter:description': ogDescription,
+    'og:url'             : showUrl,
+    'og:site_name'       : siteTitle,
+    'twitter:site'       : twitter,
+    'fb:app_id'          : '1371961932852223',
+  };
   if (determineMediaType(contentType) === VIDEO) {
+    const videoEmbedUrl = `${host}/video-embed/${claimData.name}/${claimData.claimId}`;
     // card type tags
-    metaTags.push({property: 'og:type', content: 'video.other'});
-    metaTags.push({property: 'twitter:card', content: 'player'});
-    metaTags.push({property: 'twitter:player', content: videoEmbedUrl});
-    metaTags.push({property: 'twitter:player:width', content: 600});
-    metaTags.push({property: 'twitter:text:player_width', content: 600});
-    metaTags.push({property: 'twitter:player:height', content: 350});
-    metaTags.push({property: 'twitter:player:stream', content: source});
-    metaTags.push({property: 'twitter:player:stream:content_type', content: contentType});
+    metaTags['og:type'] = 'video.other';
+    metaTags['twitter:card'] = 'player';
+    metaTags['twitter:player'] = videoEmbedUrl;
+    metaTags['twitter:player:width'] = 600;
+    metaTags['twitter:text:player_width'] = 600;
+    metaTags['twitter:player:height'] = 350;
+    metaTags['twitter:player:stream'] = serveUrl;
+    metaTags['twitter:player:stream:content_type'] = contentType;
     // video tags
-    metaTags.push({property: 'og:video', content: source});
-    metaTags.push({property: 'og:video:secure_url', content: source});
-    metaTags.push({property: 'og:video:type', content: contentType});
+    metaTags['og:video'] = serveUrl;
+    metaTags['og:video:secure_url'] = serveUrl;
+    metaTags['og:video:type'] = contentType;
     // image tags
-    metaTags.push({property: 'og:image', content: ogThumbnail});
-    metaTags.push({property: 'og:image:width', content: 600});
-    metaTags.push({property: 'og:image:height', content: 315});
-    metaTags.push({property: 'og:image:type', content: ogThumbnailContentType});
-    metaTags.push({property: 'twitter:image', content: ogThumbnail});
+    metaTags['og:image'] = ogThumbnail;
+    metaTags['og:image:width'] = 600;
+    metaTags['og:image:height'] = 315;
+    metaTags['og:image:type'] = ogThumbnailContentType;
+    metaTags['twitter:image'] = ogThumbnail;
   } else {
     // card type tags
-    metaTags.push({property: 'og:type', content: 'article'});
-    metaTags.push({property: 'twitter:card', content: 'summary_large_image'});
+    metaTags['og:type'] = 'article';
+    metaTags['twitter:card'] = 'summary_large_image';
     // image tags
-    metaTags.push({property: 'og:image', content: source});
-    metaTags.push({property: 'og:image', content: source});
-    metaTags.push({property: 'og:image:width', content: 600});
-    metaTags.push({property: 'og:image:height', content: 315});
-    metaTags.push({property: 'og:image:type', content: contentType});
-    metaTags.push({property: 'twitter:image', content: source});
+    metaTags['og:image'] = serveUrl;
+    metaTags['og:image'] = serveUrl;
+    metaTags['og:image:width'] = 600;
+    metaTags['og:image:height'] = 315;
+    metaTags['og:image:type'] = contentType;
+    metaTags['twitter:image'] = serveUrl;
   }
-  return metaTags;
+  return createMetaTagsArray(metaTags);
 };
 
 export default createAssetMetaTags;
diff --git a/client/src/utils/createBasicMetaTags.js b/client/src/utils/createBasicMetaTags.js
index a6233615..090d796d 100644
--- a/client/src/utils/createBasicMetaTags.js
+++ b/client/src/utils/createBasicMetaTags.js
@@ -1,5 +1,6 @@
 import siteConfig from '@config/siteConfig.json';
 import determineContentTypeFromExtension from './determineContentTypeFromExtension.js';
+import createMetaTagsArray from './createMetaTagsArray';
 
 const {
   details: {
@@ -14,29 +15,30 @@ const {
 } = siteConfig;
 
 const createBasicMetaTags = () => {
-  return [
+  const metaTags = {
     // page details
-    {property: 'og:title', content: title},
-    {property: 'twitter:title', content: title},
-    {property: 'og:description', content: description},
-    {property: 'twitter:description', content: description},
+    'og:title'           : title,
+    'twitter:title'      : title,
+    'og:description'     : description,
+    'twitter:description': description,
     // url
-    {property: 'og:url', content: host},
+    'og:url'             : host,
     // site id
-    {property: 'og:site_name', content: title},
-    {property: 'twitter:site', content: twitter},
-    {property: 'fb:app_id', content: '1371961932852223'},
+    'og:site_name'       : title,
+    'twitter:site'       : twitter,
+    'fb:app_id'          : '1371961932852223',
     // card type
-    {property: 'og:type', content: 'article'},
-    {property: 'twitter:card', content: 'summary_large_image'},
+    'og:type'            : 'article',
+    'twitter:card'       : 'summary_large_image',
     // image
-    {property: 'og:image', content: thumbnail},
-    {property: 'og:image:width', content: 600},
-    {property: 'og:image:height', content: 315},
-    {property: 'og:image:type', content: determineContentTypeFromExtension(thumbnail)},
-    {property: 'twitter:image', content: thumbnail},
-    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
-  ];
+    'og:image'           : thumbnail,
+    'og:image:width'     : 600,
+    'og:image:height'    : 315,
+    'og:image:type'      : determineContentTypeFromExtension(thumbnail),
+    'twitter:image'      : thumbnail,
+    'twitter:image:alt'  : 'Spee.ch Logo',
+  };
+  return createMetaTagsArray(metaTags);
 };
 
 export default createBasicMetaTags;
diff --git a/client/src/utils/createChannelMetaTags.js b/client/src/utils/createChannelMetaTags.js
index a74548b4..fea67ec5 100644
--- a/client/src/utils/createChannelMetaTags.js
+++ b/client/src/utils/createChannelMetaTags.js
@@ -1,5 +1,6 @@
 import siteConfig from '@config/siteConfig.json';
 import determineContentTypeFromExtension from './determineContentTypeFromExtension';
+import createMetaTagsArray from './createMetaTagsArray';
 
 const {
   details: {
@@ -14,29 +15,30 @@ const {
 
 export const createChannelMetaTags = (channel) => {
   const { name, longId } = channel;
-  return [
+  const metaTags = {
     // page detail tags
-    {property: 'og:title', content: `${name} on ${siteTitle}`},
-    {property: 'twitter:title', content: `${name} on ${siteTitle}`},
-    {property: 'og:description', content: `${name}, a channel on ${siteTitle}`},
-    {property: 'twitter:description', content: `${name}, a channel on ${siteTitle}`},
+    'og:title'           : `${name} on ${siteTitle}`,
+    'twitter:title'      : `${name} on ${siteTitle}`,
+    'og:description'     : `${name}, a channel on ${siteTitle}`,
+    'twitter:description': `${name}, a channel on ${siteTitle}`,
     // url
-    {property: 'og:url', content: `${host}/${name}:${longId}`},
+    'og:url'             : `${host}/${name}:${longId}`,
     // site info
-    {property: 'og:site_name', content: siteTitle},
-    {property: 'twitter:site', content: twitter},
-    {property: 'fb:app_id', content: '1371961932852223'},
+    'og:site_name'       : siteTitle,
+    'twitter:site'       : twitter,
+    'fb:app_id'          : '1371961932852223',
     // card type tags
-    {property: 'og:type', content: 'article'},
-    {property: 'twitter:card', content: 'summary_large_image'},
+    'og:type'            : 'article',
+    'twitter:card'       : 'summary_large_image',
     // image tags
-    {property: 'og:image', content: defaultThumbnail},
-    {property: 'og:image:width', content: 600},
-    {property: 'og:image:height', content: 315},
-    {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
-    {property: 'twitter:image', content: defaultThumbnail},
-    {property: 'twitter:image:alt', content: 'Spee.ch Logo'},
-  ];
+    'og:image'           : defaultThumbnail,
+    'og:image:width'     : 600,
+    'og:image:height'    : 315,
+    'og:image:type'      : determineContentTypeFromExtension(defaultThumbnail),
+    'twitter:image'      : defaultThumbnail,
+    'twitter:image:alt'  : 'Spee.ch Logo',
+  };
+  return createMetaTagsArray(metaTags);
 };
 
 export default createChannelMetaTags;
diff --git a/client/src/utils/createMetaTagsArray.js b/client/src/utils/createMetaTagsArray.js
new file mode 100644
index 00000000..e4052724
--- /dev/null
+++ b/client/src/utils/createMetaTagsArray.js
@@ -0,0 +1,14 @@
+const createMetaTagsArray = (metaTagsObject) => {
+  let metaTagsArray = [];
+  for (let key in metaTagsObject) {
+    if (metaTagsObject.hasOwnProperty(key)) {
+      metaTagsArray.push({
+        property: key,
+        content : metaTagsObject[key],
+      });
+    }
+  }
+  return metaTagsArray;
+};
+
+export default createMetaTagsArray;