Метатеги и SEO

SEO (search engine optimization) — работа над тем, чтобы поисковики правильно понимали страницу и хорошо её показывали. Многое для этого делается в <head>: там лежат метатеги — служебные сведения о странице для браузера, поисковиков и соцсетей. На самой странице их не видно, поэтому в превью этого урока виден только текст из <body>.

Заголовок страницы

<title> — самый важный метатег. Его показывают на вкладке браузера, в закладках и крупной ссылкой в результатах поиска:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Капучино с корицей — рецепт за 5 минут</title>
  </head>
  <body>
    <h1>Капучино с корицей</h1>
  </body>
</html>

Хороший заголовок короткий, до 60 символов, и свой у каждой страницы. Главное слово — в начале.

Описание

<meta name="description"> — пара предложений о содержании страницы. Поисковик часто показывает их под заголовком. Вот как это примерно выглядит в выдаче:

<style>
  .snippet { font-family: Arial, sans-serif; max-width: 520px; }
  .snippet a { color: #1a0dab; font-size: 20px; text-decoration: none; }
  .snippet .url { color: #006621; font-size: 14px; }
  .snippet p { color: #4d5156; font-size: 14px; margin: 4px 0; }
</style>
 
<div class="snippet">
  <div class="url">example.com › recipes › cappuccino</div>
  <a href="#">Капучино с корицей — рецепт за 5 минут</a>
  <p>Как приготовить капучино с корицей дома без кофемашины: продукты, пропорции и пошаговый рецепт с фото.</p>
</div>

Ссылка — это <title>, текст под ней — description из такой строки: <meta name="description" content="Как приготовить капучино...">. Длина описания — примерно 150 символов.

Окно на телефоне

<meta name="viewport"> мы уже видели в каркасе страницы. Без него телефон отрисует страницу шириной около 980 пикселей и уменьшит её — текст станет мелким:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Кофейня</title>
  </head>
  <body>
    <p>На телефоне эта страница займёт ровно ширину экрана.</p>
  </body>
</html>

Поисковики учитывают удобство на телефонах, так что эта строка нужна на каждой странице.

Превью в соцсетях

Когда ссылку отправляют в мессенджер или соцсеть, появляется карточка с картинкой. Её содержимое задают метатеги Open Graph с атрибутом property:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Капучино с корицей</title>
    <meta property="og:title" content="Капучино с корицей">
    <meta property="og:description" content="Рецепт за 5 минут без кофемашины.">
    <meta property="og:image" content="https://example.com/images/cappuccino.jpg">
  </head>
  <body>
    <p>Карточку увидят в мессенджере, а не на странице.</p>
  </body>
</html>

Иконка и указания поисковикам

Иконку на вкладке браузера (favicon) подключают тегом <link> в <head>:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Кофейня</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="canonical" href="https://example.com/menu">
    <meta name="robots" content="noindex">
  </head>
  <body>
    <p>Иконка видна на вкладке настоящего сайта.</p>
  </body>
</html>

Здесь же ещё два полезных тега. rel="canonical" указывает главный адрес страницы, если она открывается по нескольким. robots со значением noindex просит поисковики не показывать страницу — так закрывают, например, корзину и личный кабинет.

Частая ошибка

Одинаковый <title> на всех страницах сайта: поисковик не понимает, чем страницы отличаются, а пользователь видит десять вкладок «Главная». Другая крайность — набивать заголовок и описание ключевыми словами через запятую. Поисковики за это понижают сайт. Пишите для людей: коротко и по делу. Старый тег <meta name="keywords"> поисковики давно не учитывают.

Спасибо, что читаете!