meta в HTML

Содержание

в HTML

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры ?

2 12 1 3.5 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Описание мета-тегов

Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.

Описание страницы

Title

Заголовок страницы, оптимальная длина 50-60 символов.

Description

Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.

Keywords

Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.

  • Google – не использует.
  • Яндекс – под вопросом.

Кодировка сайта

В HTML5 тег сократили:

Application-Name

Название веб-приложения. Можно указать несколько названий для разных языковых локалей.

  • В Android используется при добавлении сайта на главный экран.
  • В Windows 8, 10 при добавлении сайта в панель приложений и плиткой в меню пуск.

Generator

Сообщает, с помощью какой программы был сгенерирован код страницы.

Author

Информация об авторе сайта.

Информация о владельце сайта.

Reply-To

Указывает способ связи с автором страницы.

Content-Language

Указывает язык страницы. Используется поисковыми машинами при индексировании.

Предоставляет ссылку на справку или e-mail.

Управление индексацией

Robots

Задает правила индексации для поисковых роботов.

Общие значения:

index, follow или all Разрешено индексировать текст и ссылки на странице
noindex Не индексировать текст страницы
nofollow Не переходить по ссылкам на странице
noindex, nofollow или none Запрещено индексировать текст и переходить по ссылкам
noarchive Не показывать ссылку на сохраненную копию в поисковой выдаче

Яндекс

noyaca Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска

Google

nosnippet Запрещает показывать видео или фрагмент текста в результатах поиска
noimageindex Запрещает указывать вашу страницу как источник ссылки для изображения
noodp Не использовать описание из каталога DMOZ

Last-Modified

Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц.

Document-State

Определяет частоту индексации для поисковых роботов.

static Индексировать один раз
dynamic Индексировать страницу регулярно

Revisit-After

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

Управление кэшированием

Cache-Control

Указывает как браузеру кэшировать страницу.

Допустимые значения:

public Кэшируется все
private Кэшируется браузером, но не proxy-сервером
no-cache Запрещает кэширование
max-age=0 Сколько секунд хранить в кэше

Pragma

Expires

Дата окончания кэша браузера. Если указать прошедшую дату или 0, то документ не будет кэшироваться.

Canonical — предпочитаемый канонический адрес

Если у страницы есть дубликаты с одним содержанием и разными URL, например:

В rel=»canonical» указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.

Указывает URL предыдущий страницы при пагинации.

Указывает URL следующий страницы при пагинации.

Rel Alternate

Атрибут «Hreflang»

Этот атрибут указывает ссылки на разные языковые версии сайта. Код языка указывается в формате ISO 639-1.

Или код языка и региона, регион указывается в формате ISO 3166-1 Alpha 2:

Значение x-default говорит о том что страница главная и не соответствует какому-либо языку или региону.

Атрибут «Media»

Значение handheld или only screen and (max-width: 640px) указывают адрес мобильной версии.

Мета-теги

Правильная настройка мета-тегов очень важна для SEO. Работы по заполнению, прописыванию, корректировке мета-тегов всегда выполняются при запуске проекта, сразу после того, как собрано семантическое ядро. И продолжаются по мере необходимости в течение всего периода продвижения сайта. Иногда достаточно лишь небольших изменений в метатегах, чтобы сайт вышел в ТОП10. Особенно это актуально для низкочастотных запросов, а также в тех случаях, когда сайт уже находится достаточно высоко по данному запросу (например, 11-15-я позиция в поисковой выдаче), и нужно совсем немного, чтобы выдвинуть его в ТОП. Зачастую под SEO-тегами подразумеваются Title, Description и Keywords. Однако тегов намного больше. И в этой статье мы постараемся охватить этот вопрос максимально полно.

Содержание

Что такое мета-теги

Если быть предельно точным, то под мета-тегами следует понимать (X)HTML-теги , с помощью которых можно указать служебную информацию о странице. Такая информация размещается внутри контейнера … и не выводится на экран.

