SEO: add "unhead" for meta; add title, heading, & description

CVEProject · Jan 27, 2025 · ba16320 · ba16320
1 parent d03a63d
commit ba16320
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -5,10 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="/cvePurpleVFavicon.svg">
-    <title>CVE Website</title>
+    <link rel="canonical" href="https://cve.org">
     <script src="https://cmp.osano.com/AzyhULTdPkqmy4aDN/46057d56-0263-4cca-abac-9adddada4f3b/osano.js"></script>
   </head>
   <body class="has-navbar-fixed-top">
+    <h1 hidden>Common vulnerabilities and Exposures (CVE)</h1>
     <noscript>
       <strong>We're sorry but the CVE Website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@unhead/vue": "^1.11.18",
     "axios": "^1.6.5",
     "bulma": "^0.9.4",
     "bulma-timeline": "^3.0.5",

diff --git a/src/App.vue b/src/App.vue
@@ -20,6 +20,7 @@ import NotificationBannerModule from './components/NotificationBannerModule.vue'
 import FoooterModule from './components/FooterModule.vue';
 import NotFound from './views/NotFound.vue';
 import { usePartnerStore } from '@/stores/partners';
+import { useSeoMeta } from '@unhead/vue';
 
 export default {
   components: {
@@ -35,6 +36,12 @@ export default {
   },
   beforeMount() {
     usePartnerStore().populatePartnerShortLongNameMap();
+    useSeoMeta({
+      title: 'CVE: Common Vulnerabilities and Exposures',
+      description: 'At cve.org, we provide the authoritative '
+        + 'reference method for publicly known information-security '
+        + 'vulnerabilities and exposures'
+    });
   }
 }
 </script>

diff --git a/src/components/HomeModule.vue b/src/components/HomeModule.vue
@@ -21,7 +21,9 @@
               </div>
               <div class="column cve-partnership-right-column">
                 <figure class="image">
-                  <img src="@/assets/images/cvePartnershipGraphic.svg" class="cve-partnership-img" alt=""/>
+                  <img src="@/assets/images/cvePartnershipGraphic.svg"
+                    class="cve-partnership-img"
+                    alt="CVE Partnership Graphic"/>
                 </figure>
               </div>
             </div>

diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,6 @@
 
 import { createApp } from 'vue';
+import { createHead, VueHeadMixin } from '@unhead/vue';
 import { createPinia } from 'pinia';
 import VueGtag from 'vue-gtag';
 import LoadScript from 'vue-plugin-load-script';
@@ -31,11 +32,14 @@ library.add(
 
 
 const app = createApp(App);
+const head = createHead();
 const pinia = createPinia();
 pinia.use(({ store }) => {
   store.router = router;
 });
 app.use(pinia);
+app.use(head);
+app.mixin(VueHeadMixin);
 
 usePartnerStore().populatePartnerCounts();