seo improvements

app.vue

@@ -1,23 +1,20 @@
 <script setup lang="ts">
+import { debounce } from 'perfect-debounce'
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 
+const search = ref(null)
 const colorMode = useColorMode()
 const { headerLinks, searchGroups, searchLinks } = useNavigation()
+const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 const { data: navigation } = await useLazyAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
   server: false
 })
 
-// Computed
-
-const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
-
-// Head
-
 useHead({
-  titleTemplate: title => title ? `${title} - Nuxt` : 'Nuxt: The Intuitive Web Framework',
+  titleTemplate: title => title ? `${title} · Nuxt` : 'Nuxt: The Intuitive Web Framework',
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color }
@@ -39,8 +36,12 @@ useSeoMeta({
   twitterSite: 'nuxt_js'
 })
 
-// Provide
+watch(() => search.value?.commandPaletteRef?.query, debounce((query) => {
+  if (!query) return
+  useTrackEvent('Search', { props: { query, results: `${search.value?.commandPaletteRef.results.length}` } })
+}, 500))
 
+// Provide
 provide('navigation', navigation)
 </script>
 
@@ -55,7 +56,7 @@ provide('navigation', navigation)
     <AppFooter />
 
     <ClientOnly>
-      <UDocsSearch :files="files" :navigation="navigation[0]?.children" :groups="searchGroups" :links="searchLinks" />
+      <UDocsSearch ref="search" :files="files" :navigation="navigation[0]?.children" :groups="searchGroups" :links="searchLinks" />
 
       <UNotifications />
     </ClientOnly>

content/2.modules.yml

@@ -1,4 +1,3 @@
 title: Modules
 description: Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.
 navigation.icon: i-ph-puzzle-piece-duotone
-head.image: '/socials/modules.jpg'

content/3.showcase.yml

@@ -1,7 +1,6 @@
 title: Showcase
 description: Discover our selection of websites built with Nuxt. This collection is powered by VueTelescope.
 navigation.icon: i-ph-app-window-duotone
-head.image: '/socials/showcase.jpg'
 links:
   - label: 'Chrome'
     size: 'md'

content/4.enterprise/1.support.md

@@ -2,7 +2,6 @@
 title: Official Support
 navigation.title: Support
 description: Through NuxtLabs experts and agency networks, we have a solution for every need.
-head.image: '/socials/support.jpg'
 navigation.icon: i-ph-lifebuoy-duotone
 links:
   - to: 'mailto:[email protected]'

content/4.enterprise/2.agencies.yml

@@ -2,7 +2,6 @@ title: Nuxt Agencies
 description: Are you looking for a trusted partner with a strong expertise in Nuxt development? Consult our agency partner catalog and find an agency near you with the right set of skills.
 head.title: Nuxt Partner Agencies
 head.description: Consult our agency partner catalog and find an agency near you with the right set of skills.
-head.image: '/socials/agencies.jpg'
 navigation.icon: i-ph-handshake-duotone
 links:
   - label: 'Submit my agency'

content/4.enterprise/3.sponsors.yml

@@ -1,7 +1,6 @@
 title: Sponsors
 description: Nuxt is an open-source framework totally free to use thanks to our generous sponsors. If you use Nuxt in your daily work and feel that it has made your life easier, please consider backing us.
 head.description: Nuxt is an open-source framework totally free to use thanks to our generous sponsors.
-head.image: '/socials/sponsors.jpg'
 navigation.icon: i-ph-hand-heart-duotone
 links:
   - label: 'Become a sponsor'

content/4.enterprise/4.jobs.yml

@@ -1,9 +1,7 @@
 title: Explore Nuxt Jobs
 description: Browse available openings for coding with Vue and Nuxt all over the world.
-head.title: Jobs
 navigation.title: Jobs
 navigation.icon: i-ph-briefcase-duotone
-head.image: '/socials/jobs.jpg'
 links:
   - label: 'Post a job'
     to: 'https://vuejobs.com/jobs/create'

content/4.enterprise/_dir.yml

@@ -1,2 +1,2 @@
 navigation.icon: i-ph-buildings-duotone
-head.titleTemplate: '%s - Nuxt Enterprise'
+head.titleTemplate: '%s · Nuxt Enterprise'

content/5.blog.yml

@@ -1,6 +1,4 @@
-title: Blog
+title: The Nuxt Blog
+navigation.title: Blog
 description: 'Read the latest news about all Nuxt solutions, from framework announcements to integration tutorials.'
 navigation.icon: i-ph-newspaper
-head.title: The Nuxt Blog
-head.description: Read the latest news about the Nuxt framework and its community.
-head.image: '/socials/blog.jpg'

content/design-kit.md

@@ -1,7 +1,6 @@
 ---
 title: Design Kit
 description: Welcome to Nuxt design definition page. Identity was redefined by handpicking conscientiously colors, typography and shapes in order to put forward how performant, useful & easy Nuxt products are.
-head.image: '/socials/design-kit.jpg'
 navigation.icon: 'i-ph-palette'
 links:
   - label: 'Download Design Kit'

package.json

@@ -29,6 +29,7 @@
     "@vueuse/core": "^10.5.0",
     "@vueuse/nuxt": "^10.5.0",
     "nuxt": "^3.7.4",
+    "perfect-debounce": "^1.0.0",
     "scule": "^1.0.0",
     "sitemap": "^7.1.1"
   },

