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.

Leave a comment(2)

Hello there! I know this is kind of off topic but I was wondering which blog platform are you using for this website? I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform. I would be awesome if you could point me in the direction of a good platform.

Reply
Posted on: 15.05.2026

Hi. If you create a website on WordPress, don’t use plugins. The theme should be created from scratch, free of unnecessary plugins and files. Hosting should be reliable, and passwords should be complex.

Posted on: 07.06.2026