Before someone opens an article, a browser or search tool may already be reading some of its metadata.
What You Need to Know
Useful titles and headings help people understand the page before and after opening it. Search systems may use metadata as hints, but clear visible content remains the foundation.
In this example: audit a thin page title and heading structure.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Build Your First Webpage | Student Guides</title>
<meta name="description" content="Learn to build a first webpage with simple HTML examples.">
</head>
<body>
<main><h1>Build Your First Webpage</h1><p>Start here.</p></main>
</body>
</html>Let’s Read the Code
- <meta>: A meta element provides document metadata for browsers and related systems.
- <title>: Title provides the document title that may appear in browser tabs and search results.
- lang: Lang identifies the language used in a document or passage.
- charset: Charset identifies the character encoding used for the document.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The browser and search engines can interpret metadata differently. It is a hint about the actual page, not a way to guarantee a ranking or a preview.
Keep the page consistent. The document title, visible heading, metadata, and canonical URL should refer to the same real content. If they disagree, browsers and search systems may have a harder time deciding how the page should be described.
Your Turn
Write the title and summary for one page of your own. Can someone understand the page topic without opening the document?
Note: The example uses example.com as a placeholder address; replace it with the actual public URL when publishing.
Common Beginner Mistakes
- Writing metadata that does not match the visible page.
- Metadata provides information and suggestions; it does not guarantee how search engines or social apps display a page.
Key Takeaways
- Useful titles and headings help people understand the page before and after opening it.
- <meta>: A meta element provides document metadata for browsers and related systems.
- Write metadata for the real page, not for an imagined result. Search tools may choose to display something different.