Какие метатеги использовать в вебе в 2017 году

Отредактировано

Браузеры интерпретируют метатеги, чтобы правильно отобразить сайт, а поисковики используют их при выборке информации о странице. Стандарты взаимодействия развиваются, и теги — вместе с ними. Разбираем актуальное по теме.

18К открытий18К показов

Метатеги в контексте веб-страниц — HTML-теги, которые размещаются в разделе <head> веб-страницы. Браузеры интерпретируют их, чтобы правильно отобразить сайт, а поисковые системы используют при выборке информации о странице. Некоторые теги могут влиять на позиции сайта в результатах поиска.

Рассмотрим метатеги, которые стоит использовать в 2017 году. Стандарты взаимодействия развиваются, и теги — вместе с ними. Поэтому те теги, которые здесь не описаны, с большой вероятностью уже бесполезны.

Основные

Определяет кодировку веб-страницы:

			<meta charset="utf-8">

Определяет заголовок веб-страницы, который также отображается в результатах поиска Google, Яндекс, Bing и др. Длину заголовка стоит уместить в 70 символов, так как остальное будет отсечено при отображении:

			<title>Заголовок страницы</title>

Определяет краткое описание содержания веб-страницы, которое также может быть использовано в выдаче поисковых систем. Длину описания стоит уместить в 150 символов, так как остальное будет отсечено при отображении:

			<meta name="description" content="[описание страницы]">

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

			<meta name="viewport" content="width=device-width, initial-scale=1">

Определяет базовый URL-адрес для ссылок на внешние файлы, такие, как CSS, Javascript и изображения. В результате браузер найдёт файл независимо от размещения текущей веб-страницы. Это не самый полезный тег, но если его указать, то объём исходного кода страницы уменьшится, а перенос сайта на другой домен принесёт меньше головной боли разработчику:

			<base href="//cdn.example.com/">

Определяет «Имя приложения», которое появляется под иконкой страницы на мобильных устройствах, когда пользователь использует функцию «Добавить на главный экран» в веб-браузере:

			<meta name="application-name" content="[имя приложения]">

Взаимодействие с поисковыми системами

Иногда требуется запретить или разрешить роботам поисковых систем обрабатывать ту или иную страницу. Метатег robots определяет политику обработки страницы поисковыми роботами. Вот несколько примеров:

<meta name="robots" content="all"/> — разрешено индексировать текст и ссылки на странице, аналогично <meta name="robots" content="index, follow"/>;
<meta name="robots" content="noindex"/> — не индексировать текст страницы;
<meta name="robots" content="nofollow"/> — не переходить по ссылкам на странице;
<meta name="robots" content="none"/> — запрещено индексировать текст и переходить по ссылкам на странице, аналогично <meta name="robots" content="noindex, nofollow"/>;
<meta name="robots" content="noarchive"/> — не показывать ссылку на сохраненную копию на странице результатов поиска.

Google

Как и предыдущий тег, определяет политику обработки страницы поисковым роботом, но только для Google:

			<meta name="googlebot" content="index,follow">

Проверяет веб-сайт на наличие доступа к панели веб-мастера Google (Google Webmaster Tools):

			<meta name="google-site-verification" content="[код верификации]">

Отключает панель поиска ссылок Google:

			<meta name="google" content="nositelinkssearchbox">

Запрещает браузеру Google Chrome переводить веб-страницу:

			<meta name="google" content="notranslate">

Подробности работы с Google описаны в Справочном центре.

Яндекс

Определяет политику обработки страницы роботом Яндекс:

			<meta name="yandex" content="index,follow">

Проверяет веб-сайт на наличие доступа к сервису Яндекс.Вебмастер:

			<meta name="yandex-verification" content="[код верификации]">

Подробности работы с Яндекс описаны на странице помощи для веб-мастеров.

Взаимодействие с социальными сетями

Метатеги социальных медиа необязательны, но помогают поделиться ссылкой на веб-страницу в таком виде, чтобы привлечь внимание читателей, увеличить количество лайков и репостов.

Текст адаптируется для поста, картинка создаётся специально под площадку. Причём они могут даже не отображаться в веб-версии сайта.

Open Graph (Facebook, Pinterest, Вконтакте, Одноклассники)

Open Graph — разработанная Facebook разметка, позволяющая настраивать превью страницы, ссылка на которую размещена в социальной сети. Open Graph поддерживают социальные сети вроде Вконтакте, Одноклассники, Google+, Twitter и LinkedIn. Как основную используют Facebook и Pinterest.

Стандартный сниппет выглядит так:

			<meta property="og:url" content="[ссылка]">

<meta property="og:type" content="article">

<meta property="og:title" content="[заголовок]">

<meta property="og:description" content="[описание]">