К тегам мета относятся:

  • description — описание веб-страницы,
  • keywords — ключевые слова,
  • http-equiv — тип отправляемого документа и кодировка (charset),
  • generator — CMS сайта,
  • author — автор,
  • copyright — авторские права,
  • robots — правила индексирования страницы для роботов,
  • viewport — данные о настройке области просмотра
  • и другие.

Подробнее можно прочитать в справке по HTML или Википедии.

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

В этой статье мы не будем точны с технической точки зрения и к мета-тегам отнесем те служебные теги, которые 1) важны в SEO и 2) используются в любом месте веб-документа, т.е. не обязательно привязаны к контейнеру . В связи с этим, приведем такое определение.

Мета-теги (англ. meta tags, досл. служебные ярлыки) — это служебные слова, которые содержат важную информацию о веб-документе для поисковых систем. К таким словам (тегам) относятся теги Title, Description, Hx, Robots, Canonical.

Правильные SEO мета-теги для Яндекса и Google

Рассмотрим, как правильно написать мета-теги для сайта, как их добавить и разместить в коде. Нас будет интересовать:

  • синтаксис — то, как правильно должен быть прописан мета-тег в HTML-коде сайта;
  • требования поисковых систем к тегам;
  • примеры правильного и неправильного заполнения тегов.

Следует отметить, что в большинстве CMS (систем администрирования сайта), есть специальные поля для заполнения мета-тегов, и вам не нужно прописывать их непосредственно в HTML-коде. От вас потребуется только вписать содержание тега (Title, Description, Keywords, H1, Canonical) или выбрать подходящее значение (Index/NoIndex, Follow/NoFollow). Однако следует проверять, корректно ли размещаются теги: 1) в правильных местах, 2) правильный синтаксис, 3) значения в тегах соответствуют вашим настройкам. Причем следует проверить не только на главной странице, но и на различных внутренних страницах. Например, у нас сайт интернет-магазин. В этом случае обязательно нужно проверить, корректно ли размещаются мета-теги на главной странице, внутренних информационных, страницах категорий и товаров, поскольку веб-документы каждого из этих типов могут формироваться по своему отдельному шаблону.

Теперь подробнее о каждом из тегов.

Мета-тег Title

Это самый главный тег, который больше других влияет на продвижение сайта по ключевым словам. В большинстве случаев именно этот текст используется в заголовке сниппета, как показано в примере ниже. (Но не всегда, в заголовок так же может быть выведено содержание тега H1 или даже H2, H3).

Синтаксис

Тег должен находиться внутри контейнера … в любом месте.

Требования SEO

  • Заголовок должен быть уникальным на всех страницах сайта, а также не повторять Title на страницах других сайтов (для этого в конце Title можно добавить название организации).
  • Тайтл должен отражать суть страницы, должен быть информативным и кратким.
  • Должны присутствовать запросы, по которым продвигается данная страница, самые важные размещаем в начале тега, заголовок должен обязательно содержать 1-3 ключевых слова.
  • Не включайте в Title слишком много ключевых слов
  • Содержимое тегов Title и H1 должно быть разным — у них разные цели: Title заголовок для сниппета, H1 заголовок веб-страницы.
  • Не используйте специальных символов, пока не убедитесь, что они поддерживаются.
  • Не используйте спецсимволы (= / \ + _ ), знаки препинания и стоп-символы (точка, двоеточие, восклицательный и вопросительный знак) — помните, это знаки, которые разбивают пассажи в Title, что снижает взаимосвязь ключей по разные стороны от стоп-знака.
  • Составляйте тег Title для людей по всем правилам русского языка, заголовок по возможности нужно делать цепляющим и привлекательным.
  • Оптимальная длина Title – от 30 до 65 символов. Google ориентируется на длину в пикселях, рекомендуемая длина — от 200 до 571 пикселей. Если длина Title больше, то в сниппете появляется многоточие, которое также занимает дополнительное место в заголовке. Оно может появиться как в конце заголовка сниппета, так и в начале. Короткие Тайтл тоже плохо, поскольку в него помещается мало ключей. НО: при этом нет смысла придерживаться оптимальных значений длины заголовка для служебных страниц на сайте, которые НЕ продвигаются по ключевым словам.
