fix(seo): improve SEO and accessibility

- Resolve crawlable links in templates
- Add aria-labels to navbar icons and dropdowns
- Update Twitter branding to X in footer
- Fix Lighthouse SEO audit issues

Signed-off-by: Daniel Mungai <chegedan699@gmail.com>

Author: Daniel-1600

hugo.toml

@@ -190,57 +190,57 @@ enable = false
 		url = "https://layer5.io/subscribe"
 		icon = "icons/envelope.svg"
 		desc = "Discussion and help from your fellow users"
-        alt = "Envelope Icon"
+        alt = "Subscribe to the Layer5 newsletter"
 	[[params.links.footer.icons]]
-		name = "Twitter"
+		name = "X"
 		url = "https://twitter.com/layer5"
 		icon = "icons/twitter.svg"
-		desc = "Follow us on Twitter to get the latest news!"
+		desc = "Follow us on X to get the latest news!"
 		class= "social-icon"
-        alt = "Twitter Icon"
+        alt = "Follow Layer5 on X"
 	[[params.links.footer.icons]]
 		name = "Discussion Forum"
 		url = "https://discuss.layer5.io"
 		icon = "icons/discuss.svg"
 		desc = "Practical questions and curated answers"
-        alt = "Discussion Forum Icon"
+        alt = "Join the Layer5 discussion forum"
 	[[params.links.footer.icons]]
 		name = "GitHub"
 		url = "https://github.com/layer5io"
 		icon = "icons/github.svg"
 		desc = "Development takes place here"
 		class= "social-icon"
-        alt = "GitHub Icon"
+        alt = "Visit Layer5 on GitHub"
 	[[params.links.footer.icons]]
 		name = "Slack"
 		url = "https://slack.layer5.io"
 		icon = "icons/slack.svg"
 		desc = "Chat with other project developers"
-        alt = "Slack Icon"
+        alt = "Join the Layer5 Slack community"
 	[[params.links.footer.icons]]
 		name = "LinkedIn"
 		url = "https://www.linkedin.com/company/layer5"
 		icon = "icons/linkedin.svg"
 		desc = "Discuss development issues around the project"
-        alt = "LinkedIn Icon"
+        alt = "Follow Layer5 on LinkedIn"
 	[[params.links.footer.icons]]
 		name = "YouTube"
 		url = "https://www.youtube.com/channel/UCFL1af7_wdnhHXL1InzaMvA?sub_confirmation=1"
 		icon = "icons/youtube.svg"
 		desc = "Discuss development issues around the project"
-        alt = "YouTube Icon"
+        alt = "Watch Layer5 on YouTube"
 	[[params.links.footer.icons]]
 		name = "Bluesky"
 		url = "https://bsky.app/profile/layer5.bsky.social"
 		icon = "icons/bluesky.svg"
 		desc = "Follow us on Bluesky for updates"
-		alt = "Bluesky Icon"
+		alt = "Follow Layer5 on Bluesky"
 	[[params.links.footer.icons]]
 		name = "Docker"
 		url = "https://hub.docker.com/u/layer5/"
 		icon = "icons/docker.svg"
 		desc = "Discuss development issues around the project"
-        alt = "Docker Icon"
+        alt = "Explore Layer5 images on Docker Hub"
 
 	[[params.links.footer.resources.items]]
 		name = "Learning Paths"

layouts/partials/footer.html

@@ -4,14 +4,14 @@
   <!----------------->
   <div class="row footer-top">
     <div class="col-lg-6">
-      <a href="/">
+      <a href="/" aria-label="Home">
         {{ $svg := resources.Get "icons/logo.svg" }}
         <img class="footer-logo" src="{{ $svg.Permalink }}" alt="Footer Logo Layer5" data-modal="false">
       </a>
     </div>
     <div class="col-lg-6 footer-info footer-icons">
       {{ range .Site.Params.links.footer.icons }}
