что это, какими бывают, для чего используются
Мета-тег — часть HTML-кода, которая должна быть прописана между парным тегом <head>…</head>. Мета-тег не относится к обязательным тегам и он не виден обычному посетителю сайта, но несет в себе служебную информацию, которая нужна роботам — например, описание страницы, ее заголовок, список ключевых слов и т. д.
Функции мета-тегов
Среди главных задач, которые решают мета-теги, можно выделить 3 наиболее важные:
- Влияют на отображение страницы в поисковой выдаче (индексе ПС).
- Помогают быстрее продвигать сайт при помощи SEO, а также более наглядно представлять ресурс в выдаче посетителям, давая им наиболее важную информацию — превью того, что ждет их после перехода по ссылке.
- Фиксируют информацию о контенте на странице, помогают роботам правильно представлять в поиске данные об этой странице.
Сегодня мета-теги не способны оказать какое-либо сильное влияние на продвижение сайта в поисковых системах.
Но они как и раньше учитываются роботами ПС и помогают задавать те параметры страницы, которые нужно отобразить в выдаче. Поэтому к оформлению мета-тегов нужно подходить ответственно.
Технические мета-теги
Такие мета-теги используются для внутренней оптимизации сайта. С их помощью можно настроить данные, которые будут показаны посетителю поисковой системы после ввода запроса.
Технические мета-теги могут включать отдельные параметры (например, позволяет закрывать от индексации целые разделы сайта). Среди наиболее распространенных мета-тегов этого типа:
- Content-type
Содержит информацию о типе документа и его кодировке. Влияет на корректность отображения страницы в поисковой выдаче. Его использование актуально, если сервер или браузер настроены неправильно, так как Content-type позволяет принудительно переключить пользователя на нужную кодировку. - Content-language
Передает данные о языке содержимого страницы.
Как и в случае с предыдущим мета-тегом, позволяет указывать браузеру язык страницы в случае неправильных настроек или какого-либо сбоя на серверном оборудовании. - Robots
«Помогает» роботам ПС определить страницы, которые стоит проиндексировать или проигнорировать. Имеет атрибуты index/noindex, а также follow/nofollow и all/none, которые позволяют «показать» роботу поисковой системы, можно или нельзя индексировать страницу, учитывать или не учитывать ссылки, а также закрыть или открыть страницу и ссылки для индексации. - Refresh
Мета-тег, позволяющий указывать время обновления страницы, когда выполняется переадресация или повторная загрузка. Этот мета-тег чаще всего используется в случае, когда выполняется обновление сайта и нужно перенаправить посетителя в другой раздел вместо показа страницы 404. - Meta Author и Copyright
Эти мета-теги позволяют прописывать внизу сайта данные о его владельце и авторских правах на размещенный контент — копирайт.
Как и в случае с предыдущим мета-тегом, позволяет указывать браузеру язык страницы в случае неправильных настроек или какого-либо сбоя на серверном оборудовании.
Мета-теги в SEO
В SEO-оптимизации сайта используются 2 мета-тега:
- Title. Содержит заголовок страниц (технически title не относится к мета-тегам, но его принято к ним причислять).
- Description. Содержит краткое описание содержимого страницы.
Уроки по верстке сайтов: мета-теги, метаданные — Tokar.ua
Любой фронтенд-разработчик работает с мета-тегами каждый день, но при попытке объяснить их простыми словами начинаются сложности. Во всяком случае, у меня. Попробую объяснить как можно понятнее и проще.
Из предыдущих уроков вы можете помнить, что любая информация на html-странице находится внутри тегов. Часть информации мы хотим видеть в браузере, но кроме них есть и те данные, которые в браузере никогда не отображаются, тем не менее, непосредственно влияют на то, что мы увидим.
Эту часть страницы называют “метаданными”.
Метаданные (мета-данные, meta-data) — это информация об информации, описание контента страницы.
Три главных отличия метаданных:
- указываются внутри тега
<head> - непосредственно невидимы для пользователя (кроме тега
<title>) - это информация о контенте
Метаданные принято указывать внутри тега <head>, хотя это не обязательно. Они используются для хранения данных о странице: адресов файлов со стилями, ключевых слов, заголовка страницы.
В большинстве случаев в метаданных нужно указать: заголовок, кодировку (набор символов), подключить js и стили, подключить иконку сайта. Почти всё остальное — опциональные параметры, которые используются значительно реже.
Метаданных может быть любое количество, вот основные из них:
- title — заголовок страницы, тег
<title>; - style — стили CSS, хранящиеся в коде документа;
- link — внешние файлы стилей, иконка и так далее;
- meta — всё остальное: кодировка или любая информация о странице.
Мета-теги — это хранилище для метаданных на странице, для каждого нужно указать имя и значение. Структура мета-тега <meta> такова:
<meta name="keywords" content="уроки, вёрстка">
Метатеги могут быть практически любыми и в большинстве случаев носят рекомендательный характер, то есть могут быть проигнорированы поисковиками или браузером. Можно выделить такие случаи их использования:
- указание авторства сайта, адрес страницы, периодичность её обновления;
- индексация заголовков и ключевых слов для поисковых систем;
- влияние на отображение страницы.
Примеры мета-тегов
<meta name="description" content="Описание страницы">
В description можно хранить краткое описание страницы.
На заре развития HTML метаданные использовались поисковиками для описания страницы в результатах поиска или определения, по каким ключевым словам следует её находить.
Со временем множество вебмастеров начали злоупотреблять этой функцией, включая в неё заведомо неправильное описание или ключевые слова, которых даже нет на странице.
Борясь со спамом в поисковой выдаче, поисковики постепенно утратили интерес к текстовому содержимому метаданных, и обычно формируют описание автоматически, а такие метаданные просто игнорируют.
Алгоритм скрыт от желающих, а сам Google так отзывается о ключевых словах и описании, указанных вручную:
В некоторых случаях описание отображается вместе с фрагментом текста в результатах поиска.
А в некоторых — нет.
<title>Название страницы</title>
Технически это не метатег, но <title> принято считать таковым. Его содержание отображается в заголовке вкладки в браузере и в большинстве случаев — в качестве названия страницы в результатах поиска.
<meta name="robots" content="..."> <meta name="googlebot" content="...">
Метатег robots знаком всем поисковым системам, он позволяет контролировать сканирование документа поисковым роботом.
В значении name вы указываете имя поисковика (или robots, если директива должна касаться их всех), а в content — что вы хотите “сказать” роботу.
Вот несколько основных примеров метатегов robots, с которыми умеет работать Google:
noindexилиnone: запрет индексирование страницы;nofollow: запрет роботу переходить по ссылкам с этой страницы;nosnippet: запрет показа любых частей контента страницы в результатах поиска;noarchive: запрет показа ссылки на кэш, сохранённый в поисковике;unavailable_after:[date]: дата и время, когда нужно прекратить индексирование страницы;noimageindex: запрет указывания страницы как источника изображения в результатах поиска.
<meta name="google" content="nositelinkssearchbox">
Google может отображать “поиск по сайту” рядом со ссылкой на вашу страницу в результатах поиска. Этот метатег может отключить такую возможность.
<meta name="google" content="notranslate">
Если язык страницы отличается от страницы браузера и настроек поиска, Google предложит перевести документ.
<meta name="viewport" content="width=device-width, initial-scale=1">
Что чаще используют
Google собрал статистику использования значений атрибутов http-equiv и name для мета-тегов:
Кодировка
<meta charset="utf-8">
или
<meta http-equiv="Content-Type" content"=text/html; charset=utf-8">
Кодировка страницы, набор символов, который на ней используется. Чаще всего для кириллической страницы здесь будет utf-8, значительно реже — windows-1251.
Файлы стилей
<link rel="stylesheet" href="style.css" type="text/css">
или
<link rel="stylesheet" href="style.css">
Так мы можем подключить файл стилей к странице. Пока вы можете ничего не знать о стилях, речь о них пойдёт в следующих уроках. В переменной href мы указываем адрес файла со стилями.
Скрипты
<script src="script.
js"></script>или
<script type="text/javascript" src="script.js"></script>
Так мы подключаем JavaScript-скрипты.
Обратите внимание:<link>не требует закрытия, а<script>— требует.
Viewport
<meta name="viewport" content="width=device-width">
Подробно о viewport читайте в следующем уроке.В итоге
Почти всегда указание мета-тегов — рутинная работа. Но есть хорошие новости: чаще всего мета-теги будут одними и теми же для разных проектов, а “каркас” html-кода страницы вообще стандартен.
Поэтому в начале вёрстки страницы с нуля вы можете использовать шаблон, который будете менять по мере необходимости.
Вот пример такого шаблона:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Шаблон страницы</title> <link rel="stylesheet" href="css/styles.
css">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>Попробуйте создать свою первую страницу по этому шаблону, в теге body напишите какой-нибудь текст и откройте файл в браузере, чтобы убедиться, что он появился на странице.
Успехов!
Основы метатегов в HTML
Назад Основы метатегов в HTML
Метатеги всегда видны в верхней части файлов HTML, но большинство людей обычно не беспокоятся о них или даже не понимают их основного использования. Расширение сведений в метатегах может предоставить сведения о вашей веб-странице, которые вы, возможно, никогда не считали важными или необходимыми. Метатеги связаны с и HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей).
Как вы знаете из предыдущих руководств, HTML — это базовый код, который используется для структурирования веб-страницы и ее содержимого, а CSS используется для улучшения вашей веб-страницы с помощью элементов творческого дизайна.
В этом руководстве вы узнаете, как создавать, определять и полностью понимать основные принципы использования метатегов в HTML. Кроме того, вам будет показано, как эти метатеги могут помочь зрителям, заходящим на ваш сайт. Все, что вам нужно для начала, — это простой редактор кода, такой как Notepad ++, который является бесплатным.
The Essentials of Meta TagsMeta Tags provide essential data about your webpage including but not limited to the following:
- charset
- description
- keywords
- refresh
- author
- viewport
All этих данных входит в описание заголовка в верхней части вашей HTML-страницы.
В необработанном виде это может выглядеть следующим образом:
<мета-кодировка="UTF-8"> <мета http-equiv="обновить" содержание="30">0">
Давайте теперь посмотрим, что все это значит. Во-первых, давайте посмотрим на атрибуты. Следующая таблица определяет различные атрибуты:
| Атрибут | Значение | Описание |
| Charset | . | |
| содержимое | текст | Указывает значение, связанное с атрибутом http-equiv или name. |
| http-equiv | Content-security-policycontent-typedefault-stylerefresh | Предоставляет заголовок HTTP для информации/значения атрибута содержимого. |
| name | application-nameauthordescriptiongeneratorkeywordsviewport | Задает имя для метаданных. |
Первоначально, если вы должны были определить только кодировку, вы можете использовать эту строку кода:
та же строка кода, например:
Спецификация HTML5 поощряет веб-разработчиков использовать набор символов UTF-8, поскольку он охватывает почти все знаки и символы в мире.
Атрибут content просто говорит, что это веб-страница с текстом, определенным HTML.
Определить ключевые слова для поисковых систем
Одна только эта область может быть одной из первых вещей, в которые вы действительно вложите усилия . Поисковая оптимизация (SEO) фокусируется на ваших ключевых словах, которые поисковые системы, такие как Google, Yahoo и Bing, используют для поиска вашей веб-страницы, когда пользователь выполняет поиск. Очень важно определить правильные термины в этой области, которые правильно описывают вашу страницу. Если цель вашей веб-страницы состоит в том, чтобы направить на нее трафик, убедитесь, что вы используете лучшие ключевые слова для своего веб-сайта.
Пример здесь для веб-сайта о фотографии серфинга.
Следующим в списке основных метатегов является значение «описание», которое дает вам возможность описать вашу веб-страницу. Мы продолжим рассмотрение примера с просмотром веб-страницы, чтобы показать, что вы должны поддерживать преемственность в структуре.
Определить автора страницы
Затем вы захотите добавить свое имя в качестве автора веб-страницы, чтобы зрители могли видеть, как хорошо вы проделали работу по созданию самой страницы.
Обновлять документ каждые заданное количество секунд
Это значение поддерживает обновление страницы для очистки старого кэша, гарантируя, что зритель видит последнюю веб-страницу.
страницу после внесения в нее изменений. Вы не хотите, чтобы зрители видели старую версию вашей веб-страницы.
Примечание: Значение «обновить» следует использовать с осторожностью, так как оно лишает пользователя контроля над страницей.
Настройка окна просмотра, чтобы ваш сайт хорошо выглядел на всех устройствах о том, как управлять размерами и масштабированием страницы.- Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).
- Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Почему это важно? С таким количеством различных устройств, подключенных к Интернету, вам необходимо иметь масштабируемость для вашего веб-сайта, чтобы он отображался наилучшим образом для устройства любого размера, будь то мобильный телефон, планшет или ноутбук с разными размерами экрана. Помните, ваш веб-сайт должен хорошо работать для ваших зрителей.
Как видите, эти метатеги в HTML абсолютно необходимы для обеспечения правильной работы вашей веб-страницы, ее правильной идентификации и возможности обнаружения с помощью поисковых систем.
Помните раздел выше «Определение ключевых слов для поисковых систем», когда мы обсуждали необходимость поисковой оптимизации (SEO), чтобы гарантировать, что поисковые системы смогут найти ваш веб-сайт.
Веб-сайт обычно предназначен для обмена информацией с широкой аудиторией, и поэтому вы хотите сделать все возможное, чтобы аудитория могла найти вас и получить отличный опыт, как только они туда попадут.
Куда дальше?Это введение в Основы метатегов в HTML должно послужить отправной точкой для дальнейшего изучения дизайна веб-сайта, макета и практических приложений с HTML и CSS.
Продолжайте изучать другие области дизайна в следующем блоге. Мы надеемся, что это руководство вызовет у вас интерес, вдохновит на дальнейшие исследования и более глубокое погружение в мир веб-дизайна.
HTML — отличный способ начать изучение кода, но почему бы не улучшить свои навыки и возможности, продвинувшись еще дальше. Запишитесь на нашу программу «Введение в программирование Nanodegree» уже сегодня!
[et_bloom_locked optin_id=»optin_4″]
[/et_bloom_locked]
Meta HTML — W3schools
by Tag 02 To 002 To9 HTML 002 To9018 HTML заголовок документа, набор символов, описание страницы, ключевые слова, автор и другая метаинформация, используется HTML-элемент
.
Пример:
<голова> <мета-кодировка="UTF-8"> <тело> |
Вывод:
Объяснение:
В приведенном выше примере мы добавили элемент под тегом
.
Синтаксис: Чтобы указать используемый набор символов:
Синтаксис: Чтобы определить описание страницы:
Синтаксис: Чтобы указать ключевые слова для поисковых систем:
Синтаксис: Чтобы указать автора страницы:
Синтаксис: Для обновления документа каждые 30 секунд:
Установите область просмотра:
Чтобы управлять областью просмотра с помощью тега, используется метод области просмотра HTML. Область веб-страницы, которая видна пользователю, называется областью просмотра. Область просмотра может меняться от устройства к устройству. На мобильных телефонах он может казаться меньше, чем на экранах компьютеров.
Синтаксис:
0">
Параметры:
- Используется для указания 0port0:
0port как управлять размерами страницы и масштабированием. - width=device-width: Используется для установки ширины страницы в соответствии с шириной экрана соответствующего устройства.
- initial-scale=1.0: Используется для установки начального уровня масштабирования страницы.
Пример: Веб-страница без тега области просмотра:
<тело> |
Вывод:
Объяснение:
В приведенном выше примере мы отобразили вид страницы на телефоне или планшете, когда мы не используем метод HTML Viewport.
Пример: Веб-страница с тегом области просмотра:
<голова>
<тело>
|
Вывод:
Объяснение:
В приведенном выше примере мы отобразили представление страницы в HTML-методе на телефоне или планшете.
Специальные атрибуты TAG:
| Атрибут | Значение | Использование |
| Charset | . | |
| содержимое | текст | Используется для получения значения атрибута «имя» или «http-equiv» в документе HTML. |