SEO: Essential <head> Metadata

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

You’re given a simple marketing page that renders fine in the browser, but it’s missing production-grade <head> metadata. Update ONLY the <head> so the page has correct encoding, mobile-friendly viewport behavior, a descriptive title, and a meta description. Do not change the <body>. No CSS/JS changes are needed.

Solution

Overview

This is a realistic production check: you can have “valid HTML” that still fails basic SEO/mobile standards. The fix is to complete the <head> with the small set of tags almost every team expects in reviews: charset, viewport, meaningful title, and meta description—while keeping styling in the external CSS file.

Approach 1 – Minimal production <head>

Add UTF-8 encoding first, then the viewport meta for mobile. Write a title that includes the product name plus clear intent (what the page is about). Add a short, human-readable description (one sentence) describing the value. Keep CSS loaded via the existing external stylesheet link and avoid <style>/<script> for this task.

<html>

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>
        FrontendAtlas – Frontend Interview Practice
      </title>
      <meta
      name="description"
      content="Practice real interview-style frontend tasks with clear solutions and explanations."
    >
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <main class="card">
        <h1>
          FrontendAtlas
        </h1>
        <p class="muted">
          Interview-style frontend practice: coding tasks, explanations, and reviewable solutions.
        </p>
      </main>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}
.card {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 16px;
  max-width: 760px;
}
.muted {
  opacity: 0.7;
}

Notes & Pitfalls

Pitfalls

Putting <title> in <body> instead of <head> (invalid placement).
Skipping the viewport meta, causing mobile pages to render zoomed-out.
Using a generic title like “Home” instead of “Brand – page intent”.
Writing a meta description that is empty, too vague, or stuffed with keywords.

Techniques

Order in <head> is typically: charset early, then viewport, then title/description, then CSS link.
Meta description should be a readable summary (roughly 1 sentence).

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep