A Pre Launch Checklist

Everything worth verifying before a page goes live, grouped so it can be worked through in about twenty minutes.

On this page (17)

Concept

The same handful of things go wrong at launch, every time. Working through a list catches almost all of them, and twenty minutes here saves a great deal afterwards.

Document basics

<!DOCTYPE html> is the first line, with nothing before it.
<html lang="..."> is set correctly.
<meta charset="utf-8"> is the first thing in the head.
<meta name="viewport" content="width=device-width, initial-scale=1"> is present.
The <title> is unique and descriptive on every page.
The markup validates with zero errors.

Structure

Exactly one <h1>, describing the page rather than the site.
No skipped heading levels.
header, nav, main and footer landmarks present.
One main per page.
Every nav labelled when there is more than one.
Reading the headings alone describes the page.

Content

Every img has an alt; decorative images have alt="".
Every image and iframe has width and height.
No click here or read more link text.
Every iframe has a title.
Video has captions; audio has a transcript.
Placeholder text and lorem ipsum are gone.
Contact details and dates are correct.

Forms

Every control has a visible, bound label.
Every control has a name.
Radio and checkbox groups are in a fieldset with a legend.
Sensible type and autocomplete on every field.
method is stated explicitly and is POST for anything that changes data.
File uploads have enctype="multipart/form-data".
Every submit button has an explicit type.
A CSRF token is present on state changing forms.
Errors are shown in text, not colour alone.
Server side validation exists for every client side rule.

Accessibility

The page is fully usable with the keyboard alone.
The focus indicator is visible everywhere.
A skip link is the first focusable element and works.
Body text meets 4.5 to 1 contrast; large text meets 3 to 1.
No information conveyed by colour alone.
prefers-reduced-motion is honoured.
Anything moving for over five seconds can be paused.
Icon only controls have accessible names.
An automated accessibility scan reports no violations.

SEO

Unique title and meta description on every page.
A self referencing absolute canonical on every page.
No stray noindex from staging.
robots.txt does not contain Disallow: /.
robots.txt does not block CSS or JavaScript.
An XML sitemap exists, is accurate and is referenced from robots.txt.
Open Graph title, description, image and URL are set, with an absolute image URL.
Structured data validates in the Rich Results Test.
Search Console is verified and the sitemap submitted.

The two items in bold have removed entire sites from search. Check them in production, after deployment, not in the repository.

Performance

Images compressed and sized appropriately.
loading="lazy" below the fold, never on the hero.
fetchpriority="high" on the largest above the fold image.
Every script has defer or async.
Fonts use font-display: swap.
Compression enabled on the server.
Versioned asset names with long cache lifetimes.
Lighthouse run, and field data checked after a week.

Mobile

No horizontal scrolling at 320 pixels.
Tap targets around 44 pixels with space between them.
Form fields at 16 pixels or larger.
Body text at 16 pixels or larger.
The page works at 200 percent zoom.
The same content is served as on desktop.
Tested on a real device, not only in emulation.

Security

HTTPS everywhere, with HTTP redirecting to it.
No mixed content warnings in the console.
No sensitive values in hidden fields or data attributes.
No internal information in comments.
External scripts carry integrity and crossorigin.
A Content Security Policy is in place.
frame-ancestors set on sensitive pages.
Error pages do not reveal paths or stack traces.

Deployment

One host form chosen; the other redirects.
One trailing slash convention; the other redirects.
All file names lower case, matching every link exactly.
Old URLs redirected with 301, not to the home page.
Console is clean of errors in production.
Tested in at least two browsers.
Analytics installed and receiving data.

A two minute console check

// duplicate ids
const ids = $$("[id]").map(el => el.id);
console.log("duplicate ids:", ids.filter((id, i) => ids.indexOf(id) !== i));

// images with no alt
console.log("no alt:", $$("img:not([alt])"));

// images with no dimensions
console.log("no dimensions:", $$("img:not([width]), img:not([height])"));

// weak link text
console.log("weak links:", $$("a").filter(a =>
  /^(click here|read more|link|here|more)$/i.test(a.textContent.trim())));

// external links missing rel
console.log("missing rel:", $$("a[target='_blank']:not([rel*='noopener'])"));

// form fields with no name
console.log("no name:", $$("input, select, textarea").filter(el => !el.name));

// iframes with no title
console.log("untitled iframes:", $$("iframe:not([title])"));

// the heading outline
console.table($$("h1,h2,h3,h4,h5,h6").map(h => ({ level: h.tagName, text: h.textContent.trim() })));

Important rules

Check the SEO items in production, not in the repository.
An automated scan does not replace the keyboard pass.
Test on a real device before launch.
Verify the deployed page, not the local one.
Field performance data takes about a month to appear; check back.

Common mistakes

Shipping a staging noindex or Disallow: /.
Case mismatched file names that work locally and fail deployed.
Placeholder text left in production.
No analytics or Search Console until months later.
Testing only the home page.
Assuming a Lighthouse score means the page is accessible.

Best practices

Keep this list in the repository and in the pull request template.
Automate what can be automated: validation, links, accessibility, formatting.
Do the keyboard pass on every feature, not only at launch.
Verify the two bold SEO items in production immediately after deploying.
Re run the list after any large change, not only at first launch.

Practice

Work through the whole list on a page you have built and record what it found.
Run the console check on three pages and fix everything it reports.
Deploy a page and verify robots.txt and the robots meta tag in production.
Automate three items from the list in a build script.

Useful resources

Hand picked references for this topic

Google Search Central

Official Google documentation on crawling, indexing and search appearance.

W3C Web Accessibility Initiative

Official guidance on WCAG, ARIA and accessible authoring practices.

W3C Markup Validation Service

Checks a page or a fragment of markup against the HTML specification.

Topics #Accessibility #HTML #SEO #Validation

Written by Lorens Mishra

Software Engineer Notes Management System Administrator