SEO for Developers: Stop Focusing on Keywords and Start Fixing the DOM

Most developer guides on SEO are written by marketers. They tell you to find the right keywords or write better meta descriptions. While that matters for content, it does not help if your site is a black hole for crawlers.

As developers, we control the infrastructure. If the crawler cannot parse your page or if the Largest Contentful Paint (LCP) is five seconds, your keywords are useless. Here is the technical stuff that actually moves the needle.

The Client-Side Rendering Trap

If you are using a modern framework like React, Vue, or Angular without a rendering strategy, you are playing a dangerous game. While Google claims they can execute JavaScript, they do it in two waves. First, they index the raw HTML. Then, they come back later to render the JS.

This second pass is expensive for them. If your content only exists after a useEffect call or a client-side fetch, you are delaying your indexation.

To fix this, move to Server Side Rendering (SSR) or Static Site Generation (SSG). If you cannot change your architecture, use a pre-rendering service. The goal is simple: the primary content must be in the initial HTML response. If you view source in your browser and see an empty div id="root", you have a problem.

Semantic HTML is not Optional

I see too many apps built entirely with div and span tags. This is not just bad for accessibility; it is bad for SEO. Search engines use HTML tags as hints to understand the hierarchy of your information.

• Use one h1 per page. It should be the main topic.


• Use h2 and h3 for sub-sections. Do not skip levels (do not jump from h1 to h4) just because you like the font size of the h4. Use CSS for styling, not tags.


• Use main, nav, footer, and article tags. These act as landmarks for the crawler.

When you use a button for a link or a div for a heading, you are forcing the crawler to guess what the element does. Stop making them guess.

Core Web Vitals and the Layout Shift

Google uses Core Web Vitals as a ranking factor. The one that usually trips up developers is Cumulative Layout Shift (CLS). This happens when an image loads late and pushes the text down, or when a font swap causes the page to jump.

To stop this, always define width and height attributes on your images. Even if you use responsive CSS, providing the aspect ratio allows the browser to reserve the space before the image downloads.

Also, check your fonts. If you use a custom web font, use font-display: swap. This ensures text is visible immediately in a system font while the custom one loads, preventing that annoying flicker that hurts your performance score.

The Robots.txt and Sitemap Loop

Many developers forget the basics. A robots.txt file is the first thing a bot looks at. If you have accidentally left Disallow: / in your production environment because you copied it from a staging config, you are invisible to the world.

Beyond that, generate a dynamic sitemap.xml. If your app has thousands of user-generated pages, a static sitemap is impossible to maintain. Write a small script that queries your database and outputs a valid XML file. This tells the crawler exactly which pages exist so it does not have to find them all via internal links.

Concrete Takeaway

Stop treating SEO as a marketing task. Treat it as a performance and accessibility task. If you make your site fast, accessible, and deliver the content in the initial HTML, you have already beaten most of your competition.

Checklist for your next PR:

1. Is the main content in the HTML source (not just JS)?


2. Are images sized to prevent layout shifts?


3. Is the heading hierarchy logical (h1 -> h2 -> h3)?


4. Is the robots.txt allowing the right paths?