Это заголовок.

Это параграф.

В данном примере мы задали кодировку документа UTF-8 с использованием элемента и атрибута . Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.

Часто используемые мета-теги

Метаданные разделены на две основные группы:

• первая группа - значения атрибута name .
• вторая группа - значения атрибута

Мета тег 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

Поддержка браузерами

Атрибуты

Мета теги 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. Указывает тематику искомого документа роботам поисковых систем. Пока работает не вполне корректно, так как поисковыми системами не установлены классификационные таблицы.

Теги meta помогают людям находить ваш сайт в поисковых системах, влияют на его позиции в поисковой выдаче. Если правильно применять мета-теги – шанс того, что ваш сайт попадет в ТОП Yandex, Google, Rambler и других ПС значительно возрастает. Метатеги не являются обязательным атрибутом, и вы можете не использовать их. Поэтому стоит разобраться, насколько важны и зачем они нужны.

Мета-теги – это часть программного кода страницы. Они не видны обычному пользователю, и указываются в HTML коде страницы между открывающим и закрывающим тегом .

Главные задачи мета-тегов:

• Влиять на режим отображения страницы в браузерах.
• Определять авторство контента, адрес страницы и частоту ее обновления.
• Направлять роботов поисковых систем в вопросах индексации, перехода по гиперссылкам.

Какие бывают мета-теги

1. Для роботов поисковых систем (title, description, keywords) – используются для внутренней оптимизации ресурса .
2. Технического характера – они позволяют правильно настроить отображение и индексацию страницы, указать информацию об авторе и документе.

Роботы поисковых систем – это специальная программа, которая перебирает все страницы из интернета и добавляет информацию из них в базу данных. Поисковый робот (веб-паук) анализирует страницы сайта, сохраняет и группирует контент по определенным критериям, после чего переходит по ссылке на следующую страницу и снова повторяет процесс.

Как правильно сформировать метатеги для ПС

Для составления title, description и keywords используются ключевые слова или фразы. Эти фразы важны, они подсказывают поисковым системам, какая тематика у статьи, и на какие вопросы она может ответить.

Ключевые слова – это фразы, которые пользователи вводят в поисковых системах, желая найти ответ на свой вопрос. Вебмастера стремятся писать статьи с использованием ключевых слов, стараясь ответить на запросы пользователя, чтобы привлечь их посетить сайт. Поисковая система выводит в ТОП выдачи те страницы, которые, по ее мнению, лучше других соответствуют запросу, то есть наиболее релевантны.

Тег «Title»

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

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

Всем знакомая страничка поиска в Яндексе выдает нам результаты по запросу в виде блоков с названием и описанием или анонсом содержимого:

Так выглядит содержимое тега «Title» в заголовке вкладки (окна браузера):

Как заполнять тег title

Содержимое тайтла определяет соответствие запросу пользователя для поисковой системы и вероятность перехода на конкретный сайт. Поэтому тайтл должен содержать основной ключевой запрос и, в то же время отличаться от конкурентов. Попробуйте указать в тайтле конкурентные преимущества вашего товара, или изюминку сайта. Только тогда тег title будет более привлекательным для пользователей, и они начнут переходить на страницу вашего сайта.

Поисковые системы установили стандарты на содержимое и допустимый объем в теге title. Задача вебмастера – вместить в короткую фразу самые емкие и важные слова как для роботов, так и для человека.

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

Ключевые слова: купить вечернее платье , интернет-магазин платье, купить платье недорого, сколько стоит вечернее платье

Можно было бы так: «Купить вечернее платье, интернет-магазин платьев, купить платье недорого»

Но лучше будет так: «Купить вечернее платье в интернет-магазине недорого с доставкой».

То есть в стремлении ответить на большее количество запросов пользователя можно не угодить поисковику, в первом случае получается переспам по основному ключу. Во втором случае нет повторов, есть гармонично составленное предложение, содержащее к тому же основной ключевой запрос + 2 ключевых слова: “интернет-магазин” и “недорого”.

Важно: Поисковые системы Yandex и Google выдвигают разные стандарты длины тега Title. Google отображает пользователям до 70 символов, и до 12 слов. Яндекс отображает – до 15-ти слов, и до 80-ти символов.

Мета-тег Description – описание страницы

«Description» – тег предоставляет «анонс» на странице выдачи по запросу пользователю краткое описание содержимого страницы. Тег наполняется 2-4 короткими предложениями, в которых рекомендуется использовать 1-2 поисковых запроса

Как заполнять metadescription

Для создания примеров возьмем за основу 2 поисковые фразы: стильная женская одежда, одежда от производителя.

Например,