Илон Маск рекомендует:  Как выровнять слой по центру веб-страницы

Примеры правильного заполнения тегов

  • Купить сантехнику в Москве, интернет-магазин Куписантехнику.Ру
  • Окна REHAU в Москве, официальный сайт партнера — Пластиковые окна недорого
  • Мета-теги для сайта, Title и Description в примерах — SEOgio
  • Элемент пола Кнауф — купить в Москве по цене 310 pуб | KNAUF
  • Новости — Компания Ромашка

Ошибки и неудачные примеры мета-тегов

  • Евроремонт, ремонт дома, ремонт квартир в Смоленске, ремонт в Смоленске | Ремонт квартир, cтроительство Смоленск ( простое перечисление ключевых слов )
  • Главная – ООО Ромашка , подарки оптом, подарки сотрудникам, рекламные сувениры, корпоративные подарки. ( вначале должны быть самые главные ключевые слова )
  • Ремонт ( слишком короткий Title )
  • «Автомоечный комплекс №1»: автомойка, шиномонтаж, кафе, сауна, комната отдыха . ( название компании вначале, двоеточие, слова, по которым не будет продвигаться сайт )
  • Новости о юридических услугах и бухгалтерском обслуживании в компании Ромашка ( использование ключевых слов в заголовке страницы, которая по этим словам НЕ продвигается, это может только мешать )

Мета-тег Description

Так же один из важных тегов для продвижения страницы по ключевым словам. Описание может использоваться в сниппете.

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

Пример, когда description в мета и в сниппете отличаются:

Синтаксис

Тег должен находиться внутри контейнера … в любом месте.

Требования SEO

  • Должен отражать суть страницы, написан в виде согласованного текста. Может быть несколько предложений.
  • Должен быть уникальным для всех страниц сайта, не дублировать аналогичные теги на других сайтах (для этого используем название компании в тексте мета-тега).
  • В теге нужно использовать запросы, по которым продвигается данная страница, однако делать это необходимо так, чтобы они были использованы естественным образом, в нужной морфологии. Также не следует просто перечислять запросы через запятую.
  • Содержание тега не должно повторять Title.
  • Длина description должна быть не менее 70 и более 150-200 символов. Google определяет длину в пикселях, рекомендуемая длина от 400 до 930 пикселей.
  • В description желательно отразить основные преимущества компании, товара, услуги.
  • Наиболее важную информацию и фразы лучше разместить в начале мета-описания.

Примеры правильного заполнения тегов (полужирным выделены ключевые слова)

Ошибки и неудачные примеры мета-тегов

  • ( короткий, мало ключевых слов )
  • ( сгенерирован автоматически, просто вырезано начало контента на странице )
  • ( перечисление ключевых слов через запятую, неестественное мета-описание )

Мета-тег H1

Еще один очень важный тег. В нем лучше всего размещать главный, максимально частотный запрос, по которому продвигается данная страница. Заголовок страницы чаще всего должен содержать 1-3 слова. Исключение — страницы статей, товаров, проектов и т.п. То есть страницы, продвигаемые под более специфические, менее частотные запросы.
Синтаксис

Мета теги для сайта

Виды мета-тегов и их задачи, особенности заполнения и готовые шаблоны.

Задачи meta тегов

Метатеги выполняют несколько важных функций:

  • Влияют на то, как отображается и какую позицию занимает страница в индексе (выдаче).
  • Помогают продвигать ресурс по наиболее соответствующим Вашей целевой аудитории запросам. Позволяют потенциальному посетителю увидеть в поисковой выдаче нужную информацию, делая описание максимально информативным.
  • Фиксируют данные о странице, помогают правильно отобразить информацию, настроить индексацию (анализ сайта и внесение его в базу для последующего включения в выдачу).

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

Мета теги для SEO (поисковой) оптимизации

