nextjs - 💡(How to fix) Fix Link component creates poor SEO anchor text by including image markup alongside text content [1 comments, 2 participants]

import Link from 'next/link';
import Image from 'next/image';

export default function CardComponent() {
  const data = {
    url: '/walk-in-dining',
    title: 'Walk-in Dining',
    image: 'https://example.com/dining.png'
  };

  return (
    <Link key={index} href={data.url}>
      <div className="card">
        <span className="title">
          {data.title}
        </span>
        <div className="image-wrapper">
          <Image
            src={data.image}
            width={88}
            height={56}
            alt={data.title}
          />
        </div>
      </div>
    </Link>
  );
}

---

<a href="/walk-in-dining">
  <div class="card">
    <span class="title">Walk-in Dining</span>
    <div class="image-wrapper">
      <img alt="Walk-in Dining" loading="lazy" decoding="async" ... />
    </div>
  </div>
</a>

---

Walk-in Dining<img alt="Walk-in Dining" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" src="https://example.com/dining.png?format=auto&quality=80"/>


**Expected Behavior**
The anchor text for SEO should only be: Walk-in Dining
The image should be part of the clickable area but NOT included in the semantic anchor text used by search engines for ranking and context.

**1. Attempted Workarounds**

Using legacyBehavior (deprecated) - Works but not a long-term solution:

---

✅ Correct anchor text
⚠️ Uses deprecated API

**2. Nested anchor tags - Invalid HTML:**

---

❌ Creates nested <a> tags (invalid HTML)
❌ Console errors

**3. Separate Link for text only - Loses clickable card:**

---

✅ Correct anchor text
❌ Entire card is not clickable (poor UX)

### Provide environment information