Most developers hate SEO because it feels like a dark art. You hear things about keyword density or secret algorithms, and it sounds like guesswork. But if you strip away the marketing jargon, SEO is actually a set of technical requirements for how a machine reads your site.
If your site is a mess under the hood, no amount of "content strategy" will save your rankings. Here is how to handle the technical side of SEO without losing your mind.
The Rendering Trap
One of the biggest mistakes I see in modern web dev is relying entirely on Client Side Rendering (CSR). If you use a framework like React or Vue and ship an empty HTML shell, you are betting everything on the search engine's ability to execute your JavaScript.
While Google can execute JS, it is not instant. There is often a two stage indexing process. First, they index the HTML. Then, when resources allow, they render the JS and index the final state. This delay can hurt your rankings or lead to partial indexing.
To fix this, move toward Server Side Rendering (SSR) or Static Site Generation (SSG). When the crawler hits your URL, it should see the actual content in the initial HTML response. If you can't move to SSR, use pre-rendering services for your most important pages.
Core Web Vitals are Not Just Metrics
You have probably seen the Lighthouse score. It is a good start, but the real value is in the Core Web Vitals (CWV). These are the metrics that actually affect how users feel and how bots rank you.
Focus on these three:
- Largest Contentful Paint (LCP): How fast does the biggest element on the screen load? Stop using huge, unoptimized JPEGs. Use WebP or AVIF and set explicit width and height attributes to prevent layout shifts.
- Cumulative Layout Shift (CLS): Does the page jump around as images or ads load? This is a huge UX killer. Reserve space for your elements using CSS aspect-ratio or skeleton screens.
- Interaction to Next Paint (INP): How responsive is the page to user input? If your main thread is blocked by a massive JS bundle, the page feels frozen. Split your code and lazy load non-critical components.
The Architecture of Crawlability
Search bots have a "crawl budget." They will not visit every single page on your site if it takes too much effort.
First, check your robots.txt. It is a simple file, but it is the first thing a bot reads. Make sure you aren't accidentally blocking your CSS or JS files, as bots need those to understand the layout.
Second, manage your internal linking. A flat hierarchy is better than a deep one. If a page is 10 clicks away from the home page, it is effectively invisible. Use a logical folder structure and a clean XML sitemap that updates automatically when you deploy new content.
Metadata and Semantic HTML
Stop using div for everything. It is a lazy habit that hurts accessibility and SEO.
Use semantic tags:
-
mainfor the primary content. -
navfor navigation. -
articlefor blog posts or news items. -
h1throughh6in a strict hierarchy.
Never have more than one H1 per page. The H1 is the title of the document. The H2s are the chapters. If you use an H2 for a footer link just because you like the font size, you are confusing the crawler. Use CSS for styling, not HTML tags.
The Takeaway
SEO is not about tricking a bot. It is about making your site easy for a machine to parse and fast for a human to use.
If you want a concrete checklist for your next project, do this:
- Ensure the main content is in the initial HTML source.
- Optimize images and set dimensions to kill CLS.
- Use semantic HTML tags instead of nested divs.
- Audit your internal linking to ensure no page is "orphaned."
Keep it simple. Focus on performance and structure. The rankings will follow the quality of the engineering.
