Next.js SEO · Part 2 · HTML fundamentals

How Google reads HTML

What HTML is, how a page's head and body differ, and how Google reads the title, meta description and headings.

What is HTML

HTML stands for HyperText Markup Language. It is the language used to describe the structure and content of a web page.

Imagine a website for a coffee shop. The page needs a heading, a paragraph and a button. Here is the HTML:

HTML

<h1>Welcome to Coffee House</h1>

<p>We serve fresh coffee every day.</p>

<button>Order Coffee</button>

The browser reads that HTML and displays something like this:

Coffee House - Fresh Coffee

Welcome to Coffee House

We serve fresh coffee every day.

Order Coffee

An illustration of how the HTML could appear in a browser.

Notice something important: HTML describes what the content is.

<h1> means a main heading.
<p> means a paragraph.
<button> means a button.

These are called HTML elements. Google also uses HTML to understand what a page contains.

The structure of an HTML document

Most HTML pages have two important sections:

<head>: information about the page.
<body>: the page's main content.

Here is a complete example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coffee House - Fresh Coffee</title>

    <meta
      name="description"
      content="Enjoy fresh coffee and pastries at Coffee House."
    />
  </head>

  <body>
    <h1>Welcome to Coffee House</h1>

    <p>We serve fresh coffee every day.</p>
  </body>
</html>

Here is the same structure, visually:

HTML document

<head>

Information about the page

Title: Coffee House - Fresh Coffee
Description: Enjoy fresh coffee and pastries...

<body>

Main content displayed on the page

Heading: Welcome to Coffee House
Paragraph: We serve fresh coffee every day.

The HTML head

The <head> contains information that browsers, search engines and social media services can use to understand or process the page. For SEO, two elements matter most.

1.The title element

HTML

<title>Coffee House - Fresh Coffee</title>

This gives the page its document title. Browsers commonly show it in the browser tab.

Google may also use it as the clickable title in search results, although Google can generate a different title.

2.The meta description

HTML

<meta
  name="description"
  content="Enjoy fresh coffee and pastries at Coffee House."
/>

This provides a short summary of the page. Google may use it as the description under a search result, but it can choose a different snippet from the page's content.

coffee house fresh coffee

Coffee House
https://www.example.com
Coffee House - Fresh Coffee
Enjoy fresh coffee and pastries at Coffee House.

The title and meta description as they may appear in search results.

The title and the h1

The difference between <title> and <h1> is an important concept for SEO in Next.js.

	<title>	<h1>
Location	Inside <head>	Inside <body>
Purpose	Document title	Main visible heading
Browser tab	Usually shown	Not used as the tab title
Google	May use for the result title	Helps understand the page content

For example:

HTML

<head>
  <title>Learn JavaScript - Beginner Guide</title>
</head>

<body>
  <h1>JavaScript Tutorial for Beginners</h1>
</body>

Both describe the same topic, but they serve different purposes. They don't have to be identical.

What Googlebot receives

When Googlebot visits a page, it requests the page from the web server. The server sends an HTML response, and Google can analyze that HTML, including the page's metadata and visible content.

Google can also render JavaScript-powered pages to discover content that wasn't present in the initial HTML.