
Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
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 SEO — Search 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:
This is like yelling into a megaphone or putting up flashy billboards:
These methods work, but they cost time or money — and when you stop paying, the traffic usually stops, too.
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,
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.
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.
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.">
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:
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,
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,
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.
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,
/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,
/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,
/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,
/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,
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.
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.