I thought I was just improving my portfolio.

Bulus Hamnu — Fri, 07 Aug 2026 21:08:47 +0000

Sometimes the best learning happens when you're trying to solve a completely different problem.

A few weeks ago, I decided to redesign my portfolio. At first, it seemed like a simple project. I wanted to improve the design, add a Services section, and make it better represent the kind of software engineer I'm becoming.

Then I thought, "Why not improve the SEO while I'm here?" I expected to spend an hour adding a few meta tags. Instead, I ended up learning much more than I expected.

It started with the basics

I began reading about how search engines understand websites and quickly came across concepts like Meta tags, Open Graph, Twitter Cards, Structured Data (JSON-LD), Canonical URLs, robots.txt, and sitemap.xml. None of these were things I had learned while learning React.

As I added them one by one, I felt like my portfolio was finally becoming something that search engines and social media platforms could understand, not just browsers.

Then I noticed another problem. Social previews weren't working

When I shared my portfolio link on social media, the preview wasn't what I expected. Sometimes it didn't update. Sometimes the image didn't appear. Sometimes the title was wrong. That sent me down another rabbit hole.

React Helmet

While trying to fix the problem, I discovered React Helmet. It allows React applications to update the contents of the document , making it possible to set page titles and meta tags dynamically.

At first, I thought this solved everything. Then I learned it wasn't that simple.

The problem wasn't React Helmet itself. The problem was that my portfolio is a Single Page Application (SPA).

Like most React applications, the browser first loads a single HTML file, then JavaScript builds the rest of the page. Browsers have no problem with this, but I discovered that not every crawler behaves like a browser.

Some search engines and social media platforms don't execute JavaScript the same way, or don't wait for it to finish before reading the page. That means they might never see the meta tags generated by React Helmet, even though everything looked perfectly fine in my browser.

That was probably the biggest thing I learned during this whole process.

Looking for solutions

After realizing the problem wasn't React Helmet, I started looking into different ways people solve this. That's when I came across Pre-rendering, Static Site Generation (SSG), and Server-Side Rendering (SSR).

I even tried finding a pre-rendering solution that would work with my Vite project, but I quickly realized it wasn't as straightforward as I expected. Some solutions were no longer actively maintained, while others just weren't the right fit for my project.

While reading more about these approaches, I finally understood why frameworks like Next.js exist.

Before this, I honestly thought Next.js was just React with extra features. Now I understand that one of its biggest advantages is generating HTML before it reaches the browser, making SEO and social media previews much more reliable.

What I learned

I didn't set out to learn about SEO. I just wanted a better portfolio.

Instead, I ended up learning how search engines discover websites, how social media platforms generate previews, why Single Page Applications have SEO limitations, and why technologies like SSR and SSG exist.

That's one of the things I enjoy most about software engineering. You start solving one problem, and before you know it, you've learned five other things you weren't even looking for.

Looking back, improving my portfolio taught me far more than just SEO. It completely changed the way I think about how modern web applications work behind the scenes, and that's a lesson I'll carry into every project I build from now on.

of my portfolio with SEO metadata such as Open Graph, Twitter Cards, and meta tags." width="800" height="406">

DEV Community: Bulus Hamnu

I thought I was just improving my portfolio.

Looking for solutions

What I learned