Let me tell you about a humbling experience.
I once built a website I was genuinely proud of. Clean design. Fast loading. Solid content. I spent weeks on it. Then I checked if anyone could actually find it on Google.
Crickets.
No traffic. No rankings. No visitors. Just a beautiful, invisible website sitting on the internet like a billboard in the middle of a forest.
That was the day I stopped treating SEO as an optional afterthought and started treating it as a core part of building for the web.
The honest truth about SEO:
Search Engine Optimization is not magic, and it's not just for marketers. It lives directly in your code — in your HTML tags, your URL structure, your image attributes, and your page metadata. As a developer, you have more control over SEO than you might think.
This guide will walk you through the essential SEO steps you can implement directly in your code — with real examples and clear explanations.
Let's make sure your next project gets found.
First — What Exactly Is SEO?
SEO stands for Search Engine Optimization. At its core, it's the practice of making your website easier for search engines — like Google, Bing, and others — to understand, index, and rank.
When someone searches for "best budget laptops" or "how to fix a React useEffect bug," search engines crawl billions of pages and decide which ones deserve to show up first. SEO is what helps your page get into that conversation.
Here's the part developers often miss: SEO is not just about keywords stuffed into blog posts. A huge portion of SEO lives at the code level — in your HTML structure, metadata, performance, and more.
Two sides of SEO:
On-page SEO covers content, keywords, and structure. Technical SEO covers the code — how fast your page loads, how it's structured, how search engines read it. This guide focuses on the technical, code-level side, where developers have the most direct impact.
Step 1: Create a Sitemap
Imagine walking into a massive library with no catalogue, no signs, and no librarian. You'd eventually find something — but it would take forever, and you'd miss a lot.
A sitemap is the catalogue for your website. It tells search engines exactly what pages exist, how they're structured, and how often they change. Without one, search engines are left wandering.
Why it matters
A sitemap helps search engines index your content faster and more accurately. New pages get discovered sooner, which means they can start ranking sooner.
What a sitemap looks like
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://yourwebsite.com/</loc>
<lastmod>2024-01-15</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://yourwebsite.com/about</loc>
<lastmod>2024-01-10</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
How to create one
Static sites — use a free tool like XML-Sitemaps.com to generate one automatically.
React/Next.js — use the next-sitemap package to auto-generate on every build.
WordPress — plugins like Yoast SEO handle this for you.
Pro Tip:
Once your sitemap is ready, upload it to your root folder as sitemap.xml, then submit it to Google Search Console. This tells Google: 'Hey, here's everything. Please index it.' Don't skip this step.
Step 2: Optimize Your Page Titles
Your page title is arguably the most important piece of SEO real estate you have. It's what appears in the browser tab, in search engine results, and when someone shares your link. It does a lot of work.
And yet, many developers leave it as the default — or worse, something like 'Untitled Document.' Yes, this actually happens. I've seen it in production.
<!-- Not great -->
<title>Home</title>
<!-- Better -->
<title>My Portfolio</title>
<!-- Optimized -->
<title>Frontend Developer Portfolio | React & JavaScript Projects</title>
Rules to follow
Keep it under 60 characters — longer titles get cut off in search results. Truncated titles look unprofessional and lose their impact.
Put the primary keyword near the front — search engines and users both scan from left to right.
Make every page title unique — duplicate titles confuse search engines and waste indexing potential.
Include your brand name at the end — especially on inner pages. Format: 'Page Topic | Brand Name'.
Meta descriptions are the short summaries that appear below your page title in search results. They don't directly affect your ranking — but they absolutely affect whether someone clicks on your link.
Think of your meta description as a billboard headline. You have about two seconds and 155 characters to convince a stranger that your page is worth their time. No pressure.
What it looks like in code
<head>
<!-- Weak meta description -->
<meta name="description" content="This is my web design page.">
<!-- Optimized meta description -->
<meta name="description"
content="Need quality web design services? Our team builds
fast, responsive websites tailored to your brand.
Get a free consultation today.">
</head>
Keep it under 155 characters — anything longer gets cut off mid-sentence in search results, which looks messy.
Lead with your primary keyword — search engines bold matching keywords in results, making your link stand out.
Include a clear call to action — 'Get started today', 'Learn more', 'See how it works'. Give readers a reason to click.
Write for humans first — search engines read it, but humans decide whether to click. Don't make it robotic.
Make every description unique — duplicate meta descriptions across pages weaken your SEO and make you look lazy to search engines.
Step 4: Use Keywords Strategically
Keywords are the words and phrases people type into search engines when looking for something. Knowing which ones to use — and where to place them — is foundational SEO knowledge.
But here's where a lot of beginners go wrong: they pick keywords based on what they think sounds good, rather than what people are actually searching for. That gap between assumption and reality is where traffic goes to die.
Two types of keywords to know
Short-tail keywords — broad, high-volume, very competitive. Example: 'web design'. Millions search for this, but millions of sites target it too.
Long-tail keywords — specific, lower-volume, much easier to rank for. Example: 'affordable web design services for small businesses in Lagos'. Fewer people search this — but the ones who do are exactly your audience.
Pro Tip:
As a beginner or smaller website, long-tail keywords are your best friend. It's far better to rank #1 for a specific phrase than page 8 for a broad one.
Where to place keywords
<!-- 1. Page title -->
<title>Affordable Web Design Services for Small Businesses | YourBrand</title>
<!-- 2. Meta description -->
<meta name="description" content="Looking for affordable web design
for small businesses? We build clean, fast websites that help you
get found online. Request a free quote today.">
<!-- 3. Main heading (H1) — one per page -->
<h1>Affordable Web Design Services for Small Businesses</h1>
<!-- 4. Subheadings (H2, H3) — naturally throughout -->
<h2>Why Your Small Business Needs a Professional Website</h2>
<!-- 5. Body content — naturally woven in -->
<p>Our affordable web design services are built specifically for
small business owners who want a strong online presence without
the enterprise price tag.</p>
<!-- 6. Image alt tags — described naturally -->
<img src="portfolio.jpg"
alt="Small business website design example by YourBrand">
<!-- 7. URL -->
https://yourbrand.com/affordable-web-design-small-businesses
Step 5: Structure Your Headings Properly (H1–H6)
HTML heading tags — H1 through H6 — are not just for making text big and bold. They create a content hierarchy that search engines use to understand the structure and priority of information on your page.
<!-- ❌ WRONG: Multiple H1s, skipped levels, purely visual use -->
<h1>Welcome to My Website</h1>
<h1>My Services</h1> <!-- Two H1s = confused search engine -->
<h3>Web Design</h3> <!-- Skipped H2 entirely -->
<!-- ✅ CORRECT: One H1, logical hierarchy -->
<h1>Affordable Web Design for Small Businesses</h1>
<h2>Our Services</h2>
<h3>Website Design</h3>
<h3>E-commerce Development</h3>
<h2>Why Choose Us</h2>
<h3>Fast Delivery</h3>
<h3>Mobile-First Approach</h3>
Rules
One H1 per page — this is your primary topic signal. One page, one main subject.
Don't skip heading levels — going from H1 to H3 is like skipping chapters in a book. It confuses both search engines and screen readers.
Include keywords naturally — your H1 especially should contain your primary keyword, but write it for humans first.
Headings should describe content — not just look big. If you're using an H2 just for the font size, use CSS instead.
Alt tags — the alt attribute on image elements — serve two important purposes: they describe images to visually impaired users via screen readers, and they tell search engines what an image contains.
<!-- ❌ Missing -->
<img src="portfolio.jpg">
<!-- ❌ Weak -->
<img src="portfolio.jpg" alt="image">
<!-- ✅ Correct -->
<img src="portfolio.jpg"
alt="E-commerce website design for a Lagos fashion brand">
Why it matters
Describe what is actually in the image — not what you wish it said about you.
Include a keyword if it fits naturally — if it feels forced, it probably is.
Keep it concise — around 125 characters or less. It's a description, not a paragraph.
For decorative images, use empty alt text — alt="" tells screen readers to skip it, which is the correct behavior for purely visual elements.
Step 7: Optimize Your URLs
Your URL is a direct signal to both search engines and users about what a page contains. A clean, descriptive URL builds trust instantly. A messy one raises questions.
// ❌ These URLs tell nobody anything:
https://yoursite.com/p?id=4821
https://yoursite.com/page2
https://yoursite.com/2024/01/15/post
// ✅ These URLs are clear, descriptive, and keyword-rich:
https://yoursite.com/web-design-services
https://yoursite.com/blog/react-project-structure-guide
https://yoursite.com/portfolio/ecommerce-website-lagos
Best practices
Use hyphens between words — not underscores. Google treats hyphens as word separators. Underscores don't get the same treatment.
Keep URLs short and descriptive — the shorter and clearer, the better. Cut filler words like 'the', 'a', 'and'.
Include your primary keyword — naturally, not forcefully.
Use lowercase only — uppercase letters in URLs can cause duplicate content issues depending on the server.
Never change a URL after it's indexed — if you must, set up a 301 redirect. Breaking URLs breaks SEO. And it breaks people's bookmarks, which they will not forgive.
Step 8: Add Structured Data (Schema Markup)
This one feels advanced, but the concept is simple. Structured data is code you add to your pages that tells search engines not just what your content says — but what it means.
It's what powers those rich results in Google: star ratings under reviews, FAQ dropdowns, event dates, recipe times, and breadcrumb navigation. If you've ever wondered how certain search results look so much more detailed than others — structured data is usually the answer.
A practical example — Article schema
Here's how you'd mark up an article or blog post using JSON-LD, Google's recommended format:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Implementing SEO in Code: A Step-by-Step Guide",
"description": "A practical guide to implementing technical SEO
directly in your HTML and code.",
"author": {
"@type": "Person",
"name": "Your Name"
},
"datePublished": "2024-01-15",
"image": "https://yoursite.com/images/seo-guide-cover.jpg"
}
</script>
Other useful schema types
FAQPage — marks up FAQ sections so they can expand directly in search results.
Person — for portfolio sites, links your identity to your work.
LocalBusiness — critical for any business with a physical location.
BreadcrumbList — shows your site hierarchy in search results, improving navigation signals.
Pro Tip:
Use Google's Rich Results Test tool (search.google.com/test/rich-results) to validate your structured data. It tells you exactly what Google can and can't read from your markup — before you push to production.
Step 9: Page Speed Is SEO
This step wasn't in the original SEO checklist you might have read. I'm adding it because it's too important to leave out.
In 2021, Google made Core Web Vitals an official ranking factor. That means how fast your page loads, how quickly it becomes interactive, and how stable the layout is as it loads — these directly affect your search ranking.
You could do everything else in this guide perfectly and still get outranked by a faster website with mediocre SEO. Speed matters that much.
Quick code-level wins for page speed
<!-- Lazy load images below the fold -->
<img src="team-photo.jpg"
alt="Our web design team"
loading="lazy">
<!-- Defer non-critical JavaScript -->
<script src="analytics.js" defer></script>
<!-- Preconnect to external resources you'll need -->
<link rel="preconnect" href="https://fonts.googleapis.com">
Pro Tip:
Run your site through Google PageSpeed Insights (pagespeed.web.dev) regularly. It gives you a specific score and tells you exactly what to fix — in plain language. Aim for above 90 on mobile.
Step 10: Submit Your Website to Search Engines
You've optimized everything. Your site is fast, structured, descriptive, and ready. Now make sure search engines actually know it exists.
Search engines will eventually find your site on their own — but 'eventually' could mean weeks or months. Submitting it manually short-circuits that waiting period.
Google Search Console
Go to search.google.com/search-console
Add your property (your website's domain).
Verify ownership via DNS record, HTML tag, or Google Analytics.
Submit your sitemap URL — usually yoursite.com/sitemap.xml.
Monitor for crawl errors, indexing issues, and performance data.
Putting It All Together
Let's look at what a fully SEO-optimized page head section looks like when you combine everything:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Optimized page title -->
<title>Affordable Web Design for Small Businesses | YourBrand</title>
<!-- Optimized meta description -->
<meta name="description"
content="Need a professional website without enterprise pricing?
We build fast, mobile-ready sites for small businesses.
Get a free consultation today.">
<!-- Canonical URL (prevents duplicate content issues) -->
<link rel="canonical"
href="https://yourbrand.com/web-design-services">
<!-- Open Graph tags (for social sharing previews) -->
<meta property="og:title"
content="Affordable Web Design for Small Businesses">
<meta property="og:description"
content="Fast, mobile-ready websites for small businesses.
Free consultation available.">
<meta property="og:image"
content="https://yourbrand.com/images/og-preview.jpg">
<meta property="og:url"
content="https://yourbrand.com/web-design-services">
<!-- Sitemap reference (also submit manually to GSC) -->
<link rel="sitemap" type="application/xml"
href="/sitemap.xml">
<!-- Structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "YourBrand",
"description": "Affordable web design for small businesses",
"url": "https://yourbrand.com"
}
</script>
<!-- Performance: preconnect to needed origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>
Quick Reference: Your SEO Checklist
Before you publish any page, run through this:
✅ Page title — unique, under 60 chars, keyword near the front.
✅ Meta description — unique, under 155 chars, includes keyword + CTA.
✅ One H1 per page — contains primary keyword, describes the page.
✅ Heading hierarchy — H2s, H3s in logical order, no skipped levels.
✅ All images have descriptive alt tags — no empty or keyword-stuffed ones.
✅ URLs are clean, lowercase, and hyphenated — no ID numbers or random strings.
✅ Sitemap is up to date and submitted to Google Search Console.
✅ Structured data added where appropriate — validated with Rich Results Test.
✅ Page speed checked on PageSpeed Insights — especially mobile score.
✅ Site submitted to Google Search Console.
SEO can feel complex, but the fundamentals are stable. The developers who build discoverable websites aren’t doing magic. They’re being intentional. That's all SEO really is, at its best: building with clarity and intention so that both humans and search engines can understand what you made.
SEO is not a one-time task. It’s an ongoing practice. Start with these fundamentals, apply them consistently, and monitor your results. You’ve built something worth finding. Now make sure people can find it.
