Visualising SEO
A collection of illustrations explaining SEO concepts: canonicals, redirects, site structure, SERPs. The original Figma file is MIT-licensed and free to remix.
-
Canonicals
Tells Google which version of a duplicate set should collect the ranking signals. Set it on the page you want indexed; the rest defer.
-
Hreflang
Use it when the same page exists in multiple languages or regions. Google then routes users to the variant that matches their language and country.
-
GTM Installation
First snippet goes high in
<head>, after thedataLayerdeclaration. Second snippet sits at the top of<body>. Both placements matter. Out of order, the data layer fires too late. -
301 redirects
A
301says the page moved permanently. Search engines transfer signals to the new URL; browsers cache the redirect. -
302 redirects
A
302says the page is temporarily somewhere else and the original will be back. Use it for A/B tests and short-lived redirects, never for permanent moves. -
Redirect chains
More than one hop between URL A and the final destination. Every hop adds latency and burns crawl budget, so flatten chains: each redirect should point straight at the end of the chain.
-
Redirect loops
URL A redirects to B, B redirects back to A. Browsers give up after a few hops; crawlers drop the URL entirely. Always a misconfiguration, never intentional.
-
Flat site structure
Most pages sit a click or two from the home page. Internal
PageRankdistributes evenly, and important pages aren't buried. Usually the right default for ecommerce. -
Deep site structure
Pages live four or five clicks deep. Authority dilutes at each level, so the leaves end up under-powered. Worth flattening unless the depth carries genuine taxonomic meaning.
-
Pagination canonicals
Each paginated page should canonicalise to itself, not back to page one. The old
rel=prev/nextis gone, so self-referential canonicals are now the cleanest signal. -
Pagination view all page setup
If a single view-all page exists and loads acceptably, point every paginated variant's canonical at it. Otherwise stick with self-referential canonicals on each page.
-
Topic clusters
One pillar page covering the broad topic, surrounded by cluster pages targeting long-tail variants. The pillar collects authority; the clusters get internal links from the pillar.
-
Multi-level topic clusters
Clusters can themselves act as pillars for sub-clusters. Cross-linking between siblings keeps signal flowing laterally, which helps when a topic has three or more levels of natural hierarchy.
-
rel="nofollow"
A hint that Google shouldn't pass authority to the linked URL or use it for discovery. Treat it as advisory:
rel="nofollow"no longer hard-blocks crawling the way it used to. -
Noindex
Tells Google to drop the page from search results. Set it via a
<meta>tag in<head>or anX-Robots-TagHTTP header. Don't combine it with aDisallowinrobots.txt, or Google never sees the directive. -
Robots.txt
Blocks crawlers from fetching specific URLs. Useful for keeping infinite filter combinations and admin paths out of the crawl, but never use it to deindex. For that, use
noindex. -
Meta description
A
<meta name="description">tag in<head>that suggests the snippet shown under the title in search results. Google rewrites it often, but a tight one still wins more often than not. -
PageRank
Google's link-based ranking algorithm. Pages accumulate authority from inbound links and pass a share of it onward, so internal linking is PageRank sculpting whether you mean it to be or not.
-
Dynamic serving
Same URL, different HTML per device: the server detects user-agent and switches. Works, but the user-agent matching is fragile, which is why Google recommends responsive design instead.
-
Responsive design
One HTML payload, one URL, the layout adapts via
@mediaqueries. Google's recommended approach, and the easiest to maintain. -
Title tag
The
<title>in<head>. It's the headline in search results and the label on the browser tab: the single highest-leverage on-page string for both clickthrough and ranking. -
Separate mobile URLs
Mobile gets its own URLs, often on an
m.subdomain. Doubles the maintenance surface for canonicals, redirects and analytics. Avoid unless the mobile experience genuinely diverges. -
People also ask
The expandable Q&A block on the SERP, surfacing related queries. Each answer slot is a separate ranking opportunity, and an early signal of what Google thinks the query is about.