HTML semantics, site structure and metadata

How meaning and relationships shape technical SEO

A useful website structure works at two levels. Semantic HTML explains the purpose and hierarchy of the content on one page. Navigation and internal links explain how that page relates to the rest of the website. Metadata, canonicals, and structured data add context where the visible content alone is not enough.

The same structure also matters in AI-assisted search. Systems that summarize, classify, or cite pages need clear text, reliable hierarchy, and consistent machine-readable context before they can interpret a page with confidence.

Structure also affects how users and assistive technologies move through the content. A weak heading outline, vague links, or metadata that disagrees with the visible page creates avoidable friction.

Technical SEO begins in your code editor. It’s about how you structure, label, and describe your content to machines—before any tools or plugins are involved.

HTML Structure for SEO

HTML structure for SEO means using markup that reflects the real content hierarchy of the page. A crawler should be able to identify the main topic, the sections, the supporting details, the navigation, and the relationships between pages without guessing.

For a small business website, this can be as straightforward as giving each service, product, or booking page one clear main heading, useful section headings, descriptive internal links, and metadata that matches what visitors can actually read.

Semantic HTML: Structure with Meaning

Semantic HTML adds meaning to the code. Instead of wrapping everything in <div> elements, use tags like <header>, <article>, <nav>, and <footer> to signal purpose and context.

This helps accessibility tools, search engines, and AI-driven systems identify what each part of the page is for. Semantic markup cannot make weak content trustworthy, but it makes a well-organized page easier to interpret.

On this site, each page uses one <h1> for its main subject, <h2> for sections, and <h3> for subsections. That produces a predictable document outline without using heading levels merely to obtain a particular visual size.

A skipped or inconsistent heading level can make navigation less predictable, especially when someone uses a screen reader to scan the headings. Keep the hierarchy logical and use CSS, rather than the heading rank, to control appearance.

H Tags and Heading Order

H tags are the HTML heading elements from <h1> to <h6>. They should describe the page outline, not just make text larger. Use one <h1> for the main page topic, then use <h2> and <h3> for real sections and subsections.

Search engines do not need a forced keyword in every heading. They need a clear, readable structure where headings help users and crawlers understand what each section is about. The same outline helps AI systems extract the right context instead of treating the page as one undifferentiated block of text.

Site structure and internal links

HTML semantics describe the relationships inside a page. Internal links describe relationships between pages. They help visitors continue a task, and they give crawlers paths through the website. Google recommends that every page you care about receives a crawlable link from at least one other page, with link text that helps people understand the destination.

Menu, footer, breadcrumb, and contextual links all count. They serve different jobs: navigation makes the main sections consistently available, breadcrumbs show hierarchy, and links inside the content connect a specific question with a useful next page. The relationship between the two pages creates the value; every paragraph does not need a quota of links.

A practical structure for a smaller website

A modest business website rarely needs a complicated linking model. It does need deliberate paths between its main page types:

• The homepage introduces the business and points to the main services, cases, or products.
• A service page can link to evidence in a relevant case, a guide that explains the work, and the appropriate contact route.
• A topic hub introduces a subject and helps readers choose the right supporting guide.
• A supporting article links back to its hub and to genuinely related pages that answer the reader’s likely next question.
• A case connects documented work with the service and technical subjects it demonstrates.

The direction matters as much as the number. Publishing a new article and linking only from that article to older pages leaves the new URL weakly connected. When the new page is useful, update an existing hub, guide, or case with a relevant link back to it.

Write anchors for people, not a formula

Anchor text should be descriptive, reasonably concise, and relevant to both pages. “Read the guide to WordPress performance” sets a clearer expectation than “click here.” There is no need to force an exact keyword or invent a different synonym every time. The surrounding sentence also helps explain why the destination is relevant.

Use ordinary crawlable <a href=“…”> links. A clickable <div>, a JavaScript event without a usable URL, or an empty anchor can work in one browser interaction while still being unreliable for crawlers, keyboard users, and other tools.

Audit the paths, not just the link count

For a smaller website, an internal-link review can be practical:

1. Crawl the website and export the indexable HTML pages.
2. Compare crawled URLs with the sitemap to find pages that appear in the sitemap but receive no ordinary internal link.
3. Review important service, product, and topic pages for incoming links, click depth, and relevance.
4. Update links that pass through redirects, and repair or remove links to missing pages.
5. Check whether the anchor and surrounding sentence accurately describe the destination.

The Screaming Frog SEO Spider guide explains how a crawler can expose orphan candidates, redirecting links, broken destinations, and pages buried too deeply. A sitemap is useful for comparison, but inclusion in a sitemap does not replace a navigable relationship with the rest of the website.

