Merge pull request #80 from Kyutech-C3/seo

SEO 対策

components/Footer.vue

@@ -5,6 +5,7 @@
         <img
           src="../assets/image/C3logo.png"
           class="hover:opacity-50 transition h-10"
+          alt="C3 logo"
         />
       </a>
       <a
@@ -25,7 +26,7 @@
       </a>
     </div>
     <div class="text-center my-6 text-base-text-color">
-      © 2021 - {{ date }} Composite Computer Club
+      © 2022 - {{ date }} Composite Computer Club
     </div>
   </footer>
 </template>

components/Header.vue

@@ -7,7 +7,11 @@
     ></div>
     <div class="h-24 absolute top-0 left-1/2 -translate-x-1/2">
       <nuxt-link to="/" class="hover:opacity-50 h-full">
-        <img src="@/assets/image/ToyBoxlogo.png" class="h-full" />
+        <img
+          src="@/assets/image/ToyBoxlogo.png"
+          class="h-full"
+          alt="ToyBox logo"
+        />
       </nuxt-link>
     </div>
     <div
@@ -79,6 +83,7 @@
             shadow-md
             bg-white
           "
+          alt="user icon"
         />
       </button>
     </div>
@@ -104,6 +109,7 @@
       <img
         :src="getIcon"
         class="rounded-full w-16 h-16 mx-auto my-1 pointer-events-none"
+        alt="user icon"
       />
       <!-- name -->
       <div class="text-gray-200 mb-6">

components/commons/TagSelecter.vue

@@ -27,7 +27,6 @@
     <div class="relative items-center w-full">
       <input
         type="text"
-        name="select tag"
         class="
           w-full
           border-b-2 border-gray-300

components/commons/UserRoundedIcon.vue

@@ -9,7 +9,7 @@
   >
     <img
       :src="imageSrc"
-      alt="icon"
+      alt="user icon"
       class="absolute h-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
     />
   </div>

components/users/UsersProfile.vue

@@ -32,7 +32,7 @@
     <div class="bg-gray-300 w-full h-64 z-0 relative overflow-hidden mb-10">
       <img
         src="@/assets/image/bg-gray.png"
-        alt="バーナー画像"
+        alt="user banner image"
         class="
           absolute
           w-full

components/works/WorksCard.vue

@@ -45,7 +45,8 @@
           max-h-full max-w-full
         "
         :src="workData.thumbnail.url"
-        alt="Thumbnail is not found"
+        alt="work thumbnail"
+        loading="lazy"
       />
     </nuxt-link>
     <nuxt-link :to="'/works/' + workData.id" class="h-1/2 py-3 px-2.5 block">

components/works/WorksCarouselMain.vue

@@ -70,7 +70,7 @@
           swiper.isBeginning
       }"
       @mouseover="showSwiperButtonPrev = true"
-    ></div>
+    />
     <div
       class="
         swiper-button-next
@@ -84,7 +84,7 @@
         'pointer-events-none after:!text-hover-base-text-color': swiper.isEnd
       }"
       @mouseenter="showSwiperButtonNext = true"
-    ></div>
+    />
     <div
       class="
         absolute
@@ -96,9 +96,10 @@
         w-[10%]
         z-10
       "
+      :class="{ ' pointer-events-none': assets.length <= 1 }"
       @mouseover="showSwiperButtonPrev = true"
       @mouseleave="showSwiperButtonPrev = false"
-    ></div>
+    />
     <div
       class="
         absolute
@@ -110,9 +111,10 @@
         w-[10%]
         z-10
       "
+      :class="{ ' pointer-events-none': assets.length <= 1 }"
       @mouseenter="showSwiperButtonNext = true"
       @mouseout="showSwiperButtonNext = false"
-    ></div>
+    />
     <!-- fullscreen navigation -->
     <span
       class="

components/works/carouselItem/ImageView.vue

@@ -12,6 +12,7 @@
       "
       :src="image.url"
       alt="asset image"
+      loading="lazy"
     />
   </div>
 </template>

components/works/form/assetPreviewItems/FormImagePreview.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="relative w-full h-full">
-    <img class="w-full h-full object-cover" :src="imageUrl" />
+    <img
+      class="w-full h-full object-cover"
+      :src="imageUrl"
+      alt="asset image preview"
+    />
     <span
       class="
         material-symbols-outlined

nuxt.config.js

@@ -14,7 +14,7 @@ export default {
       {
         name: 'copyright',
         content:
-          '© 2022' + new Date().getFullYear() + ' Composite Computer Club'
+          '© 2022 - ' + new Date().getFullYear() + ' Composite Computer Club'
       },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       {
@@ -56,6 +56,11 @@ export default {
       {
         rel: 'stylesheet',
         href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200'
+      },
+      {
+        hid: 'canonical',
+        rel: 'canonical',
+        href: 'https://toybox.compositecomputer.club/'
       }
     ]
   },
@@ -99,7 +104,8 @@ export default {
         },
         debug: true
       }
-    ]
+    ],
+    '@nuxtjs/sitemap'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
@@ -159,6 +165,27 @@ export default {
     }
   },
 
+  sitemap: {
+    hostname: process.env.BASE_URL,
+    defaults: {
+      lastmod: new Date(),
+      changefreq: 'always'
+    },
+    cacheTime: 1000 * 60 * 60 * 24,
+    exclude: ['/tmp', '/login', '/discord', '/works/create', '/works/*/edit'],
+    async routes() {
+      return Promise.all([
+        await axios.get(process.env.API_URL + '/users?limit=9999'),
+        await axios.get(process.env.API_URL + '/works?limit=9999')
+      ]).then(([users, works]) => {
+        const urls = []
+        users.data.map((user) => urls.push({ route: `/users/${user.id}` }))
+        works.data.map((work) => urls.push({ route: `/works/${work.id}` }))
+        return urls
+      })
+    }
+  },
+
   generate: {
     fallback: true,
     async routes() {

package.json

@@ -31,6 +31,7 @@
     "@nuxtjs/composition-api": "^0.33.1",
     "@nuxtjs/google-gtag": "^1.0.4",
     "@nuxtjs/markdownit": "^2.0.0",
+    "@nuxtjs/sitemap": "^2.4.0",
     "@types/file-saver": "^2.0.5",
     "@types/three": "^0.146.0",
     "core-js": "^3.26.1",

pages/users/_id.vue

@@ -108,6 +108,55 @@ export default class Users extends Vue {
     return workFilterStore.getFilterVisibility
   }
 
+  head() {
+    const title: string = `ToyBox ユーザー - ${this.user.display_name}`
+    const url: string = `${process.env.BASE_URL}users/${this.user.id}`
+    const description: string = this.user.profile ? this.user.profile : ''
+    return {
+      title: title,
+      htmlAttrs: {
+        lang: 'ja',
+        prefix:
+          'og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#'
+      },
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: description
+        },
+        {
+          hid: 'og:url',
+          property: 'og:url',
+          content: url
+        },
+        {
+          hid: 'og:title',
+          property: 'og:title',
+          content: title
+        },
+        { hid: 'og:type', property: 'og:type', content: 'article' },
+        {
+          hid: 'og:description',
+          property: 'og:description',
+          content: description
+        },
+        {
+          hid: 'og:image',
+          property: 'og:image',
+          content: this.user.avatar_url
+        }
+      ],
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: url
+        }
+      ]
+    }
+  }
+
   created() {
     workFilterStore.setUseConditionsWhenAsyncData(true)
     workFilterStore.setSearched(true)

pages/works/_id/index.vue

@@ -479,6 +479,57 @@ export default class Works extends Vue {
     return commentStore.getComments
   }
 
+  head() {
+    const title: string = `ToyBox 作品 - ${this.work.title}`
+    const url: string = `${process.env.BASE_URL}works/${this.work.id}`
+    const description: string = this.work.description
+      ? this.work.description
+      : ''
+    return {
+      title: title,
+      htmlAttrs: {
+        lang: 'ja',
+        prefix:
+          'og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#'
+      },
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: description
+        },
+        {
+          hid: 'og:url',
+          property: 'og:url',
+          content: url
+        },
+        {
+          hid: 'og:title',
+          property: 'og:title',
+          content: title
+        },
+        { hid: 'og:type', property: 'og:type', content: 'article' },
+        {
+          hid: 'og:description',
+          property: 'og:description',
+          content: description
+        },
+        {
+          hid: 'og:image',
+          property: 'og:image',
+          content: this.work.thumbnail.url
+        }
+      ],
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: url
+        }
+      ]
+    }
+  }
+
   created() {
     workFilterStore.setUseConditionsWhenAsyncData(true)
     this.workVisibility = this.work.visibility

utils/axios.ts

@@ -62,7 +62,7 @@ export class AxiosClient {
           }
         } catch (e: unknown) {
           console.error('再ログインが必要')
-          window.location.href = `${process.env.BASE_URL}/login`
+          window.location.href = `${process.env.BASE_URL}login`
         }
       }
       throw e