1. можно было бы скопировать часть статьи со страницы: С 1992 года наша компания сотрудничает с итальянскими домами моды. Поэтому в нашем ассортименте представлен широкий выбор моделей, благодаря чему вы можете купить одежду от производителя недорого. Стильная женская одежда – мечта каждой женщины.
2. но лучше составить уникальный, без переспама, но с ключевыми словами небольшой анонс содержимого страницы: Купить стильную женскую одежду от итальянского производителя можно в нашем интернет-магазине недорого, с доставкой.

Возможно пользователю интересна история с 1992 года и пустой маркетинговый текст, но более привлекателен для человека конкретный ответ на его запрос. То есть слова, помимо ключевых, должны иметь вес в глазах пользователя. В нашем примере текст про «недорого» и «с доставкой» выгодно отличает этот интернет магазин от того, который «представляет широкий выбор» словами-штампами и пустым текстом, не имеющим веса в мета – description, о том, что «одежда – это мечта каждой женщины».

Поисковики также ограничивают длину этого тега, поэтому рекомендуется наиболее весомые слова и фразы применить ближе к началу предложения. Используйте свои преимущества, «изюминки», как например «бесплатная доставка» или «акции и скидки». Так вы угодите роботам и сможете выделиться среди конкурентов для людей.

C помощью содержимого meta name description поисковые системы формируют сниппеты. Это короткое описание страницы, которое отображается в поисковой выдаче сразу под ссылкой на сайт.

Вы помните, как это выглядит:

Если же ПС считают, что meta name description content сформирован не по всем правилам, то сниппет создается из разных кусочков фраз, находящихся на странице.

Это выглядит так:

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

• Ранжирование страницы в поисковых системах.
• Перейдет ли пользователь из ПС к вам на сайт.

Прописывать теги «Title» и «Description» рекомендуется для каждой страницы сайта.

Мета-тег Keywords – поисковые запросы

Мета-тег keywords используется для того, чтобы сообщить поисковым системам, на какие запросы отвечает содержимое страницы. Если ПС находит соответствие контента ключевым фразам в meta keywords и релевантность запросу пользователя, это дает большую вероятность вывода вашего сайта в результатах поиска.

Мета-тег keywords не должен содержать слова, которые не встречаются в тексте на странице. То есть не может быть прописан ключ «плащ с капюшоном» для страницы о босоножках, если фраза не упоминается в тексте. Такая страница не отвечает на этот запрос по факту, но претендует на место в выдаче по этому ключевому слову. ПС выражают свое неуважение к таким ресурсам понижая их позиции в поиске.

Если ключами для страницы являются: вечерние платья, купить вечернее платье, заказать вечернее платье, вечернее платье с доставкой, платье в клетку, платье в пол, то не стоит в таком виде применять их для заполнения meta keywords.

Правильнее без повторов и переспама: вечернее платье, купить, заказать, с доставкой, в клетку.

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

Технические мета-теги

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

Основные технические мета-теги:

Content-type – в нем содержится информация о типе документа и его кодировки. Мета-тег влияет на правильность отображения страницы в браузере. Сейчас браузеры способны легко определить кодировку сайта, но вебмастеры рекомендуют воспользоваться тегом для большей уверенности.

Content-language – тег сообщает браузеру и поисковым роботам, на каком языке представлен контент на сайте.

Refresh – используя этот тег, можно указать браузере время, через которое документ автоматически должен обновиться, или перевести пользователя на другую страницу.

Robots – он отвечает за то, какие области сайта будут подвергнуты индексации, а какие роботы ПС пропустят. У тега Robots могут быть следующие значения:

• Index – страница открыта для индексирования/Noindex – запрещает индексацию страницы
• Follow – позволяет учитывать гиперссылки на странице/Nofollow – не позволяет учитывать гиперссылки на странице
• All – замена для значений «follow» и «index», позволяет учитывать гиперссылки и индексировать страницу
• None – замена для значений «nofollow» и «noindex», закрывает от индексации страницу и гиперссылки

Meta Author и Copyright – с помощью этих тегов можно указать владельца документа и авторство.

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

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

Влад Мержевич

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

Метатеги для поисковых механизмов

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

Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

Некоторые принципы, относящиеся к метатегам:

• не включайте ключевые слова, которые не содержатся на ваших страницах;
• не повторяйте ключевые слова;
• используйте метатеги по их прямому назначению;
• делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.

description

Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.

Пример 1. Использование Description

keywords

Этот метатег был предназначен для описания ключевых слов, встречающихся на странице (пример 2). Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.

Пример 2. Использование Keywords

Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).

. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

Кириллица

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251 , переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.