HTML SEO and Meta Tags Interview Questions

The <title> and meta description first, then a clear heading structure, descriptive link text, alt text, a canonical URL and the viewport tag.

<head>
  <title>HTML Interview Questions and Answers | Coddy</title>
  <meta name="description" content="HTML questions with answers and live examples.">
  <link rel="canonical" href="https://example.com/html-interview-questions">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

In the body, use one <h1> on the topic, headings in order, and real <a href> links whose text says where they go. See the title tag page.

<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to lay the page out at the screen's width. Without it, phones use a desktop width (often 980px) and zoom out, so text is tiny and media queries misfire.

Do not add maximum-scale=1 or user-scalable=no: blocking pinch zoom stops low vision users from enlarging text, which WCAG resize text asks to work up to 200%. See the viewport page.

Not directly. Google ignores <meta name="keywords">, and the description is not a ranking factor, but it is often shown as the snippet under your title, so a good one earns clicks.

<title>Learn HTML Forms with Examples</title>
<meta name="description" content="Build forms with labels, input types and validation. Every example runs in the browser.">

Write a unique description for each page; Google may shorten or rewrite it. The <title> does affect ranking.

It tells the browser how to decode the page's bytes into characters; with the wrong encoding Café shows up as Café. The spec requires it within the first 1024 bytes, so put it first in <head>. A Content-Type HTTP header with a charset takes priority over it, so the two should agree.

<link rel="canonical" href="..."> names the preferred URL when the same content is reachable at several URLs, so ranking signals are combined on one page.

<link rel="canonical" href="https://example.com/shoes/running">

Duplicates usually come from tracking and filter parameters. Use an absolute URL. Google treats it as a hint and can pick another canonical if the signals disagree.

Open Graph tags (<meta property="og:...">) control the preview card when a link is shared on social media and chat apps: its title, description and image.

<meta property="og:title" content="HTML Interview Questions">
<meta property="og:description" content="Answers with live examples.">
<meta property="og:image" content="https://example.com/og/html.png">
<meta name="twitter:card" content="summary_large_image">

Use an absolute image URL. Most scrapers do not run JavaScript, so the tags must be in the HTML the server sends.

robots.txt controls crawling (which URLs a crawler may fetch); the robots meta tag controls indexing of a page that was fetched.

<meta name="robots" content="noindex, follow">

The trap: a page blocked in robots.txt is never fetched, so its noindex is never seen, and the URL can still be indexed from links. To keep a page out, allow crawling and use noindex.

hreflang links tell search engines which URL serves which language or region, so searchers get their own language.

<link rel="alternate" hreflang="en" href="https://example.com/pricing">
<link rel="alternate" hreflang="hi" href="https://example.com/hi/pricing">
<link rel="alternate" hreflang="de" href="https://example.com/de/pricing">
<link rel="alternate" hreflang="x-default" href="https://example.com/pricing">

Every version lists all versions including itself, links must be reciprocal, and x-default is the fallback. Each version keeps its own self-referencing canonical; pointing them all at the English page drops the translations.

Structured data describes the page's content in the schema.org vocabulary, so search engines know it is a product, an article or a recipe. Google recommends JSON-LD in a script tag.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML Interview Questions",
  "datePublished": "2026-03-14",
  "author": { "@type": "Organization", "name": "Coddy" }
}
</script>

It can make a page eligible for rich results but is not a ranking boost, and it must match the visible content.

All three tell search engines that a link is not your editorial endorsement. sponsored marks paid links, ads and affiliate links; ugc marks links in user-generated content such as comments and forum posts; nofollow covers any other link you do not vouch for. They can be combined: rel="ugc nofollow". Google has treated them as hints rather than rules since 2019, and paid links without sponsored or nofollow can bring a manual action.