Сюда относятся три тега: title, description, keywords. Эти атрибуты сообщают поисковому роботу информацию о сайте, которая помогает грамотно определить тематику ресурса и ранжировать (сортировать) в выдаче. Потому составляя метатеги, вебмастера обязательно используют ключевые слова (слова и фразы, которые целевой пользователь вводит в строку поиска, чтобы найти нужный ресурс).

Заголовок страницы. В индексе это — крупная синяя ссылка на сайт, в браузерных вкладках — название.

Атрибут должен содержать основные ключевые слова и конкурентные преимущества. Важно, чтобы пользователь сразу понял, что Вы предлагаете, и почему данный ресурс ему подойдет. Основная сложность — вместить нужную информацию в четко заданный поисковыми системами лимит символов. У Google максимум — 70 (12 слов), у Яндекс — 80 (15 слов).

Пример:
Дано: ключевые слова «купить кресло», «купить кресло недорого», «купить удобное кресло»
Неудачный title: Купить кресло. Купить удобное кресло, купить кресло недорого
Удачный title: Как купить удобное кресло недорого с доставкой и получить скидку 15%?

В первом случае — переспам (переизбыток ключевых фраз), нечитабельное предложение с точки зрения пользователя. Второй вариант meta тега объединяет все нужные ключевики в логичной последовательности и указывает на конкурентное преимущество компании (скидку).

Краткий «анонс» страницы в результатах поиска. Несколько коротких предложений, в которых используются ключевые слова (не все — наиболее значимые) конкретной страницы. Рекомендуемая длина meta тега — 160-200 символов.

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

С помощью meta name description поисковым роботом описание страницы — сниппет. Отображается в результатах поиска под title.

Если атрибут не заполнен либо сформирован не по правилам (значительно превышен лимит символов, переспам), то поисковый робот составляет описание автоматически, «собирая» его по кусочкам фраз на странице. Результат получается не сильно привлекательный и «продающий».

Как заполнять
Дано: магазин продажи книг; ключевые слова «интересная книга», «купить книгу»
Неудачный Description: Книги издавна являются одними из самых близких «друзей» человека. Интересная книга помогает скоротать время, дает полезные знания, раскрывает занимательные факты, пробуждает эмоции. Потому стоит задуматься о том, чтобы купить книгу в нашем магазине.
Удачный Description: Нужна интересная книга? В нашем магазине — широкий выбор тематик: от узкоспециальной литературы до мировых бестселлеров. У нас Вы можете купить книгу с доставкой в течение 1-5 дней в любой регион РФ. Первым покупателям — скидка 10%.

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

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

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

Используйте 3-6 ключевых слов/фраз через запятую. Чрезмерное употребление может расцениваться поисковиком как переспам. В список должны включаться только используемые на странице запросы, под которые оптимизирован текст, названия товаров и т.д.!

Основные в HTML meta-теги: описание

Атрибуты тега

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

Основные атрибуты тега HTML в :

[tchecklist]

  • name;
  • content;
  • http-equiv;
  • charset.

[/tchecklist]

Последний атрибут – charset – нужен для указания кодировки страницы. Он появился только в последней, пятой спецификации языка HTML. Наиболее часто встречающееся значение кодировки – utf-8 или “Юникод”.

Атрибуты name и content обычно используется в паре. У name может быть несколько значений:

[tchecklist]

  • description – краткое описание страницы, которое показывается в выдаче;
  • author – необязательный атрибут для указания авторства, имя создателя документа;
  • robots/norobots – разрешает или запрещает индексацию страницы поисковыми роботами;
  • follow/nofollow – разрешает или запрещает переход по ссылкам;
  • application-name – задает имя веб-приложения, если представляет веб-страницу, в других случаях не используется;
  • generator – используется для описания программного пакета, в котором сгенерирована веб-страница;
  • viewport – нужен для корректного отображения страницы на экране мобильного устройства;
  • keywords – ключевые слова, облегчающие ранжирование страницы поисковыми системами.

