Какая информация располагается в теге meta. Мета теги HTML их назначение и правильное заполнение
Читайте также
Мета теги HTML их назначение и правильное заполнение - 4.8 out of 5 based on 4 votes
Мета теги являются специальными служебными тегами языков HTML и XHTML. Пользователь, просматривающий сайт, не видит их действия. Они предназначены для передачи сведений поисковым роботам, которые занимаются индексацией страниц сайта, а также браузерам посетителей.
Данные теги являются не обязательными и при кодировании страниц их можно не указывать, если только вы не преследуете одну из целей, о которых рассказано ниже.
Для чего предназначены мета теги
Метатеги выполняют самые разнообразные функции. Например, хранят служебную информацию, передают ее поисковым роботам и браузерам. Так, роботы получают из метатегов сведения о ключевых словах, описании страницы, авторе и других данных.
Где находятся? Как записать?
Мета теги для сайта располагаются в коде HTML страницы между тегами
... и выглядит их запись следующим образом:
Как видно из примера закрывающего тега для них не требуется.
Для тега meta доступно четыре атрибута, из них обязательным является только первый – content:
1. content. Устанавливает значение атрибута, заданного с помощью name и http-equiv.
2. http-equiv. Конвертирует метатег в заголовок HTTP. Значение этого атрибута преобразовывается в формат заголовка ответа протокола HTTP.
3. name. Имя, по нему определяется предназначение мета тега. В одном meta не могут одновременно использоваться name и http-equiv.
4. charset. Устанавливает кодировку документа.
Мета теги html делятся на две группы:
NAME. Теги данного типа содержат текстовую информацию о содержимом страницы, Description, ключевые слова, Robots, имя автора страницы. Здесь ищут нужные сведения роботы поисковых машин.
HTTP-EQUIV. Теги данного типа оказывают влияние на формирование заголовка страницы и указывают браузеру на режим его обработки.
Условно, по функциям, значения мета-тегов можно разделить на следующие группы:
1. Осуществляющие управление браузером, то есть содержащие требования или советы по выведению страниц на экран устройства.
2. Содержащие информацию о содержимом странице и ее авторе.
3. Содержащие информацию для роботов поисковых систем.
Разберем подробнее каждый из них и рассмотрим за что они отвечают и как заполняются.
Значения для браузеров
Для всех тегов этой группы характерно наличие атрибута http-equiv.
1. Content-Type - принудительно указывает кодировку и тип документа.
Вообще-то браузеры обязаны самостоятельно определять кодировку и они даже так делают, если указания на этот счет отсутствуют. Вот только браузер может иметь неправильные настройки. В таком случае вместо букв на странице появятся веселенькие квадратики. А уж если неправильно действует сервер, то даже переключение кодировки в браузере не поможет. Поэтому лучше всегда указывать кодировку страницы, но при этом нужно указывать кодировку соответствующую той с которой страницу отдает сервер.
Пример установки международной кодировки utf8:
2. Content-Language. Задает язык документа и сообщает о нем роботам, индексирующим страницу.
Роботы могут определять язык и сами, но тег будет полезен в случае сбитых настроек браузера на стороне пользователя.
Пример установки русского языка:
3. Cache-Control. Указывает браузеру о действии кэша в отношении данного документа.
- public. Кэширование будет возможным во всех доступных кэшах.
- private. Кэшируется только в частном кэше, но не кэшируется прокси-сервером.
- no-cache. Полный запрет кэширования.
- no-store. Может кэшироваться, но не сохраняется в архиве.
- max-age=time, must-revalidate. Задает максимальное время, в секундах, в течении которого браузер должен хранить страницу в кэше.
- max-age=time, proxy-revalidate. Тоже максимальное время хранения, в секундах, но в данном случае указанно не для браузера а для прокси-сервера.
4. Pragma. Запрещает кэширование страниц. Тег может использоваться, если информация размещенная на странице сайта часто обновляется.
5. Expires. Заведует кэшированием документа. Если заявленное в этом значении время прошло, то браузер должен опять запросить у сервера страницу, а не использовать страницу из кэша. Понятно, что если указать уже прошедшую дату, то страница не будет кэшироваться никогда. Так делать не стоит еще и потому, что поисковые роботы могут не производить индексацию страницы с устаревшей датой.
6. Refresh. Браузер автоматически обновит документ спустя то количество секунд, которое указано в данном значении. Можно провернуть одну полезную штуку. Атрибуты тега принимают URL. Если указать URL другой страницы, то браузер спустя некоторое время загрузит именно ее.
Пример, через 5 секунд пользователь будет перенаправлен на страницу: http://vash-sait.ru/home.html
Значения для поисковых систем
Мета теги для поисковиков не имеют отношения к отображению страницы на мониторе, но некоторые из них важны для индексации и продвижения сайта в ТОП поисковой выдачи.
1. Description. Содержит описание страницы. Написанная здесь информация выводится на странице поисковой выдачи при формировании сниппета.
Если же описание задано грамотно и привлекает внимание, то пользователь с большей вероятностью перейдет на ваш сайт, а не на какой-то другой. Нужно постараться, чтобы описание совпадало с информацией, действительно представленной на сайте.
2. Keywords. В этом теге через запятую перечисляются ключевые слова, точно характеризующую страницу. Когда-то был важным, но не сейчас. Они использовались роботами для определения словосочетаний по которым данная страница должна показываться в поисковой выдаче. Позже, однако, к этому делу подключились ушлые спамеры, которые запихивали по тысяче ключевых слов на одну страницу. В настоящий момент информация, записанная здесь, используется поисковиками не очень активно.
3. Robots. Мета тег robots управляет процессом индексации страниц поисковыми системами.
Может принимать одно из следующих значений:
- Index. Страница может быть проиндексирована.
- Noindex. Содержимое страницы запрещено к индексации.
- Follow. Роботам поисковых систем разрешено следовать по ссылкам данной страницы.
- Nofolllow. Роботам запрещено переходить по ссылкам данной страницы.
- All. Индексировать страницу и переходить по ссылкам этой страницы.
- None. Не индексировать страницу, не переходить по ссылкам этой страницы.
На заметку. Описанные в Robots указания поисковым системам, могут быть заданы и в файле robots.txt. Но то, что указано в мета тегах имеет преимущество над директивами robots.txt. То есть, если в мета теге вы разрешите индексацию определенной страницы, а в robots.txt запретите, то она все равно будет проиндексирована.
Пример полного запрета индексации и перехода по ссылкам страницы:
4. Revisit. Указывает роботу поисковой системы, когда он должен вновь посетить и переиндексировать страницу. Незадача состоит лишь в том, что роботы обычно работают по собственному расписанию, поэтому это значение игнорируется и слегка бесполезно.
Пример, по идее робот должен посетить страницу через 5 дней.
5. Resource-Type. Описывает состояние документа, если значение отлично от Document, то страница будет проигнорирована поисковыми системами и не будет индексироваться. Важный тег для крупных ресурсов, которые используют документы разного типа.
Некоторые возможные значения:
- Build
- Classification
- Creation
- Document - Принимается по умолчанию.
- Formatter
- Operator
- Random text
- Rating
- Site-languages
- Subject
- Template
- Version
6. Subject. Указывает тематику искомого документа роботам поисковых систем. Пока работает не вполне корректно, так как поисковыми системами не установлены классификационные таблицы.
HTML тегиЗначение и применение
Тег обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.
Мета элементы, как правило, используются, чтобы указать описание страницы, ключевые слова, автора документа и другие метаданные. Разрешается и, как правило, необходимо использовать несколько метатегов. Тег всегда размещается внутри тега
. XHTML требует закрывающего тега , в HTML элемент считается одиночным.Поддержка браузерами
| Тег | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| Да | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| character_set | Задает кодировку символов для HTML документа. | |
| content | text | Задает значение, связанное с атрибутами name и http-equiv , в зависимости от контекста. |
| http-equiv | content-security-policy content-type default-style refresh | Фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками. |
| name | application-name author description generator keywords | Определяет имя документа на уровне метаданных. |
| scheme | format/URI (универсальный идентификатор ресурса) | Не поддерживается в HTML 5.
Указывает полезную информацию о схеме или названии самой схемы, которая должна быть использована для уточнения значения свойства атрибута content . |
Пример использования
Указание кодировки документа
Тег позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут (HTML тега ) задает кодировку символов для HTML документа.
charset = "utf-8" >Это заголовок.
Это параграф.
В данном примере мы задали кодировку документа UTF-8 с использованием элемента и атрибута . Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.
Часто используемые мета-теги
Метаданные разделены на две основные группы:
- первая группа - значения атрибута name .
- вторая группа - значения атрибута
Элемент (от англ. metadata - метаданные) определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере
. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», имена которых определяются ключевыми словами content , name или http-equiv .Синтаксис
Закрывающий тег
Не требуется.
Пример
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- - элемент полностью поддерживается браузером;
- - элемент браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Для чего люди создают сайты? Некоторым нужно раскрутить свою фирму или компанию, другим — посещаемый блог. Причины могут быть разными, но одно ясно точно — искусство строения и раскрутки сайта требует времени и усилий.
И вот наконец вы смогли построить свой первый блог или сайт: решили, какой тематике он будет посвящен, определились с дизайном и приступили к наполнению. Теперь самое время пришло для того, чтобы правильно оформить мета теги "description" и "keywords". Что это такое и как их использовать?
Что такое мета тег description
Если сказать коротко, description — это краткое описание страницы, которое в виде снипета видит пользователь в списке результатов поиска Google, Yandex и пр. Снипет - отображение description в результатах поиска. Хотя это практически одно и то же, в этой статье мы сможем увидеть разницу.
В исходном коде страницы мета тег description располагается в голове html-кода. Он выглядит примерно так:
Как заполнять мета тег description
Несмотря на то что некоторые решают для всех страниц сайта использовать один и тот же рекламный отрывок, по мнению большинства опытных сайтостроителей, важно для каждой страницы прописывать свой текст. Почему? Это влияет на визуальное восприятие пользователя. Кроме того, если description написан эффектно — это привлечет больше посетителей на ваш сайт. Один важный момент, который стоит учитывать, — description не должен быть слишком длинным или слишком коротким — в среднем желательно не менее 380 символов. И хотя, рассматривая результаты поисковой выдачи, можно увидеть 200-300 знаков, на самом деле, Google использует весь отрывок, написанный вами.
Таким образом, сжато и коротко вы должны описать то, что пользователь найдет у вас на сайте. Кроме того, это нужно сделать так, чтобы ему захотелось зайти именно к вам. Рассмотрим некоторые примеры оформления рекламного отрывка.
Примеры description-текстов
Мета тег description — как заполнять? Чтобы найти ответ на этот вопрос, рассмотрим некоторые примеры. Если вы владелец сайта по психологии, в качестве description вы могли бы написать что-то вроде: "Поиск специалиста психолога, а также тесты, советы, семейные рекомендации и многое другое". С другой стороны, можно кратко описать цель сайта, если большинству посетителей будет ясно, о каком учебном заведении или предприятии идет речь. Это может выглядеть так: "Московский государственный университет имени М. В. Ломоносова".
Если ваш сайт содержит музыкальный или видео-контент, тогда в тексте description следует перечислить, что можно скачать с вашей страницы. Там может быть написано: "Скачать фильмы и музыку совершенно бесплатно в хорошем качестве" или "Бесплатная классика в современной обработке - 128, 196, 320. Скачать бесплатно".
При написании description можно взять самую "сочную" часть статьи (для тех, кто ленится писать отдельный уникальный текст для рекламного отрывка). В любом случае важно, чтобы пользователь получил на вашем сайте ту информацию, которую рассчитывает найти и которую обещаете ему вы. Чтобы усвоить, как правильно заполнять мета тег description, примеры можно запомнить или выписать.
Системы автоматической генерации сайтов
Если же вы строите сайт при помощи конструктора, тогда мета тег description для сайта нужно вводить в соответствующее поле в редакторе. Наряду с подзаголовками "h1", "title" и "keywords", там имеется ячейка с надписью "description". Как и в случае с другими системами автоматического строения сайтов, мета тег description opencart нужно вводить в специально отведенное для этого поле.
Неправильное заполнение description
Лучше не использовать системы генерации рекламных отрывков, которые автоматически работают со страницей. Почему? Вряд ли вас заинтересует текст, составленный машиной, ведь чаще всего такие системы используют первые несколько предложений страницы, а это малоэффективно. Не всегда первый абзац отражает суть материала, который вы предлагаете.
Чем отличается от description
В отличие от description, ключевые слова — это список основных слов, необходимых для характеристики вашей страницы. Однако keywords - также не то же самое, что и ключевые запросы пользователей поисковых систем — тех слов, которые вводятся в верхнюю панель поиска Google или Yandex. Правда, сегодня "Яндекс" почти не использует эти слова при выдаче поисковых запросов. "Гугл", как заявил их представитель, вообще не обращает на них внимания. А вот рекламный отрывок description гораздо важнее — его видят пользователи, и используют Поэтому особое внимание стоит обратить на ключевые запросы и мета тег description. Если все же вы хотите указать keywords для страниц вашего сайта, тогда в html-коде каждой из них нужно ввести мета тег:
meta name="keywords" CONTENT="вводим ключевые слова для нашей страницы".
Как и в случае с тегом description, располагается он в "голове" страницы.
Ключевые запросы поисковой системы "Яндекс"
Хорошо, если в вашем рекламном отрывке в некотором количестве присутствуют слова, которые пользователи вводят в строку поиска. Для определения статистики вводимых запросов "Яндекса" нужно зайти на сайт: http://wordstat.yandex.ru/. Для использования сервиса необходимо зарегистрироваться. После этого в строку в верхней части страницы введите вашу услугу или товар. Предположим, ваш сайт об истории. Вводим слово "история". И в результатах видим две колонки: "ключевой запрос" и "количество показов в месяц". К примеру, слова "история класс" искали более полутора миллионов раз в месяц. Среди самых часто вводимых словосочетаний можем увидеть: "история онлайн", "история ужасов", "американская России", "скачать 6" и "история 5". Кроме этого, в Yandex Wordstat можно выбрать регион или местность, для которой будет выводиться статистическая информация. Это очень удобно, ведь в разных областях и городах людей могут интересовать разные товары.
Если в описании-description использовать наиболее популярные поисковые запросы, то можно сделать так, чтобы ваш сайт отображался на первых страницах поисковых систем. Чтобы этого добиться, придется изрядно потрудиться — это и есть главная цель каждого сайтостроителя.
Формирование снипетов
Как мы уже говорили, речь идет о том же description-тексте. Поисковые системы Bing, Yahoo! и Google выводят для пользователя Интернета снипет, который указан в мета теге description. А вот "Яндекс" поступает слегка иначе. Т. е. то, что вы запишите в теге рекламного отрывка, не будет показано в области для снипета в поисковой выдаче той или иной страницы. Как это исправить? Текст этого отрывка можно настроить в кабинете вебмастера "Яндекса". Однако есть сведения, на которые мы повлиять не сможем, как бы нам ни хотелось, например, количество звезд отеля. Чтобы изменить некоторые адресные данные предприятия или организации, нужно оставить специальную заявку. В большинстве других случаев вы можете сами настраивать ваш рекламный отрывок. Вот такое существенное отличие есть в выдаче результатов поиска "Яндекса". Зачем это нужно знать? Опять-таки, повторим, если мы хотим привлечь больше посетителей для нашего сайта.
Чему мы научились
Итак, как мы увидели, каждый может правильно заполнять мета тег description для сайта. Примеры того, как это делать, были подробно описаны в этой статье. Кроме того, мы с вами могли узнать, в чем отличие в заполнении рекламного отрывка для поисковых систем "Яндекс" и Google. Мы узнали, для чего нужны ключевые запросы пользователей и как их подбирать, а также о практически полной бесполезности ключевых слов. Используя все советы, приведенные в этой статье, вы сможете добиться полного успеха, а при дополнительной сноровке ваш сайт может даже занять место в десятке первых, что увидят пользователи Всемирной паутины. Помните одно: раскрутив сайт однажды, важно продолжать совершенствовать его и дальше, чтобы не потерять набранный рейтинг.
Мета тег HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега - метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.
Часто используются meta-теги: author , description , keywords , viewport , charset .
Мета теги находятся в области
HTML документа (). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта.
Синтаксис
Примеры использования в HTML коде
Основные мета теги
Ниже приведены несколько основных тегов с комментариями по применению и примерами использования.
Meta-тег description
Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.
Пример использования мета тега description
Meta-тег keywords
Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords .
Пример заполнения мета тега keywords
Meta-тег viewport
Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы.
Пример использования мета тега viewport
Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:
Meta-тег charset
Кодировка веб страницы. Наиболее частое значение: "UTF-8".
Пример использования мета тега кодировки charset
Meta тег refresh
Мета тег с атрибутом указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.
Пример использования meta http refresh
Поддержка браузерами
| Тег | |||||
| Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значения | Описание |
|---|---|---|
| charset |
character_set |
Указывает кодировку HTML документа. |
| content |
тестовое значение |
Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name . |
| http-equiv |
content-type |
Устанавливает HTTP заголовок для атрибута content . Сontent-type
- Кодировка. Устаревшее значение, в HTML5 используйте charset
(см. пример выше). |
| name |
application-name |
Имя мета тега. Как и http-equiv определяет суть мета тега. Application-name
- имя веб приложения, которое представляет страница. |