-      <a href="{{ .url  }}" class="{{ .class }}" target="_blank" rel="noreferrer">
+      <a href="{{ .url  }}" class="{{ .class }}" target="_blank" rel="noreferrer" aria-label="{{ .alt }}">
         {{ $svg1 := resources.Get .icon }}
         <img height="30px" src="{{ $svg1.Permalink }}" alt="{{ .alt }}" data-modal="false">
       </a>

layouts/partials/navbar.html

@@ -3,7 +3,7 @@
     class="td-navbar navbar-dark js-navbar-scroll td-navbar-cover navbar-bg-onscroll--fade"
   >
     <div class="container-fluid flex-column flex-md-row">
-      <a class="navbar-brand" href="/">
+      <a class="navbar-brand" href="/" aria-label="Home">
         <span class="navbar-brand__logo navbar-logo">
           {{ $svg := resources.Get "icons/logo.svg" }}
           <img class="footer-logo" src="/images/logo.svg" alt="logo" data-modal="false" />
@@ -41,6 +41,7 @@
                           class="dropdown-item dropdown-item--row"
                           href="https://cloud.layer5.io/academy"
                           target="_blank"
+                          aria-label="Academy"
                           >
                             <div class="logo-container">
                               <img
@@ -54,6 +55,7 @@
                           <a
                           class="dropdown-item dropdown-item--row"
                           href="/videos"
+                          aria-label="Videos"
                           >
                             <div class="logo-container">
                               <img
@@ -89,13 +91,14 @@
             data-toggle="dropdown"
             style="padding-top:6px"
             >
-            <img width="28px" src="/images/grid-icon.svg" class="grid-icon" data-modal="false" />
+            <img width="28px" src="/images/grid-icon.svg" alt="Products" class="grid-icon" data-modal="false" />
 
           </div>
           <div class="dropdown-menu" aria-labelledby="productsDropdown" style="margin-left:-4.5rem;visibility:hidden;">
             <a
             class="dropdown-item"
             href="https://docs.meshery.io/"
+            aria-label="Meshery Docs"
             target="_blank"
             >
               <div class="logo-container">
@@ -110,6 +113,7 @@
               <a
                 class="dropdown-item"
                 href="https://layer5.io/cloud-native-management/kanvas"
+                aria-label="Kanvas"
                 target="_blank"
               >
                 <div class="logo-container">
@@ -126,6 +130,7 @@
               <a
                 class="dropdown-item"
                 href="https://layer5.io/cloud-native-management/catalog"
+                aria-label="Catalog"
                 target="_blank"
               >
                 <div class="logo-container">
@@ -141,6 +146,7 @@
               <a
                 class="dropdown-item"
                 href="https://smp-spec.io/"
+                aria-label="SMP Spec"
                 target="_blank"
               >
                 <div class="logo-container">
@@ -156,6 +162,7 @@
               <a
                 class="dropdown-item"
                 href="https://getnighthawk.dev/"
+                aria-label="Nighthawk"
                 target="_blank"
               >
                 <div class="logo-container">
@@ -173,6 +180,7 @@
                 class="dropdown-item"
                 href="https://cloud.layer5.io/academy"
                 target="_blank"
+                aria-label="Layer5 Academy"
               >
                 <div class="logo-container">
                   <img
@@ -189,7 +197,7 @@
             <a class="nav-link" href="https://cloud.layer5.io/login" target="_blank">Sign In</a>
           </li>
           <li class="nav-item dropdown" data-bs-theme="dark" id="userlist" style="display: none;">
-             <a href="" id="user-profile-url">
+             <a href="https://cloud.layer5.io" id="user-profile-url" aria-label="User Profile">
               <div
                 class="nav-link avatar-container"
                id="avatarDropdown"
@@ -257,7 +265,8 @@
       cur = document.querySelector("#kanvas");
     if (cur) {
       cur.classList.add("current");
-      cur.href = "javascript: void(0)";
+      cur.style.pointerEvents = "none";
+      cur.style.cursor = "default";
     }
 
   let isUserAuthenticated = false;