Каждая HTML-страница должна иметь ряд ключевых элементов для обеспечения быстрой загрузки и хороших показателей SEO. В этом руководстве рассмотрены все мета-теги, которые необходимо включить на свою веб-страницу, чтобы она была полностью оптимизирована для разных случаев. В конце статьи приведен шаблон-пример страницы с мета-мегами.

Стандартные мета-теги

Эти мета-теги должны быть обязательными для SEO-оптимизации вашей страницы:

<meta name="description" content="{{ описание контента страницы }}">
<meta name="robots" content="index,follow">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" user-scalable="no">
<link rel="canonical" href="{{ канонический адрес страницы }}">

Ссылочные мета-теги

Ссылочные теги предоставляют вашей странице больше контекста и помогают браузеру понять, чего ожидать:

<link rel="shortlink" href="{{ короткая ссылка на страницу }}">
<link rel="prev" href="{{ ссылка на предыдущую страницу }}">
<link rel="next" href="{{ ссылка на следующую страницу }}">
<link rel="dns-prefetch" href="{{ ссылка на DNS домен для ускорения начального соединения }}">
<link rel="prefetch" href="{{ ссылка на ресурс, который необходимо закешировать }}">
<link rel="prerender" href="{{ ссылка на страницу, которую необходимо предварительно отрисовать }}">
<link rel="preload" href="{{ ссылка на ресурс, который необходимо закешировать как можно скорее }}" as="script">
<!-- в качестве значения "as" может быть "script", "font", "stylesheet" -->

Мета-теги для социальных сетей

Для корректного отображения веб-страницы в социальных сетях, используют специальные мета-теги:

<meta property="og:title" content="{{ заголовок сайта }}">
<meta property="og:locale" content="{{ язык_РЕГИОН }}">
<meta property="og:description" content="{{ описание контента страницы }}">
<meta property="og:image" content="{{ ссылка на картинку-превью страницы }}">
<meta property="og:image:width" content="{{ ширина картинки-превьюшки }}">
<meta property="og:image:height" content="{{ высота картинки-превьюшки }}">
<meta property="og:image:alt" content="{{ альтернативный текст картинки-превьюшки }}">
<meta property="og:image:type" content="{{ формат картинки (напр. image/png) }}">
<meta property="og:url" content="{{ ссылка на страницу }}">
<meta property="og:site_name" content="{{ название сайта }}">

Мета-теги для Twitter

Несмотря на то, что теги og: хороши для многих социальных сетей, для Twitter существуют специальные мета-теги:

<meta name="twitter:card" content="summary_large_image"> <!-- Эту строку менять не нужно -->
<meta name="twitter:site" content="{{ ссылка на страницу }}">
<meta name="twitter:title" content="{{ заголовок страницы }}">
<meta name="twitter:creator" content="{{ автор твита }}">
<meta name="twitter:description" content="{{ описание страницы }}">
<meta name="twitter:image" content="{{ ссылка на картинку-превью страницы }}">

Мета-теги для Apple

Эти теги используются Apple для определения формата и размера вашей страницы, в основном на мобильных устройствах:

<!-- включение полноэкранного режима на iOS устройствах -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- цвет верхней панели устройства iOS (предыдущий мета-тег обязателен) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<!-- авто-определение телефонных номеров на странице -->
<meta name="format-detection" content="telephone=yes">

Мета-теги для видео в социальных сетях

Если ваша страница содержит видео, добавьте этот набор мета-тегов:

<meta name="og:video" content="{{ ссылка на видео }}">
<meta name="og:video:secure_url" content="{{ безопасная ссылка на видео }}">
<meta name="og:video:types" content="{{ формат картинки (напр. video/mp4) }}">
<meta name="og:video:width" content="{{ ширина видео }}">
<meta name="og:video:height" content="{{ высота видео }}">
<meta name="og:video:image" content="{{ картинка-превьюшка для видео }}">

Мета-теги для 3D-ресурсов

Иногда на странице могут быть 3D-объекты. Следующие мета-теги помогают браузеру и другим сайтам понять ключевой 3D-ресурс на вашей странице:

<meta property="og:type" content="threed.asset"> <!-- эту строку менять не нужно -->
<meta property="og:asset" content="{{ ссылка на 3d объект }}">
<meta property="og:title" content="{{ заголовок 3d объекта }}">

Шаблон-пример страницы с мета-мегами

<!DOCTYPE HTML>
<html>
  <head>
    <title>Моя страница</title>
    <link rel="icon" type="text/png" href="https://my-site.com/favicon.png" />
    <!-- если используете google fonts, добавьте строку ниже -->
    <!-- <link rel="preconnect" href="https://fonts.gstatic.com" /> -->
    <meta name="description" content="Описание страницы" />
    <meta name="robots" content="index,follow" />
    <link rel="canonical" href="https://my-site.com/post" />

    <meta property="og:title" content="Моя страница" />
    <meta property="og:locale" content="ru_RU" />
    <meta property="og:description" content="Описание страницы" />
    <meta property="og:image" content="https://my-site.com/post-image.png" />
    <meta property="og:image:width" content="300" />
    <meta property="og:image:height" content="200" />
    <meta property="og:image:alt" content="Альтернативный текст картинки страницы" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:url" content="https://my-site.com/post" />
    <meta property="og:site_name" content="My Site" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="https://my-site.com/post" />
    <meta name="twitter:title" content="Моя страница" />
    <meta name="twitter:creator" content="@author" />
    <meta name="twitter:description" content="Описание страницы" />
    <meta name="twitter:image" content="https://my-site.com/post-image.png" />

    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />

    <!--если вы используете google analytics, замените [[ID HERE]] в скрипте и коде на ваш ID -->
    <!-- 
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-[[ID HERE]]"></script>
    <script>
      var host = window.location.hostname;
      if(host !== "localhost") {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '[[ID HERE]]');
      }
    </script>
    -->

    <link rel="preload" href="style.css" as="style" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- основная разметка страницы -->
    <script defer src="script.js"></script>
  </body>
</html>