DEV Community

Cover image for SEO Basics Every Developer Should Know
Web Utility labs
Web Utility labs

Posted on

SEO Basics Every Developer Should Know

#webdev #frontend #tutorial #productivity

A few weeks back, I was consulting for a tech startup with an absolutely gorgeous website. Beautiful animations, pixel-perfect responsive design, smooth user experience - the whole nine yards. Their bounce rate was low, users loved the interface, but they had one massive problem: almost no organic search traffic.

After digging into their code, I found the culprit. They'd invested months perfecting the visual experience but completely overlooked the fundamentals that search engines actually care about. Missing title tags, zero meta descriptions, completely broken heading hierarchy - all the "boring" technical stuff that drives organic growth.

After 8+ years of web development, I've noticed this pattern everywhere. Teams pour energy into making sites look amazing (which is important!) but skip the basic SEO implementation that takes maybe 15 minutes to get right.

Fix Your Title Tags (They're Probably Wrong)

I'm constantly amazed by how many developers craft beautiful user interfaces, then leave their title tags as "Home" or "Page Title."

Just last month, I inherited a project where the main landing page had been live for four months with <title>Untitled Document</title>. Four months of potential traffic, completely wasted.

<!-- Don't do this --> <title>Home</title> <!-- Do this instead --> <title>React Development Services for Startups - BuildFast</title>
Enter fullscreen mode Exit fullscreen mode

Keep your titles under 60 characters (if it wouldn't fit in an old Twitter post, it's too long). Front-load the important keywords. If you're "Sarah's Incredible Design Studio," people are searching for "design studio," not "Sarah's Incredible."

Write Better Meta Descriptions

Think of meta descriptions as your elevator pitch for search results. You've got 160 characters to convince someone to click your link instead of the 10 other options staring at them.

Too many sites either skip meta descriptions entirely or write something utterly generic like "Quality services for all your needs." That tells me nothing. That doesn't make me want to click.

<!-- Generic and useless --> <meta name="description" content="We provide web development services"> <!-- Actually sells what you do --> <meta name="description" content="Custom React apps that scale from MVP to millions of users. 2-week sprints, clean code, no vendor lock-in.">
Enter fullscreen mode Exit fullscreen mode

Write like you're talking to a real person with a real problem. What do you solve? How quickly? What makes you different from everyone else?

Use Headers The Right Way

This is where even experienced developers trip up. Headers aren't just for visual hierarchy - they're like a roadmap for search engines trying to understand your content.

I once took over a codebase where every single heading was an <h3> because the developer thought it "looked cleaner" than <h2> tags. From a search engine perspective, the page had zero logical structure.

<!-- Complete chaos --> <h1>Main Title</h1> <h4>Skipping levels randomly</h4> <h2>Going backwards now</h2> <h1>Wait, another H1?</h1> <!-- Logical structure --> <h1>Complete Guide to React Performance</h1> <h2>Why React Apps Get Slow</h2> <h3>Common Performance Bottlenecks</h3> <h3>Memory Leak Issues</h3> <h2>Tools That Actually Help</h2>
Enter fullscreen mode Exit fullscreen mode

One <h1> per page. <h2> for main sections. <h3> for subsections. Think of it like outlining a paper - remember doing those in school?

Add Alt Text to Your Images

Alt text feels like busywork when you're focused on getting layouts pixel-perfect. I get it. But here's the reality - search engines are completely blind to your images without alt text.

<!-- Completely useless --> <img src="team.jpg" alt="image"> <!-- Actually helpful --> <img src="team.jpg" alt="Five developers working on laptops in office">
Enter fullscreen mode Exit fullscreen mode

Just describe what you see. Don't overthink it. Don't keyword stuff. Just be descriptive.

Clean Up Your CSS for Better Performance

Had a client site taking 8 seconds to load. CSS file was 380KB - previous dev imported Bootstrap, Foundation, AND Tailwind, then overrode everything.

.button { background: blue !important; color: white !important; padding: 10px !important; border: none !important; }
Enter fullscreen mode Exit fullscreen mode

Cleaned it up: 380KB → 45KB. Load time: 8 seconds → 1.2 seconds.

This CSS specificity visualizer and optimizer helps find where your specificity explodes.

Don't Hide Content From Search Engines

Client's blog posts weren't ranking. Found this in their CSS:

.blog-content { display: none; } .blog-content.loaded { display: block; }
Enter fullscreen mode Exit fullscreen mode

JavaScript was supposed to add "loaded" class after API loaded content. When JS failed, content stayed hidden. Google saw empty pages.

Fix: show content by default:

.blog-content { display: block; }
Enter fullscreen mode Exit fullscreen mode

Make Your JavaScript SEO-Friendly

Client had product catalog loading via JavaScript. Google couldn't see any products.

useEffect(() => { fetch('/api/products') .then(res => res.json()) .then(data => setProducts(data)); }, []);
Enter fullscreen mode Exit fullscreen mode

Added Next.js SSR. Organic traffic up 340% in 3 months.

Content needs JavaScript = you need SSR.

Fix All Your Broken Links

Dead links are everywhere, and they're killing your SEO. I run a simple script on every site I audit - usually find 10-15 broken links on a 20-page site.

<!-- Links that go nowhere --> <a href="/old-page">This goes nowhere</a> <a href="javascript:void(0)">This does nothing</a> <!-- Links that actually work --> <a href="/current-services">See what we do</a> <a href="/contact">Talk to us</a>
Enter fullscreen mode Exit fullscreen mode

I built a simple Node.js script that crawls my sites monthly and emails me broken links. Takes 30 minutes to set up, saves hours of manual checking.

Avoid Duplicate Content Issues

This one's sneaky. You might have the same content at multiple URLs without realizing it:

https://yoursite.com/blog/post https://yoursite.com/blog/post/ https://www.yoursite.com/blog/post https://yoursite.com/blog/post?utm_source=twitter
Enter fullscreen mode Exit fullscreen mode

Google sees these as four different pages with identical content. Use canonical tags to specify which version is the "real" one.

<link rel="canonical" href="https://yoursite.com/blog/post">
Enter fullscreen mode Exit fullscreen mode

Make Your Site Mobile-First

Google looks at your mobile site first now. If something's missing on mobile, it might not get indexed at all.

I see this constantly - sites that hide important content on mobile to save space. Bad strategy.

/* Bad for SEO */ @media (max-width: 768px) { .important-content { display: none; } } /* Better approach */ @media (max-width: 768px) { .important-content { font-size: 14px; line-height: 1.4; } }
Enter fullscreen mode Exit fullscreen mode

Your mobile site should have the same content as desktop, just formatted differently.

Improve Your Page Speed

Google now factors Core Web Vitals into rankings. If your site feels slow, it's going to rank lower.

The biggest culprit I see is layout shift - when content jumps around while the page loads. It's incredibly annoying for users.

/* Reserve space for images */ .hero-image { width: 100%; height: 400px; background: #f0f0f0; } .hero-image img { width: 100%; height: 100%; object-fit: cover; }
Enter fullscreen mode Exit fullscreen mode

Always specify image dimensions. Reserve space for ads or dynamic content.

My Pre-Launch SEO Checklist

Before any site goes live, I run through this checklist:

  • Title tags - Unique and under 60 characters
  • Meta descriptions - Compelling and under 160 characters
  • Header structure - One H1, logical hierarchy
  • Alt text - Descriptive for every image
  • Internal links - All working, descriptive anchor text
  • Mobile parity - Same content as desktop
  • Speed - Core Web Vitals passing
  • Canonical tags - Set where needed
  • Sitemap - Generated and submitted
  • Link health - All working, none broken

The Bottom Line

SEO doesn't have to be rocket science. Most of the issues I encounter come from rushing through projects or simply not knowing these basics exist.

Clean HTML, decent page speed, working links - that covers about 80% of SEO problems right there. If you're also dealing with CSS specificity issues, that CSS specificity visualizer and optimizer tool has been a lifesaver for debugging.

Good SEO is really just good web development. Build something useful, make it accessible, and search engines will figure out the rest.

What SEO mistakes have you seen ? Drop them in the comments - I'm always curious about viewpoint of other developers .

Top comments (0)