HTML from Scratch: and — What Really Affects SEO. Lesson #22 Overcod.net

HTML from Scratch: and — What Really Affects SEO. Lesson #22

HTML с нуля: и — что реально влияет на SEO. Урок №22

Many websites lose traffic not because of design or content, but because of small things inside <head> that are missing or done poorly.

In this lesson — only what actually matters:

<title> and its impact on search results;
useful <link> tags: favicon, canonical, preload.

`<title>` — the most important tag in `<head>`

<title>HTML from Scratch — Meta Tags and SEO</title>

Where `<title>` is used

browser tab title;
main heading in Google search results;
page name in bookmarks.

HTML с нуля: и — что реально влияет на SEO. Урок №22

How `<title>` affects SEO

it is one of the strongest ranking factors;
search engines look at it first;
it is used to build the snippet.

Rules for a good `<title>`

unique for each page;
length: ~50–60 characters;
main keyword closer to the beginning;
no repetition or filler text.

Bad:

<title>Home</title>

Good:

<title>HTML from Scratch — How to Write Meta Tags</title>

`<link>` — connecting important resources

The <link> tag is used to connect files and define rules for search engines.

Favicon — site icon

<link rel="icon" href="/favicon.ico">

What it gives:

icon in the browser tab;
better brand recognition;
clean look in bookmarks.

HTML с нуля: и — что реально влияет на SEO. Урок №22

Tip:

use .ico or .png;
place it in the site root or specify the full path.

Canonical — protection from duplicates

<link rel="canonical" href="https://overcod.net/page.html">

Why it’s needed:

points to the main version of the page;
solves duplicate content issues;
helps SEO.

Required when:

sorting pages;
URL parameters like ?page=, ?utm=;
duplicated content.

Important:

canonical must point to an existing page;
it must not conflict with redirects.

Preload — faster loading

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

Purpose:

browser loads the resource earlier;
page renders faster;
useful for fonts, CSS, large images.

What to preload:

fonts;
critical CSS;
key images.

Common mistake:

preloading everything → slower site instead of faster.

Where all this goes

All these tags must be inside <head>:

<head>
  <meta charset="UTF-8">
  <title>HTML from Scratch — title and link</title>

  <link rel="icon" href="/favicon.ico">
  <link rel="canonical" href="https://www.overcod.net/page.html">
  <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
</head>

Final summary

<title> — critical for SEO;
<link rel="icon"> — does not affect rankings but is recommended;
<link rel="canonical"> — prevents duplicates;
<link rel="preload"> — speeds up the site when used correctly.