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

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"> — ускоряет сайт, если использовать с умом.