How to add metadata to HTML page
Metadata provides details about a webpage that are not visible to the users who visit it, but are important for search engines and other systems (like social media platforms).
Metadata in HTML
In HTML you add Metadata to the "head" tag on top of the html-file with the help of "meta" tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site/page Title</title>
</head>
<body>
<!-- Main page content here. -->
</body>
</html>The most important type of metadata is the title of the page (the main source of information about it).
Another important metadata is the page description:
<meta name="description" content="Page description here." />It is worth setting it properly to display the right information about the page.
You can also add an image to metadata (typically used for previews on the shared links to a page, when it is possible):
<meta property="og:image" content="Image-URL">
OG means Open Graph elements which enhance the way a page is shown when shared on social media platforms. They also include title and description:
<meta property="og:title" content="Site/page Title" />
<meta property="og:description" content="Page description here." />Favicon is the type of metadata that does not require "meta" tags and can be added in the following way:
<link rel="icon" href="/favicon.ico" />There are more ways to add and tweak metadata for a web page and I have also written about it (as well as about adding metadata in React in Next.js applications) in this post on my Medium blog.
Thank you for reading.
Read my stories on Medium
I write every Friday and share what I work on and learn.