[/tchecklist]

Атрибут тега HTML content (описание) будет хранить значение атрибута name” (имя). Например: . Такая запись означает, что для страницы существует какое-то краткое описание, которое нужно отобразить в браузере. Если пользователь будет искать информацию в Интернете и в выдаче появится эта страница, описание будет под ссылкой на нее. Что именно – указано в значении name. Атрибут content же сообщает, какое именно это будет описание. Значений description может быть несколько, написанных на разных языках. Описание страницы значительно влияет на ранжирование сайта в поисковых системах и помогает в привлечении пользователей. Но текст должен быть не только релевантен содержанию страницы, но и привлекателен для читателя. Поэтому правильное составление description – это целое искусство. Указать, какой именно язык используется в описании, нужно будет в дополнительном атрибуте lang.

Илон Маск рекомендует:  Что такое код bioskey

Особенности взаимодействия атрибутов name и content

Для того чтобы взаимодействие атрибутов тега name и content стало понятнее, рассмотрим еще одно значение name – author. Используя его вместе с content, можно указать автора страницы. Пример: . Еще одним важным значением атрибута name тега HTML является keywords, или ключевые слова. Они перечисляются через запятую и нужны для SEO-оптимизации страницы. В настоящее время ведутся споры, так ли важны ключевые слова и действительно ли они оказывают влияние на ранжирование, но точный ответ на этот вопрос знают только технические специалисты, работающие на крупные поисковики. Рядовым же специалистам по созданию и раскрутке сайтов рекомендуется все же добавлять этот мета-тег в .

Ключевые слова и их значение для оптимизации

Ключевые слова помогают поисковому роботу быстро находить сайт и выдавать его по определенному запросу пользователя. Без их указания поисковая машина обращается к странице, находит несколько слов на ней и уходит, если необходимая информация не найдена. Поэтому ключевые слова необходимо указывать. Важно учитывать, что одни и те же слова не должны повторяться более трех раз, иначе сайт будет помечен как “спам”. Общее их количество – 50. Составление description и keywords – это работа человека, занимающегося поисковой оптимизацией, продвижением сайтов и их ранжированием в поисковых системах. Верстальщику нужно понимать важность значения этих атрибутов тега HTML для помощи SEO-специалисту.

Значение атрибута тега “robots”

Еще одно интересное значение HTML name – robots. С его помощью можно разрешить и запретить индексацию веб-страницы какими-либо поисковыми машинами. Здесь в значении content можно написать index – и разрешить индексацию, или noindex – и запретить ее. Дополнительно через запятую в значении тега указывается также follow или nofollow, то есть “разрешить” или “запретить переход по ссылкам с веб-страницы”. Можно запрещать индексацию, при этом разрешая переходы, и наоборот. Еще один вариант разрешить все – добавить в атрибут content значение all. Для того чтобы запретить все, нужно написать none.

Атрибут http-equiv

Важный атрибут тега HTML – http-equiv. Он используется аналогично name с атрибутом charset, который задает кодировку страницы. Для этого http-equiv нужно задать значение content-type, а в атрибуте content указать тип документа и кодировку, которую нужно использовать. Например: . Если разобрать эту запись более подробно, то станет понятно, что атрибут http-equiv указывает браузеру на то, как и на основании каких данных обработать страницу.

У этого атрибута могут быть и другие значения:

[tchecklist]

  • expires – используется для установки даты и времени, после которой контент будет считаться устаревшим;
  • pragma – указывает способ кэширования страницы;
  • refresh – указывает, что нужно отобразить другой документ в браузере.

[/tchecklist]

Значением content type указывается, что будет обрабатываться какая-то часть контента, то есть содержания веб-страницы. При помощи атрибута content браузер понимает, что обработать нужно именно текст нашего html-документа. Далее в записи располагается знакомый атрибут для описания кодировки страницы, где сообщается, какой именно она будет.

Другие возможности http-equiv

