fix: meta tags improvement #9 (#139)

* fix: meta tags improvement #9 * fix: backward compatibility fallback for robots #9
TYPO3-Headless · Jul 26, 2021 · 376fd09 · 376fd09
1 parent 848dfe4
commit 376fd09
Showing 1 changed file with 114 additions and 31 deletions.
diff --git a/lib/templates/mixins/seo/getMeta.js b/lib/templates/mixins/seo/getMeta.js
@@ -1,13 +1,21 @@
 export default {
   methods: {
     getMeta() {
-      const pageData = this.page.page
       const baseUrl = this.$typo3.options.baseURL
-      const meta = {
-        title:
-          pageData.meta.title ||
-          pageData.title ||
-          this.$nuxt.$options.head.title,
+      const { meta, socialMedia, title } = this.page.page
+      const { canonical, robots } = meta
+      const {
+        ogTitle,
+        ogDescription,
+        ogImage,
+        twitterTitle,
+        twitterDescription,
+        twitterCard,
+        twitterImage
+      } = socialMedia
+
+      const data = {
+        title: meta.title || title || this.$nuxt.$options.head.title,
         htmlAttrs: {
           lang: this.$typo3.i18n.locale
         },
@@ -18,41 +26,116 @@ export default {
             content: 'TYPO3 CMS x TYPO3PWA'
           },
           {
-            hid: 'og:title',
-            name: 'og:title',
+            hid: 'description',
+            name: 'description',
+            content: meta.description
+          },
+          {
+            hid: 'robots',
+            name: 'robots',
+            content: Object.keys(robots || {})
+              .filter(key => robots[key])
+              .join(', ')
+          },
+
+          /**
+           * Twitter
+           */
+          {
+            hid: 'twitter:title',
+            name: 'twitter:title',
             content:
-              pageData.meta.title ||
-              pageData.title ||
+              twitterTitle ||
+              meta.title ||
+              title ||
               this.$nuxt.$options.head.title
+          },
+          {
+            hid: 'twitter:description',
+            name: 'twitter:description',
+            content: twitterDescription
+          },
+          {
+            hid: 'twitter:card',
+            name: 'twitter:card',
+            content: twitterCard
+          },
+
+          /**
+           * Open Graph
+           */
+          {
+            hid: 'og:title',
+            property: 'og:title',
+            content:
+              ogTitle || meta.title || title || this.$nuxt.$options.head.title
+          },
+          {
+            hid: 'og:description',
+            name: 'og:description',
+            content: ogDescription || meta.description
+          },
+          {
+            hid: 'og:type',
+            property: 'og:type',
+            content: 'website'
           }
-        ]
+        ],
+        link: []
       }
 
-      if (pageData.meta.description.length) {
-        meta.meta.push({
-          hid: 'description',
-          name: 'description',
-          content: pageData.meta.description
+      /**
+       * Twitter Image
+       */
+      twitterImage.map(image =>
+        data.meta.push({
+          hid: `twitter:image:${image.properties.uidLocal}`,
+          name: 'twitter:image',
+          content: image.publicUrl
         })
-        meta.meta.push({
-          hid: 'og:description',
-          name: 'og:description',
-          content: pageData.meta.description
+      )
+
+      /**
+       * Open Graph Image
+       */
+      ogImage.forEach(image =>
+        data.meta.push({
+          hid: `og:image:${image.properties.uidLocal}`,
+          name: 'og:image',
+          content: image.publicUrl
         })
-      }
+      )
 
-      if (pageData.meta.canonical && pageData.meta.canonical.url) {
-        meta.link = [
-          {
-            rel: 'canonical',
-            href: `${pageData.meta.canonical.type !== 'url' ? baseUrl : ''}${
-              pageData.meta.canonical.url
-            }`
-          }
-        ]
+      /**
+       * Canonical
+       */
+      if (canonical && canonical.url) {
+        const url = `${canonical.type !== 'url' ? baseUrl : ''}${canonical.url}`
+
+        data.link.push({
+          rel: 'canonical',
+          href: url
+        })
+
+        data.meta.push({
+          hid: 'og:url',
+          property: 'og:url',
+          content: url
+        })
       }
 
-      return meta
+      /**
+       * Filter empty meta tags
+       */
+      data.meta = data.meta.filter(
+        ({ content }) =>
+          (!!content &&
+            Object.prototype.hasOwnProperty.call(content, 'length') &&
+            content.length > 0) ||
+          (!!content && Object.keys(content).length > 0)
+      )
+
+      return data
     }
   }
 }