Learn Programming
A Tale of Two SEO Practices: Bad vs. Good SEO
ChatGPT & Benji Asperheim— Mon Aug 4th, 2025

A Tale of Two SEO Practices: Bad vs. Good SEO (and UX) on Your Website

If SEO is about getting your website found, bad SEO is about making it disappear—sometimes in spectacular, slow-motion car-crash fashion. But here’s a twist: a lot of the worst SEO is hidden in plain sight, surrounded by equally terrible CSS, pop-ups, and UI choices straight out of a 2004 MySpace fever dream.

Let’s take a critical look at two landing pages: one that does things right, and another that… really, really doesn’t. Spot the differences, laugh (or cry), and then learn what not to do.

Bad SEO Examples: “Big Bob’s Discount Keyboards and SEO Tricks!”

<!DOCTYPE html>
<html>
<head>
  <title>KEYBOARD, KEYBOARDS, KEYBOARDS! Buy Keyboard, Cheap Keyboard Sale, Keyboard Deals, Best Keyboards 2025, Keyboard Store</title>
  <meta name="keywords" content="keyboard, cheap keyboard, buy keyboard, keyboard 2025, sale, best, discount, buy keyboards, keyboard keyboard keyboard">
  <meta name="description" content="Keyboard, keyboard, buy keyboard now, cheap keyboard, best keyboard deals. Welcome to keyboard store.">
  <meta name="robots" content="index, follow, noindex, nofollow, noodp, noarchive, noimageindex">
  <script>

    // My bad azz function!
    window.onload = function() {

      alert("🚨 Welcome to Big Bob's Discount Keyboards! 🚨 Best keyboard keyboard keyboard deals!");
      document.body.oncopy = function(e) {
        alert('Copying is not allowed on Big Bob\'s!');
        e.preventDefault();
      };

      // Force autoplay audio
      var audio = document.querySelector('audio');
      audio.volume = 1; // Set volume to max
      audio.play();

      // If autoplay fails, try again and again...
      audio.addEventListener('error', function() {
        audio.play();
      });

      // If user pauses the audio, play it again
      audio.addEventListener('pause', function() {
        audio.play();
      });

      // Create an interval to check if audio is playing
      setInterval(function() {
        if (audio.paused) {
          audio.play();
        }
      }, 1000); // Check every 1 second

      setTimeout(() => {
        document.body.style.filter = "blur(2px) grayscale(1) invert(1)";
        setTimeout(() => { document.body.style.filter = ""; }, 2000);
      }, 2500);
    };
  </script>
  <style>
    /* BEST THEME EVER!!! */
    body {
      background: repeating-linear-gradient(45deg, #ff0, #ff0 10px, #0ff 10px, #0ff 20px);
      color: #f00 !important;
      font-family: 'Comic Sans MS', cursive, papyrus;
      font-size: 32px;
      text-align: center;
      letter-spacing: 5px;
      cursor: crosshair;
      /* The ultimate accessibility fail: */
      user-select: none;
    }
    h1, h2 {
      text-shadow: 4px 4px 10px #0ff, 0 0 20px #f0f;
      background: #000;
      color: #ff0 !important;
      border: 5px dashed #f0f;
      margin: 25px auto;
      padding: 15px;
      width: 90vw;
      border-radius: 18px 0 18px 0;
      animation: spinny 1.8s linear infinite;
    }
    @keyframes spinny {
      0% { transform: rotate(-2deg);}
      50% { transform: rotate(3deg);}
      100% { transform: rotate(-2deg);}
    }
    marquee { color: blue; font-size: 48px; font-weight: bold; }
    .hidden { display: none; } /* HAHA! No one will ever see how I love to stuff them keywords full! */

    #play-button {
      animation: blink 1s infinite;
      width: 500px;
      height: 200px;
      font-size: 64px;
      border-radius: 50%;
      position: fixed;
      top: 50%;
      left: 20%;
      transform: translate(-50%, -50%);
    }

    @keyframes blink {
      0% { background-color: #f00; }
      50% { background-color: #0f0; }
      100% { background-color: #f00; }
    }

    /* Accessibility? Nah. */
    a { color: #0ff; font-size: 2em; background: #f0f; text-decoration: blink; }
    footer { background: #0ff; color: #f0f; font-size: 2.5em; margin-top: 50px; padding: 22px; border-radius: 8px 32px; }
  </style>
</head>

<body>
  <marquee>BUY KEYBOARD CHEAP KEYBOARD SALE!</marquee>
  <div id="main">
    <h1>Keyboard, Keyboard, Keyboard! The Only Keyboard Store You Need for Keyboard Deals.</h1>
    <p>Are you looking for a keyboard? Buy a keyboard now! Keyboard keyboard keyboard, cheap keyboard, best keyboard deals, keyboards for everyone, keyboard sale 2025.</p>
    <a href="/gif/angry-guy-destroy-computer-funny-suZuCN" title="FUNNY!"><img src="https://i.makeagif.com/media/10-21-2015/suZuCN.gif" alt="Buy MY Keyboard Now pleez!!"></a><div style="font-size:11px;">make <a href="/" title="please buy my stuff 😩">funny GIFs</a> like this at MakeaGif</div>

    <!-- No one will see these 😈 -->
    <div class="hidden">This is invisible SEO text. keyboard, buy keyboard, discount keyboard, best keyboard, cheap keyboard, keyboard store.

     <!-- WATCH ME STUFF THIS DOWN SOME BOTS' THROATS UNTIL THEY GAG 🤮 -->
    <div style="color: #f8fafc; background: #f8fafc; font-size: 0.92em; position: absolute; left: -9999px;">
      keyboard, best keyboards 2025, keyboard reviews, mechanical keyboard, cheap keyboard deals, wireless keyboard, buy keyboard, buy keyboards, keyboards for sale, gaming keyboard, ergonomic keyboard, keyboard store, keyboard guide, keyboard sale, keyboard 2025,
      best keyboard for work, best keyboard for gaming, top keyboards 2025, low price keyboard, discount keyboard, shop keyboard, keyboard expert, online keyboard deals, find keyboard, new keyboards 2025
    </div>
  </div>

  <img src="./big-bob-with-keyboard.BMP" alt="I'M BIG BOB!! I LOVE KEYBORDS!"<img/>

    <!-- AUTO PLAY SOME ROCKIN', BAD AZZ TUNES!!!!1! PANAMA, BABY!! -->
  <audio id="audio" src="./van-halen-panama.mp3"></audio>
  <button id="play-button">Play Audio</button>

  <footer>
    <a href="mailto:bigbob@keyboard-keyboard-keyboard.biz">Contact Big Bob's Discount Keyboard Store</a>

  </footer>
</body>
</html>

GIF image of a landing page with bad SEO examples

Bad SEO and UX Practices

Keyword-stuffed title and meta:

Meta keywords (obsolete):

Conflicting robots directives:

Hidden text for SEO:

Annoying alert() on load and when copying text:

Autoplay audio, forced to max volume:

Low-contrast, eye-searing colors, and animation everywhere:

Accessibility nightmares:

Obnoxious “easter eggs” that break basic browser functions:

No semantic structure, no mobile optimization, no content hierarchy:

Images over-filtered, huge, and with unhelpful alt text:

Missing or broken HTML tags:

Comment “gems” in code:

Pro tip: For real SEO, “hiding” anything is almost always a sign you’re hiding from progress.

What’s the Deal with <marquee>?

Why is the HTML ‘marquee’ Tag Deprecated?

Is Duplicate Content Bad for SEO?

Yes, duplicate content is bad for SEO—but it’s not usually a “penalty.” Google picks one version of the same content to rank, and ignores or filters out the rest. This means your own pages can end up competing with each other, and neither will rank as well as if they were unique.

If a large portion of your site is duplicated from elsewhere (or from itself), it’s a signal to Google that you’re not offering original value—and that’s never good for search rankings.

Bad SEO Easter Egg Hunt 🐣

Did you find them all?

Building a bad website isn’t just about torpedoing your search ranking—it’s about creating an experience visitors will never forget (or forgive). Let’s see if you caught all the “Easter eggs” lurking in Big Bob’s Discount Keyboard landing page:

Good SEO Examples: “Keyboard Pros—Find Your Perfect Keyboard”

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Find the Best Keyboard for Work or Play | Keyboard Pros 2025</title>
    <meta
      name="description"
      content="Discover expert reviews, buying guides, and deals on the best keyboards for gaming, work, and creative use. Find the perfect keyboard for your needs with Keyboard Pros."
    />
    <link rel="canonical" href="https://keyboardpros.com/" />
    <meta property="og:title" content="Find the Best Keyboard for Work or Play | Keyboard Pros 2025" />
    <meta
      property="og:description"
      content="Expert advice, reviews, and top picks for the best keyboards-mechanical, wireless, ergonomic, and more. Updated for 2025."
    />
    <meta property="og:image" content="https://keyboardpros.com/thumbnail.avif" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/styles.css" />
  </head>
  <body>
    <header>
      <h1>Find the Best Keyboard for Work or Play: Expert Reviews for 2025</h1>
      <nav aria-label="Main navigation">
        <ul>
          <li><a href="/guides/">Buying Guides</a></li>
          <li><a href="/reviews/">Reviews</a></li>
          <li><a href="/deals/">Deals</a></li>
          <li><a href="/about/">About</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <section>
          <h2>Top-Rated Keyboards This Year</h2>
          <p>
            Looking for a new keyboard? Our experts review and compare the latest models-mechanical, wireless, ergonomic, and more-to help you find your perfect
            fit.
          </p>
          <img src="https://i.imgur.com/GOy8pXl.jpeg" alt="Modern mechanical keyboard on a desk" width="600" />
        </section>
        <section>
          <h2>Why Trust Keyboard Pros?</h2>
          <ul>
            <li>Up-to-date expert reviews (2025)</li>
            <li>Easy comparison charts</li>
            <li>Buying tips for all budgets</li>
          </ul>
        </section>
      </article>
    </main>
    <footer>
      <p>&copy; 2025 Keyboard Pros. All rights reserved. | <a href="/contact/">Contact Us</a></p>
    </footer>
    <style>
      body {
        background: #f8fafc;
        color: #1a202c;
        font-family: system-ui, sans-serif;
        font-size: 1.1rem;
        margin: 0;
        line-height: 1.6;
      }
      header {
        background: lightGrey;
      }
      header,
      main,
      footer {
        max-width: 720px;
        margin: 0 auto;
        padding: 2em 1em;
      }
      h1,
      h2 {
        color: #2b6cb0;
        letter-spacing: 0;
        text-shadow: none;
        margin-bottom: 0.6em;
      }
      nav ul {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 1.5em;
        margin-bottom: 2em;
      }
      nav a {
        text-decoration: none;
        color: #3182ce;
        font-weight: 500;
      }
      nav a:hover {
        text-decoration: underline;
      }
      img {
        border-radius: 8px;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 1em 0;
      }
      footer {
        color: #6b7280;
        font-size: 0.98em;
        text-align: center;
        border-top: 1px solid #e2e8f0;
        margin-top: 2em;
        padding-top: 1em;
      }
    </style>
  </body>
</html>

Image of a landing page with good SEO examples

Good SEO and UX Practices

Focused, descriptive titles and meta descriptions:

No meta keywords, because it’s not 2003:

Clear, consistent robots directives:

Visible, valuable content (no tricks):

No popups, no alerts, no rage triggers:

No autoplay, forced audio, or media shenanigans:

Accessible, readable design:

No broken browser behavior:

Semantic HTML and mobile-first layout:

Optimized, descriptive images with relevant alt text:

Valid, well-formed HTML:

Professional, helpful comments:

Pro tip: For real SEO, build for humans first, and Google will follow. When you design with clarity, care, and respect for your audience, search engines notice—and so does everyone else.

Which of These is a Bad SEO Practice?

Let’s not overthink it: when you compare Big Bob’s Discount Keyboards with Keyboard Pros, it’s hilariously clear which one is guilty of every bad SEO practice in the book (and then some). If your page reads like a hostage note to the Google crawler—keyword-stuffed titles, hidden text, clashing colors, pop-ups galore, and more blinking than a Y2K screensaver—you already have your answer.

HINT: It’s not just about what’s in your <meta> tags.

Bad SEO is any combination of:

So if you’re ever unsure, just ask:

“Which of these is a bad SEO practice?”

If it makes users cringe, leave, or never want to copy-paste a thing again, congratulations—you found it.

Bottom line: The best SEO “hack” is building a site you’re not embarrassed to send to your own mother (or your most jaded developer friend). Big Bob’s? Not so much.

Takeaway: Keep your content unique. Use canonical tags for unavoidable duplicates, and never rely on copy-paste to fill out your site.

Image ‘alt’ Text SEO Best Practices

Screen readers use it to describe images for people who can’t see them. If your alt="" text is missing, or useless (e.g. "image123"), those users are out of luck. Google does use alt text to help understand page content and to rank images in Google Images. But overdoing it, keyword stuffing, or making it unnatural can hurt you—and is a negative accessibility signal.

Final Takeaway

Profile image of fictitious Big Bob

If your site looks like Big Bob’s, it might be time for a rebrand—and a rewrite. For everyone else, keep it clean, clear, and user-first. Search engines (and real people) will thank you.