🕸️ Spider: [SEO] Convert CTA buttons to semantic Links in Intro and About blocks

.jules/spider.md

@@ -10,3 +10,4 @@
 ## 2024-05-19 - Typechecking JSON-LD Date Properties
 **Learning:** When passing potentially null date fields (like `publishedAt`, `updatedAt`) from Payload CMS to jsonLd generator functions, using the fields directly can cause strict TypeScript compilation failures since the schemas explicitly expect `string | undefined` and not `null`.
 **Action:** Always use the logical OR operator with `undefined` (e.g., `datePublished: post.publishedAt || undefined`) when passing date properties to JSON-LD generator functions to satisfy strict type requirements and prevent build regressions.
+## 2024-06-28 - Inert CTA Buttons breaking Crawlability\n**Learning:** Discovered meaningless `<button>` elements being used as Call-To-Action (CTA) wrappers in CMS blocks (`src/blocks/Intro/Component.tsx`, `src/blocks/About/Component.tsx`) without any `onClick` handlers or standard `href` attributes, rendering them entirely non-crawlable for search engines trying to discover internal links.\n**Action:** When implementing Call-To-Action elements, especially those meant to navigate users or spiders to other sections or pages, always use semantic `<a>` tags via Next.js `<Link>`. If the exact dynamic link isn't known or configured, provide a safe relative fallback `href` (like `/`) rather than an empty `#` to ensure crawler navigation paths remain valid.

src/blocks/About/Component.tsx

@@ -7,6 +7,7 @@ import {
   useTransform,
   useMotionValue,
 } from 'framer-motion'
+import Link from 'next/link'
 
 // Define the Props locally to avoid waiting for Payload type generation
 export type AboutBlockProps = {
@@ -128,7 +129,8 @@ export const AboutBlock: React.FC<AboutBlockProps> = (props) => {
 
               {/* CTA Button */}
               <div>
-                <button className="group relative overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
+                {/* SEO: Using Next.js <Link> with href instead of meaningless <button> improves crawlability for search engines */}
+                <Link href="/" className="group relative inline-block overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
                   {/* Hover Background Fill */}
                   <span className="absolute inset-0 translate-y-full bg-[#FFAA00] transition-transform duration-300 ease-out group-hover:translate-y-0" />
 
@@ -140,7 +142,7 @@ export const AboutBlock: React.FC<AboutBlockProps> = (props) => {
                       &rarr;
                     </span>
                   </span>
-                </button>
+                </Link>
               </div>
             </motion.div>
           </div>

src/blocks/Intro/Component.tsx

@@ -7,6 +7,7 @@ import {
     useTransform,
     useMotionValue,
 } from 'framer-motion'
+import Link from 'next/link'
 import { IntroBlock } from '@/payload-types'
 
 type IntroBlockProps = IntroBlock & {
@@ -113,7 +114,8 @@ export const IntroBlockComponent: React.FC<IntroBlockProps> = (props) => {
 
                             {/* CTA Button */}
                             <div>
-                                <button className="group relative overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
+                                {/* SEO: Using Next.js <Link> with href instead of meaningless <button> improves crawlability for search engines */}
+                                <Link href="/" className="group relative inline-block overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
                                     {/* Hover Background Fill */}
                                     <span className="absolute inset-0 translate-y-full bg-[#FFAA00] transition-transform duration-300 ease-out group-hover:translate-y-0" />
 
@@ -125,7 +127,7 @@ export const IntroBlockComponent: React.FC<IntroBlockProps> = (props) => {
                                             &rarr;
                                         </span>
                                     </span>
-                                </button>
+                                </Link>
                             </div>
                         </motion.div>
                     </div>