Содержание
Шаблон HEAD. Бери внедряй!
Данный шаблон подойдёт в большинстве случаев и обеспечит базовую информацию о странице и контенте. Конечно, всё индивидуально, и вы можете как убрать какие-либо метатеги и их атрибуты, так и дополнить. Всё же этот шаблон для тех, кто не использует CMS системы, так как в них встроен свой функционал или используются плагины, которые настраивают вывод head с нужными тегами, а вам остаётся только правильно заполнить поля. Но раз уж вы здесь, думаю вам будет интересно узнать базовые настройки, за что отвечает тот или иной тег и его атрибуты, а всё это мы рассмотрим в данной статье.
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок страницы</title>
<meta name="description" content="Описание страницы">
<!-- Метатеги OpenGraph -->
<meta property="og:locale" content="ru_RU">
<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Описание страницы">
<meta property="og:image" content="URL_изображения">
<meta property="og:url" content="https://site.ru/post-1/">
<meta property="og:site_name" content="Название сайта" >
<!-- Метатеги Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок страницы">
<meta name="twitter:description" content="Описание страницы">
<meta name="twitter:image" content="URL_изображения">
<!-- Основной фавикон -->
<link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32">
<!-- Фавикон для Android -->
<link rel="icon" type="image/png" href="icon/favicon-192x192.png" sizes="192x192">
<!-- Дополнительный фавикон для Android -->
<link rel="icon" type="image/png" href="icon/favicon-144x144.png" sizes="144x144">
<!-- Фавиконы для iOS -->
<link rel="apple-touch-icon" href="icon/icon-180x180.png" sizes="180x180">
<link rel="apple-touch-icon" href="icon/icon-120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="icon/icon-76x76.png" sizes="76x76">
<link rel="apple-touch-icon" href="icon/icon-60x60.png" sizes="60x60">
<link rel="canonical" href="https://site.ru/post-1/">
<meta name="robots" content="index, follow">
<!-- Ссылки на файлы CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Ссылки на скрипты -->
<script src="script.js"></script>
</head>
Описание тегов. Раскладываем по полкам)
<meta http-equiv="X-UA-Compatible" content="ie=edge">: Указывает совместимость с браузером Internet Explorer.<meta charset="UTF-8">: Определяет кодировку символов для документа.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Устанавливает настройки просмотра для мобильных устройств.<meta name="description" content="Описание страницы">: Предоставляет краткое описание содержимого страницы для поисковых систем и пользователей.<meta name="author" content="Имя автора">: Указывает имя автора страницы.<meta name="robots" content="index, follow">: Управляет индексацией и переходом по ссылкам поисковыми роботами.
Тег<meta name="robots" content="index, follow">используется для указания инструкций по индексации и переходу по ссылкам поисковыми роботами (пауками) поисковых систем. Этот тег позволяет контролировать, как поисковые системы обрабатывают содержимое вашей страницы.Значение “index” указывает, что страница может быть проиндексирована поисковой системой, то есть добавлена в индекс и отображена в результатах поиска. Значение “follow” указывает, что поисковые роботы должны следовать по ссылкам на странице и обрабатывать их.Тег<meta name="robots" content="index, follow">является актуальным и рекомендуется использовать его на страницах, которые вы хотите, чтобы поисковые системы проиндексировали и обработали полностью. Однако по умолчанию большинство поисковых роботов следуют инструкциям по индексации и переходу, поэтому в большинстве случаев этот тег не является обязательным.Если вы хотите ограничить индексацию или переход по ссылкам на вашей странице, вы можете использовать другие значения в атрибутеcontentтега<meta name="robots">, такие как “noindex”, “nofollow” и другие, чтобы указать соответствующие инструкции для поисковых систем.<link rel="canonical" href="https://www.example.com/">: Указывает канонический URL для предотвращения дублирования контента.<link rel="stylesheet" href="styles.css">: Подключает внешний файл CSS стилей.<script src="script.js"></script>: Подключает внешний файл JavaScript.
Какие ещё теги можно добавить в HEAD
<meta name="googlebot" content="index, follow"> – является директивой для поискового робота Googlebot, который индексирует и сканирует веб-страницы на вашем сайте. Этот метатег устанавливает определенные инструкции для поведения Googlebot при обработке вашего контента.
Рассмотрим значения атрибутов на примере:<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
index: Указывает Googlebot’у на индексацию страницы.follow: Указывает Googlebot’у следовать по ссылкам на странице и сканировать их.max-snippet:-1: Предотвращает отображение текстового фрагмента страницы в результатах поиска.max-image-preview:large: Указывает Googlebot’у отображать большие превью изображений в результатах поиска.max-video-preview:-1: Предотвращает отображение видео-превью в результатах поиска.
Тег для Googlebot может помочь вам с контролем индексации и отображением вашего контента в результатах поиска. Однако стоит отметить, что данный метатег является рекомендацией для Google и не имеет влияния на другие поисковые системы.
Устаревшие теги
Использовать ли нижеперечисленные теги решать вам.
<meta name="keywords">– используют для указания ключевых слов страницы. Тег уже не является рекомендованным подходом в SEO. Ранее он использовался поисковыми системами для понимания содержания страницы и ее связи с определенными ключевыми словами.
Примечание
Использовать ли нижеперечисленные теги решать вам.