pages/blog/[slug].vue

@@ -18,6 +18,12 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu
   .findSurround(withoutTrailingSlash(route.path))
 )
 
+useSeoMeta({
+  titleTemplate: '%s · Nuxt Blog',
+  title: article.value.head?.title || article.value.title,
+  description: article.value.head?.description || article.value.description
+})
+
 const socialLinks = computed(() => [{
   icon: 'i-simple-icons-linkedin',
   to: `https://www.linkedin.com/sharing/share-offsite/?url=https://nuxt.com${article.value._path}`

pages/blog/index.vue

@@ -4,7 +4,11 @@ const { fetchList, articles } = useBlog()
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
 
-useContentHead(page)
+useSeoMeta({
+  titleTemplate: '%s',
+  title: page.value.head?.title || page.value.title,
+  description: page.value.head?.description || page.value.description
+})
 
 await fetchList()
 </script>

pages/docs/[...slug].vue

@@ -37,7 +37,7 @@ const titleTemplate = computed(() => {
   if (page.value.titleTemplate) return page.value.titleTemplate
   const titleTemplate = navKeyFromPath(route.path, 'titleTemplate', navigation.value)
   if (titleTemplate) return titleTemplate
-  return '%s - Nuxt'
+  return '%s · Nuxt'
 })
 
 const communityLinks = computed(() => [{
@@ -84,7 +84,7 @@ const ecosystemLinks = [{
 useSeoMeta({
   titleTemplate,
   title: page.value.head?.title || page.value.title,
-  description: page.value.description
+  description: page.value.head?.description || page.value.description
 })
 </script>
 

pages/enterprise/agencies/[slug].vue

@@ -17,6 +17,12 @@ const links = computed(() => [{
   to: agency.value.link,
   target: '_blank'
 }])
+
+useSeoMeta({
+  titleTemplate: '%s · Nuxt Agencies',
+  title: agency.value.head?.title || agency.value.title,
+  description: agency.value.head?.description || agency.value.description
+})
 </script>
 
 <template>

pages/enterprise/agencies/index.vue

@@ -4,7 +4,11 @@ const { filteredAgencies, fetchList, services, regions } = useEnterpriseAgencies
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
 
-useContentHead(page)
+useSeoMeta({
+  titleTemplate: 'Explore Nuxt Agencies',
+  title: page.value.head?.title || page.value.title,
+  description: page.value.head?.description || page.value.description
+})
 
 await fetchList()
 </script>

pages/enterprise/jobs.vue

@@ -4,7 +4,11 @@ const { fetchList, filteredJobs } = useEnterpriseJobs()
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
 
-useContentHead(page)
+useSeoMeta({
+  titleTemplate: 'Explore Nuxt Jobs',
+  title: page.value.head?.title || page.value.title,
+  description: page.value.head?.description || page.value.description
+})
 
 await fetchList()
 </script>

pages/enterprise/sponsors.vue

@@ -8,7 +8,11 @@ if (!page.value) {
 
 const { data: sponsors } = await useFetch('https://api.nuxt.com/sponsors')
 
-useContentHead(page)
+useSeoMeta({
+  titleTemplate: 'Explore Nuxt Sponsors',
+  title: page.value.head?.title || page.value.title,
+  description: page.value.head?.description || page.value.description
+})
 </script>
 
 <template>

pages/enterprise/support.vue

@@ -6,7 +6,11 @@ if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
-useContentHead(page)
+useSeoMeta({
+  titleTemplate: '%s · Nuxt Enterprise',
+  title: page.value.head?.title || page.value.title,
+  description: page.value.head?.description || page.value.description
+})
 </script>
 
 <template>