Но атрибут http-equiv можно использовать еще одним интересным образом: при использовании значения refresh браузер будет обновлять страницу через какой-то определенный промежуток времени. Например, можно указать “5 секунд” в атрибуте content. Тогда содержимое документа будет обновляться и изменяться, если оно не статическое. Для проверки работоспособности этого варианта использования http-equiv добавляется возможность перехода на другую веб-страницу. Для того чтобы это сделать, в значении атрибута content после таймера, в котором указывается промежуток времени для обновления, добавляется адрес другой страницы. Тогда, после обновления страницы, через 5 секунд будет совершен переход на другой адрес, и откроется указанная в атрибуте ссылка.

Атрибут viewport

Слово viewport можно перевести как “окно просмотра”. Этот атрибут используется, чтобы мобильные устройства правильно отображали контент страницы. С этого тега начинается адаптивный дизайн. Он помогает масштабировать и изменять текст и изображения на сайте, в зависимости от положения экрана. Без этого тега шрифты не будут увеличиваться до нужного размера, и пользователь просто не сможет прочитать, что написано на странице. Атрибут viewport задает определенную ширину окна, в которое нужно поместить сайт. Для каждого браузера она будет различной. Пример того, как может выглядеть мета-тег с этим атрибутом: .

Мы рассмотрели основные мета-теги, которые можно использовать при создании документа на языке HTML, но их гораздо больше. Ознакомиться с другими тегами и их возможными атрибутами можно в спецификации HTML5.1.

Основные в HTML meta-теги: описание на News4Auto.ru.

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

Мета-теги

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

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

Мета-теги бывают универсальными и поддерживаемыми только какими-то конкретными системами.

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

Robots

Мета-тег указывает роботам поисковых систем, как сканировать и индексировать страницу.

Для конкретного бота можно задать свою инструкцию. Например, заменить robots на Googlebot для Гугла или на YandexBot для Яндекса.

  • all – означает, что разрешена индексация и переход по ссылкам, аналогично index, follow;
  • noindex – запрет индексации;
  • index – разрешена индексация;
  • nofollow – нельзя переходить по ссылкам;
  • follow – можно переходить по ссылкам;
  • noarchive – запрещено показывать ссылку на сохраненную копию в выдаче;
  • noyaca – (для Яндекса) не использовать для сниппета описание из Яндекс.Каталога;
  • nosnippet – (в Google) нельзя использовать для сниппета фрагмент текста и показывать видео;
  • noimageindex – (в Google) запрет указания страницы как источника изображения;
  • unavailable_after:[date] – (в Google) после указанной даты будет прекращено сканирование и индексирование страницы;
  • none – запрет индексации и перехода по ссылкам, аналогичен noindex, nofollow.

Description

Мета-тег name=«description» может использоваться поисковыми системами при формировании сниппета, поэтому он должен:

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

В разных поисковых системах выводятся 160–240 символов.

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

Keywords

Мета-тег name=«keywords» раньше использовался поисковыми системами при ранжировании, но из-за многочисленных манипуляций его значимость постоянно уменьшалась. Теперь большинство поисковиков его игнорируют. Google не поддерживает вообще, а Яндекс пишет, что может учитывать. Но на практике keywords давно не оказывает влияния, а его некорректное заполнение может привести к переспаму.

Существуют три подхода:

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

Если принято решение прописать ключевые слова, важно не допускать спама.

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

Title

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

Данный HTML-тег важен для SEO: влияет на ранжирование и кликабельность по сниппету.

Классические рекомендации по заполнению мета-тега:

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

Рекомендуема длина – 70–80 символов.

Другие мета-теги

Верификация

Для подтверждения права собственности на сайт и возможности управлять им в Вебмастере Яндекса или Search Console в Google можно использовать особые мета-теги верификации google-site-verification и yandex-verification (или иной способ).

Viewport

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

Http-equiv

  • Content-Type – помогает определить кодировку и тип документа;
  • Refresh – перенаправление на другую страницу после заданного в секундах времени нахождения;
  • Content-Language – указание основного языка документа.

