updated SEO component to show og image on homepage

client/build/components/PageLayout/index.js

@@ -47,7 +47,9 @@ function (_React$Component) {
         className: 'page-layout'
       }, _react.default.createElement(_SEO.default, {
         pageTitle: this.props.pageTitle,
-        pageUri: this.props.pageUri
+        pageUri: this.props.pageUri,
+        asset: this.props.asset,
+        channel: this.props.channel
       }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
         className: 'content'
       }, this.props.children));

client/build/containers/SEO/view.js

@@ -65,7 +65,16 @@ function (_React$Component) {
       var pageTitle = this.props.pageTitle; // create page title, tags, and canonical link
 
       pageTitle = (0, _pageTitle.createPageTitle)(siteTitle, pageTitle);
-      var metaTags = (0, _metaTags.createMetaTags)(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail);
+      var metaTags = (0, _metaTags.createMetaTags)({
+        siteDescription: siteDescription,
+        siteHost: siteHost,
+        siteTitle: siteTitle,
+        siteTwitter: siteTwitter,
+        asset: asset,
+        channel: channel,
+        defaultDescription: defaultDescription,
+        defaultThumbnail: defaultThumbnail
+      });
       var canonicalLink = (0, _canonicalLink.createCanonicalLink)(asset, channel, pageUri, siteHost); // render results
 
       return _react.default.createElement(_reactHelmet.default, {

client/build/utils/metaTags.js

@@ -31,7 +31,12 @@ var determineOgThumbnailContentType = function determineOgThumbnailContentType(t
   return '';
 };
 
-var createBasicMetaTags = function createBasicMetaTags(siteHost, siteDescription, siteTitle, siteTwitter) {
+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
@@ -49,11 +54,21 @@ var createBasicMetaTags = function createBasicMetaTags(siteHost, siteDescription
     content: siteTwitter
   }, {
     property: 'twitter:card',
-    content: 'summary'
+    content: 'summary_large_image'
+  }, {
+    property: 'og:image',
+    content: defaultThumbnail
+  }, {
+    property: 'og:image:type',
+    content: 'image/jpeg'
   }];
 };
 
-var createChannelMetaTags = function createChannelMetaTags(siteTitle, siteHost, siteTwitter, channel) {
+var createChannelMetaTags = function createChannelMetaTags(_ref2) {
+  var siteHost = _ref2.siteHost,
+      siteTitle = _ref2.siteTitle,
+      siteTwitter = _ref2.siteTwitter,
+      channel = _ref2.channel;
   var name = channel.name,
       longId = channel.longId;
   return [{
@@ -77,7 +92,13 @@ var createChannelMetaTags = function createChannelMetaTags(siteTitle, siteHost,
   }];
 };
 
-var createAssetMetaTags = function createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, 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 embedUrl = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name);
@@ -185,19 +206,43 @@ var createAssetMetaTags = function createAssetMetaTags(siteHost, siteTitle, site
   return metaTags;
 };
 
-var createMetaTags = function createMetaTags(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail) {
-  if (asset) {
-    return createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail);
-  }
+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;
 
-  ;
+  if (asset) {
+    return createAssetMetaTags({
+      siteHost: siteHost,
+      siteTitle: siteTitle,
+      siteTwitter: siteTwitter,
+      asset: asset,
+      defaultDescription: defaultDescription,
+      defaultThumbnail: defaultThumbnail
+    });
+  }
 
   if (channel) {
-    return createChannelMetaTags(siteHost, siteTitle, siteTwitter, channel);
+    return createChannelMetaTags({
+      siteHost: siteHost,
+      siteTitle: siteTitle,
+      siteTwitter: siteTwitter,
+      channel: channel
+    });
   }
 
-  ;
-  return createBasicMetaTags(siteDescription, siteHost, siteTitle, siteTwitter);
+  return createBasicMetaTags({
+    siteDescription: siteDescription,
+    siteHost: siteHost,
+    siteTitle: siteTitle,
+    siteTwitter: siteTwitter,
+    defaultThumbnail: defaultThumbnail
+  });
 };
 
 exports.createMetaTags = createMetaTags;

client/src/components/PageLayout/index.jsx

@@ -7,7 +7,12 @@ class PageLayout extends React.Component {
   render () {
     return (
       <div className={'page-layout'}>
-        <SEO pageTitle={this.props.pageTitle} pageUri={this.props.pageUri} />
+        <SEO
+          pageTitle={this.props.pageTitle}
+          pageUri={this.props.pageUri}
+          asset={this.props.asset}
+          channel={this.props.channel}
+        />
         <NavBar />
         <div className={'content'}>
           {this.props.children}

client/src/containers/PublishStatus/view.jsx

@@ -10,66 +10,66 @@ class PublishStatus extends React.Component {
     return (
       <div className={'publish-status'}>
         {status === publishStates.LOAD_START &&
-        <div className={'status'}>
-          <Row>
-            <p>le is loading to server</p>
-          </Row>
-          <Row>
-            <p className={'text--secondary'}>0%</p>
-          </Row>
-        </div>
+          <div className={'status'}>
+            <Row>
+              <p>le is loading to server</p>
+            </Row>
+            <Row>
+              <p className={'text--secondary'}>0%</p>
+            </Row>
+          </div>
         }
         {status === publishStates.LOADING &&
-        <div className={'status'}>
-          <Row>
-            <p>File is loading to server</p>
-          </Row>
-          <Row>
-            <p className={'text--secondary'}>{message}</p>
-          </Row>
-        </div>
+          <div className={'status'}>
+            <Row>
+              <p>File is loading to server</p>
+            </Row>
+            <Row>
+              <p className={'text--secondary'}>{message}</p>
+            </Row>
+          </div>
         }
         {status === publishStates.PUBLISHING &&
-        <div className={'status'}>
-          <Row>
-            <p>Upload complete.  Your file is now being published on the blockchain...</p>
-          </Row>
-          <Row>
-            <ProgressBar size={12} />
-          </Row>
-          <Row>
-            <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
-          </Row>
-        </div>
+          <div className={'status'}>
+            <Row>
+              <p>Upload complete.  Your file is now being published on the blockchain...</p>
+            </Row>
+            <Row>
+              <ProgressBar size={12} />
+            </Row>
+            <Row>
+              <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
+            </Row>
+          </div>
         }
         {status === publishStates.SUCCESS &&
-        <div className={'status'}>
-          <Row>
-            <p>Your publish is complete! You are being redirected to it now.</p>
-          </Row>
-          <Row>
-            <p>If you are not automatically redirected, <a className='link--primary' target='_blank' href={message}>click here.</a></p>
-          </Row>
-        </div>
+          <div className={'status'}>
+            <Row>
+              <p>Your publish is complete! You are being redirected to it now.</p>
+            </Row>
+            <Row>
+              <p>If you are not automatically redirected, <a className='link--primary' target='_blank' href={message}>click here.</a></p>
+            </Row>
+          </div>
         }
         {status === publishStates.FAILED &&
-        <div className={'status'}>
-          <Row>
-            <p>Something went wrong...</p>
-          </Row>
-          <Row>
-            <p className={'text--strong'}>{message}</p>
-          </Row>
-          <Row>
-            <p>For help, post the above error text in the #speech channel on the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>lbry discord</a></p>
-          </Row>
-          <Row>
-            <ButtonSecondary
-              value={'Reset'}
-              onClickHandler={clearFile}
-            />
-          </Row>
-        </div>
+          <div className={'status'}>
+            <Row>
+              <p>Something went wrong...</p>
+            </Row>
+            <Row>
+              <p className={'text--strong'}>{message}</p>
+            </Row>
+            <Row>
+              <p>For help, post the above error text in the #speech channel on the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>lbry discord</a></p>
+            </Row>
+            <Row>
+              <ButtonSecondary
+                value={'Reset'}
+                onClickHandler={clearFile}
+              />
+            </Row>
+          </div>
         }
       </div>
     );

client/src/containers/SEO/view.jsx

@@ -15,7 +15,16 @@ class SEO extends React.Component {
     let { pageTitle } = this.props;
     // create page title, tags, and canonical link
     pageTitle = createPageTitle(siteTitle, pageTitle);
-    const metaTags = createMetaTags(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail);
+    const metaTags = createMetaTags({
+      siteDescription,
+      siteHost,
+      siteTitle,
+      siteTwitter,
+      asset,
+      channel,
+      defaultDescription,
+      defaultThumbnail,
+    });
     const canonicalLink = createCanonicalLink(asset, channel, pageUri, siteHost);
     // render results
     return (

client/src/pages/ShowAssetLite/view.jsx

@@ -12,8 +12,8 @@ const AssetLiteFooter = ({ name, claimId }) => {
         <Link className='link--primary' to={`/${claimId}/${name}`}> hosted on spee.ch</Link> via the <a  className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
       </p>
     </SpaceAround>
-  )
-}
+  );
+};
 
 class ShowLite extends React.Component {
   render () {

client/src/utils/metaTags.js

@@ -18,18 +18,20 @@ const determineOgThumbnailContentType = (thumbnail) => {
   return '';
 };
 
-const createBasicMetaTags = (siteHost, siteDescription, siteTitle, siteTwitter) => {
+const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
   return [
     {property: 'og:title', content: siteTitle},
     {property: 'og:url', content: siteHost},
     {property: 'og:site_name', content: siteTitle},
     {property: 'og:description', content: siteDescription},
     {property: 'twitter:site', content: siteTwitter},
-    {property: 'twitter:card', content: 'summary'},
+    {property: 'twitter:card', content: 'summary_large_image'},
+    {property: 'og:image', content: defaultThumbnail},
+    {property: 'og:image:type', content: 'image/jpeg'},
   ];
 };
 
-const createChannelMetaTags = (siteTitle, siteHost, siteTwitter, channel) => {
+const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel}) => {
   const { name, longId } = channel;
   return [
     {property: 'og:title', content: `${name} on ${siteTitle}`},
@@ -41,7 +43,7 @@ const createChannelMetaTags = (siteTitle, siteHost, siteTwitter, channel) => {
   ];
 };
 
-const createAssetMetaTags = (siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail) => {
+const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => {
   const { claimData } = asset;
   const { contentType } = claimData;
   const embedUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`;
@@ -83,12 +85,30 @@ const createAssetMetaTags = (siteHost, siteTitle, siteTwitter, asset, defaultDes
   return metaTags;
 };
 
-export const createMetaTags = (siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail) => {
+export const createMetaTags = ({ siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail }) => {
   if (asset) {
-    return createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail);
-  };
+    return createAssetMetaTags({
+      siteHost,
+      siteTitle,
+      siteTwitter,
+      asset,
+      defaultDescription,
+      defaultThumbnail,
+    });
+  }
   if (channel) {
-    return createChannelMetaTags(siteHost, siteTitle, siteTwitter, channel);
-  };
-  return createBasicMetaTags(siteDescription, siteHost, siteTitle, siteTwitter);
+    return createChannelMetaTags({
+      siteHost,
+      siteTitle,
+      siteTwitter,
+      channel,
+    });
+  }
+  return createBasicMetaTags({
+    siteDescription,
+    siteHost,
+    siteTitle,
+    siteTwitter,
+    defaultThumbnail,
+  });
 };