HTML з нуля: і — що реально впливає на SEO. Урок №22 Overcod.net

HTML з нуля: і — що реально впливає на SEO. Урок №22

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

Багато сайтів втрачають трафік не через дизайн і не через контент. А через дрібниці в <head>, які або не прописані, або зроблені абияк.

У цьому уроці — лише те, що реально працює:

<title> і його вплив на пошук;
корисні <link> теги: favicon, canonical, preload.

`<title>` — найважливіший тег у `<head>`

<title>HTML з нуля — мета теги та SEO</title>

Де використовується `<title>`

заголовок вкладки браузера;
основний заголовок у результатах Google;
назва сторінки в закладках.

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

Як `<title>` впливає на SEO

це один із найсильніших факторів ранжування;
пошуковик у першу чергу звертає увагу саме на нього;
на його основі формується сніпет.

Правила хорошого `<title>`

унікальний для кожної сторінки;
довжина: ~50–60 символів;
ключова фраза ближче до початку;
без повторів і зайвого сміття.

Погано:

<title>Головна</title>

Добре:

<title>HTML з нуля — як прописати мета теги</title>

`<link>` — підключення важливих ресурсів

Тег <link> використовується для підключення файлів і задання правил для пошукових систем.

Favicon — іконка сайту

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

Що дає:

іконка у вкладці браузера;
впізнаваність сайту;
охайний вигляд у закладках

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

Порада:

використовуйте .ico або .png;
зберігайте файл у корені сайту або вказуйте повний шлях.

Canonical — захист від дублів

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

Навіщо потрібен:

вказує основну версію сторінки;
вирішує проблему однакового контенту з різними URL;
допомагає SEO.

Коли обов’язковий:

сортування;
параметри ?page=, ?utm=;
копії сторінок.

Важливо:

canonical має вказувати на існуючу сторінку;
не повинен суперечити редиректам.

Preload — прискорення завантаження

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

Для чого:

браузер завантажує файл заздалегідь;
сторінка відображається швидше;
корисно для шрифтів, CSS, великих зображень.

Що можна preload:

шрифти;
критичний CSS;
важливі зображення.

Типова помилка:

preload усього підряд → замість прискорення сайт стає повільнішим.

Де все це має бути

Усі ці теги завжди розміщуються в <head>:

<head>
  <meta charset="UTF-8">
  <title>HTML з нуля — title і 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>

Короткий підсумок

<title> — критично важливий для SEO;
<link rel="icon"> — не впливає на позиції, але бажаний;
<link rel="canonical"> — захищає від дублів;
<link rel="preload"> — прискорює сайт, якщо використовувати розумно.