<meta property="og:image" content="[ссылка на изображение]">

<meta property="article:author" content="[ссылка на аккаунт Facebook">

<meta property="og:site_name" content="[название сайта]">

<meta property="article:published_time" content="2014-08-12T00:01:56+00:00">

Facebook поддерживает дополнительные метатеги для изображений и видео.

Для Pinterest в article:author указывается имя автора или название сайта, но это противоречит требованиям Open Graph на Facebook. Для программистов создано интересное решение. В противном случае используйте более выгодный вариант или разметку Schema вместе с Open Graph.

Чтобы запретить пользователям пинить свой контент, используйте следующий код:

			<meta name="pinterest" content="nopin" description="[нет!]">

Стандартные метатеги (Twitter)

Twitter поддерживает некоторые элементы Open Graph, но в основном использует стандартные метатеги для определения расшаренного контента. Проверить описание, или карту, как называет его Twitter, можно с помощью валидатора карт.

Вот пример описания:

			<meta name="twitter:card" content="описание">

<meta name="twitter:site" content="[@websitetwitter]">

<meta name="twitter:creator" content="[@yourtwitter]">

<meta property="og:url" content="[ссылка]">

<meta property="og:title" content="[заголовок]">

<meta property="og:description" content="[описание]">

<meta property="og:image" content="[ссылка на изображение]">

Примечание twitter:site — ссылка на аккаунт сайта в Twitter, twitter:creator — ссылка на аккаунт автора.

Schema (Google+ и Pinterest)

Разметка Schema — продукт совместной работы крупнейших поисковых систем, преимущественно используемый в Google+. В Pinterest Schema поддерживается как альтернатива Open Graph, но не в полной мере: рекомендуется использовать обе. Разметка Schema громоздкая и менее привлекательная, чем Open Graph, но её словарь описания связанного контента богаче.

Вот сниппет для Google+:

			<meta itemscope itemtype="http://schema.org/Article">

<meta itemprop="headline" content="[заголовок]">

<meta itemprop="description" content="[описание]">

<meta itemprop="image" content="[ссылка на изображение]">

Google+ использует Open Graph как резервную разметку, у Pinterest используются дополнительные метатеги Schema, поэтому разумно использовать все три описанные разметки.

Разные полезности

Передача реферальных данных

			<meta name="referrer" content="unsafe-url">

При использовании HTTPS реферальные данные по умолчанию не передаются. Это улучшает защиту сайта, но мешает собирать веб-аналитику. С помощью метатега referrer определяется политика передачи реферальных данных. Атрибут content принимает различные значения. unsafe-url, например, указывает, что передаётся полная ссылка на страницу.

Исключение дублированного контента

			<link rel="canonical" href="https://example.com/2010/06/9-things-to-do.html">

Если при анализе сайта Google находит две версии одной страницы, каждая из которых имеет свой URL-адрес, будет применён штраф за дублирование контента (duplicate content). Используя canonical, вы говорите поисковикам: «Эй, это наше художественное видение!». Таким образом, штрафных мер не будет.

			<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

Ссылка на AMP-версию страницы.

			<link rel="alternate" href="https://es.example.com/" hreflang="es">

Ссылка на версию веб-страницы, которая переведена на другой язык. Язык текущей страницы указывается следующим образом:

			<html lang="es">

RSS

			<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">

С помощью alternate также указывается RSS-версия страницы.

			<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

Аналогично на примере канала Atom.

Favicon

			<link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png">

<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">

<link rel="icon" href="favicon-48.png" sizes="48x48" type="image/png">

<link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png">

<link rel="icon" href="favicon-192.png" sizes="192x192" type="image/png">

Ссылки на иконки веб-страницы в нескольких размерах. Проверить правильность описания иконок сайта или сгенерировать новое на основе готового изображения можно на специальных сайтах, таких как realfavicongenerator.net. Обратите внимание, что некоторые новые браузеры требуют иной способ указания этой опции. Например:

Apple Touch

			<link rel="apple-touch-icon" href="older-iPhone.png"> // 120px

<link rel="apple-touch-icon" sizes="180x180" href="iPhone-6-Plus.png">

<link rel="apple-touch-icon" sizes="152x152" href="iPad-Retina.png">

<link rel="apple-touch-icon" sizes="167x167" href="iPad-Pro.png">

Windows Metro

			<?xml version="1.0" encoding="utf-8"?> 

<browserconfig> 

 <msapplication>

   <tile>

     <square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>

     <square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>

     <square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>

     <wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>

     <TileColor>#2b5797</TileColor>

   </tile>

 </msapplication>

</browserconfig>

Код для Metro, в отличие от предыдущих случаев, требуется сохранить в файл browserconfig.xml в корне сайта.