Тег указывает браузеру, на основании каких данных нужно обработать содержание документа.

Функция – идентификация автора. Если сайт принадлежит компании, используется Copyright, если конкретному лицу – Author.

Тег meta, ключевые слова

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

Илон Маск рекомендует:  Что такое код xslt_set_scheme_handlers

Перечень ключевых слов задаётся тегом , у которого атрибут name имеет значение keywords . Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

Раньше этот тег был очень важен для поисковиков. Каково положение дел сейчас? Мы бы с удовольствием вам поведали, но это большой секрет Яндекса и Гугла.

Краткое описание страницы задаётся похожим образом, только значение атрибута name меняется на description :

Краткое описание (или аннотация) страницы часто используется поисковиками при отображении результатов поиска.

Существуют рекомендации по правильному использованию метатегов от Гугла и Яндекса.

  • index.html Сплит-режим

Сайт начинающего верстальщика

Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл интерактивные курсы по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

HTML тег meta

Метаинформация — это данные (информация) о данных.

Тег предоставляет метаданные о HTML документе. Метаданные не отображаются на странице, однако могут обрабатываться программами.

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

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

Теги должны всегда находиться внутри тега .

Метаданные определяются в виде пары имя-значение.

Если задается атрибут name или http-equiv, то должен быть задан атрибут content. В обратном случае атрибут content не используется.

Разница между HTML 4.01 и HTML5

Атрибут scheme не поддерживается в HTML5.

В HTML5 был добавлен атрибут charset, который облегчил определение кодировки символов страницы:

В HTML элемент — одиночный элемент без закрывающего тега. В XHTML тег должен закрываться должным образом, а именно — .

Атрибут Описание
charset Определяет кодировку символов HTML документа
content Определяет содержание мета информации
http-equiv Определяет HTTP заголовок для пары данные/значение атрибута content
name Определяет имя для пары данные/значение атрибута content
schema Определяет схему интерпретации значения в атрибуте content

Общие атрибуты

HTML пример

Определяем метаинформацию о HTML документе:

Мета-теги в HTML

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

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

Мета-теги для поисковых систем имеют большую важность, так как они влияют на оптимизацию страницы.

Выпишем все мета-теги для поисковых систем:

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

У данного мета-тега существуют 4 значения:

index, follow — страницу нужно индексировать и переходить по ссылкам на ней.
index, nofollow — страницу нужно индексировать и не нужно переходить по ссылкам на ней
noindex, follow — страницу не нужно индексировать, но нужно переходить по ссылкам на ней
noindex, nofollow — страницу не нужно индексировать, также не нужно переходить по ссылкам на ней.
Обычно вся информация о том, что нужно индексировать, а что нет, содержится в файле robots.txt , который должен быть абсолютно на любом сайте, но о данном файле поговорим в одной из следующих статей.

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

Кратенько напишу о каждом из этих мета-тегов, хотя здесь и так всё прозрачно.
Мета-тег author указывает на автора данной страницы. Очень редко где встречал, разве что новички обычно вставляют его на свой сайт.
Мета-тег generator указывает на то, в чем была сделана данная страница. Обычно данный тег присутствует у всех систем управления контентом (CMS), таких как Joomla, WordPress. И обычно люди убирают данный мета-тег, чтобы скрыть, что их сайт сделан на данной CMS (однако, если взглянуть на код страницы, то итак становится понятно,на чем она сделана).
Мета-тег reply-to указывает на e-mail автора.
Мета-тег site-created указывает на то, когда был создан сайт.
Включать или нет мета-теги для страниц своего сайта — решать вам, но смысла особо большого в этом я не вижу.

Осталась ещё одна группу мета-тегов — это мета-теги для браузера. Это также очень важная группа мета-тегов. Сразу примеры:

