From 286b82b3ce02fb5bb1b370b0d1d0fb094fa3c01a Mon Sep 17 00:00:00 2001
From: Chirag <103994754+chiragnotionforms@users.noreply.github.com>
Date: Thu, 22 Dec 2022 16:25:17 +0530
Subject: [PATCH] Clean metaInfo SEO (#40)

* Clean metaInfo SEO

* fix path

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 resources/js/base.js                          | 27 ++-----------------
 resources/js/components/App.vue               | 27 +++++--------------
 resources/js/mixins/seo-meta.js               | 22 +++++++++++++++
 resources/js/pages/auth/login.vue             |  7 +++--
 resources/js/pages/auth/password/email.vue    |  7 ++---
 resources/js/pages/auth/password/reset.vue    |  7 ++---
 resources/js/pages/auth/register.vue          |  7 +++--
 .../js/pages/auth/verification/resend.vue     |  9 +++----
 .../js/pages/auth/verification/verify.vue     |  9 +++----
 resources/js/pages/forms/create-guest.vue     |  8 +++---
 resources/js/pages/forms/create.vue           |  8 +++---
 resources/js/pages/forms/edit.vue             | 15 +++++------
 resources/js/pages/forms/show/analytics.vue   | 12 +++++----
 resources/js/pages/forms/show/index.vue       |  9 +++----
 resources/js/pages/forms/show/share.vue       | 12 +++++----
 resources/js/pages/forms/show/submissions.vue | 12 +++++----
 .../js/pages/legal-help/privacy-policy.vue    |  9 +++----
 .../js/pages/legal-help/terms-conditions.vue  |  9 +++----
 resources/js/pages/settings/account.vue       |  7 +++--
 resources/js/pages/settings/admin.vue         |  7 +++--
 resources/js/pages/settings/billing.vue       |  7 +++--
 resources/js/pages/settings/password.vue      |  7 +++--
 resources/js/pages/settings/profile.vue       |  7 +++--
 resources/js/pages/settings/workspace.vue     |  8 +++---
 resources/js/pages/subscriptions/error.vue    | 10 +++----
 resources/js/pages/subscriptions/success.vue  |  7 +++--
 resources/js/pages/welcome.vue                |  8 +++---
 27 files changed, 128 insertions(+), 156 deletions(-)
 create mode 100644 resources/js/mixins/seo-meta.js

diff --git a/resources/js/base.js b/resources/js/base.js
index 19f5aec..42a09e6 100644
--- a/resources/js/base.js
+++ b/resources/js/base.js
@@ -4,36 +4,13 @@
 import debounce from 'debounce'
 
 export default {
+
   computed: {
     $crisp () {
       return window.$crisp
     }
   },
-
-  metaInfo () {
-    const info = {
-      meta: this.metaTags ?? []
-    }
-    if (this.metaTitle) {
-      info.title = this.metaTitle
-      info.meta = [
-        ...info.meta,
-        { vmid: 'og:title', property: 'og:title', content: this.metaTitle },
-        { vmid: 'twitter:title', property: 'twitter:title', content: this.metaTitle }
-      ]
-    }
-    if (this.metaDescription) {
-      info.meta = [
-        ...info.meta,
-        { vmid: 'description', name: 'description', content: this.metaDescription },
-        { vmid: 'og:description', property: 'og:description', content: this.metaDescription },
-        { vmid: 'twitter:description', property: 'twitter:description', content: this.metaDescription }
-      ]
-    }
-
-    return info
-  },
-
+  
   methods: {
     /**
      * Creates a debounced function that delays invoking a callback.
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 6f063c3..bbed52f 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -45,6 +45,7 @@ import Amplitude from './service/Amplitude'
 import Crisp from './service/Crisp'
 import StopImpersonation from './pages/StopImpersonation'
 import Notifications from "./common/Notifications"
+import SeoMeta from '../mixins/seo-meta'
 
 // Load layout components dynamically.
 const requireContext = require.context('~/layouts', false, /.*\.vue$/)
@@ -70,7 +71,11 @@ export default {
     Loading
   },
 
+  mixins: [SeoMeta],
+
   data: () => ({
+    metaTitle: 'OpnForm',
+    metaDescription: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
     layout: null,
     defaultLayout: 'default',
     announcement: false,
@@ -82,27 +87,7 @@ export default {
       confirmationCancel: null
     }
   }),
-
-  metaInfo () {
-    const { appName } = window.config
-    const description = "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form."
-
-    return {
-      title: appName,
-      titleTemplate: `%s · ${appName}`,
-      meta: [
-        { vmid: 'description', name: 'description', content: description },
-        { vmid: 'og:title', property: 'og:title', content: appName },
-        { vmid: 'og:description', property: 'og:description', content: description },
-        { vmid: 'og:image', property: 'og:image', content: this.asset('img/social-preview.jpg') },
-        { vmid: 'twitter:title', property: 'twitter:title', content: appName },
-        { vmid: 'twitter:description', property: 'twitter:description', content: description },
-        { vmid: 'twitter:image', property: 'twitter:image', content: this.asset('img/social-preview.jpg') },
-        { vmid: 'twitter:card', property: 'twitter:card', content: 'summary_large_image' }
-      ]
-    }
-  },
-
+  
   mounted () {
     this.$loading = this.$refs.loading
   },
diff --git a/resources/js/mixins/seo-meta.js b/resources/js/mixins/seo-meta.js
new file mode 100644
index 0000000..6020596
--- /dev/null
+++ b/resources/js/mixins/seo-meta.js
@@ -0,0 +1,22 @@
+export default {
+  metaInfo () {
+    const title = this.metaTitle ?? 'OpnForm'
+    const description = this.metaDescription ?? "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form."
+    const image = this.metaImage ?? this.asset('img/social-preview.jpg')
+
+    return {
+      title: title,
+      titleTemplate: '%s · OpnForm',
+      meta: [
+        ...(this.metaTags ?? []),
+        { vmid: 'og:title', property: 'og:title', content: title },
+        { vmid: 'twitter:title', property: 'twitter:title', content: title },
+        { vmid: 'description', name: 'description', content: description },
+        { vmid: 'og:description', property: 'og:description', content: description },
+        { vmid: 'twitter:description', property: 'twitter:description', content: description },
+        { vmid: 'twitter:image', property: 'twitter:image', content: image },
+        { vmid: 'og:image', property: 'og:image', content: image }
+      ]
+    }
+  }
+}
diff --git a/resources/js/pages/auth/login.vue b/resources/js/pages/auth/login.vue
index 8bae1fe..94ac204 100644
--- a/resources/js/pages/auth/login.vue
+++ b/resources/js/pages/auth/login.vue
@@ -59,6 +59,7 @@
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
 import Testimonials from '../../components/pages/welcome/Testimonials'
 import LoginForm from './components/LoginForm'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: {
@@ -69,12 +70,10 @@ export default {
 
   middleware: 'guest',
 
-  metaInfo () {
-    return { title: this.$t('login') }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
-
+    metaTitle: 'Login',
   }),
 
   methods: {
diff --git a/resources/js/pages/auth/password/email.vue b/resources/js/pages/auth/password/email.vue
index d1e743b..02a327f 100644
--- a/resources/js/pages/auth/password/email.vue
+++ b/resources/js/pages/auth/password/email.vue
@@ -25,17 +25,18 @@
 <script>
 import Form from 'vform'
 import OpenFormFooter from '../../../components/pages/OpenFormFooter'
+import SeoMeta from '../../../mixins/seo-meta'
 
 export default {
   middleware: 'guest',
   components: {
     OpenFormFooter
   },
-  metaInfo () {
-    return { title: this.$t('reset_password') }
-  },
+
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Reset Password',
     status: '',
     form: new Form({
       email: ''
diff --git a/resources/js/pages/auth/password/reset.vue b/resources/js/pages/auth/password/reset.vue
index c5481a8..0849630 100644
--- a/resources/js/pages/auth/password/reset.vue
+++ b/resources/js/pages/auth/password/reset.vue
@@ -35,17 +35,18 @@
 <script>
 import Form from 'vform'
 import OpenFormFooter from '../../../components/pages/OpenFormFooter'
+import SeoMeta from '../../../mixins/seo-meta'
 
 export default {
   middleware: 'guest',
   components: {
     OpenFormFooter
   },
-  metaInfo () {
-    return { title: this.$t('reset_password') }
-  },
+
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Reset Password',
     status: '',
     form: new Form({
       token: '',
diff --git a/resources/js/pages/auth/register.vue b/resources/js/pages/auth/register.vue
index 6f5efdb..c383975 100644
--- a/resources/js/pages/auth/register.vue
+++ b/resources/js/pages/auth/register.vue
@@ -59,6 +59,7 @@
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
 import Testimonials from '../../components/pages/welcome/Testimonials'
 import RegisterForm from './components/RegisterForm'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: {
@@ -69,12 +70,10 @@ export default {
 
   middleware: 'guest',
 
-  metaInfo () {
-    return { title: this.$t('register') }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
-
+    metaTitle: 'Register',
   }),
 
   computed: {
diff --git a/resources/js/pages/auth/verification/resend.vue b/resources/js/pages/auth/verification/resend.vue
index b33cbdf..fc3f433 100644
--- a/resources/js/pages/auth/verification/resend.vue
+++ b/resources/js/pages/auth/verification/resend.vue
@@ -25,15 +25,14 @@
 
 <script>
 import Form from 'vform'
+import SeoMeta from '../../../mixins/seo-meta'
 
 export default {
   middleware: 'guest',
-
-  metaInfo () {
-    return { title: this.$t('verify_email') }
-  },
-
+  mixins: [SeoMeta],
+  
   data: () => ({
+    metaTitle: 'Verify Email',
     status: '',
     form: new Form({
       email: ''
diff --git a/resources/js/pages/auth/verification/verify.vue b/resources/js/pages/auth/verification/verify.vue
index 91e4174..d92c2f9 100644
--- a/resources/js/pages/auth/verification/verify.vue
+++ b/resources/js/pages/auth/verification/verify.vue
@@ -28,6 +28,7 @@
 
 <script>
 import axios from 'axios'
+import SeoMeta from '../../../mixins/seo-meta'
 
 const qs = (params) => Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
 
@@ -47,12 +48,10 @@ export default {
   },
 
   middleware: 'guest',
-
-  metaInfo () {
-    return { title: this.$t('verify_email') }
-  },
-
+  mixins: [SeoMeta],
+  
   data: () => ({
+    metaTitle: 'Verify Email',
     error: '',
     success: ''
   })
diff --git a/resources/js/pages/forms/create-guest.vue b/resources/js/pages/forms/create-guest.vue
index caa7d5c..3b8ccae 100644
--- a/resources/js/pages/forms/create-guest.vue
+++ b/resources/js/pages/forms/create-guest.vue
@@ -29,6 +29,7 @@ import Form from 'vform'
 import {mapState, mapActions} from 'vuex'
 import QuickRegister from '../auth/components/QuickRegister'
 import initForm from "../../mixins/form_editor/initForm"
+import SeoMeta from '../../mixins/seo-meta'
 
 const loadTemplates = function () {
   store.commit('open/templates/startLoading')
@@ -39,17 +40,13 @@ const loadTemplates = function () {
 
 export default {
   name: 'CreateFormGuest',
-  mixins: [initForm],
+  mixins: [initForm, SeoMeta],
   components: {
     QuickRegister
   },
 
   middleware: 'guest',
 
-  metaInfo() {
-    return {title: 'Create a new Form as Guest'}
-  },
-
   beforeRouteEnter(to, from, next) {
     loadTemplates()
     next()
@@ -57,6 +54,7 @@ export default {
 
   data() {
     return {
+      metaTitle: 'Create a new Form as Guest',
       stateReady: false,
       loading: false,
       error: '',
diff --git a/resources/js/pages/forms/create.vue b/resources/js/pages/forms/create.vue
index 11cd77b..c3750fc 100644
--- a/resources/js/pages/forms/create.vue
+++ b/resources/js/pages/forms/create.vue
@@ -22,6 +22,7 @@ import store from '~/store'
 import Form from 'vform'
 import {mapState, mapActions} from 'vuex'
 import initForm from "../../mixins/form_editor/initForm";
+import SeoMeta from '../../mixins/seo-meta'
 
 const loadTemplates = function () {
   store.commit('open/templates/startLoading')
@@ -33,13 +34,9 @@ const loadTemplates = function () {
 export default {
   name: 'CreateForm',
 
-  mixins: [initForm],
+  mixins: [initForm, SeoMeta],
   components: {},
 
-  metaInfo() {
-    return {title: 'Create a new Form'}
-  },
-
   beforeRouteEnter(to, from, next) {
     loadTemplates()
     next()
@@ -49,6 +46,7 @@ export default {
 
   data() {
     return {
+      metaTitle: 'Create a new Form',
       stateReady: false,
       loading: false,
       error: '',
diff --git a/resources/js/pages/forms/edit.vue b/resources/js/pages/forms/edit.vue
index 04fdb4f..4b46656 100644
--- a/resources/js/pages/forms/edit.vue
+++ b/resources/js/pages/forms/edit.vue
@@ -20,10 +20,9 @@
 import axios from 'axios'
 import store from '~/store'
 import Breadcrumb from '../../components/common/Breadcrumb'
-
 import Form from 'vform'
-
 import { mapState } from 'vuex'
+import SeoMeta from '../../mixins/seo-meta'
 
 const loadForms = function () {
   store.commit('open/forms/startLoading')
@@ -43,6 +42,7 @@ export default {
     next()
   },
   middleware: 'auth',
+  mixins: [SeoMeta],
 
   data () {
     return {
@@ -70,7 +70,10 @@ export default {
     },
     pageLoaded () {
       return !this.loading && this.updatedForm !== null
-    }
+    },
+    metaTitle () {
+      return 'Edit ' + (this.form ? this.form.title : 'Your Form')
+    },
   },
 
   watch: {
@@ -94,11 +97,7 @@ export default {
       this.updatedForm = new Form(this.form)
     }
   },
-
-  metaInfo () {
-    return { title: 'Edit ' + (this.form ? this.form.title : 'Your Form') }
-  },
-
+  
   methods: {
     /**
      * Compute max height of editor
diff --git a/resources/js/pages/forms/show/analytics.vue b/resources/js/pages/forms/show/analytics.vue
index b1b2f48..e45b210 100644
--- a/resources/js/pages/forms/show/analytics.vue
+++ b/resources/js/pages/forms/show/analytics.vue
@@ -9,23 +9,25 @@
 
 <script>
 import FormStats from '../../../components/open/forms/components/FormStats'
+import SeoMeta from '../../../mixins/seo-meta'
 
 export default {
   components: {FormStats},
   props: {
     form: { type: Object, required: true }
   },
-
-  metaInfo() {
-    return {title: (this.form) ? 'Form Analytics - '+this.form.title : 'Form Analytics'}
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
   }),
 
   mounted() {},
 
-  computed: {},
+  computed: {
+    metaTitle() {
+      return (this.form) ? 'Form Analytics - '+this.form.title : 'Form Analytics'
+    },
+  },
 
   methods: {
     
diff --git a/resources/js/pages/forms/show/index.vue b/resources/js/pages/forms/show/index.vue
index 1fdfd62..4fec702 100644
--- a/resources/js/pages/forms/show/index.vue
+++ b/resources/js/pages/forms/show/index.vue
@@ -107,6 +107,7 @@ import {mapGetters, mapState} from 'vuex'
 import ProTag from '../../../components/common/ProTag'
 import VButton from "../../../components/common/Button";
 import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu'
+import SeoMeta from '../../../mixins/seo-meta'
 
 const loadForms = function () {
   store.commit('open/forms/startLoading')
@@ -122,6 +123,7 @@ export default {
     ProTag,
     ExtraMenu
   },
+  mixins: [SeoMeta],
 
   beforeRouteEnter(to, from, next) {
     loadForms()
@@ -136,6 +138,7 @@ export default {
 
   data() {
     return {
+      metaTitle: 'Home',
       tabsList: [
         {
           name: 'Submissions',
@@ -204,11 +207,7 @@ export default {
       this.workingForm = new Form(this.form)
     }
   },
-
-  metaInfo() {
-    return {title: this.$t('home')}
-  },
-
+ 
   methods: {
     openCrisp() {
       window.$crisp.push(['do', 'chat:show'])
diff --git a/resources/js/pages/forms/show/share.vue b/resources/js/pages/forms/show/share.vue
index bef283e..1bde31d 100644
--- a/resources/js/pages/forms/show/share.vue
+++ b/resources/js/pages/forms/show/share.vue
@@ -17,6 +17,7 @@ import ShareLink from '../../../components/pages/forms/show/ShareLink'
 import EmbedCode from '../../../components/pages/forms/show/EmbedCode'
 import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill'
 import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink'
+import SeoMeta from '../../../mixins/seo-meta'
 
 export default {
   components: {
@@ -28,17 +29,18 @@ export default {
   props: {
     form: { type: Object, required: true }
   },
-
-  metaInfo() {
-    return {title: (this.form) ? 'Form Share - '+this.form.title : 'Form Share'}
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
   }),
 
   mounted() {},
 
-  computed: {},
+  computed: {
+    metaTitle() {
+      return (this.form) ? 'Form Share - '+this.form.title : 'Form Share'
+    },
+  },
 
   methods: {
     
diff --git a/resources/js/pages/forms/show/submissions.vue b/resources/js/pages/forms/show/submissions.vue
index bc028f7..c55da82 100644
--- a/resources/js/pages/forms/show/submissions.vue
+++ b/resources/js/pages/forms/show/submissions.vue
@@ -6,23 +6,25 @@
 
 <script>
 import FormSubmissions from '../../../components/open/forms/components/FormSubmissions'
+import SeoMeta from '../../../mixins/seo-meta'
 
 export default {
   components: {FormSubmissions},
   props: {
     form: { type: Object, required: true }
   },
-
-  metaInfo() {
-    return {title: (this.form) ? 'Form Submissions - '+this.form.title : 'Form Submissions'}
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
   }),
 
   mounted() {},
 
-  computed: {},
+  computed: {
+    metaTitle() {
+      return (this.form) ? 'Form Submissions - '+this.form.title : 'Form Submissions'
+    },
+  },
 
   methods: {
     
diff --git a/resources/js/pages/legal-help/privacy-policy.vue b/resources/js/pages/legal-help/privacy-policy.vue
index cfecdfc..8082d7d 100644
--- a/resources/js/pages/legal-help/privacy-policy.vue
+++ b/resources/js/pages/legal-help/privacy-policy.vue
@@ -14,16 +14,15 @@
 
 <script>
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: { OpenFormFooter},
   layout: 'default',
-
-  metaInfo () {
-    return { title: 'Privacy Policy' }
-  },
-
+  mixins: [SeoMeta],
+  
   data: () => ({
+    metaTitle: 'Privacy Policy',
   }),
 
   computed: {},
diff --git a/resources/js/pages/legal-help/terms-conditions.vue b/resources/js/pages/legal-help/terms-conditions.vue
index 1bb1192..ae47086 100644
--- a/resources/js/pages/legal-help/terms-conditions.vue
+++ b/resources/js/pages/legal-help/terms-conditions.vue
@@ -14,16 +14,15 @@
 
 <script>
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: { OpenFormFooter },
   layout: 'default',
-
-  metaInfo () {
-    return { title: 'Terms & Conditions' }
-  },
-
+  mixins: [SeoMeta],
+  
   data: () => ({
+    metaTitle: 'Terms & Conditions',
   }),
 
   computed: {},
diff --git a/resources/js/pages/settings/account.vue b/resources/js/pages/settings/account.vue
index 34c0e9b..9ae8a45 100644
--- a/resources/js/pages/settings/account.vue
+++ b/resources/js/pages/settings/account.vue
@@ -18,15 +18,14 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   scrollToTop: false,
-
-  metaInfo () {
-    return { title: 'Account' }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Account',
     form: new Form({
       identifier: ''
     }),
diff --git a/resources/js/pages/settings/admin.vue b/resources/js/pages/settings/admin.vue
index 67d93b5..59ddd7c 100644
--- a/resources/js/pages/settings/admin.vue
+++ b/resources/js/pages/settings/admin.vue
@@ -37,17 +37,16 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: { },
   middleware: 'admin',
   scrollToTop: false,
-
-  metaInfo () {
-    return { title: 'Admin' }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Admin',
     form: new Form({
       identifier: ''
     }),
diff --git a/resources/js/pages/settings/billing.vue b/resources/js/pages/settings/billing.vue
index 2fb9c1f..b6e6b53 100644
--- a/resources/js/pages/settings/billing.vue
+++ b/resources/js/pages/settings/billing.vue
@@ -17,16 +17,15 @@
 <script>
 import axios from 'axios'
 import VButton from '../../components/common/Button'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: { VButton },
   scrollToTop: false,
-
-  metaInfo () {
-    return { title: 'Billing' }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Billing',
     billingLoading: false
   }),
 
diff --git a/resources/js/pages/settings/password.vue b/resources/js/pages/settings/password.vue
index 88362e6..9f76dfc 100644
--- a/resources/js/pages/settings/password.vue
+++ b/resources/js/pages/settings/password.vue
@@ -24,15 +24,14 @@
 
 <script>
 import Form from 'vform'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   scrollToTop: false,
-
-  metaInfo () {
-    return { title: this.$t('settings') }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Password',
     form: new Form({
       password: '',
       password_confirmation: ''
diff --git a/resources/js/pages/settings/profile.vue b/resources/js/pages/settings/profile.vue
index 7f8473e..74cbdb3 100644
--- a/resources/js/pages/settings/profile.vue
+++ b/resources/js/pages/settings/profile.vue
@@ -21,15 +21,14 @@
 <script>
 import Form from 'vform'
 import { mapGetters } from 'vuex'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   scrollToTop: false,
-
-  metaInfo () {
-    return { title: this.$t('settings') }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Profile',
     form: new Form({
       name: '',
       email: ''
diff --git a/resources/js/pages/settings/workspace.vue b/resources/js/pages/settings/workspace.vue
index 8c69bd3..fb9122f 100644
--- a/resources/js/pages/settings/workspace.vue
+++ b/resources/js/pages/settings/workspace.vue
@@ -75,17 +75,15 @@
 <script>
 import Form from 'vform'
 import {mapActions, mapState} from 'vuex'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
-
   components: {},
   scrollToTop: false,
-
-  metaInfo() {
-    return {title: 'Workspaces'}
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Workspaces',
     form: new Form({
       name: '',
       emoji: ''
diff --git a/resources/js/pages/subscriptions/error.vue b/resources/js/pages/subscriptions/error.vue
index 520b5d4..48287c0 100644
--- a/resources/js/pages/subscriptions/error.vue
+++ b/resources/js/pages/subscriptions/error.vue
@@ -2,17 +2,17 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: { },
   layout: 'default',
   middleware: 'auth',
+  mixins: [SeoMeta],
 
-  metaInfo () {
-    return { title: 'Error' }
-  },
-
-  data: () => ({}),
+  data: () => ({
+    metaTitle: 'Error',
+  }),
 
   mounted () {
     this.$router.push({ name: 'pricing' })
diff --git a/resources/js/pages/subscriptions/success.vue b/resources/js/pages/subscriptions/success.vue
index 55d3445..e25de24 100644
--- a/resources/js/pages/subscriptions/success.vue
+++ b/resources/js/pages/subscriptions/success.vue
@@ -18,17 +18,16 @@
 <script>
 import { mapGetters } from 'vuex'
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import SeoMeta from '../../mixins/seo-meta'
 
 export default {
   components: { OpenFormFooter },
   layout: 'default',
   middleware: 'auth',
-
-  metaInfo () {
-    return { title: 'Subscription Success' }
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
+    metaTitle: 'Subscription Success',
     interval: null
   }),
 
diff --git a/resources/js/pages/welcome.vue b/resources/js/pages/welcome.vue
index 41d20a1..4e33545 100644
--- a/resources/js/pages/welcome.vue
+++ b/resources/js/pages/welcome.vue
@@ -108,18 +108,18 @@ import Features from '~/components/pages/welcome/Features'
 import MoreFeatures from '~/components/pages/welcome/MoreFeatures'
 import OpenFormFooter from '../components/pages/OpenFormFooter'
 import Testimonials from '../components/pages/welcome/Testimonials'
+import SeoMeta from '../mixins/seo-meta'
 
 export default {
   components: {Testimonials, OpenFormFooter, Features, MoreFeatures},
 
   layout: 'default',
 
-  metaInfo() {
-    return {title: 'Create beautiful & open-source forms for free'}
-  },
+  mixins: [SeoMeta],
 
   data: () => ({
-    title: window.config.appName
+    title: window.config.appName,
+    metaTitle: 'Create beautiful & open-source forms for free',
   }),
 
   mounted() {