Canonical Links
Learn how rel=canonical tells search engines which address is the main version of a page. Understand duplicate URLs, self-referencing canonicals, cross-domain canonicals, redirects versus canonicals versus noindex, pagination, parameters, and common mistakes. Includes a URL normaliser, a canonical decision quiz, and a live canonical checker.
Headings and SEO
Learn how headings help search engines and readers understand a page: the h1 to h6 outline, how many h1 elements to use, writing clear and natural headings, avoiding fake headings and stuffing, jump links, FAQs, and templates. Includes a live heading outline checker, a heading level sorter, and a heading duel quiz.
HTML Head and Metadata
Start learning the HTML head: what goes inside it, how html, head, title, meta, charset, viewport, link, favicon, style, script and base work together, who reads each tag, and a live look at the head of a real page, with a clickable map of every head element.
HTML Metadata Best Practices
Bring the whole HTML head together: a complete, correctly ordered head template, a checklist for essentials, search, sharing, performance, accessibility, security and global audiences, and tools to test it. Includes a live head auditor that scores your page, and a head generator that builds a complete head for you.
HTML SEO Basics
Learn the HTML basics that help search engines find and understand a page: the head essentials, real headings and text, crawlable links, images, clean URLs, mobile and speed basics, and how JavaScript can hide content. Includes a crawler's-view lab, a URL checker, and a live HTML SEO basics checker with a messy and a fixed page.
HTML SEO: Helping People Find Your Pages
Start learning SEO with HTML: how search engines crawl, index, and rank pages, which tags help (title, description, headings, canonical, robots, structured data, Open Graph), what HTML cannot do, and a map of every lesson in this section. Includes a live search result preview, a crawl-to-rank explorer, and a short true-or-false myth drill.
International SEO
Learn the basics of international SEO with HTML: the lang attribute, hreflang alternate links, language and region codes, x-default, reciprocal links, URL structures, canonical links for each version, and good localisation habits. Includes an hreflang builder with sitemap output, a return-link matrix that finds missing links, and a live hreflang checker.
Meta Description
Learn how to write meta descriptions that earn clicks: what they are, why they are not a ranking factor, how search engines choose snippets, the right length, a simple writing formula, and how to avoid duplicates and mistakes. Includes a description writer with desktop and mobile previews, a snippet chooser simulation, and a site-wide description audit.
Open Graph
Learn Open Graph tags: the four essential properties, og:type and article extras, how to choose and size a share image, absolute URLs, fallbacks, caching, and why scrapers need tags in the server HTML. Includes an Open Graph builder with a share-card preview, an image crop lab, and a live Open Graph checker.
Robots Meta
Learn how the robots meta tag asks search engines to index, skip, follow, or limit snippets for a page, and how it differs from robots.txt, X-Robots-Tag, rel=nofollow, canonical links, and real privacy. Includes a robots meta builder, a robots.txt tester that shows which rule wins, and a live robots meta checker that catches typos and conflicts.
Semantic HTML
Learn semantic HTML: choosing elements for their meaning, not their looks. Understand header, nav, main, section, article, aside, footer, address, details, summary, and dialog, why semantic markup helps accessibility, search engines, and maintenance, and how to build a clear page layout, with live examples on CodeHarborHub.
Semantic HTML and SEO
Learn how semantic HTML helps search engines and other tools understand a page: main content versus boilerplate, landmarks, articles, sections, figures, dates, lists, tables, and breadcrumbs. Be honest about what semantics do and do not do for ranking. Includes a live semantic page analyzer, an element picker quiz, and a breadcrumb builder with matching structured data.
Structured Data
Learn structured data with JSON-LD and schema.org: what it is, which types to use (Article, Recipe, Product, FAQPage, Event, BreadcrumbList), the honesty rules, how to escape it safely, and how to test it. Includes a JSON-LD builder for five types, a live JSON-LD checker that compares markup with visible text, and a which-type quiz.
The HTML Link Element
Learn the HTML link element: how it connects your page to stylesheets, icons, canonical addresses, translated versions, feeds, and performance hints like preload and preconnect. Includes a live stylesheet lab, a real link-tag checker, and an hreflang builder.
The HTML Meta Element
Learn the HTML meta element: name and content pairs, http-equiv, descriptions, robots, theme-color, color-scheme, and social sharing tags. Includes a live meta tag checker that uses the browser's real parser, and a social card preview builder.
The HTML Title Element
Learn how to write great HTML page titles: where the title shows up, how long it should be, how to structure it for search results and screen readers, what characters are safe, and how to update it in single-page apps. Includes a live tab and search-result preview.
Title (SEO)
Learn how to write page titles that search engines understand and people want to click: matching search intent, placing keywords naturally, choosing patterns for different page types, handling brand names and separators, avoiding stuffing and clickbait, and knowing why search engines sometimes rewrite titles. Includes a title builder, a title duel quiz, and a site-wide title audit.
Twitter Cards
Learn Twitter Card tags, used by X for link previews: the card types, twitter:card, title, description, image, alt text and handles, how they fall back to Open Graph, image sizes, caching, and why robots.txt must allow the crawler. Includes a card builder with previews, a fallback lab that shows which tag wins, and a live Twitter Card checker.
Why Semantic HTML Matters
Learn why semantic HTML matters: how browsers turn markup into an accessibility tree, why a real button beats a clickable div, how semantic elements help screen readers, keyboard users, search engines, and teammates, common myths, and a step-by-step refactor from div soup to meaningful markup, with live examples.