A Pre-Launch Checklist for a New Web Page

None of this replaces Search Console, a real Lighthouse run, or a person with a screen reader. It replaces “we forgot og:image and the Slack unfurl is the homepage logo cropped wrong.” DevOkk’s SEO and CSS tools are built for that hour. No account.

1. Title tag and meta description

The title is the main line in a search result and the browser tab. The description is the sentence underneath when Google chooses to use it.

Write them on purpose. Then paste them into SERP Snippet Preview and look at desktop and mobile widths. Truncation is real. Keyword stuffing is visible. “Home” as a title is a bug.

Length is a guideline, not a contract. Google rewrites titles. Your job is to give them a clear candidate. The writing guide is How to write title tags and meta descriptions that get clicks. Tool-page specifics: On-page SEO for tool pages.

Check uniqueness if you are launching a template. Fifty pages with the same title is a way to rank none of them.

2. Fetch the live tags (when the URL exists)

Staging or production: Meta Tag Extractor pulls what the HTML actually contains. That request hits the URL. Only use hosts you are allowed to probe. Localhost will not work from a public extractor.

Compare extract vs what you thought you deployed. The usual misses: the app router default, a CMS field empty, noindex left on from staging, canonical pointing at the old domain.

How to read the output: How to audit meta tags on any page.

3. Open Graph and social unfurls

Slack, iMessage, LinkedIn, Facebook - they use OG (and Twitter cards where those still matter). Missing og:title, og:description, or og:image produces a random hero or a blank card.

Paste the tags into Open Graph Preview. Check:

• Image aspect (1200×630 is the boring default that works)
• Absolute HTTPS image URL, not a relative path
• Title that still makes sense out of context
• Description that is not the same 300-word lede

The explainer is How Open Graph tags control link previews. Recrawl after you fix tags; Facebook’s debugger and Slack’s cache will show old cards for a while.

4. Favicon and “why is the tab the Next.js N”

Favicon Generator from a simple source image. Ship SVG plus PNG fallbacks if your stack allows it. Check:

• Dark theme (a black icon on a black tab)
• Bookmark, home screen, and pinned tab
• Cache: increment the query string or filename when you replace an icon

This is not branding theatre. It is how people find the tab among fifteen docs.

5. JavaScript weight

Bundle Size Estimator is a planning number, not webpack’s last word. Use it to ask “did we just add a date library for one format call?” Then measure the real build.

Pair with How lazy loading images affects page speed and Lazy Load Tester if the homepage is a gallery. Lazy-load is not a substitute for a 4 MB hero.

Lighthouse Score Simulator helps you think about performance budgets from metrics you type. It is not Chrome Lighthouse on a Moto G. Run the real thing on a throttled connection before you brag about 100.

6. A first accessibility pass

Paste critical HTML into Screen Reader Preview. Headings in order, buttons that are not empty divs, alt on images that are not decorative. WCAG Checker is an automated pass - it will miss contrast on text-in-images, keyboard traps, and meaning.

How screen readers interpret your HTML and A practical WCAG checklist are the longer reads. Launch is “we did not ship unlabeled icons.” Compliance is a program.

Color: Color Studio if you still need contrast pairs. Patterns and motion: CSS Pattern, CSS Animations - motion that cannot be turned off is an a11y bug.

7. CSS and UI you will regret

• Focus rings removed “for design”
• Text in images for the H1
• user-scalable=no
• A cookie banner that traps the keyboard

None of these need a DevOkk page. They need a look at the page on a phone.

8. Network facts if the launch is a domain change

DNS and TLS are launch-breakers. DNS Record Lookup and SSL Certificate Checker send the hostname - that is the job. Confirm A/AAAA, CNAME, and that the certificate matches the names you typed in the browser. HTTP Header Viewer for noindex, CSP, and cache headers on the live URL.

Do not point those tools at systems you do not own.

Canonical, robots, and the staging leak

Canonical. One URL that is the page. Staging copied to production with rel=canonical still pointing at staging is a classic. Extractor will show it. Fix it before the announcement tweet.

robots / noindex. Staging should be noindex. Production should not inherit that. Header viewer and extractor both catch it. A beautiful OG card on a noindex page still will not rank.

Sitemap. The new URL should be in the sitemap you submit. This checklist does not generate sitemaps; it reminds you to add the row.

404 and redirects. Launching /pricing while old ads hit /price needs a redirect. Click the URLs from the campaign, not only the homepage.

SPAs and “the tags are in JavaScript”

If the crawler or Slackbot sees an empty <title> because the app hydrates late, previews will be wrong. Pre-rendering or server-rendered meta is the real fix. Preview tools that fetch a URL will show what the first HTML contains - which is the point. If extractor shows a generic title, bots will too.

A ten-minute version

1. SERP preview of title + description
2. OG preview of the card
3. Favicon not the framework default
4. Open the page on your phone
5. One heading structure check

If you have an hour, add extractor on staging, bundle sanity, lazy-load, and the screen-reader preview.

A worked example: new /pricing page

Marketing wants it live Friday. Engineering shipped the React page with the default title.

1. Write Pricing - {Product} and a two-sentence description. Preview in SERP Snippet Preview.
2. Design a 1200×630 card. Fill Open Graph Preview. Fix relative image URLs.
3. Deploy to staging that is public. Meta Tag Extractor on the staging URL. Confirm noindex is on for staging and that production will flip it.
4. Favicon Generator if the tab still shows the framework icon.
5. Bundle Size Estimator if someone added a chart library for one sparkline.
6. Phone pass: form fields, buttons, OG share to a private Slack channel.
7. Production deploy: extractor again, SSL checker on the real host, header viewer for cache and robots.

Skip steps and you will debug “why does Slack show the old homepage” on Friday night.

What this checklist is not

It is not keyword research. It is not a content strategy. It is not Core Web Vitals as a religion. It will not fix a product nobody wants. It will catch the launch bugs that make a good page look accidental: wrong title, broken card, default favicon, staging noindex in production, a 4 MB hero.

Do those, then do Search Console and real-user monitoring like an adult.

Print CSS, prefers-reduced-motion, and a 404 page that is not a blank Next.js error are the extras teams skip. They are not SEO. They are still launch. If the 404 title is “404” the SERP preview of an error URL will look like a bug in Google too.

International pages need hreflang and unique titles per language. This checklist does not replace that program. It still catches the English title copied onto every locale.

Pagination (?page=2) needs unique titles or canonicals. Duplicate titles across paginated lists look sloppy in a SERP preview even when they are technically allowed.

JSON-LD in the page should match the visible title. Preview tools will not debug schema.org graphs in full; still keep them consistent so you do not show one name in Google and another on the H1.

A trailing slash mismatch (/pricing vs /pricing/) can split previews and analytics. Pick one canonical and redirect the other before launch day.

Soft 404s (200 with “not found” in the HTML) poison launch. Confirm the real 404 status in HTTP Header Viewer on a junk URL.

The roundup of the SEO trio is Best free SEO preview tools. The CSS companion list is Best CSS and frontend design tools.

A pre-launch checklist does not make a page rank. It makes the page look like someone meant it when it appears in a tab, a search result, and a Slack unfurl. That is enough of a reason to click the previews before you announce the URL.