Explore More
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>
Bad SEO and UX Practices
Keyword-stuffed title and meta:
- Why choose a clear title when you can jam every possible search phrase into a 120-character jumble? The more, the merrierâexcept for Google, which will just ignore you (and possibly penalize you).
Meta keywords (obsolete):
- If you think Google's secret sauce still comes from the meta keywords tag, you probably still use Ask Jeeves. This tag hasn't affected search in decades, but it does make you look out of touch.
Conflicting robots directives:
- A page that says both index and noindex is like putting up a welcome sign and a "keep out" notice on the same door. Googlebot is confused, and so is anyone reading your code.
Hidden text for SEO:
- Out of sight, out of mindâexcept for search engines, which now see this as an instant red flag for keyword stuffing. Matching text color to the background, hiding divs offscreen, or display: none? Classic spam move.
Annoying alert() on load and when copying text:
- There's nothing like a pop-up "WELCOME!!!" and "NO COPYING!!!" to make sure your bounce rate soars. It's not just bad SEOâit's anti-user.
Autoplay audio, forced to max volume:
- Make sure every visitor gets the same experience: instant regret. Bonus points for disabling pause or replaying the audio if someone tries to stop it.
Low-contrast, eye-searing colors, and animation everywhere:
- If your site induces migraines, it's workingâjust not for engagement. Blinking, spinning, and color combos straight from a 90s rave will turn off users and accessibility tools.
Accessibility nightmares:
- Disable text selection, use unreadable links, skip landmarks and headingsâperfect for making your site an accessibility black hole. Screen readers and users alike will thank you (by leaving).
Obnoxious "easter eggs" that break basic browser functions:
- Why let people copy, right-click, or pause a sound when you can "protect your content"? Google, screen readers, and frustrated visitors will all bounce.
No semantic structure, no mobile optimization, no content hierarchy:
- Who needs <main>, <nav>, or real headings? Just use divs everywhere and hope for the best. On mobile, make sure nothing scales or fits, for bonus penalty points.
Images over-filtered, huge, and with unhelpful alt text:
- Use the biggest, least-compressed image formats you can find (BMP, ancient GIF), with either missing or spammy alt text. No one wants to see or understand your image anyway, right?
Missing or broken HTML tags:
- Leave a few <div>s unclosed, forget a closing quote, or open an <img> without finishing the tag. Makes every browser render your masterpiece differentlyâa true test of courage. XHTML (circa early 2000s) required you to close every tag, so these became <img />, <br />, etc.
Comment "gems" in code:
- If your comments are "LOLZ" or "BEST THEME EVER!!!", you're basically writing a warning label for anyone who stumbles into your codebase.
Pro tip: For real SEO, "hiding" anything is almost always a sign you're hiding from progress.
What's the Deal with <marquee>?
- <marquee> is an old, proprietary HTML tag invented by Microsoft for Internet Explorer in the 1990s.
- It makes text (or images) scroll, slide, or bounce across the page, usually horizontally, sometimes vertically.
- Etymology: "Marquee" refers to the big sign above a theater entrance, often with scrolling or flashing lightsâthe idea was to bring that "look at me!" notion to the web.
- Why Was It Used? Web designers wanted movement and "flash"âand <marquee> was the quick, no-skills-required solution.
- Used for "breaking news," "important updates," or (let's be honest) making your Geocities page as annoying as possible.
- Web designers wanted movement and "flash"âand <marquee> was the quick, no-skills-required solution.
Why is the HTML 'marquee' Tag Deprecated?
- It was never part of official HTML standards (not in any HTML spec). Only supported by some browsers (mainly IE).
- The effect is almost always tacky, distracting, bad for accessibility, and just plain ugly by modern design standards.
- "Real" sites use CSS animations or JavaScript if they want motion, but only sparingly and thoughtfully.
- The HTML marquee tag is now a meme (or a 'warning' label?) for amateurish web designâthe web equivalent of putting spinning GIFs and rainbow text everywhere.
- Modern browsers still support it (for nostalgia/bad backwards compatibility), but you'll never see it on a professional site.
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:
- Keyword-stuffed title and meta tags (desperate for attention, but only attracting penalties)
- Hidden keyword blocks (invisible divs, offscreen, or matching backgroundâhoping bots are fooled, but Google isn't)
- Obsolete meta tags (like meta keywordsâGoogle hasn't cared since you had a Yahoo email)
- Conflicting robots directives (index, noindex, follow, nofollowâpick a side, Bob!)
- Annoying pop-ups and alerts (popping alert()s on load or on basic actionsâgreat for making users run)
- Autoplay audio, forced to max volume (because who doesn't want Van Halen's "Panama" blasting at 8am on a Monday?)
- Blocking basic actions (user-select: none, preventing copy-paste, or breaking right-clickâhostile by design)
- Cringe CSS (flashing backgrounds, unreadable color combos, spinning text, Comic Sans, Papyrus, and, yes, marquee)
- Image abuse (huge, grainy, weirdly filtered images, using BMP and GIF for no reason, with alt text that doesn't match)
- Spammy, misleading, or irrelevant alt text (sometimes no alt text at all, sometimes just nonsense or "BUY MY STUFF!!!")
- No semantic structure (divs on divs, no real headings, nav, or landmarks for screen readers or crawlers)
- Missing or broken HTML tags (forgetting to close tags, or opening/closing them out of orderâparser roulette!)
- Comment "gems" (e.g. // My bad azz function! or /* BEST THEME EVER!!! */âguaranteed not to impress hiring managers)
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>© 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>
Good SEO and UX Practices
Focused, descriptive titles and meta descriptions:
- Instead of a junk drawer full of desperate keywords, Keyboard Pros uses a title that tells you (and Google) exactly what the page is about. The meta description is succinct, compelling, and actually summarizes what you'll findânot just what we wish you were searching for.
No meta keywords, because it's not 2003:
- You won't find a meta keywords tag here, and that's not lazinessâit's professionalism. Modern SEO means letting real content do the work, not invisible wishful thinking.
Clear, consistent robots directives:
- No mixed signalsâjust "here's my page, please index it, thanks." We don't try to be mysterious or self-contradictory. Crawlers and humans alike appreciate the honesty.
Visible, valuable content (no tricks):
- Every word, image, and link on Keyboard Pros is meant for real peopleânot hidden, not offscreen, not in tiny font on a white background. The only surprise is how easy it is to find what you're looking for.
No popups, no alerts, no rage triggers:
- We don't greet visitors with surprise alerts or "Don't copy this!" tantrums. The only thing that pops here is your confidence that you're in the right place.
No autoplay, forced audio, or media shenanigans:
- Your ears are safeâno sudden blasts of "Panama." Audio and video are user-controlled and never forced. Respectful, like a good neighbor (not like Bob).
Accessible, readable design:
- Color contrast you can actually read. Font sizes that don't require a microscope or sunglasses. And yes, headings that look like headings. All by design, so everyoneâscreen reader or notâcan use the site.
No broken browser behavior:
- Keyboard Pros lets you copy, paste, print, or even right-click. Shocking, but true: you control your browser, not us. This builds trustâand trust is good SEO.
Semantic HTML and mobile-first layout:
- We use <header>, <nav>, <main>, <section>, and other elements the way nature intended. The site looks good on phones, tablets, and 8-year-old laptops, because we tested it. It's called "caring."
Optimized, descriptive images with relevant alt text:
- Images are crisp, web-optimized, and sized for your deviceânot blown-up relics from 1997. Alt text actually describes the image, so users with screen readers (and Google) know what's going on.
Valid, well-formed HTML:
- Every tag has a closing tag. Every quote is closed. Images actually render. It's not just about passing validatorsâit's about respecting anyone who views your source code.
Professional, helpful comments:
- When we comment our code, it's to explain, not to meme. "Here's why this exists." Not "LOL BEST FUNCTION EVER." It's like a user manual, not graffiti.
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:
- Writing for bots instead of people,
- Ignoring accessibility or basic readability,
- Annoying your users with "creative" design choices that make your site unusable,
- Hiding text, abusing tags, or chasing ancient SEO hacks that haven't worked since the Bush administration.
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.
- Write like a human.
Short, clear, neutral, and to the pointâdon't write like ad copy, and don't try to "sell."
- Avoid salesy, "extra" language:
Bad: alt="BUY CHEAP KEYBOARDS ONLINE NOW GREAT DEALS"
Good: alt="Wireless gaming keyboard with RGB backlighting"
- No need for full sentences.
A phrase is enough, unless context requires more.
- Use sentence case or normal grammar.
alt="Big Bob holding a keyboard" not alt="BIG BOB HOLDING A KEYBOARD"
Final Takeaway
- Don't stuff keywords, don't use obsolete tags, and don't hide text.
- Make your content readable, your CSS professional, and your UX pleasantâeven for people who just want to copy some text.
- Save the spinning, blinking "Comic Sans" for an inside joke, not your production landing page.
- Don't be like 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.