Basic meta tags customization (#29)

d0rich · web-flow · commit b6af57c20822 · 2023-06-22T11:09:27.000+04:00
* Project wide meta tags

* Add page specific description
diff --git a/app.vue b/app.vue
@@ -17,11 +17,22 @@
 <script setup>
 const config = useAppConfig().exactproDocs
 
-useHead({
+useSeoMeta({
   titleTemplate: (title) => {
     if (title) return `${title} | ${config.title}`
     return title
-  }
+  },
+  description: config?.seo?.description ?? null,
+  generator: '@exactpro/docs-web-toolkit'
+})
+
+useHead({
+  meta: [
+    {
+      name: 'keywords',
+      content: config?.seo?.keywords?.join(', ') ?? ''
+    }
+  ]
 })
 </script>
 
diff --git a/components/ep/PageMeta.vue b/components/ep/PageMeta.vue
@@ -28,6 +28,11 @@ const verificationMetaTags = config.exactproDocs.seo?.verificationMetaTags
 <template>
   <Head>
     <Title>{{ doc ? doc.title : '' }}</Title>
+    <Meta
+      v-if="doc && doc.description"
+      name="description"
+      :content="doc.description"
+    />
     <Meta
       v-for="(verification, index) of verificationMetaTags"
       :key="index"
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -16,7 +16,7 @@
 
 export default defineAppConfig({
   exactproDocs: {
-    title: 'Docs Template Project',
+    title: 'Exactpro Docs Toolkit',
     github: {
       repoLink: 'https://github.com/exactpro/docs-toolkit',
       branch: 'master',
@@ -29,6 +29,9 @@ export default defineAppConfig({
     },
     contacts: [],
     seo: {
+      description:
+        'Documentation toolkit for Exactpro projects powered by Nuxt.js',
+      keywords: ['documentation', 'nuxt3', 'nuxt.js', 'vue.js', 'exactpro'],
       robots: [{ UserAgent: '*' }, { Allow: '/' }],
       sitemap: {
         baseUrl: 'https://exactpro.github.io/docs-toolkit'
diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -77,6 +77,20 @@ export default defineNuxtSchema({
         docsDir: '/'
       },
       seo: {
+        /**
+         * Description of the documentation. It will be displayed in search results.
+         * If some page has a description, it will be used instead of this one.
+         *
+         * @type {?string}
+         */
+        description: undefined,
+        /**
+         * Keywords for the documentation. They will be displayed in search results.
+         *
+         * @type {string[]}
+         * @example ['exactpro', 'documentation', 'nuxt']
+         */
+        keywords: [],
         /**
          * Configuration for robots.txt
          * @see {@link https://github.com/nuxt-modules/robots | Example of configuration}
