← Back to blog
Dev

SEO Basics Every Developer Should Know

seoweb-developmentmarketing

Search engine optimization is one of those topics that developers tend to dismiss as "marketing stuff." I used to think that way too. Then I launched my first product, and nobody found it. Turns out, building something great is only half the battle — people need to be able to discover it.

As an indie developer, I have learned that understanding SEO is not optional. It is a core technical skill. And the good news is that most of what matters for SEO is technical work that developers are naturally good at. In this post, I will cover the SEO fundamentals that every developer needs to know.

How Search Engines Work

Before optimizing for search engines, it helps to understand what they are actually doing.

Search engines operate in three stages:

  1. Crawling. Bots (like Googlebot) discover pages by following links and reading sitemaps. They request your pages over HTTP and download the HTML.

  2. Indexing. The search engine parses the downloaded HTML, extracts the text content, identifies the topic and structure, and stores it in a massive index.

  3. Ranking. When someone searches, the engine compares the query against its index and returns the most relevant results, ranked by hundreds of signals including content relevance, page authority, user experience, and freshness.

Your job as a developer is to make all three stages as smooth as possible. Make your pages easy to crawl, easy to index, and optimized for the ranking signals you can control.

Meta Tags That Matter

Not all meta tags are created equal. Here are the ones that actually affect how your pages appear in search results.

Title Tag

The <title> tag is the single most important on-page SEO element. It appears as the clickable headline in search results and in browser tabs.

<title>SEO Basics Every Developer Should Know | Bitnara Blog</title>

Best practices:

  • Keep it under 60 characters (Google truncates longer titles)
  • Put the most important keywords near the beginning
  • Make each page's title unique
  • Include your brand name, but at the end

Meta Description

The meta description does not directly affect rankings, but it influences click-through rate — which indirectly affects rankings.

<meta name="description" content="A developer-focused guide to search engine optimization — technical SEO, meta tags, structured data, and more." />

Best practices:

  • Keep it between 120-160 characters
  • Write a compelling summary that encourages clicks
  • Include relevant keywords naturally
  • Make each page's description unique

Viewport Meta Tag

This is not optional. Without it, your site will not render properly on mobile devices, and mobile-first indexing will penalize you:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Robots Meta Tag

Control whether search engines index a page and follow its links:

<!-- Default behavior (index and follow) -->
<meta name="robots" content="index, follow" />

<!-- Prevent indexing -->
<meta name="robots" content="noindex, nofollow" />

<!-- Index but don't follow links -->
<meta name="robots" content="index, nofollow" />

Use noindex for pages like admin dashboards, thank-you pages, or any content you do not want appearing in search results.

Open Graph and Social Sharing

When someone shares your page on social media, the platform pulls information from Open Graph (OG) meta tags to generate a preview card:

<meta property="og:title" content="SEO Basics Every Developer Should Know" />
<meta property="og:description" content="A developer-focused guide to search engine optimization." />
<meta property="og:image" content="https://yoursite.com/images/seo-guide-og.jpg" />
<meta property="og:url" content="https://yoursite.com/blog/seo-basics" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Bitnara Blog" />

For Twitter (X), add Twitter-specific cards:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SEO Basics Every Developer Should Know" />
<meta name="twitter:description" content="A developer-focused guide to search engine optimization." />
<meta name="twitter:image" content="https://yoursite.com/images/seo-guide-og.jpg" />

The OG image is particularly important. A compelling image dramatically increases social shares. I create a custom 1200x630 pixel image for every blog post. Tools like Satori (which Next.js uses for opengraph-image.tsx) can generate these dynamically.

Structured Data with JSON-LD

Structured data helps search engines understand the meaning of your content, not just the text. It powers rich snippets — those enhanced search results with star ratings, recipe cards, FAQ accordions, and more.

The preferred format is JSON-LD, embedded in a <script> tag:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "SEO Basics Every Developer Should Know",
  "datePublished": "2026-02-01",
  "dateModified": "2026-02-01",
  "author": {
    "@type": "Person",
    "name": "Bitnara"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Bitnara Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/logo.png"
    }
  },
  "description": "A developer-focused guide to search engine optimization.",
  "image": "https://yoursite.com/images/seo-guide-og.jpg",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://yoursite.com/blog/seo-basics"
  }
}
</script>

Common schema types worth implementing:

  • Article/BlogPosting — for blog posts and articles
  • FAQPage — for FAQ sections (shows expandable Q&A in search results)
  • BreadcrumbList — for breadcrumb navigation
  • Product — for product pages with pricing and reviews
  • Organization — for your company/brand information
  • WebSite with SearchAction — enables a search box in search results

Use Google's Rich Results Test (search.google.com/test/rich-results) to validate your structured data.

Sitemap.xml

A sitemap tells search engines about all the pages on your site and how often they change. It is especially important for large sites or sites with pages that are not well-linked internally.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yoursite.com/</loc>
    <lastmod>2026-02-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yoursite.com/blog</loc>
    <lastmod>2026-02-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://yoursite.com/blog/seo-basics</loc>
    <lastmod>2026-02-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
</urlset>

In most frameworks, you can generate this automatically. Next.js has a built-in sitemap.ts convention. For other frameworks, libraries like next-sitemap or manual scripts work fine.

Submit your sitemap to Google Search Console and Bing Webmaster Tools. This accelerates the discovery and indexing of your pages.

Robots.txt

The robots.txt file tells search engine crawlers which parts of your site they should and should not access:

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /private/

