A webpage has two audiences: the people who read it, and the browsers or search systems that need to understand it.
What You Need to Know
Meta elements describe things such as encoding, viewport behavior, and page summaries. Each name or attribute has its own meaning; extra meta tags do not automatically improve search ranking.
In this example: add description, robots, and theme-color metadata.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML with short lessons and examples.">
<meta name="theme-color" content="#ffffff">
<title>HTML Lessons</title>
</head>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.
- charset: Charset identifies the character encoding used for the document.
- name: The name is the key used for the submitted value.
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
- Meta elements describe things such as encoding, viewport behavior, and page summaries.
- <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.