Mikasa Ackerman

Posted on Mar 9

The Developer SEO Checklist You Actually Need

#webdev #beginners #tutorial #seo

Most developers treat SEO as a marketing problem. But the truth is: the technical foundation of SEO is entirely in our hands. If your site is slow, poorly structured, or missing key metadata, no amount of content marketing will save it.

Here's the SEO checklist I use for every project I ship. No fluff, no theory — just the things that actually move the needle.

1. Meta Tags: Your First Impression on Google

Every page needs three things:

Title tag — under 60 characters, includes primary keyword
Meta description — under 160 characters, compelling enough to click
Canonical URL — tells Google which version of the page is authoritative

<head>
  <title>JSON Formatter - Format & Validate JSON Online | DevToolBox</title>
  <meta name="description" content="Free online JSON formatter and validator. Beautify, minify, and validate JSON data instantly in your browser." />
  <link rel="canonical" href="https://toolbox-dev.com/tools/json-formatter" />
</head>

Getting these right is tedious when you have 50+ pages. I use a meta tag generator to quickly draft all the tags for each page — it outputs the exact HTML you can paste into your <head>.

Common meta tag mistakes

Duplicate titles across pages — Google hates this
Missing descriptions — Google will auto-generate one, usually badly
Title too long — gets truncated in search results with "..."

2. Open Graph Tags: Control Your Social Previews

When someone shares your link on Twitter, LinkedIn, or Slack, Open Graph tags determine what they see. Without them, you get a bare URL. With them, you get a rich card with image, title, and description.

<meta property="og:title" content="JSON Formatter - DevToolBox" />
<meta property="og:description" content="Format and validate JSON online for free" />
<meta property="og:image" content="https://toolbox-dev.com/api/og?tool=json-formatter" />
<meta property="og:url" content="https://toolbox-dev.com/tools/json-formatter" />
<meta property="og:type" content="website" />

Before deploying, always preview how your OG tags will render. An Open Graph preview tool lets you paste a URL and see exactly what the social card will look like — saving you from embarrassing broken previews.

OG image tips

Use 1200x630px for optimal display across platforms
Include your brand name and a clear visual
Dynamic OG images (generated per page) perform better than a single static image

3. URL Structure: Clean Slugs Matter

Your URL is a ranking signal. Clean, descriptive URLs outperform messy ones:

Bad:  /tools/tool?id=12&ref=nav
Good: /tools/json-formatter

Good slug practices:

Lowercase only — URLs are case-sensitive
Hyphens, not underscores — Google treats hyphens as word separators
Descriptive — include the primary keyword
Short — remove stop words (the, a, an, of)

A URL slug generator converts any title into a clean, SEO-friendly slug. Especially useful for blog posts where titles are long and messy.

4. Structured Data: Speak Google's Language

JSON-LD structured data helps Google understand what your page is about. This can unlock rich results (FAQ dropdowns, how-to steps, star ratings) in search.

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "JSON Formatter",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web Browser",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
}

Key schema types for developer tools:

SoftwareApplication — for tools and apps
FAQPage — for FAQ sections (unlocks FAQ rich results)
HowTo — for step-by-step guides
BreadcrumbList — for navigation breadcrumbs

5. Performance: Speed Is a Ranking Factor

Google's Core Web Vitals directly impact rankings:

Metric	Target	What it measures
LCP	< 2.5s	Largest Contentful Paint — loading speed
INP	< 200ms	Interaction to Next Paint — responsiveness
CLS	< 0.1	Cumulative Layout Shift — visual stability

Quick wins:

Static generation — pre-render pages at build time (Next.js SSG)
Image optimization — use WebP/AVIF, lazy load below the fold
Font optimization — font-display: swap, preload critical fonts
Minimize JavaScript — every KB of JS delays interactivity

6. Technical Essentials

The boring stuff that's easy to forget:

Sitemap

<!-- /sitemap.xml -->
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://toolbox-dev.com/tools/json-formatter</loc>
    <lastmod>2026-03-01</lastmod>
  </url>
</urlset>

Robots.txt

User-agent: *
Allow: /
Sitemap: https://toolbox-dev.com/sitemap.xml

Other must-haves

HTTPS — non-negotiable in 2026
Mobile responsive — Google uses mobile-first indexing
Internal linking — every page should link to related pages
404 page — custom, helpful, with navigation back to useful content

The Complete Checklist

Here's the copy-paste version:

[ ] Title tag (< 60 chars, includes keyword)
[ ] Meta description (< 160 chars, compelling)
[ ] Canonical URL on every page
[ ] Open Graph tags (title, description, image, url)
[ ] Twitter Card meta tags
[ ] Clean URL slugs (lowercase, hyphens, descriptive)
[ ] JSON-LD structured data
[ ] sitemap.xml submitted to Search Console
[ ] robots.txt configured
[ ] HTTPS enabled
[ ] Mobile responsive
[ ] Core Web Vitals passing
[ ] Internal linking between related pages
[ ] Custom 404 page
[ ] Google Search Console verified
[ ] Google Analytics installed

Tools That Help

For the metadata-heavy tasks on this list, having the right tools saves hours. I built DevToolBox partly for this reason — the meta tag generator, OG previewer, and slug generator are tools I use on every project. All 50 tools are free and run in your browser.

Happy ranking!

DEV Community