What is metadata?
Metadata is basically information that the computer reads, and then transforms it into something the user can see or interact with. For example, the title of a web page is metadata that is displayed in the browser tab. The description of a web page is also metadata that is used by search engines to display a summary of the page in search results. The icon of the webpage is also metadata that is displayed in the browser tab or in the bookmarks.
How to add metadata to your HTML page
Remember the <head> element we talked about in the previous lesson? This is where you will add metadata to your HTML page. The <head> element is used to contain information about the document, such as the title, description, keywords, and other metadata.
And this metadata is added using the same tags we dissussed. Let’s add our first tags to the <head> element, as well as the <body> element, which is where the content of the page goes.
<!doctype html>
<html>
<head>
<title>My First HTML Page</title>
<meta
name="description"
content="This is my first HTML page. It is a simple page that contains some text and images."
/>
<meta
name="keywords"
content="HTML, web development, frontend development"
/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Welcome to my first HTML page!</h1>
<p>This is a simple page that contains some text and images.</p>
</body>
</html>Now your page has a name - My first HTML Page. And it also has a description: This is my first HTML page. It is a simple page that contains some text and images.
If you are still wondering what that does, that is how your page would probably look like in a search engine result:
You can add more and more metadata to your page to display different things in the browser or in the search engine results. In a later post, we will go over all the different things you can add to your page, but for now, let’s just focus on the basics.
Bottom line
Metadata is important because it helps search engines understand what your page is about, and it also helps users find your page in search results. It is also used by browsers to display information about the page, such as the title and description. By adding metadata to your HTML page, you can improve the visibility of your page in search results and make it more user-friendly.
In later session we will discuss more advanced metadata, such as adding social media pictures when sharing a link, icon in the browser tab, and other things that will make your page more interactive and user-friendly.
Questions
About the author
Vasil Kostadinov
Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.