Предварительная загрузка

Применение метатега link с опцией предварительной загрузки (dns-prefetch, prefetch, preconnect, subresource, prerender и preload) поможет увеличить скорость работы веб-сайта. Они дают знать браузеру, какие ресурсы понадобятся пользователю в будущем, чтобы подготовиться к загрузке в фоновом режиме.

			<link rel="dns-prefetch" href="//example.com">

Браузер определяет в фоновом режиме IP-адрес указанного домена и, когда потребуется запросить что-либо с ресурса на этом домене, сэкономит время на выполнении DNS lookup.

			<link rel="preconnect" href="https://www.example.com/">

Похож на dns-prefetch, но, кроме запроса DNS, браузер предварительно устанавливает TCP и TLS соединение.

			<link rel="prefetch" href="https://www.example.com/image.png">

Указывает браузеру ресурс, который требуется сохранить в кэш. Однако загрузка выполняется с низким приоритетом и может быть проигнорирована. Это зависит от обстоятельств. Например, от качества сетевого соединения или для Firefox наличия достаточного для загрузки времени простоя браузера.

			<link rel="subresource" href="styles.css">

Делает то же, что и prefetch, но приоритет у операции высокий. Если ресурс понадобится на текущей странице или в ближайшее время, то разумно использовать subresource. В остальных случаях лучше, конечно, применить prefetch.

			<link rel="prerender" href="https://example.com/">

Браузер загружает указанную страницу, строит DOM, применяет CSS и выполняет JavaScript. Как если бы мы открыли её в скрытой вкладке. Но при использовании требуется уверенность, что указанная страница будет загружена, иначе перечисленные операции будут выполнены зря.

			<link rel="preload" href="image.png">

По сути, это аналог prefetch, но с гарантированной загрузкой. Уже описан в спецификации, но поддерживается пока не всеми браузерами. На момент публикации этой статьи есть поддержка в Firefox, Chrome, Safari, Opera и Android Browser. Проверить актуальность информации можно на сайте caniuse.com.

Разные бесполезности

Какие метатеги использовать в вебе в 2017 году 1

Давайте поговорим начистоту. Ничего страшного не случится, если использовать устаревшие метатеги, но они занимают место в разметке, и их никто не обрабатывает. Долой лишнее из раздела <head>!

Примеры таких метатегов:

Author/web author — определяет имя автора страницы. Указывать бессмысленно, так как не используется.
Revisit after — указывает поисковым роботам время, через которое требуется зайти на страницу снова. Поисковые системы вроде «Яндекс» и Google не учитывают этот параметр.
Rating — обозначает возрастную категорию контента. Чтобы пометить страницу, на которой размещены изображения для взрослых, требуется пройти запутанную процедуру. Проще отметить «плохие» изображения, разместить в отдельной директории на сайте и сообщить об этом поисковым системам.
Expiration/date — указывает дату создания и срок актуальности страницы. Если страницы уже не нужны, просто удалите. Дату создания же лучше указать в XML sitemap.
Copyright — описывает авторские права. Посмотрите на нижний колонтитул сайта. Наверняка там размещена фраза вроде Copyright 20xx. Не стоит дублировать описание ещё в теги.
Abstract — содержит аннотацию к содержанию страницы и чаще используется на образовательных ресурсах.
Distribution — описывает права доступа к странице. Как правило, содержит значение global. Изначально задумывалось, что если страница открыта (не защищена паролем), то предназначена для всего мира. Смиритесь и уберите со страницы.
Generator — указывает, с помощью какой программы создана страница. Как и author, это бесполезно.
Cache control — указывает, когда и как часто страница кэшируется в браузере. Лучше это определить в заголовке HTTP.
Resource type — указывает тип ресурса страницы, например, document. Не тратьте на это время, так как это работа DTD.

Эта шпаргалка поможет понять, что происходит в мире метатегов. Если считаете, что нужно что-то добавить или удалить — пишите в комментарии.

18К открытий18К показов

Также рекомендуем

Понимание разницы между npm и npx

Объяснили, в чём разница между ‘npm’ и ‘npx’ — двумя ключевыми инструментами в экосистеме Node.js.

Сказ о том, как я за год решил более 600 leetcode задач

История о том, как я решил 600 задач на Leetcode и прошел несколько coding сессий в таких компаниях как Booking, Careem и Avito.

SEO для разработчиков: что нужно знать программистам в 2024 году

Технические основы СЕО для программистов: что нужно знать о мета-тегах, микроразметке, UX/UI, карте сайта, коде 404, подзаголовках.

Что должен знать уважаемый фронтендер в 2024 году

Узнали у middle и senior фронтендеров, что нужно изучать в 2024 году новичкам и опытным специалистам, чтобы быть востребованными.