0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>В HTML-странице есть видимые элементы - заголовки, абзацы, картинки. А есть и невидимые теги, которые отвечают за внутреннюю кухню сайта. Один из таких - тег <meta>. Он помогает браузерам и поисковым системам правильно понять, как показывать страницу, как её индексировать, как отобразить при репосте в соцсетях.</p>
1
<p>В HTML-странице есть видимые элементы - заголовки, абзацы, картинки. А есть и невидимые теги, которые отвечают за внутреннюю кухню сайта. Один из таких - тег <meta>. Он помогает браузерам и поисковым системам правильно понять, как показывать страницу, как её индексировать, как отобразить при репосте в соцсетях.</p>
2
<p>Если метатеги настроены неправильно или вообще не указаны, страница может некорректно отображаться в браузере, потерять позиции в поиске, выглядеть странно при репостах в мессенджеры и соцсети.</p>
2
<p>Если метатеги настроены неправильно или вообще не указаны, страница может некорректно отображаться в браузере, потерять позиции в поиске, выглядеть странно при репостах в мессенджеры и соцсети.</p>
3
<p><strong>Содержание</strong></p>
3
<p><strong>Содержание</strong></p>
4
<ul><li><a>Что такое тег <meta></a></li>
4
<ul><li><a>Что такое тег <meta></a></li>
5
<li><a>Как выглядит тег <meta></a></li>
5
<li><a>Как выглядит тег <meta></a></li>
6
<li><a>Атрибут charset - кодировка символов</a></li>
6
<li><a>Атрибут charset - кодировка символов</a></li>
7
<li><a>Атрибуты name и content - основная пара для метаданных</a></li>
7
<li><a>Атрибуты name и content - основная пара для метаданных</a></li>
8
<li><a>http-equiv и content - управление поведением страницы без сервера</a></li>
8
<li><a>http-equiv и content - управление поведением страницы без сервера</a></li>
9
<li><a>Частые ошибки</a></li>
9
<li><a>Частые ошибки</a></li>
10
</ul><p>Тег <meta> - это скрытый элемент, который размещают в разделе <head> HTML-документа. Он передаёт служебную информацию о странице - метаданные. Эти данные не видны пользователю, их используют браузеры, поисковые системы и соцсети.</p>
10
</ul><p>Тег <meta> - это скрытый элемент, который размещают в разделе <head> HTML-документа. Он передаёт служебную информацию о странице - метаданные. Эти данные не видны пользователю, их используют браузеры, поисковые системы и соцсети.</p>
11
<p>С помощью метатегов можно указать:</p>
11
<p>С помощью метатегов можно указать:</p>
12
<ul><li>кодировку страницы;</li>
12
<ul><li>кодировку страницы;</li>
13
<li>краткое описание для поисковых систем;</li>
13
<li>краткое описание для поисковых систем;</li>
14
<li>имя автора.</li>
14
<li>имя автора.</li>
15
</ul><p>Можно определить:</p>
15
</ul><p>Можно определить:</p>
16
<ul><li>нужно ли индексировать страницу;</li>
16
<ul><li>нужно ли индексировать страницу;</li>
17
<li>как отображать сайт на мобильных устройствах;</li>
17
<li>как отображать сайт на мобильных устройствах;</li>
18
<li>какой цвет будет у интерфейса браузера;</li>
18
<li>какой цвет будет у интерфейса браузера;</li>
19
<li>и многое другое.</li>
19
<li>и многое другое.</li>
20
</ul><p>Проще говоря, <meta> - это настройка под капотом сайта. Без неё веб-страница не будет работать как надо.</p>
20
</ul><p>Проще говоря, <meta> - это настройка под капотом сайта. Без неё веб-страница не будет работать как надо.</p>
21
<p>Тег <meta> размещается в разделе <head>. Он одиночный, без закрывающего тега. Записывается в формате:</p>
21
<p>Тег <meta> размещается в разделе <head>. Он одиночный, без закрывающего тега. Записывается в формате:</p>
22
<meta атрибут1="значение1" атрибут2="значение2" /><p>В HTML5 синтаксис стал проще - завершающий слеш (/) ставить не обязательно (хотя некоторые разработчики ставят его для совместимости и по привычке):</p>
22
<meta атрибут1="значение1" атрибут2="значение2" /><p>В HTML5 синтаксис стал проще - завершающий слеш (/) ставить не обязательно (хотя некоторые разработчики ставят его для совместимости и по привычке):</p>
23
<meta атрибут1="значение1" атрибут2="значение2"><p>В разделе <head> может быть несколько метатегов, например:</p>
23
<meta атрибут1="значение1" атрибут2="значение2"><p>В разделе <head> может быть несколько метатегов, например:</p>
24
<head> <meta charset="UTF-8"> <meta name="description" content="Описание сайта"> <meta name="keywords" content="html, meta, теги"> <meta name="author" content="Вася Кузнецов"> </head><p>Основной смысл тега <meta> - управление настройками страницы с помощью атрибутов. Рассмотрим основные из них.</p>
24
<head> <meta charset="UTF-8"> <meta name="description" content="Описание сайта"> <meta name="keywords" content="html, meta, теги"> <meta name="author" content="Вася Кузнецов"> </head><p>Основной смысл тега <meta> - управление настройками страницы с помощью атрибутов. Рассмотрим основные из них.</p>
25
<p>Это обязательный атрибут, который ставится первым в разделе <head>. Он сообщает браузеру, какую кодировку использовать для отображения текста. Если его не указать, текст (особенно кириллический) может отображаться некорректно.</p>
25
<p>Это обязательный атрибут, который ставится первым в разделе <head>. Он сообщает браузеру, какую кодировку использовать для отображения текста. Если его не указать, текст (особенно кириллический) может отображаться некорректно.</p>
26
<p>Обычно метатег выглядит так:</p>
26
<p>Обычно метатег выглядит так:</p>
27
<meta charset="UTF-8"><p>UTF-8 - стандарт кодировки для HTML5. Он поддерживает множество языков и работает во всех современных браузерах.</p>
27
<meta charset="UTF-8"><p>UTF-8 - стандарт кодировки для HTML5. Он поддерживает множество языков и работает во всех современных браузерах.</p>
28
<p>name и content - это атрибуты тега <meta>, которые работают в паре. Они передают браузерам и поисковым системам дополнительную информацию о странице.</p>
28
<p>name и content - это атрибуты тега <meta>, которые работают в паре. Они передают браузерам и поисковым системам дополнительную информацию о странице.</p>
29
<p>Они записываются в формате:</p>
29
<p>Они записываются в формате:</p>
30
<meta name="название-метаданных" content="значение"><ul><li>name - указывает, какого типа информация передаётся (например, описание страницы, ключевые слова, автор и так далее);</li>
30
<meta name="название-метаданных" content="значение"><ul><li>name - указывает, какого типа информация передаётся (например, описание страницы, ключевые слова, автор и так далее);</li>
31
<li>content - содержит саму эту информацию.</li>
31
<li>content - содержит саму эту информацию.</li>
32
</ul><p>author - указывает автора страницы.</p>
32
</ul><p>author - указывает автора страницы.</p>
33
<meta name="author" content="Иван Петров"><p>generator - указывает программу или систему, которая использовалась для создания страницы (например, WordPress, Joomla, FrontPage).</p>
33
<meta name="author" content="Иван Петров"><p>generator - указывает программу или систему, которая использовалась для создания страницы (например, WordPress, Joomla, FrontPage).</p>
34
<meta name="generator" content="WordPress 6.0"><p>Многие метатеги помогают поисковым системам понимать, как следует индексировать страницу и как она должна выглядеть в результатах поиска.</p>
34
<meta name="generator" content="WordPress 6.0"><p>Многие метатеги помогают поисковым системам понимать, как следует индексировать страницу и как она должна выглядеть в результатах поиска.</p>
35
<p><strong>description</strong><strong> - краткое описание страницы</strong></p>
35
<p><strong>description</strong><strong> - краткое описание страницы</strong></p>
36
<meta name="description" content="Описание страницы для SEO"><p>Этот тег используется для формирования сниппета - текста, который отображается под заголовком сайта в выдаче. Хорошее описание повышает кликабельность (CTR), особенно если оно короткое, содержательное и уникальное для каждой страницы. Рекомендуемая длина - до 160 символов.</p>
36
<meta name="description" content="Описание страницы для SEO"><p>Этот тег используется для формирования сниппета - текста, который отображается под заголовком сайта в выдаче. Хорошее описание повышает кликабельность (CTR), особенно если оно короткое, содержательное и уникальное для каждой страницы. Рекомендуемая длина - до 160 символов.</p>
37
<p>Если тег отсутствует, поисковик выберет текст сам, что не всегда выгодно для владельца сайта. Слишком длинные описания автоматически обрезаются, иногда даже на полуслове, и часть текста может потеряться, а важные ключевые слова не попадут в видимую часть.</p>
37
<p>Если тег отсутствует, поисковик выберет текст сам, что не всегда выгодно для владельца сайта. Слишком длинные описания автоматически обрезаются, иногда даже на полуслове, и часть текста может потеряться, а важные ключевые слова не попадут в видимую часть.</p>
38
<p><strong>keywords</strong><strong> - список ключевых слов</strong></p>
38
<p><strong>keywords</strong><strong> - список ключевых слов</strong></p>
39
<meta name="keywords" content="HTML, метатеги, SEO, веб-разработка"><p>Этот тег раньше считался важным для ранжирования, но сейчас он устарел. Google и "Яндекс" давно его игнорируют, но keywords всё ещё встречается на старых сайтах.</p>
39
<meta name="keywords" content="HTML, метатеги, SEO, веб-разработка"><p>Этот тег раньше считался важным для ранжирования, но сейчас он устарел. Google и "Яндекс" давно его игнорируют, но keywords всё ещё встречается на старых сайтах.</p>
40
<p><strong>robots</strong><strong> - управление индексацией и сканированием</strong></p>
40
<p><strong>robots</strong><strong> - управление индексацией и сканированием</strong></p>
41
<meta name="robots" content="index, follow"><p>Метатег robots сообщает поисковым системам, можно ли индексировать страницу и переходить по ссылкам на ней.</p>
41
<meta name="robots" content="index, follow"><p>Метатег robots сообщает поисковым системам, можно ли индексировать страницу и переходить по ссылкам на ней.</p>
42
<p>Поисковый бот сначала сканирует страницу - то есть заходит и анализирует её содержимое: заголовки, текст, изображения, ссылки. Затем он принимает решение, добавлять страницу в поисковую базу (индекс) или нет.</p>
42
<p>Поисковый бот сначала сканирует страницу - то есть заходит и анализирует её содержимое: заголовки, текст, изображения, ссылки. Затем он принимает решение, добавлять страницу в поисковую базу (индекс) или нет.</p>
43
<p>Чтобы точно указать боту, как ему себя вести, используют значения атрибута content:</p>
43
<p>Чтобы точно указать боту, как ему себя вести, используют значения атрибута content:</p>
44
<ul><li>index - разрешить индексацию страницы;</li>
44
<ul><li>index - разрешить индексацию страницы;</li>
45
<li>noindex - запретить индексацию;</li>
45
<li>noindex - запретить индексацию;</li>
46
<li>follow - разрешить переход по ссылкам на странице;</li>
46
<li>follow - разрешить переход по ссылкам на странице;</li>
47
<li>nofollow - запретить переход по ссылкам;</li>
47
<li>nofollow - запретить переход по ссылкам;</li>
48
<li>none - сокращение для noindex, nofollow.</li>
48
<li>none - сокращение для noindex, nofollow.</li>
49
</ul><p>Если можно индексировать страницу и все ссылки на ней тоже, пишем такой код:</p>
49
</ul><p>Если можно индексировать страницу и все ссылки на ней тоже, пишем такой код:</p>
50
<meta name="robots" content="index, follow"><p>В этой ситуации тег можно совсем не указывать: index, follow стоит по умолчанию</p>
50
<meta name="robots" content="index, follow"><p>В этой ситуации тег можно совсем не указывать: index, follow стоит по умолчанию</p>
51
<p>Другая ситуация: страница не должна быть в индексе, но ссылки важны. Например, это промежуточная страница или фильтр: в поисковике она не нужна, но ссылки с неё должны работать:</p>
51
<p>Другая ситуация: страница не должна быть в индексе, но ссылки важны. Например, это промежуточная страница или фильтр: в поисковике она не нужна, но ссылки с неё должны работать:</p>
52
<meta name="robots" content="noindex, follow"><p>Такой код подойдет, если у нас сквозная служебная страница, в которой ничего не нужно индексировать, - допустим, личный кабинет, админка, черновик или тестовая страница:</p>
52
<meta name="robots" content="noindex, follow"><p>Такой код подойдет, если у нас сквозная служебная страница, в которой ничего не нужно индексировать, - допустим, личный кабинет, админка, черновик или тестовая страница:</p>
53
<meta name="robots" content="noindex, nofollow"> <!-- Или сокращённый вариант --> <meta name="robots" content="none"><p>Можно писать разные теги для разных ботов, например:</p>
53
<meta name="robots" content="noindex, nofollow"> <!-- Или сокращённый вариант --> <meta name="robots" content="none"><p>Можно писать разные теги для разных ботов, например:</p>
54
<meta name="googlebot" content="noindex"> <meta name="yandex" content="index, nofollow"><p>Кроме метатегов, доступ поисковиков к страницам можно ограничить с помощью файла robots.txt - текстового файла в корневом каталоге сайта. Обычно с его помощью скрывают корзину, фильтры, страницы админки, черновики и другие технические разделы.</p>
54
<meta name="googlebot" content="noindex"> <meta name="yandex" content="index, nofollow"><p>Кроме метатегов, доступ поисковиков к страницам можно ограничить с помощью файла robots.txt - текстового файла в корневом каталоге сайта. Обычно с его помощью скрывают корзину, фильтры, страницы админки, черновики и другие технические разделы.</p>
55
<p>Когда пользователи делятся ссылкой на сайт в социальных сетях: "Фейсбуке"*, "ВКонтакте", Telegram, LinkedIn или X (бывший Twitter), платформа автоматически формирует карточку предпросмотра. Чтобы она выглядела корректно и привлекательно, используют специальные метатеги, чаще всего по стандарту Open Graph.</p>
55
<p>Когда пользователи делятся ссылкой на сайт в социальных сетях: "Фейсбуке"*, "ВКонтакте", Telegram, LinkedIn или X (бывший Twitter), платформа автоматически формирует карточку предпросмотра. Чтобы она выглядела корректно и привлекательно, используют специальные метатеги, чаще всего по стандарту Open Graph.</p>
56
Вот так будет выглядеть карточка, если вы решите поделиться одной из наших статей в Telegram<em>Скриншот: Telegram / Skillbox Media</em><p>Open Graph (OG) - это протокол, разработанный "Фейсбуком"*, который позволяет задавать, какие элементы страницы (заголовок, описание, изображение) должны отображаться при публикации. Эти данные берутся из тегов <meta> с атрибутом property, например:</p>
56
Вот так будет выглядеть карточка, если вы решите поделиться одной из наших статей в Telegram<em>Скриншот: Telegram / Skillbox Media</em><p>Open Graph (OG) - это протокол, разработанный "Фейсбуком"*, который позволяет задавать, какие элементы страницы (заголовок, описание, изображение) должны отображаться при публикации. Эти данные берутся из тегов <meta> с атрибутом property, например:</p>
57
<meta property="og:title" content="Заголовок для соцсетей"> <meta property="og:description" content="Описание страницы в соцсетях"> <meta property="og:image" content="https://example.com/image.jpg"><p>Можно использовать атрибут name вместо property, но не рекомендуется: большинство соцсетей ориентируются именно на property.</p>
57
<meta property="og:title" content="Заголовок для соцсетей"> <meta property="og:description" content="Описание страницы в соцсетях"> <meta property="og:image" content="https://example.com/image.jpg"><p>Можно использовать атрибут name вместо property, но не рекомендуется: большинство соцсетей ориентируются именно на property.</p>
58
<p>Для X (Twitter) используют специальные метатеги - Twitter Cards. С их помощью можно задать, какой заголовок, описание и изображение появятся в карточке публикации.</p>
58
<p>Для X (Twitter) используют специальные метатеги - Twitter Cards. С их помощью можно задать, какой заголовок, описание и изображение появятся в карточке публикации.</p>
59
<p>Пример базовой конфигурации:</p>
59
<p>Пример базовой конфигурации:</p>
60
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Заголовок для Twitter"> <meta name="twitter:description" content="Описание для Twitter"> <meta name="twitter:image" content="https://example.com/twitter-image.jpg"><p>С помощью метатегов можно влиять на то, как веб-страница отображается в браузере, особенно на смартфонах и планшетах. Самые важные для этой цели теги - viewport и theme-color.</p>
60
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Заголовок для Twitter"> <meta name="twitter:description" content="Описание для Twitter"> <meta name="twitter:image" content="https://example.com/twitter-image.jpg"><p>С помощью метатегов можно влиять на то, как веб-страница отображается в браузере, особенно на смартфонах и планшетах. Самые важные для этой цели теги - viewport и theme-color.</p>
61
<p><strong>viewport</strong><strong> - настройка адаптивной вёрстки</strong></p>
61
<p><strong>viewport</strong><strong> - настройка адаптивной вёрстки</strong></p>
62
<p>Этот метатег подсказывает браузеру, как правильно масштабировать страницу на мобильных устройствах. Без него на мобильном телефоне появится крохотная десктопная версия сайта, которую пользователю придётся увеличивать вручную.</p>
62
<p>Этот метатег подсказывает браузеру, как правильно масштабировать страницу на мобильных устройствах. Без него на мобильном телефоне появится крохотная десктопная версия сайта, которую пользователю придётся увеличивать вручную.</p>
63
<meta name="viewport" content="width=device-width, initial-scale=1.0"><p>Атрибут width=device-width указывает, что ширина страницы должна соответствовать ширине экрана устройства. Значение initial-scale=1.0 устанавливает масштаб по умолчанию - 100%, без увеличения или уменьшения.</p>
63
<meta name="viewport" content="width=device-width, initial-scale=1.0"><p>Атрибут width=device-width указывает, что ширина страницы должна соответствовать ширине экрана устройства. Значение initial-scale=1.0 устанавливает масштаб по умолчанию - 100%, без увеличения или уменьшения.</p>
64
<p>viewport необходим для корректной мобильной адаптации и влияет на SEO: поисковые системы отдают приоритет сайтам, оптимизированным для смартфонов. Если этого тега нет или он указан с ошибкой, позиции сайта в выдаче могут пострадать.</p>
64
<p>viewport необходим для корректной мобильной адаптации и влияет на SEO: поисковые системы отдают приоритет сайтам, оптимизированным для смартфонов. Если этого тега нет или он указан с ошибкой, позиции сайта в выдаче могут пострадать.</p>
65
<p><strong>theme-color</strong><strong> - цвет интерфейса браузера.</strong></p>
65
<p><strong>theme-color</strong><strong> - цвет интерфейса браузера.</strong></p>
66
<p>Этот тег позволяет задать цвет оформления браузера на мобильных устройствах: строки состояния, адресной строки и элементов интерфейса. Его используют, чтобы создать цельный визуальный образ сайта.</p>
66
<p>Этот тег позволяет задать цвет оформления браузера на мобильных устройствах: строки состояния, адресной строки и элементов интерфейса. Его используют, чтобы создать цельный визуальный образ сайта.</p>
67
<meta name="theme-color" content="#4285f4"><p>Цвет задаётся в шестнадцатеричном формате (HEX):</p>
67
<meta name="theme-color" content="#4285f4"><p>Цвет задаётся в шестнадцатеричном формате (HEX):</p>
68
<ul><li>#4285F4 - синий;</li>
68
<ul><li>#4285F4 - синий;</li>
69
<li>#FF0000 - красный.</li>
69
<li>#FF0000 - красный.</li>
70
</ul><p>Обычно, когда пользователь открывает сайт, веб-сервер сам отправляет браузеру HTTP-заголовки. Они подсказывают, какую кодировку использовать, кэшировать ли страницу, есть ли переадресация, какие меры безопасности применить и так далее.</p>
70
</ul><p>Обычно, когда пользователь открывает сайт, веб-сервер сам отправляет браузеру HTTP-заголовки. Они подсказывают, какую кодировку использовать, кэшировать ли страницу, есть ли переадресация, какие меры безопасности применить и так далее.</p>
71
<p>Но иногда доступа к серверным настройкам нет - например, если вы работаете локально, на тестовом стенде или в CMS без доступа к конфигурации. В таких случаях можно задать нужные параметры прямо в HTML - с помощью тега <meta> и атрибута http-equiv. Он имитирует заголовки сервера и влияет на поведение страницы.</p>
71
<p>Но иногда доступа к серверным настройкам нет - например, если вы работаете локально, на тестовом стенде или в CMS без доступа к конфигурации. В таких случаях можно задать нужные параметры прямо в HTML - с помощью тега <meta> и атрибута http-equiv. Он имитирует заголовки сервера и влияет на поведение страницы.</p>
72
<p>С помощью атрибута можно:</p>
72
<p>С помощью атрибута можно:</p>
73
<p>1. Указать кодировку.</p>
73
<p>1. Указать кодировку.</p>
74
<meta charset="UTF-8"><p>2. Автоматически обновить страницу.</p>
74
<meta charset="UTF-8"><p>2. Автоматически обновить страницу.</p>
75
<meta http-equiv="refresh" content="30"><p>Браузер обновит страницу через 30 секунд.</p>
75
<meta http-equiv="refresh" content="30"><p>Браузер обновит страницу через 30 секунд.</p>
76
<p>3. Настроить временное перенаправление.</p>
76
<p>3. Настроить временное перенаправление.</p>
77
<meta http-equiv="refresh" content="5;url=https://example.com/new-page.html"><p>Браузер перейдёт на указанный адрес через пять секунд. Для постоянных редиректов лучше использовать серверные настройки, - так их корректно обработают поисковые системы.</p>
77
<meta http-equiv="refresh" content="5;url=https://example.com/new-page.html"><p>Браузер перейдёт на указанный адрес через пять секунд. Для постоянных редиректов лучше использовать серверные настройки, - так их корректно обработают поисковые системы.</p>
78
<p>4. Защитить сайт от XSS (content security policy):</p>
78
<p>4. Защитить сайт от XSS (content security policy):</p>
79
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"><p>Этот метатег помогает защитить сайт от XSS-атак, при которых злоумышленник пытается внедрить вредоносный код на сайт. Метатег запрещает загружать ресурсы со сторонних источников, если они не разрешены явно.</p>
79
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"><p>Этот метатег помогает защитить сайт от XSS-атак, при которых злоумышленник пытается внедрить вредоносный код на сайт. Метатег запрещает загружать ресурсы со сторонних источников, если они не разрешены явно.</p>
80
<p>Обычно такая политика задаётся на стороне сервера, но в простых случаях её можно прописать и через <meta> - при тестировании сайта или при локальной разработке.</p>
80
<p>Обычно такая политика задаётся на стороне сервера, но в простых случаях её можно прописать и через <meta> - при тестировании сайта или при локальной разработке.</p>
81
<p>Все настройки из этого раздела по возможности очень рекомендуется выносить в заголовки HTTP-ответа.</p>
81
<p>Все настройки из этого раздела по возможности очень рекомендуется выносить в заголовки HTTP-ответа.</p>
82
<p>Некорректные метатеги могут привести к ошибкам отображения страницы, плохой адаптивности или снижению позиций в поисковой выдаче. Ниже - основные типичные ошибки и способы их избежать.</p>
82
<p>Некорректные метатеги могут привести к ошибкам отображения страницы, плохой адаптивности или снижению позиций в поисковой выдаче. Ниже - основные типичные ошибки и способы их избежать.</p>
83
<p><strong>1. Кодировка указана не первой в</strong> <strong><head></strong><strong>.</strong></p>
83
<p><strong>1. Кодировка указана не первой в</strong> <strong><head></strong><strong>.</strong></p>
84
<p>Браузер должен узнать о кодировке как можно раньше. Если кодировка указана после других тегов, текст может отображаться неправильно.</p>
84
<p>Браузер должен узнать о кодировке как можно раньше. Если кодировка указана после других тегов, текст может отображаться неправильно.</p>
85
<p>Ошибка:</p>
85
<p>Ошибка:</p>
86
<title>Мой сайт</title> <meta charset="UTF-8"><p>Правильно:</p>
86
<title>Мой сайт</title> <meta charset="UTF-8"><p>Правильно:</p>
87
<meta charset="UTF-8"> <title>Мой сайт</title><p><strong>2. Есть ошибки во</strong> <strong>viewport</strong><strong>.</strong></p>
87
<meta charset="UTF-8"> <title>Мой сайт</title><p><strong>2. Есть ошибки во</strong> <strong>viewport</strong><strong>.</strong></p>
88
<p>Для адаптивной вёрстки важно, чтобы тег был написан правильно. Даже небольшая ошибка может повлиять на отображение сайта на мобильных устройствах.</p>
88
<p>Для адаптивной вёрстки важно, чтобы тег был написан правильно. Даже небольшая ошибка может повлиять на отображение сайта на мобильных устройствах.</p>
89
<p>Ошибка:</p>
89
<p>Ошибка:</p>
90
<meta name="viewport" content="initial-scale=1.0"><p>Здесь пропущен width=device-width. Без него браузер не поймёт, что нужно подстроить ширину страницы под ширину экрана смартфона. В результате сайт может отображаться слишком узким или слишком широким, и пользователю придётся вручную уменьшать или увеличивать масштаб.</p>
90
<meta name="viewport" content="initial-scale=1.0"><p>Здесь пропущен width=device-width. Без него браузер не поймёт, что нужно подстроить ширину страницы под ширину экрана смартфона. В результате сайт может отображаться слишком узким или слишком широким, и пользователю придётся вручную уменьшать или увеличивать масштаб.</p>
91
<p>Правильно:</p>
91
<p>Правильно:</p>
92
<meta name="viewport" content="width=device-width, initial-scale=1.0"><p><strong>3. Повторяются теги</strong><strong><meta></strong><strong>с одинаковыми</strong><strong>name.</strong></p>
92
<meta name="viewport" content="width=device-width, initial-scale=1.0"><p><strong>3. Повторяются теги</strong><strong><meta></strong><strong>с одинаковыми</strong><strong>name.</strong></p>
93
<p>Ошибка:</p>
93
<p>Ошибка:</p>
94
<meta name="description" content="Описание 1"> <meta name="description" content="Описание 2"><p>На странице должен быть только один тег с name="description", "viewport", "robots" и другие, иначе браузеры и поисковые системы не поймут, какой из них использовать. Повторения могут вызвать конфликт или игнорирование тегов.</p>
94
<meta name="description" content="Описание 1"> <meta name="description" content="Описание 2"><p>На странице должен быть только один тег с name="description", "viewport", "robots" и другие, иначе браузеры и поисковые системы не поймут, какой из них использовать. Повторения могут вызвать конфликт или игнорирование тегов.</p>
95
<p><strong>4. Описания пустые или слишком длинные.</strong></p>
95
<p><strong>4. Описания пустые или слишком длинные.</strong></p>
96
<p>Слишком короткие или, наоборот, перегруженные описания могут ухудшить SEO и просто не будут учтены поисковыми системами.</p>
96
<p>Слишком короткие или, наоборот, перегруженные описания могут ухудшить SEO и просто не будут учтены поисковыми системами.</p>
97
<p>Ошибка:</p>
97
<p>Ошибка:</p>
98
<meta name="description" content=""><p>Здесь описание вообще отсутствует - в таком случае поисковик сам подставит какой-то фрагмент текста со страницы. Это не всегда будет удачно: может попасться неподходящий абзац или фраза без смысла.</p>
98
<meta name="description" content=""><p>Здесь описание вообще отсутствует - в таком случае поисковик сам подставит какой-то фрагмент текста со страницы. Это не всегда будет удачно: может попасться неподходящий абзац или фраза без смысла.</p>
99
<p>Или вот другой пример - слишком длинное описание:</p>
99
<p>Или вот другой пример - слишком длинное описание:</p>
100
<meta name="description" content="iPhone 15 - это новый флагманский смартфон от Apple с процессором A16 Bionic, камерой 48 МП, дисплеем Super Retina XDR и поддержкой 5G. В нашем магазине вы можете купить iPhone 15 по лучшей цене в Москве с гарантией 2 года и бесплатной доставкой. У нас есть все цвета: чёрный, белый, синий, красный и фиолетовый. Аксессуары в подарок!"><p>Такой текст просто не влезет в сниппет - его обрежут поисковые системы, и пользователь не увидит главного.</p>
100
<meta name="description" content="iPhone 15 - это новый флагманский смартфон от Apple с процессором A16 Bionic, камерой 48 МП, дисплеем Super Retina XDR и поддержкой 5G. В нашем магазине вы можете купить iPhone 15 по лучшей цене в Москве с гарантией 2 года и бесплатной доставкой. У нас есть все цвета: чёрный, белый, синий, красный и фиолетовый. Аксессуары в подарок!"><p>Такой текст просто не влезет в сниппет - его обрежут поисковые системы, и пользователь не увидит главного.</p>
101
<p>Правильно:</p>
101
<p>Правильно:</p>
102
<meta name="description" content="iPhone 15 с процессором A16 Bionic и камерой 48 МП. Купите по выгодной цене с гарантией и доставкой. Все цвета в наличии."><p>Такое описание укладывается в ~150 символов, содержит ключевые фразы (iPhone 15, цена, доставка, цвета), привлекательно выглядит в поисковой выдаче.</p>
102
<meta name="description" content="iPhone 15 с процессором A16 Bionic и камерой 48 МП. Купите по выгодной цене с гарантией и доставкой. Все цвета в наличии."><p>Такое описание укладывается в ~150 символов, содержит ключевые фразы (iPhone 15, цена, доставка, цвета), привлекательно выглядит в поисковой выдаче.</p>
103
<p>* Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook и Instagram на территории Российской Федерации по основаниям осуществления экстремистской деятельности".</p>
103
<p>* Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook и Instagram на территории Российской Федерации по основаниям осуществления экстремистской деятельности".</p>