metaタグで多言語化が必要な分をlayouts/default.vueに移動

Author: kaizumaki

nuxt.config.js

@@ -14,63 +14,16 @@ export default {
     htmlAttrs: {
       prefix: 'og: http://ogp.me/ns#',
     },
-    title: 'おうちで時間割',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      {
-        hid: 'keyword',
-        name: 'keyword',
-        content: 'CodeforJapan, おうちで時間割, デジタル, 学び, 今後の学習',
-      },
       {
         hid: 'author',
         name: 'author',
         content: 'Code for Japan',
       },
-      {
-        hid: 'og:site_name',
-        property: 'og:site_name',
-        content: 'おうちで時間割',
-      },
-      {
-        hid: 'og:url',
-        property: 'og:url',
-        content: `https://app.studyathome.jp/`,
-      },
-      {
-        hid: 'og:title',
-        property: 'og:title',
-        content: 'おうちで時間割',
-      },
-      {
-        hid: 'og:description',
-        property: 'og:description',
-        content:
-          '子どもの学びにデジタルの活用を - 臨時休校期間と今後の学習に向けて 簡単に楽しく学べる環境を今だから、みんなでつくろう。',
-      },
-      {
-        hid: 'apple-mobile-web-app-title',
-        name: 'apple-mobile-web-app-title',
-        content: 'おうちで時間割',
-      },
-      {
-        hid: 'description',
-        name: 'description',
-        content:
-          '子どもの学びにデジタルの活用を - 臨時休校期間と今後の学習に向けて 簡単に楽しく学べる環境を今だから、みんなでつくろう。',
-      },
       { hid: 'og:type', property: 'og:type', content: 'website' },
-      {
-        hid: 'og:image',
-        property: 'og:image',
-        content: 'https://app.studyathome.jp/ogp.png',
-      },
-      {
-        hid: 'twitter:image',
-        name: 'twitter:image',
-        content: 'https://app.studyathome.jp/ogp.png',
-      },
+      { name: 'twitter:card', content: 'summary_large_image' },
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },

src/layouts/default.vue

@@ -37,8 +37,73 @@ export default Vue.extend({
       loading: true,
     }
   },
+  head() {
+    const ogpImage = () => {
+      switch (this.$i18n.locale) {
+        case 'zh-tw':
+          return `https://app.studyathome.jp/ogp-${this.$i18n.locale}.png`
+        default:
+          return 'https://app.studyathome.jp/ogp.png'
+      }
+    }
+    return {
+      title: this.$tc('title'),
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.$tc('description'),
+        },
+        {
+          hid: 'apple-mobile-web-app-title',
+          name: 'apple-mobile-web-app-title',
+          content: this.$tc('title'),
+        },
+        {
+          hid: 'og:title',
+          property: 'og:title',
+          content: this.$tc('title'),
+        },
+        {
+          hid: 'og:description',
+          property: 'og:description',
+          content: this.$tc('description'),
+        },
+        {
+          hid: 'og:site_name',
+          property: 'og:site_name',
+          content: this.$tc('title'),
+        },
+        {
+          hid: 'og:image',
+          property: 'og:image',
+          content: ogpImage(),
+        },
+        {
+          hid: 'og:image:width',
+          property: 'og:image:width',
+          content: '1200',
+        },
+        {
+          hid: 'og:image:height',
+          property: 'og:image:height',
+          content: '630',
+        },
+        {
+          hid: 'twitter:image',
+          name: 'twitter:image',
+          content: ogpImage(),
+        },
+        {
+          hid: 'og:url',
+          property: 'og:url',
+          content: `https://app.studyathome.jp${this.$route.path}`,
+        },
+      ],
+    }
+  },
   mounted(): void {
-    this.loading = false
+    ;(this as any).loading = false
   },
 })
 </script>