Course

What is SEO

You built a stunning website. It loads fast, looks gorgeous on all devices, and has all the bells and whistles. But… oops. No one’s visiting.

Why?

Because on the internet, your website is just one in a sea of millions. And unless you do something about it, it’s like building a beautiful restaurant in the middle of the desert and forgetting to add directions on Google Maps.

That “something” is called SEOSearch Engine Optimization.

So…. What is SEO?

SEO is the process of making your website easier for search engines like Google to find, understand, and recommend to users.

In other words, you’re not just building for people — you’re also building for robots (web crawlers). These little bots roam the web 24/7, scanning pages and deciding who deserves to be at the top when someone types “best vegan pizza recipes” into the search bar.

There are two ways to get people to your site:

Non-Organic (Paid) Traffic

This is like yelling into a megaphone or putting up flashy billboards:

  • Social media ads
  • Google Ads
  • Sponsored posts
  • Memes, reels, viral content

These methods work, but they cost time or money — and when you stop paying, the traffic usually stops, too.

Organic Traffic

This is where YOU—developers come in.

Organic traffic is what you get when someone finds your site through a search engine — without ads.

I don’t think I need to explain… Why Does SEO Matter?

Because visibility = traffic, and traffic = opportunity.

Good SEO brings your site in front of the right people without having to shout, pay for ads, or dance on TikTok (unless you want to).

Remember,

Google only loves you when everyone else loves you first.


So, How Do We actually do SEO?

Here are some best practices on how to improve SEO,

1. Keywords

Keywords are like labels that tell web crawlers what your content is about. When a user searches using those words, the crawlers know to present your page as a potential match.

Let’s say you’re working on a blogging website, and there is a blog post about how to use the fetch API. A good title (with an HTML title tag) might be “How to use Fetch in JavaScript with Examples.”

You can also mention fetch naturally in the first paragraph, in headings, and maybe even in the image alt text.

You’re not spamming the word—you’re giving helpful context. When someone searches “how to use fetch in JavaScript,” chances are that your post might show up.

2. Content Quality

Good content helps both your readers and your rankings.

If users stay on your page longer and scroll through, Google notices. It sees that your content is useful—and boosts your position in search.

3. Add Meta Tags

Think of meta tags as your page's ID card. It tells search engines and users a quick summary of what to expect. A convincing ID card means more clicks.

When you build a portfolio project, let’s say this one, Devoverflow, write a proper meta title and description

<title>Devoverflow – StackOverflow Clone Built with Next.js</title>
<meta name="description" content="Devoverflow is a modern Q&A platform for developers, inspired by StackOverflow and built with Next.js. Ask questions, share answers, and collaborate with devs worldwide in a fast, responsive interface.">

4. Structure Your Website Like a Book

Imagine your website is a book, and Google (or any search engine) is trying to read it cover to cover.

Now, imagine that book has no chapters, no titles, no page numbers—just random blocks of text with no labels. That’s exactly what it feels like when your website is built using only <div>s with no meaningful structure.

When you fill your HTML with dozens of nested <div>s like this:

<div>
  <div>
    <div>
      <p>Welcome to my blog</p>
    </div>
  </div>
</div>

…it doesn’t give search engines (or screen readers) any clue about what’s important. It’s like reading a novel where every paragraph starts with “blah blah blah.”

Then what should you do instead?

Use semantic HTML elements that describe the meaning of each section. These include:

  • <header> – for the top of the page (logo, nav, etc.)
  • <nav> – for your navigation menu
  • <main> – for the main content area
  • <article> – for blog posts or articles
  • <section> – for different sections inside a page
  • <aside> – for sidebars or related info
  • <footer> – for the bottom part of the page (contact info, copyright, etc.)
  • <h1> to <h6> – for headings and subheadings

You got this. You can learn about the rest of the elements from W3School or MDN.

But if I have to write a better version using the right elements or previous example, it would look like this:

<main>
  <header>
    <h1>Welcome to my blog</h1>
  </header>
  <article>
    <p>This is where I write about JavaScript, web dev, and cool tools.</p>
  </article>
</main>

In short, don’t make your website feel like a messy drawer full of mystery <div>s.

Structure it like a clean, labeled bookshelf. Your users—and search engines—will thank you.

The next and most important best practice is,

5. Speed Things Up

No one likes slow websites. Neither do search engines.

Speed is a ranking factor. So you want your site to load fast—especially on mobile.

You can compress your images (use .webp instead of .png), lazy load images or content, use SSR and RSC to reduce client-side js to improve performance, and much more.

You already learned how to do most of this with Server Components and Server Side rendering strategies with streaming. Now you know it also boosts SEO.

Another cool practice to follow is,

6. Get Backlinks

Backlinks are like votes from other websites. If another reputable blog links to your page, it tells Google: “Hey, this content is trustworthy.”

Let’s say you write “How I Got My First Dev Job” blog and share it on Reddit, Dev.to, and Hashnode. If people love it and link to it from their own blogs—bam! You’ve got backlinks. And Google rewards that.

Next on the list is something I have often seen many people do it wrong way—often and in an awful way.

7. Use Clean URLs

A URL (Uniform Resource Locator) is the web address people see and click on. It’s also one of the first things search engines read when trying to understand what a page is about.

Thus, your URLs should be simple and meaningful.

Many developers (especially when starting out) let the framework or CMS auto-generate URLs. This often leads to something like this,

Bad Example

/post?id=124&cat=blog2024

/page1

/article-2

This kind of URL doesn’t tell anyone—neither a human nor a search engine—what the page is about. It’s vague, looks sketchy, and doesn’t help you rank well on Google.

Another common mistake that many developers make is stuffing a URL with too many keywords, like,

Bad Example

/nextjs-next-js-nextjs2024-image-optimization-seo-best-guide

This might seem like a good idea (“Let’s get all the SEO keywords in there!”), but in reality, it looks spammy and hard to read. Search engines are smart enough to know you’re overdoing it.

So what should you do instead?

An example of a better URL would look like this,

Good Example

/blog/nextjs-image-optimization

Now that’s clean. It tells users what the page is about. It’s short, meaningful, and includes important keywords without overloading. This kind of URL makes search engines happy—and users too.

Another good example is,

Good Example

/recipes/vegan-pasta

You instantly know this is a recipe page about vegan pasta. It’s readable, clickable, and shareable. That’s what we want.

If I have to give a rulebook or checklist of what to keep in mind when defining URLs, then it’s this,

  • Use real words that describe the content of the page.
  • Use hyphens instead of underscores. Hyphens are easier for search engines to read.
  • Keep everything lowercase to avoid issues on different servers.
  • Don’t stuff in too many keywords. Be natural.
  • Avoid special characters or random numbers unless they’re necessary.

At the end of the day, your goal is simple: make things easier for both people and search engines.

Because in a sea of websites, being visible isn’t luck—it’s strategy. And SEO is how we play the game smart.

Loading...

0 Comments

"Please login to view comments"

glass-bbok

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account
tick-guideNext Lesson

How to SEO-optimize websites in Nextjs?