On WhyBangkok.com, I model districts, areas, transport lines, restaurants, hospitals, and schools as related content rather than isolated articles. I also built an editorial semantic-search tool that helps find relevant existing pages while new content is being written. The project had more than 600 pages by September 2026, but the same decision applies to a twenty-page business website: define the relationship first, then place a link where it helps someone continue.

External links complete the explanation

Useful content can point beyond its own domain. Link to an external source when it verifies a claim, provides primary documentation, or gives the reader a resource you cannot sensibly reproduce. A normal editorial citation does not need nofollow merely because it leaves your website. Paid and user-submitted links need the appropriate relationship attributes, as described in Google’s link guidance above.

Canonical Tags: Controlling Duplicates

Canonical tags tell search engines which version of a duplicate or very similar page you prefer as the primary URL.

CMSs can generate several URLs for the same content through filters, tags, or tracking parameters. Search engines can choose a canonical without your input, but an accurate canonical gives them a stronger and more consistent signal.

When you use a canonical tag, place it in the <head> section and keep it consistent with internal links, redirects, and the sitemap. Self-referencing canonicals can make the intended URL explicit, but they do not repair duplicated or contradictory content by themselves.

Check that canonical tags:

• Use the correct domain (e.g., https over http)
• Match the live page URL
• Don’t point to 404s or unrelated pages

Canonical tags handle technical duplicates, where the same content is available at several URLs. They do not help with keyword cannibalization, where two different pages answer the same question. That calls for merging the pages or making them clearly different.

Metadata: Titles, Descriptions & Language

The <title> and <meta name=“description”> tags shape how your page appears in search results—and how it’s interpreted by crawlers.

Give each indexable page a distinct and relevant title. Repeated boilerplate makes search results harder to distinguish and gives search systems less useful information about the individual page. Keep the title descriptive and concise rather than writing to a rigid character formula.

Google primarily creates snippets from the page content and may use the meta description when it describes the page more accurately. Write a concise summary that helps the right reader judge the result; there is no fixed length that guarantees how it will appear on every device or for every query.

Also essential is the <html lang> attribute. This small detail helps browsers and screen readers understand the page’s language. Use <html lang=“en”> for English, <html lang=“da”> for Danish, etc.

If your site is multilingual, each version should declare its language. Without this, assistive tech and search engines may misinterpret your content.

Structured Data: Add Context to Content

Structured data uses JSON-LD to give machines more context about your page. Where HTML defines structure, structured data defines meaning.

Using an appropriate Schema.org type gives machines explicit information about the visible content. Some types are also eligible for particular search features, but eligibility depends on Google’s current feature documentation and does not guarantee that a rich result will appear.

Structured data is not a special AI optimization and does not guarantee inclusion in search results or generated answers. Its useful job is narrower: it expresses supported facts in a standard format that a compatible system can interpret.

Common types include:

• BlogPosting – for articles and posts
• Product – for ecommerce items
• LocalBusiness – for contact and location data

JSON-LD should be included in a <script type=“application/ld+json”> block in the <head> or footer. The content should reflect what users see—don’t mark up hidden content.

Use the guide to Schema Markup Validator and Google Rich Results Test to choose the right validation workflow for structured data.

WordPress plugins can generate common structured-data types, while a custom site can produce JSON-LD from its content model. In either case, inspect the rendered output and make sure the markup describes information that visitors can actually see.

---

Put the structure to work

Technical SEO starts with relationships that can be understood. Semantic HTML gives the content inside a page meaning. Navigation and internal links connect that page to the wider website. Metadata, canonicals, and structured data clarify specific details.

You don’t need expensive tools. Just follow the fundamentals: one <h1> per page, logical heading order, correct language attributes, unique titles, and solid canonical tags. Then you can strengthen understanding with structured data for both traditional search and AI-assisted search experiences.

This foundation supports performance, accessibility, content planning, and maintenance. It also gives each new page an intentional place instead of letting the website grow into a collection of disconnected URLs.

---

This guide is part of the Technical SEO guide.

Use the SEO Analyzer if you want to check a live URL against the same technical areas.

Frequently Asked Questions

Google rewrote my title in the search results. Does the title element still matter?

Yes. Google uses the title element alongside the visible title, headings, prominent text, link text, and other sources when it generates a title link. Its title link documentation recommends concise, descriptive titles and warns against inaccurate wording, keyword stuffing, and repeated boilerplate. A rewrite is a reason to compare those signals, not to stop writing title elements.

Our theme outputs the wrong heading levels and we cannot easily change it. How much does that matter?

It matters most where the order stops conveying structure: three h1 elements on one page, or a jump from h2 to h4 around the main content. Fix those. A single stray level in a sidebar or footer widget is worth far less than the effort of fighting the theme for it. If the template generates the problem site-wide, fix it once in the template rather than page by page. That is usually a smaller job than it looks, because themes tend to emit headings from a handful of partials.