fix: 一部ページで直アクセス時にタイトルが重複する問題を修正

src/views/Contact.vue

@@ -32,22 +32,6 @@ const description = 'azooKeyに関するお問い合わせをお寄せくださ
 const image = 'https://azookey.com/static/og-image.png'
 const title = 'お問い合わせ | azooKey - 自由自在なキーボードアプリ'
 
-useHead({
-  title: () => 'お問い合わせ |'
-})
-
-useSeoMeta({
-  ogTitle: () => title,
-  twitterTitle: () => title,
-
-  description: () => description,
-  ogDescription: () => description,
-  twitterDescription: () => description,
-
-  ogImage: () => image,
-  twitterImage: () => image
-})
-
 export default defineComponent({
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'Contact',
@@ -59,6 +43,24 @@ export default defineComponent({
     MiniHeader
   },
 
+  setup() {
+    useHead({
+      title: () => 'お問い合わせ |'
+    })
+
+    useSeoMeta({
+      ogTitle: () => title,
+      twitterTitle: () => title,
+
+      description: () => description,
+      ogDescription: () => description,
+      twitterDescription: () => description,
+
+      ogImage: () => image,
+      twitterImage: () => image
+    })
+  },
+
   data() {
     return {
       links: [

src/views/Desktop.vue

@@ -107,7 +107,7 @@ const description =
   'iOS向けキーボードアプリ「azooKey」のmacOS版は、ニューラルかな漢字変換エンジンを搭載した本格派日本語入力です。'
 const image = 'https://azookey.com/static/og-image.png'
 
-useHead({ title })
+useHead({ title: 'macOS版 |' })
 
 useSeoMeta({
   ogTitle: () => title,

src/views/Main.vue

@@ -52,23 +52,6 @@ const description =
   'azooKeyは強力なカスタマイズ機能を搭載した日本語入力キーボードです。最先端の高精度変換システム「Zenzai」を搭載し、完全オフラインで動作します。ライブ変換、着せ替え、ユーザ辞書など、快適な入力のための機能もしっかりサポートしています。普段使う日本語タブをカスタマイズするカスタムキー機能とオリジナルの配列のキーボードを作るカスタムタブ機能でどこまでも自由にカスタマイズができます。'
 const image = 'https://azookey.com/static/og-image.png'
 
-useHead({
-  title: 'azooKey - 自由自在なキーボードアプリ',
-  titleTemplate: ''
-})
-
-useSeoMeta({
-  ogTitle: () => title,
-  twitterTitle: () => title,
-
-  description: () => description,
-  ogDescription: () => description,
-  twitterDescription: () => description,
-
-  ogImage: () => image,
-  twitterImage: () => image
-})
-
 export default defineComponent({
   // eslint-disable-next-line vue/multi-word-component-names, vue/no-reserved-component-names
   name: 'Main',
@@ -81,6 +64,25 @@ export default defineComponent({
     MiniHeader
   },
 
+  setup() {
+    useHead({
+      title: 'azooKey - 自由自在なキーボードアプリ',
+      titleTemplate: ''
+    })
+
+    useSeoMeta({
+      ogTitle: () => title,
+      twitterTitle: () => title,
+
+      description: () => description,
+      ogDescription: () => description,
+      twitterDescription: () => description,
+
+      ogImage: () => image,
+      twitterImage: () => image
+    })
+  },
+
   data() {
     return {
       isScrolled: false,

src/views/OpenSource.vue

@@ -134,22 +134,6 @@ const description =
 const image = 'https://azookey.com/static/og-image.png'
 const title = 'オープンソース | azooKey - 自由自在なキーボードアプリ'
 
-useHead({
-  title: () => 'オープンソース |'
-})
-
-useSeoMeta({
-  ogTitle: () => title,
-  twitterTitle: () => title,
-
-  description: () => description,
-  ogDescription: () => description,
-  twitterDescription: () => description,
-
-  ogImage: () => image,
-  twitterImage: () => image
-})
-
 export default defineComponent({
   name: 'OpenSource',
   components: {
@@ -158,6 +142,23 @@ export default defineComponent({
     ArticleContainer,
     GitHubButton,
     MiniHeader
+  },
+  setup() {
+    useHead({
+      title: () => 'オープンソース |'
+    })
+
+    useSeoMeta({
+      ogTitle: () => title,
+      twitterTitle: () => title,
+
+      description: () => description,
+      ogDescription: () => description,
+      twitterDescription: () => description,
+
+      ogImage: () => image,
+      twitterImage: () => image
+    })
   }
 })
 </script>

src/views/PrivacyPolicy.vue

@@ -51,22 +51,6 @@ const description = 'プライバシーポリシー'
 const image = 'https://azookey.com/static/og-image.png'
 const title = 'プライバシーポリシー | azooKey - 自由自在なキーボードアプリ'
 
-useHead({
-  title: () => 'プライバシーポリシー |'
-})
-
-useSeoMeta({
-  ogTitle: () => title,
-  twitterTitle: () => title,
-
-  description: () => description,
-  ogDescription: () => description,
-  twitterDescription: () => description,
-
-  ogImage: () => image,
-  twitterImage: () => image
-})
-
 export default defineComponent({
   name: 'PrivacyPolicy',
 
@@ -75,6 +59,24 @@ export default defineComponent({
     SectionTitle,
     ArticleContainer,
     MiniHeader
+  },
+
+  setup() {
+    useHead({
+      title: () => 'プライバシーポリシー |'
+    })
+
+    useSeoMeta({
+      ogTitle: () => title,
+      twitterTitle: () => title,
+
+      description: () => description,
+      ogDescription: () => description,
+      twitterDescription: () => description,
+
+      ogImage: () => image,
+      twitterImage: () => image
+    })
   }
 })
 </script>

src/views/QA.vue

@@ -30,22 +30,6 @@ const description = 'azooKeyに関するQ&Aをまとめています。'
 const image = 'https://azookey.com/static/og-image.png'
 const title = 'Q&A | azooKey - 自由自在なキーボードアプリ'
 
-useHead({
-  title: () => 'Q&A |'
-})
-
-useSeoMeta({
-  ogTitle: () => title,
-  twitterTitle: () => title,
-
-  description: () => description,
-  ogDescription: () => description,
-  twitterDescription: () => description,
-
-  ogImage: () => image,
-  twitterImage: () => image
-})
-
 export default defineComponent({
   name: 'QA',
 
@@ -56,6 +40,24 @@ export default defineComponent({
     MiniHeader
   },
 
+  setup() {
+    useHead({
+      title: () => 'Q&A |'
+    })
+
+    useSeoMeta({
+      ogTitle: () => title,
+      twitterTitle: () => title,
+
+      description: () => description,
+      ogDescription: () => description,
+      twitterDescription: () => description,
+
+      ogImage: () => image,
+      twitterImage: () => image
+    })
+  },
+
   data() {
     return {
       qa_list: [

src/views/TermsOfService.vue

@@ -88,22 +88,6 @@ const description = '利用規約'
 const image = 'https://azookey.com/static/og-image.png'
 const title = '利用規約 | azooKey - 自由自在なキーボードアプリ'
 
-useHead({
-  title: '利用規約 |'
-})
-
-useSeoMeta({
-  ogTitle: () => title,
-  twitterTitle: () => title,
-
-  description: () => description,
-  ogDescription: () => description,
-  twitterDescription: () => description,
-
-  ogImage: () => image,
-  twitterImage: () => image
-})
-
 export default defineComponent({
   name: 'TermsOfService',
 
@@ -112,6 +96,24 @@ export default defineComponent({
     SectionTitle,
     ArticleContainer,
     MiniHeader
+  },
+
+  setup() {
+    useHead({
+      title: '利用規約 |'
+    })
+
+    useSeoMeta({
+      ogTitle: () => title,
+      twitterTitle: () => title,
+
+      description: () => description,
+      ogDescription: () => description,
+      twitterDescription: () => description,
+
+      ogImage: () => image,
+      twitterImage: () => image
+    })
   }
 })
 </script>