HTML from scratch: How to write meta tags in HTML. Lesson #21 Overcod.net

HTML from scratch: How to write meta tags in HTML. Lesson #21

You can build clean layout and valid HTML, but without meta tags a website is hard to understand for browsers, search engines, and social networks. Meta tags define basic rules: how to read a page, how to index it, and how to display a link.

In this HTML from scratch lesson — only useful meta tags. No filler and no outdated stuff.

Where meta tags are placed

All meta tags are placed inside <head>.

<head>
 
</head>

They are not visible on the page, but affect:

encoding;
SEO;
mobile layout;
social previews;
browser behavior.

Required meta tags

Page encoding

<meta charset="UTF-8">

Must be present in every HTML file (go).

Viewport (mobile support)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without it, a website appears zoomed out on mobile devices.

SEO meta tags

Description

<meta name="description" content="HTML from scratch. Lesson №21. Meta tags in HTML.">

Short page description. Can be used in search result snippets.

Recommendations:

120–160 characters;
unique for each page.

Keywords (obsolete)

<meta name="keywords" content="html, meta tags, html from scratch">

Search engines no longer use this tag. Optional.

Robots

<meta name="robots" content="index, follow">

Controls page indexing.

Main values:

index — index the page;
noindex — do not index;
follow — follow links;
nofollow — do not follow links.

Block indexing:

<meta name="robots" content="noindex, nofollow">

Redirect using meta refresh (not recommended)

<meta http-equiv="refresh" content="5; url=https://www.overcod.net/new-page.html">

This tag performs automatic redirection after a set number of seconds.

Why it should be avoided:

it is not a real redirect;
search engines process it worse;
HTTP status codes (301 / 302) cannot be set;
the page loads first, then redirects.

Acceptable cases:

temporary placeholder pages;
pages with a “You will be redirected” message;
test projects.

For production websites, redirects should be done on the server side.

Browser-related meta tags

Author

<meta name="author" content="Stepan">

Informational tag. Does not affect site behavior.

Generator

<meta name="generator" content="WordPress">

Usually added by CMS. Optional.

Theme-color

<meta name="theme-color" content="#ffffff">

Sets the address bar color in mobile browsers.

Social media meta tags (Open Graph)

Used to control how a link looks on Facebook, Telegram, Viber, and other platforms.

<meta property="og:title" content="HTML from scratch — meta tags">
<meta property="og:description" content="Practical lesson on meta tags in HTML">
<meta property="og:image" content="https://www.overcod.net/image.jpg">
<meta property="og:url" content="https://www.overcod.net/page.html">
<meta property="og:type" content="website">

Without these tags, social networks may show random text or images.

Minimal working `<head>`

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML from scratch — meta tags</title>


<meta name="description" content="HTML from scratch. Lesson №21. Meta tags in HTML.">
<meta name="robots" content="index, follow">


<meta property="og:title" content="HTML from scratch — meta tags">
<meta property="og:description" content="Practical lesson on meta tags in HTML">
<meta property="og:image" content="https://www.overcod.net/image.jpg">
<meta property="og:url" content="https://www.overcod.net/page.html">
<meta property="og:type" content="website">
</head>

This setup is enough for most websites.

What you can skip

You can safely omit:

keywords;
author;
generator;
meta refresh for redirects.

Conclusion

Meta tags are a core part of HTML, not an add-on.

Minimum for any page:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="...">

If the page needs proper previews in social networks, add Open Graph. The rest is used when needed.