HuntExams Academy logo
HTML/CSSBeginner#seo#html

What are the basic on-page SEO practices in HTML?

Answer

Use one <h1> per page with a clear hierarchy of headings, descriptive <title> and meta description, semantic tags for content structure, alt text on images, canonical links to avoid duplicate content, and fast-loading, crawlable markup.

Example

<title>Best Running Shoes 2024 | ShoeStore</title>
<meta name="description" content="Compare top running shoes...">
<link rel="canonical" href="https://example.com/shoes">
<h1>Best Running Shoes 2024</h1>

Detailed explanation

On-page SEO means making a page’s content and HTML understandable to search engines and useful to visitors. Basic practices help search engines discover the page, interpret its topic, and present it in search results; they do not guarantee rankings. For a beginner interview, explain each element’s purpose rather than simply listing tags. The strongest answer connects accurate metadata, meaningful content structure, accessible images, and crawlable links with the page’s actual content and user intent.

In the <head>, provide a descriptive, page-specific <title>, such as <title>Running Shoes for Beginners | ShoeStore</title>. Search engines may use it as the search-result title, but can rewrite it. Add a unique <meta name="description" content="Compare beginner-friendly running shoes by cushioning, fit, and price.">. This description can influence the displayed snippet and users’ decision to click, but is not a direct Google ranking factor. For duplicate or near-duplicate URLs, use <link rel="canonical" href="https://example.com/shoes"> to identify the preferred version. A canonical is a signal, not a guaranteed instruction or a replacement for redirects.

In the body, use one clear main <h1> as a simple convention, then organise sections logically with <h2> and <h3>. Multiple <h1> elements are not automatically an SEO penalty; clarity matters more than a rigid count. Use semantic elements such as <main>, <article>, and <nav> where appropriate to describe structure, not as ranking shortcuts. Give informative images meaningful alt text that communicates their relevant content; decorative images should use alt="". Avoid stuffing keywords into headings, descriptions, or alternative text.

Make navigation crawlable using real <a href="..."> links with descriptive link text, and ensure important content is available without requiring clicks or other interactions. Check that unintended robots directives do not prevent indexing. Keep pages responsive and fast by optimising images, reducing unnecessary resources, and avoiding heavy markup. Set image dimensions to reduce layout shifts and lazy-load suitable off-screen images, not the main above-the-fold image. Interviewers typically look for correct HTML placement, realistic claims, and an understanding that technical improvements support useful content rather than replace it.

Key points to remember

  • Use a unique, descriptive <title> and a relevant meta description in the <head>.
  • Give the page a clear main heading and organise sections with logical heading levels.
  • Use semantic HTML and meaningful alt text; use empty alt text for decorative images.
  • Declare the preferred URL with a canonical link when duplicate versions exist.
  • Provide crawlable links, indexable content, responsive layouts, and fast-loading resources.

Common mistakes candidates make

  • Claiming that meta descriptions directly improve rankings or that multiple <h1> elements automatically cause penalties.
  • Repeating keywords unnaturally or giving every image keyword-filled alt text.
  • Treating canonical links as redirects or accidentally pointing distinct pages to an unrelated canonical URL.

Likely follow-up questions

What is the difference between the <title> and <h1>?

The <title> belongs in the <head>, labels the browser tab, and may be used as the search-result title. The <h1> is the visible main heading in the page body; both should describe the same topic but need not be identical.

Does a canonical link redirect users?

No, a canonical link suggests which URL search engines should treat as the representative version of duplicate content. A permanent HTTP redirect, such as a 301, actually sends browsers and crawlers to another URL.

Does blocking a page in robots.txt prevent indexing?

Not necessarily: robots.txt controls crawling, and a blocked URL may still appear in search results if discovered elsewhere. To prevent indexing, allow crawling and serve a noindex directive, such as <meta name="robots" content="noindex">.

Interview tip: Structure your answer around the head, body, and crawlability, showing a small HTML example and explaining each tag’s purpose.

Related Interview Questions

1
HTML/CSSAdvanced#seo#html

What is structured data / Schema.org markup used for?

Open
2
HTML/CSSIntermediate#storage#javascript

What is the difference between localStorage, sessionStorage, and cookies?

Open
3
HTML/CSSAdvanced#storage#javascript

What is IndexedDB used for?

Open