Мета-тег Content-type является, на мой взгляд, самым важным мета-тегом, так как в нём указывается тип страницы и кодировка. Если не указывать данный мета-тег, то в будущем могут возникнуть проблемы с кодировкой на сайте . О том, как решить данную проблему, вы можете прочитать в этой статье.
Мета-тег Content-language указывает язык страницы. Обычно браузеры сами распознают язык на странице.
Мета-тег Refresh отвечает за обновление страницы. В данном случае написано, что каждые 10 секунд будет происходить обновление страницы и переход на мой сайт. Автообновление страницы бывает нужным, например для страницы, содержащий заказы интернет-магазина.

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

В данной статье вы узнали что такое мета-теги в HTML и рассмотрели наиболее важные из них.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Список МЕТА-тегов в HTML.

Ну вот и все, можно сказать мы изучили HTML довольно на высоком уровне, мы научились создавать и редактировать HTML-файлы, работать с текстом, цветами, графикой и другими объектами, создавать формы, таблицы, фреймы и многое другое. Но главное для страницы или даже для целого сайта иметь мозги. А где же мозги?, правильно в голове, а голова по английски HEAD и этим тегом мы будем с вами заниматься.

Если опять обратиться к спецификации по ХТМЛ, то согласно ей тег-контейнер HEAD в html-документе, не обязателен и вы его можете вообще не использовать. Но на самом деле это далеко не так и сайт без тега HEAD, как человек без мозгов и содержимое этого тега увеличивает шансы вашего сайта быть в ТОП-10 на 60-80%. Одну из каких начинок мы изучили раньше, это тег-контейнер TITLE, только он дает вес странице процентов на 25-30. Весь остальной вес дают МЕТА-теги.

META-теги в хтмл-файлах представляют браузерам клиентов и роботам поисковых систем дополнительную информацию об документе, например кодировки, описания, ключевые слова, управление индексацией и т.д.
Если на странице используется тег TITLE, то его вставляют первым а уже потом мета теги.
Мета-теги обозначаются тегом . Этот тег в свою очередь делится на две категории:
1)HTTP-EQUIV выполняют роль заголовков, т.е шлет кленту информацию о типе документа, кодировки и многое другое
2)Name выполняет роль описание имени в мета-теге.

Ниже указан список мета-тегов которые используются в HTML:

1)
этот мета-тег как для меня самый важный, он определяет тип документа, а так-же указывает кодировку. В моем примере UTF-8, но может быть и другая например:

2)
Второй по важности мета-тег, который содержит в себе ключевые слова страницы, каждое слово отделено от другого запятой. В этом мета-теге не может быть более 10 слов.

3)
Этот мета-тег выполняет роль краткого описания страницы, и он не может содержать больше 200 символов включая пробелы.

4)
Этот мета-тег управляет индексацией страницы, т.е. разрешает или запрещает индексировать и переходить по ссылкам.
Index — разрешает индексацию
Noindex — запрещает индексацию.
Follow — разрешает переход по ссылкам.
Nofollow — запрещает переход по ссылкам.
All — тоже что content=»index, follow» (принято по умолчанию).
None — тоже что content=»noindex, nofollow».
Но может быть комбинации content=»index,nofollow» и content=»noindex,follow»
Этот мета-тег имеет приоритет над директивами(Allow и Disallow) из файла robots.txt.

5)
Этот мета-тег предоставляет об типе документа и может содержать 2 варианта значения:
Static — статическая страница, индексировать только 1 раз.
Dynamic — динамическая страница, которую нужно периодически пере индексировать.

6)
Этот мета-тег указывает как часто эту страницу нужно пере индексировать, значение задается в днях. Но как на меня лучше все это значение указать в файле sitemap.xml, как изготовить sitemap.xml вы сможете узнать на другом моем проекте.

7)
Этот мета-тег указывает разработчика сайта.

8)
Этот мета-тег указывает владельца сайта.

9)
Этот мета-тег разрешает(cache) или запрещает(no-cache) кеширование страницы браузерами.

Есть еще десятка два мета-тегов, но они насколько устаревшие что их лучше не использовать.

Поиск по тегам:
Список всех тегов
А вы знаете как при помощи каскадных таблиц стилей можно использовать несколько шрифтов одновремено?

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Информация: