SEO
Unpacked

Think of a librarian. First they fetch a copy of your book (crawl), read it properly with all the pictures (render), file it on the right shelf with a summary card (index), and later hand it to readers who ask about that topic (rank).

Googlebot fetches the HTML and queues it for the Web Rendering Service, an evergreen headless Chromium that runs your JavaScript, sometimes seconds or days later. Links found in the rendered DOM join the crawl queue; content, canonical, structured data and signals are indexed; ranking happens at query time. Pages need a 200 status, no noindex, crawlable a href links and content present in the rendered DOM. Google indexes the mobile version first.

The title is the name on the book's spine and the meta description is the blurb on the back. Google usually shows them as the clickable link and the two lines under it, so write them for people, not for robots.

<title> is a strong relevance signal and usually the result headline; keep it unique per page, front load the topic and aim for roughly 50 to 60 characters before truncation. The meta description is not a ranking factor but shapes clicks; Google may rewrite it from page text, so keep it accurate, around 150 to 160 characters. meta robots and the X-Robots-Tag header control noindex, nofollow and snippet limits. meta keywords is ignored by Google. lang, charset and viewport are basics every page needs.

When someone pastes your link into a chat, the app sends a little robot to read your page and build a card: a title, a short line and a picture. Open Graph tags tell that robot exactly what to show.

Open Graph (ogp.me) uses meta property tags: og:title, og:description, og:image, og:url, og:type and og:site_name. X reads twitter:card (summary_large_image) and falls back to OG for the rest. Preview bots such as facebookexternalhit, Slackbot, LinkedInBot and WhatsApp do not run JavaScript, so tags must be in the server HTML. Use an absolute HTTPS image URL, ideally 1200 by 630, under about 5 MB, with og:image:alt. Platforms cache previews; re-scrape with their debug tools after changes.

Your page says it in words; JSON-LD says it as a filled in form: this is an article, this is the author, this is the date, this is the price. Google reads the form and may show stars, prices or breadcrumbs in the result.

Add <script type="application/ld+json"> anywhere in the HTML, server rendered or injected by JavaScript. Use schema.org types Google supports (Article, Product with Offer and AggregateRating, BreadcrumbList, Organization, LocalBusiness, Event, VideoObject, JobPosting) with their required properties, and only mark up content visible on the page. Valid markup makes a page eligible, not guaranteed. FAQ rich results are limited to well known authoritative sites and HowTo rich results were retired, so do not rely on them. Validate with the Rich Results Test and watch Search Console enhancement reports.

Headings are the table of contents, links are the roads between pages, and alt text describes pictures for anyone who cannot see them. Crawlers and screen readers both rely on these to make sense of the page.

Use one descriptive <h1> and a logical h2 to h6 outline; landmarks (header, nav, main, article, aside, footer) frame the content. Google follows <a href> links only, not click handlers on divs, and uses anchor text as a signal, so avoid "click here". Images need meaningful alt text, explicit width and height (also prevents layout shift), and modern formats with srcset. Use <button> for actions and <a> for navigation. Lighthouse SEO and accessibility audits plus axe catch most mistakes.

If the same page lives at five addresses, Google has to guess which is the real one and splits the credit between them. A canonical tag says "this is the original", and a redirect forwards visitors from an old address to the new one.

Choose one version (https, one host, consistent trailing slash, lowercase) and 301 or 308 everything else to it in a single hop. rel=canonical is a strong hint for duplicates such as tracking parameters, sort orders and syndicated copies; make it absolute and self referencing on the original. Avoid redirect chains and 302s for permanent moves. Keep URLs short, readable and hyphenated. For languages or regions, link alternates with hreflang, reciprocal on every version, plus x-default. Hash fragments are not separate URLs to Google.

robots.txt is the sign on the door saying which rooms visitors may enter. The sitemap is the floor plan listing every room worth visiting, with the date each was last redecorated.

robots.txt lives at the root of each host and protocol and controls crawling, not indexing: a blocked URL can still be indexed from links, without content. To keep a page out, allow crawling and serve noindex. Never block CSS or JS the renderer needs. Sitemaps are XML (up to 50,000 URLs or 50 MB uncompressed per file, combined with a sitemap index) listing canonical, indexable 200 URLs with accurate lastmod; Google ignores priority and changefreq. Reference the sitemap in robots.txt and submit it in Search Console.

With client side rendering the browser receives an empty box and a set of instructions to build the page. With server rendering or static generation it receives the finished page. Finished pages are faster to show and easier for every bot to read.

CSR ships a near empty HTML shell; content, title and links appear only after JavaScript runs, which Google can render with a delay and most social and AI crawlers cannot. SSR renders HTML per request; SSG renders at build time; ISR (or stale while revalidate) regenerates static pages on a schedule. Hydration then makes the page interactive. For SPAs, give each view its own URL via the History API, return real 404 status codes, and set metadata on the server. Next.js App Router exposes metadata and generateMetadata for this.

LCP asks how long until the main thing appears. INP asks how quickly the page reacts when you tap. CLS asks whether things jump around while you are reading. Pass all three and the page feels fast.

Measured at the 75th percentile of real Chrome users over 28 days (CrUX), split by mobile and desktop. LCP good is 2.5 s or less: preload or fetchpriority=high the hero image, serve AVIF or WebP, use a CDN and cut server time. INP (which replaced FID in March 2024) good is 200 ms or less: break up long tasks, yield with scheduler.yield or setTimeout, defer third party scripts. CLS good is 0.1 or less: set width and height or aspect-ratio on media, reserve space for ads and embeds, use font-display with matched fallbacks. They are a ranking signal, but relevance still dominates.

PageSpeed Insights is a health check for one page. The top half says how real visitors experienced it over the last month. The bottom half is a test run on a simulated slow phone, with a to do list of what to fix.

PSI shows CrUX field data (p75 LCP, INP, CLS, plus FCP and TTFB) at URL or origin level when there is enough traffic, then a Lighthouse lab run with simulated throttling on a mid range mobile device. The Performance score (0 to 100) weights lab metrics such as LCP, TBT, CLS, FCP and Speed Index; TBT stands in for INP in the lab. Pass or fail for Core Web Vitals comes from field data only. Automate with the PageSpeed Insights API v5 (an API key raises quotas), the Lighthouse CLI, or Lighthouse CI on every pull request.

GA4 is a visitor log for your site. A small script sends a note every time someone views a page or does something useful, like signing up, and GA4 turns those notes into reports about where people came from and what they did.

Create a property and a web data stream to get a measurement ID (G- followed by 10 characters); Google Tag Manager containers use GTM-XXXXXXX instead. gtag.js sends events to the collect endpoint; page_view and enhanced measurement (scrolls, outbound clicks, site search, file downloads) are automatic. Send custom events with gtag('event', name, params), mark the important ones as key events, register custom dimensions for params you want in reports, and use DebugView while testing. In the EEA and UK, Consent Mode v2 (ad_storage, analytics_storage, ad_user_data, ad_personalization) must default to denied until the user agrees. SPAs must send page_view on route changes if enhanced measurement history events are off.

Search Console is where Google tells you how it sees your site: which pages are in the index and why others are not, which searches show you, how many people click, and which pages are slow.

Add a Domain property (DNS TXT record, covers every subdomain and protocol) or a URL prefix property (HTML meta tag, HTML file, GA or GTM). Submit sitemaps under Sitemaps; Google retired the sitemap ping endpoint in 2023. URL Inspection shows the indexed and live rendered HTML, canonical choice and crawl status, and can request indexing. Page indexing explains exclusions such as noindex, duplicates and soft 404s. Performance gives clicks, impressions, CTR and position by query and page for 16 months. Link GA4 to see queries alongside behaviour. Bing Webmaster Tools and IndexNow cover Bing and others.