added image size to homepage and channel

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') {
+  if (determineMediaType(contentType) === VIDEO) {
-    metaTags.push({property: 'og:video', content: source});
+    // card type tags
-    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});
@@ -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});
+    // card type tags
-    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'});
+    // 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;
 };