Merge pull request #7110 from Azizah2023/fix/seo-alt-links-kanvas

fix(seo): add alt attributes and make links crawlable in Kanvas page

Author: Namanv0509

src/components/Features-carousel/index.js

@@ -94,14 +94,24 @@ const Feature = ({ children, title, active, onClick, learnMoreLink, id, Element
       )}
       <div className="body" id={`feature-${id}`} >
         <p>{children}</p>
-        {learnMoreLink && learnMoreLink.startsWith("/")
-          ? <Link className="learn-more-link" to={learnMoreLink}>
-            Explore <IoIosArrowRoundForward />
-          </Link>
-          : <a href={learnMoreLink} className="learn-more-link">
-           Explore <IoIosArrowRoundForward />
-          </a>
-        }
+        {learnMoreLink
+          ? learnMoreLink.startsWith("/")
+            ? (
+              <Link className="learn-more-link" to={learnMoreLink}>
+          Explore <IoIosArrowRoundForward />
+              </Link>
+            )
+            : (
+              <a
+                href={learnMoreLink}
+                className="learn-more-link"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+          Explore <IoIosArrowRoundForward />
+              </a>
+            )
+          : null}    {/* No link rendered if learnMoreLink is empty */}
       </div>
     </Element>
   );

src/pages/cloud-native-management/kanvas/index.js

@@ -14,5 +14,9 @@ const KanvasPage = ({ location }) => {
 };
 export default KanvasPage;
 export const Head = () => {
-  return <SEO title="Kanvas" description="Collaboratively design and manage your Kubernetes workloads and Cloud services, infrastructure, and cloud native apps. Confidently configure your systems with Kanvas's visual topology and built-in design patterns." />;
+  return  <SEO
+    title="Kanvas | Kubernetes Visualization and Cloud Management"
+    description="Collaboratively design and manage your Kubernetes workloads, infrastructure, and cloud services using Layer5 Kanvas."
+    keywords={["Kanvas", "Kubernetes visualization", "service mesh dashboard", "Layer5"]}
+  />;
 };

src/reusecore/Blockquote/Blockquote-image/index.js

@@ -41,7 +41,7 @@ const Customers = (props) => {
                   </div>
                 </div>
 
-                <div className="type-two-quote-userpic"><img src={props.image}></img></div>
+                <div className="type-two-quote-userpic"><img  src={props.image} alt=""></img></div>
 
                 <div className="type-two-quote-base">
                   <blockquote className="type-two-quote-text">

src/sections/Kanvas/kanvas-catalog.js

@@ -443,19 +443,19 @@ const Catalog = () => {
           {/* Right Section */}
           <section className="services svg-cont">
             <div>
-              <img src={Patterns} alt="Cloud Native Patterns"/>
+              <img alt="Kanvas dashboard showing service retries in Kubernetes visualization" src={Patterns} />
               <p>Cloud Native Patterns</p>
             </div>
             <div>
-              <img src={Ebpf} alt="eBPF programs" />
+              <img alt="eBPF program visualization in Kanvas for Kubernetes observability" src={Ebpf} />
               <p className="ebpf-text">eBPF Programs</p>
             </div>
             <div>
-              <img src={Wasm} alt="WebAssembly filters" />
+              <img alt="WASM filters integration visualization in Kanvas dashboard" src={Wasm} />
               <p>WASM Filters</p>
             </div>
             <div>
-              <img src={Opa} alt="OPA policies"/>
+              <img alt="OPA policies management illustration in Kanvas service mesh" src={Opa} />
               <p>OPA Policies</p>
             </div>
           </section>
@@ -467,49 +467,49 @@ const Catalog = () => {
             <div className="container">
               <div id="carousel">
                 <div className="slide one">
-                  <img src={Mutual_tls} alt="Mutual TLS" />
+                  <img src={Mutual_tls} alt="Kanvas Mutual TLS security feature for Kubernetes workloads" />
                 </div>
                 <div className="slide two">
-                  <img src={Retries} alt="Retries" />
+                  <img src={Retries} alt="Kanvas dashboard showing service retries in Kubernetes visualization" />
                 </div>
                 <div className="slide three">
-                  <img src={Traces} alt="Distributed Traces" />
+                  <img src={Traces}  alt="Kanvas tracing visualization for distributed Kubernetes services" />
                 </div>
                 <div className="slide four">
-                  <img src={Denial} alt="Denial" />
+                  <img src={Denial} alt="Access denial control feature in Kanvas service mesh" />
                 </div>
                 <div className="slide five">
-                  <img src={Correlate_event} alt="Correlate Event" />
+                  <img src={Correlate_event} alt="Event correlation view in Kanvas dashboard" />
                 </div>
                 <div className="slide six">
-                  <img src={Only_wagent} alt="Only with Agent" />
+                  <img src={Only_wagent} alt="Kanvas only agent monitoring feature for clusters" />
                 </div>
                 <div className="slide seven">
-                  <img src={Node_agent} alt="Node Agent" />
+                  <img src={Node_agent} alt="Kanvas node agent metrics visualization for Kubernetes" />
                 </div>
                 <div className="slide eight">
-                  <img src={Single_tenant} alt="Single Tenant" />
+                  <img src={Single_tenant} alt="Single tenant Kubernetes deployment dashboard in Kanvas" />
                 </div>
                 <div className="slide nine">
-                  <img src={Pre_provison} alt="Pre-provision" />
+                  <img src={Pre_provison} alt="Kanvas pre-provisioning configuration for Kubernetes clusters" />
                 </div>
                 <div className="slide ten">
-                  <img src={Circuit_breaker} alt="Circuit Breaker" />
+                  <img src={Circuit_breaker}  alt="Circuit breaker monitoring in Kanvas service mesh"/>
                 </div>
                 <div className="slide eleven">
-                  <img src={Retry_deadline} alt="Retry with Deadline" />
+                  <img src={Retry_deadline}  alt="Retry deadline feature in Kanvas observability dashboard" />
                 </div>
                 <div className="slide twelve">
-                  <img src={Singleton} alt="Singleton Pattern" />
+                  <img src={Singleton} alt="Singleton service pattern visualization in Kanvas" />
                 </div>
                 <div className="slide thirteen">
-                  <img src={Jwt_transformer} alt="JWT Transformer" />
+                  <img src={Jwt_transformer} alt="JWT transformer process view in Kanvas Kubernetes dashboard" />
                 </div>
                 <div className="slide fourteen">
-                  <img src={Multicluster} alt="Multicluster" />
+                  <img src={Multicluster} alt="Multi-cluster management view in Kanvas" />
                 </div>
                 <div className="slide fifteen">
-                  <img src={Http_metrics} alt="HTTP Metrics" />
+                  <img src={Http_metrics} alt="HTTP metrics monitoring dashboard in Kanvas for Kubernetes" />
                 </div>
               </div>
             </div>