Sitemap: https://yoursite.com/sitemap.xml

Place this file at the root of your domain (https://yoursite.com/robots.txt). Key points:

  • Disallow does not prevent indexing — it prevents crawling. If other sites link to a disallowed page, Google may still index the URL (just without content). Use noindex meta tags for true de-indexing.
  • Always include your sitemap URL.
  • Do not block CSS or JavaScript files — Google needs them to render your pages correctly.

Core Web Vitals and SEO

Google uses Core Web Vitals as a ranking signal. The three metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — directly influence your search rankings.

This means performance optimization is SEO optimization. Every technique I covered in my web performance post matters here:

  • LCP: Optimize your largest image, preload critical assets, reduce server response time
  • INP: Minimize JavaScript execution time, break up long tasks, use requestIdleCallback for non-critical work
  • CLS: Set explicit dimensions on images and videos, avoid inserting content above existing content, use font-display: swap

Check your Core Web Vitals in Google Search Console under the "Core Web Vitals" report. It shows you which pages pass and which need improvement, based on real user data.

Canonical URLs

When the same content is accessible at multiple URLs, use canonical tags to tell search engines which version is the "official" one:

<link rel="canonical" href="https://yoursite.com/blog/seo-basics" />

Common scenarios where canonicals matter:

  • http:// vs https:// versions
  • www vs non-www versions
  • URL parameters (e.g., ?ref=twitter)
  • Paginated content
  • Content syndicated to other sites

Without canonical tags, search engines might split ranking signals across multiple URLs or index the wrong version. Every page should have a canonical tag, even if it just points to itself.

International SEO with hreflang

If your site supports multiple languages, use hreflang tags to tell search engines which language version to show to which users:

<link rel="alternate" hreflang="en" href="https://yoursite.com/en/blog/seo-basics" />
<link rel="alternate" hreflang="ko" href="https://yoursite.com/ko/blog/seo-basics" />
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/en/blog/seo-basics" />

The x-default value indicates the fallback URL for users whose language is not specifically targeted.

Key rules:

  • hreflang tags must be reciprocal — if page A links to page B with hreflang="ko", page B must link back to page A with hreflang="en"
  • Use proper language codes (ISO 639-1) and optionally country codes (ISO 3166-1 Alpha 2)
  • Include hreflang in the <head>, in HTTP headers, or in your sitemap
  • Always include a self-referencing hreflang tag

For my multilingual projects, I include hreflang tags in both the HTML head and the sitemap for maximum coverage.

Mobile-First Indexing

Google uses the mobile version of your site for indexing and ranking. This means:

  • Responsive design is mandatory. Your content must be fully accessible and readable on mobile devices.
  • Same content on mobile and desktop. Do not hide content on mobile that exists on desktop — Google will not see it.
  • Touch-friendly interactions. Buttons and links should have adequate tap targets (at least 48x48 pixels).
  • No mobile interstitials. Full-screen popups that block content on mobile will hurt your rankings.

Test your mobile rendering with Google's Mobile-Friendly Test and Chrome DevTools' device emulator. Pay attention to text readability, tap target sizes, and content visibility.

Common SEO Mistakes

After working on SEO for several projects, here are the mistakes I see most often:

Missing or duplicate title tags. Every page needs a unique, descriptive title. A site where every page has the same title is wasting its most valuable SEO real estate.

Broken links. Internal and external links that return 404 errors hurt user experience and waste crawl budget. Audit your links regularly with tools like Screaming Frog or broken-link-checker.

Not using heading hierarchy. Search engines use headings to understand content structure. Use one <h1> per page for the main topic, then <h2> for sections, <h3> for subsections. Do not skip levels (going from <h1> to <h3>).

Ignoring image alt text. Alt text helps search engines understand what images depict and is essential for accessibility. Write descriptive, natural alt text — not keyword-stuffed gibberish.

Slow pages. Performance is a ranking signal. A page that takes 5 seconds to load will rank lower than an equivalent page that loads in 1 second, all else being equal.

Not setting up Google Search Console. This free tool shows you exactly how Google sees your site: which queries bring traffic, which pages are indexed, and which have errors. There is no excuse for not using it.

Blocking JavaScript rendering. If your content is rendered entirely by client-side JavaScript and you do not server-render or pre-render it, search engines may not see your content. Use SSR, SSG, or pre-rendering for content that needs to be indexed.

SEO Tools for Developers

Here are the tools I actually use:

  • Google Search Console — free, essential, shows real search performance data
  • Google PageSpeed Insights — Core Web Vitals data and Lighthouse scores
  • Lighthouse — built into Chrome DevTools, audits performance, accessibility, and SEO
  • Rich Results Test — validates structured data
  • Ahrefs/Semrush — keyword research and competitor analysis (paid, but worth it if SEO is a growth channel)
  • Screaming Frog — crawls your site and finds technical SEO issues

The Bottom Line

SEO is not magic or dark art. It is a set of technical practices that make your content discoverable. As a developer, you already have the skills to implement most of it. The key elements are solid meta tags, clean URL structure, fast performance, proper structured data, a sitemap, and mobile-friendly design.

Start with the basics: make sure every page has a unique title and description, add structured data for your content type, submit a sitemap, and ensure your Core Web Vitals are green. These fundamentals will take you further than any clever trick or shortcut.

Search engines want to show users the best, most relevant content. Your job is to make it easy for them to understand what your content is about and to deliver it quickly. Do that, and the rankings will follow.

SEO Basics Every Developer Should Know