Merge pull request #376 from vuejs-jp/enhance/subpage-og-image

update og-image for subpage

apps/web/app/pages/code-of-conduct.vue

@@ -13,11 +13,13 @@ useHead({
       title: `行動規範 | ${conferenceTitle}`,
       description: ogCoCDescription,
       url: `${linkUrl}code-of-conduct`,
+      image: `${linkUrl}og/code-of-conduct.png`,
     }),
     ...twitterOg({
       title: `行動規範 | ${conferenceTitle}`,
       description: ogCoCDescription,
       url: `${linkUrl}code-of-conduct`,
+      image: `${linkUrl}og/code-of-conduct.png`,
     }),
   ],
 })

apps/web/app/pages/events.vue

@@ -25,11 +25,13 @@ useHead({
       title: `関連イベント | ${conferenceTitle}`,
       description: ogRelatedEventDescription,
       url: `${linkUrl}events`,
+      image: `${linkUrl}og/events.png`,
     }),
     ...twitterOg({
       title: `関連イベント | ${conferenceTitle}`,
       description: ogRelatedEventDescription,
       url: `${linkUrl}events`,
+      image: `${linkUrl}og/events.png`,
     }),
   ],
 })

apps/web/app/pages/jobboard.vue

@@ -22,11 +22,13 @@ useHead({
       title: `ジョブボード | ${conferenceTitle}`,
       description: ogJobboardDescription,
       url: `${linkUrl}jobboard`,
+      image: `${linkUrl}og/jobboard.png`,
     }),
     ...twitterOg({
       title: `ジョブボード | ${conferenceTitle}`,
       description: ogJobboardDescription,
       url: `${linkUrl}jobboard`,
+      image: `${linkUrl}og/jobboard.png`,
     }),
   ],
 })

apps/web/app/pages/namecard/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { createError, useRuntimeConfig, navigateTo } from '#imports'
+import { createError, useFetch, useHead, useRuntimeConfig, navigateTo } from '#imports'
 import { useI18n } from '#i18n'
 import { ref } from 'vue'
 import type { AuthProvider, DialogStatus } from '@vuejs-jp/model'
@@ -9,7 +9,8 @@ import { useAuthSession } from '~/composables/useAuthSession'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import MarkDownText from '~/components/MarkDownText.vue'
 import CreationProcess from '~/components/namecard/CreationProcess.vue'
-import { useFetch } from '#imports'
+import { conferenceTitle, linkUrl, ogNamecardEntryDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
 import type { AttendeeInfo } from '@vuejs-jp/model'
 
 type Attendees = Record<'activatedAttendees', AttendeeInfo>
@@ -32,6 +33,24 @@ const { t } = useI18n()
 const { locale } = useLocaleCurrent()
 const showDialog = ref(false)
 
+useHead({
+  titleTemplate: (titleChunk) => `関連イベント | ${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `ネームカード | ${conferenceTitle}`,
+      description: ogNamecardEntryDescription,
+      url: `${linkUrl}namecard`,
+      image: `${linkUrl}og/namecard.png`,
+    }),
+    ...twitterOg({
+      title: `ネームカード | ${conferenceTitle}`,
+      description: ogNamecardEntryDescription,
+      url: `${linkUrl}namecard`,
+      image: `${linkUrl}og/namecard.png`,
+    }),
+  ],
+})
+
 function handleClickButton(type: DialogStatus) {
   if (type === 'open') {
     showDialog.value = true

apps/web/app/pages/privacy.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useHead, useI18n } from '#imports'
-import FooterPageSection from '~/components/FooterPageSection.vue'
 import MarkDownText from '~/components/MarkDownText.vue'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
@@ -20,11 +19,13 @@ useHead({
       title: `プライバシーポリシー | ${conferenceTitle}`,
       description: ogPrivacyDescription,
       url: `${linkUrl}privacy`,
+      image: `${linkUrl}og/privacy.png`,
     }),
     ...twitterOg({
       title: `プライバシーポリシー | ${conferenceTitle}`,
       description: ogPrivacyDescription,
       url: `${linkUrl}privacy`,
+      image: `${linkUrl}og/privacy.png`,
     }),
   ],
 })

apps/web/app/pages/sharemap.vue

@@ -57,11 +57,13 @@ useHead({
       title: `シェアURL | ${conferenceTitle}`,
       description: ogSharemapDescription,
       url: `${linkUrl}sharemap`,
+      image: `${linkUrl}og/sharemap.png`,
     }),
     ...twitterOg({
       title: `シェアURL | ${conferenceTitle}`,
       description: ogSharemapDescription,
       url: `${linkUrl}sharemap`,
+      image: `${linkUrl}og/sharemap.png`,
     }),
   ],
 })

apps/web/app/pages/tokusho.vue

@@ -13,11 +13,13 @@ useHead({
       title: `特定商取引法に基づく表記 | ${conferenceTitle}`,
       description: ogTokushoDescription,
       url: `${linkUrl}tokusho`,
+      image: `${linkUrl}og/tokusho.png`,
     }),
     ...twitterOg({
       title: `特定商取引法に基づく表記 | ${conferenceTitle}`,
       description: ogTokushoDescription,
       url: `${linkUrl}tokusho`,
+      image: `${linkUrl}og/tokusho.png`,
     }),
   ],
 })

apps/web/app/utils/constants.ts

@@ -10,6 +10,8 @@ export const ogCoCDescription =
 
 export const ogPrivacyDescription = 'Vue Fes Japan 2024 のプライバシーポリシーです。'
 
+export const ogNamecardEntryDescription = 'Vue Fes Japan 2024 のネームカードの確認はこちら。'
+
 export const ogTokushoDescription = 'Vue Fes Japan 2024 の特定商取引法に基づく表記です。'
 
 export const ogSharemapDescription = 'Vue Fes Japan 2024 のシェア URL 集です。'