Мета теги
Что такое «Мета теги»?
Мета-теги представляют собой часть программного кода сайта, не отображаемую в браузере пользователя при просмотре содержимого веб-ресурса. Они относятся к необязательным атрибутам сайта, которые размещаются в заголовке страницы и могут содержать в себе ее описание, перечень относящихся к странице ключевых слов, сведения об авторе материалов, а также управляющие команды, используемые поисковыми роботами, и другую служебную информацию, которая не предназначена для донесения до пользователя.
Элемент «Мета» применяется в целях технического описания страницы сайта, представляя
собой метаданные, выглядящие как пара «имя-значение». Информация, используемая в
мета-тегах, являясь невидимой для пользователя, в «глазах» поисковой системы способна,
однако, оказаться незаменимой в вопросе корректной индексации страницы веб-ресурса.
С точки зрения HTML мета-теги характеризуются отсутствием конечного тега. Разновидностей мета-тегов насчитывается довольно много (несколько десятков), наиболее часто используемыми при этом являются лишь некоторые из них.
Обобщая сказанное выше, можно сделать вывод: предназначением мета-тегов является предоставление веб-мастеру возможности выполнить максимально точное позиционирование информации, размещаемой в сети Интернет. Действительно, поиск необходимых материалов на просторах всемирной паутины часто напоминает поиск иголки в стоге сена – мета-теги призваны облегчить эту задачу, направляя поисковые машины в нужном направлении. Вот почему мета теги активно используются при продвижении сайтов.
Какие мета теги учитываются поисковыми системами?
Кроме основных тегов HTML, которые нужны для разметки веб-страницы, есть и специальные теги, которые носят название мета теги. Они описывают свойства веб-документов.Некоторые мета-теги следует применять обязательно, а другие могут вноситься на страницу только по желанию веб-мастера.
Мета-тегов очень много, но не все они востребованы. Мета-теги находятся в HTML-коде
внутри тега HEAD. Бывают два основных вида таких тегов:
1. Мета-теги вида NAME описывают конкретную страницу, они указывают адрес создателя,
информацию о нем и так далее. Для поисковиков важным является краткое описание страницы,
основные ключевые слова. К этому виду относятся: Title, Description, Keywords, Author,
Generator, Robots, Copyright, Subject, Resource-type,Revisit, URL и так далее.
Рассмотрим мета-теги, которые учитываются поисковыми системами и играют большую роль. Это Title, Description и Keywords. Остальные мета-теги принимаются во внимание поисковиками, но в гораздо меньшей степени.
Title, наиболее важный мета тег обозначающий заголовок страницы. Содержание этого мета тега является подсказкой поисковым машинам и пользователям — что описано на данной страничке.
Description является кратким описанием конкретной веб-странцы. Важно, чтобы для каждой страницы сайта был свой мета-тег. Такое описание обычно принимают во внимание абсолютно все поисковые системы, отображая сайты в своей поисковой выдаче.
Keywords менее значим, но его тоже желательно прописывать в кодах. В нем указываются самые употребляемые на странице ключевые слова.
Как правильно заполнять мета теги?
Мета-теги являются HTML тегами, они указывают поисковым системам краткое описание содержания документа. Особого внимания заслуживают метатеги Title и Description.
Title определяет заголовок, а Description содержимое каждой HTML-страницы. Сначала Description использовали поисковики, как сниппет, то есть текст, расположенный под заголовком страницы в выдаче. Но в настоящее время сниппеты формируются интеллектуально, то есть из текста всей страницы выбирают часть, которая самая релевантная по запросам пользователей.Именно она будет сниппетом.
Но зачастую бывает, что сниппет для страницы формируется и из текста, который расположен
в мета-теге description. Поэтому важно правильно его заполнить и обратить на него свое
пристальное внимание.
А заполняется он таким образом:
[META name=”description” content=” Детские игрушки, куклы и пупсы отечественного
производителя, вы сможете выбрать недорогие игрушки..” ]
Описание может быть любой длины, но в выдаче будет только часть текста, поэтому основные ключевые фразы надо располагать в самом начале.
Keywords тоже располагается внутри тега head в HTML-документах. Прописывают мета-теги
этого вида таким образом:
[META name=”keywords” content=”детские игрушки, куклы от производителя в Москве,
велосипеды”]
Не нужно прописывать одну и ту же фразу или ключевик очень часто. И обязательно нужно делать отдельные мета-теги для каждой страницы.
Учебник HTML 5. Статья «Метаданные в HTML»
Тег <meta> обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.
Мета элементы, как правило, используются, чтобы указать описание страницы, ключевые слова, автора документа и другие метаданные. Разрешается и, как правило, необходимо использовать несколько метатегов. Тег <meta> всегда размещается внутри тега <head>.
Указание кодировки документа
Тег <meta> позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset (HTML тега <meta>) задает кодировку символов для HTML документа.
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" > <!-- задаем кодировку документа UTF-8 --> <title>Пример использования тега <meta></title> </head> <body> <h3>Это заголовок.</h3> <p>Это параграф.</p> </body> </html>
В данном примере мы задали кодировку документа UTF-8 с использованием элемента <meta> и атрибута charset. Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.
Стандарт HTML 5 не запрашивает конкретную кодировку, но дает рекомендацию использовать кодировку UTF-8. Не рекомендуется использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU и UTF-32 по различным причинам.
Считается хорошей практикой, и настоятельно рекомендуется определять набор символов (кодировку), используя атрибут charset. Атрибут charset является лишь частью алгоритма определения кодировки страницы браузером. Рекомендуется указывать кодировку символов первым <meta> элементом (если используется несколько). Обратите внимание, что для одного документа указывается только одна кодировка.
В теории, любая кодировка может быть использована, но ни один браузер не понимает их все. Используя более распространенную кодировку символов, увеличивает шанс того, что браузер будет её понимать. Полный перечень кодировок доступен на сайте iana.org.
Часто используемые мета-теги
Метаданные разделены на две основные группы:
- первая группа — значения атрибута name.
- вторая группа — значения атрибута http-equiv.
Атрибут name отвечает за текстовую информацию о странице, её авторе, содержит рекомендации для поисковых систем, а атрибут http-equiv формирует гипертекстовый заголовок страницы и определяет его обработку.
Совместно с элементом <meta> используется еще один атрибут — content, его основная задача заключается в том, чтобы задать значения, связанное с атрибутами name и http-equiv, в зависимости от контекста. Если один из этих атрибутов указан, то атрибут content должен обязательно присутствовать, чтобы задать значение. Если атрибут http-equiv используется, то атрибут name не должен устанавливаться в мета-теге.
Рассмотрим часто используемые варианты использования тега <meta>:
<meta name = "description" content = "Бесплатные уроки по созданию сайтов" >
Описание в данном теге довольно важное, его учитывают поисковые машины при индексации. Атрибут content в данном примере содержит описание конкретной веб-страницы сайта. Не рекомендуется использовать длинные описания.
<meta name = "keywords" content = "HTML, CSS, JavaScript">
Представляет собой список ключевых слов (касающиеся конкретной страницы). Ходит много споров о том учитывается или нет поисковыми системами это значение, исходя из перечня, используемых метатегов в Google, то он не учитывает этот мета тег, а Яндекс, в некоторых случаях оставляет за собой право его использовать.
Определяет автора контента:
<meta name = "author" content = "Denis Bolshakov">
Давайте рассмотрим пример использования этих мета тегов:
<!DOCTYPE html> <html> <head> <meta name = "description" content = "Бесплатные уроки по созданию сайтов" > <!-- мета элемент, который описывает содержимое документа --> <meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery"> <!-- мета элемент, который описывает ключевые слова в документе --> <meta name = "author" content = "Denis Bolshakov"> <!-- мета элемент, который указывает имя автора документа --> <title>Пример использования атрибутов name и content</title> </head> <body> <h3> Это заголовок.</h3> <p>Это параграф. </p> </body> </html>
В данном примере мы использовали три элемента <meta>:
- первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description), а текстовое содержимое указали в атрибуте content. Это описание могут использовать поисковые машины для отображения результатов поиска.
- второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords), а текстовое содержимое указали в атрибуте content. Ключевые слова могут использоваться некотрыми поисковыми машинами.
- третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author), а имя автора указали в атрибуте content.
Атрибут http-equiv
Атрибут http-equiv фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками. Название заголовка указывается в атрибуте http-equiv, а значение указывается в атрибуте content. В некоторых случаях могут автоматически быть переведены в настоящие HTTP-заголовки.
Давайте рассмотрим пример его использования:
<!DOCTYPE html> <html> <head> <meta http-equiv = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- мета элемент, который указывает, что страница будет перезагружена через 15 секунд и перейдет по указанному URL --> <meta http-equiv = "content-security-policy" content = "default-src https:" > <!-- мета элемент, который разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https --> <title>Пример использования атрибута http-equiv тега <meta></title> </head> <body> <h3> Это заголовок.</h3> <p>Это параграф. </p> </body> </html>
В данном примере мы использовали три элемента <meta> для которых были указаны различные значения атрибута http-equiv:
- первый мета элемент, указывает, что страница будет перезагружена (значение refresh) через 15 секунд и перейдет по указанному URL (значения, указанные в атрибуте content). Если адрес URL не указан, то страница просто будет перезагружена.
- второй мета элемент разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https. Это стало доступным благодаря использованию значения content-security-policy, которое позволяет с использованием атрибута content определить правила (политику) для обслуживаемых ресурсов.
Индексация страниц
Используется поисковыми системами при индексации страниц:
<meta name = "robots" content = "noindex, follow">
Доступные значения:
| Значение атрибута | Определение |
|---|---|
| noindex | запрещает индексирование документа. |
| nofollow | запрещает проход по ссылкам в документе. |
| index | разрешает индексирование документа. |
| follow | разрешает проход по ссылкам в документе. |
Настройка области просмотра
Обращаю Ваше внимание на то, что область просмотра определяет, как веб-страница отображается на мобильном устройстве, если она не задана, то ширина страницы считается равной стандартному значению, и она уменьшается на мобильном устройстве, чтобы поместиться на его экране.
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
- Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
- Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
- Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).
Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.
Доступные значения:
| Значение атрибута | Определение |
|---|---|
| width | Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width). |
| height | Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height). |
| initial-scale | Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0. |
| minimum-scale | Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale). Значение — положительное целое число от 0.0 до 10.0. |
| maximum-scale | Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale). Значение — положительное целое число от 0.0 до 10.0. |
| user-scalable | Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб). |
Управление режимами Internet Explorer
Заключительный мета-тег, который должен присутствовать на Ваших страницах, позволяет в зависимости от указанного значения content сообщить браузеру Internet Explorer как отображать документ (в каком режиме) в зависимости от версии, которая используется в данный момент:
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
Атрибут content задает режим для страницы, например, чтобы имитировать работу Internet Explorer 7, укажите IE=EmulateIE7. Укажите IE=5, IE=7 или IE=8, чтобы выбрать один из этих режимов совместимости. Также можно задать IE=edge, чтобы использовать в Internet Explorer 8 наивысший доступный режим. Значение IE=edge сообщает браузеру пользователя, что необходимо использовать последний доступный режим отображения документа, используйте это значение на своих страницах.
Грамотное размещение метаданных на каждой странице Вашего сайта, сделает его привлекательным для поисковых машин и упростит процесс индексации.
Вопросы и задачи по теме
Перед тем как перейти к изучению СSS 3 ответьте на следующий вопрос:
- Какие четыре мета тега необходимо обязательно использовать, если страница Вашего сайта информационная и адаптирована под мобильные приложения?
Показать ответ
1. Настоятельно рекомендуется определять набор символов (кодировку) в документе:
<meta charset = "utf-8" >
2. Описание в следующем мета-теге довольно важное, его учитывают поисковые машины при индексации и используют в поисковой выдаче:
<meta name = "description" content = "Одно два предложения, содержащихся в тексте" >
3. Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо использовать следующий мета-тег:
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
4. Для корректного (однотипного) отображения страниц в браузерах Internet Explorer необходимо использовать следующий мета-тег:
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">Начать обучение CSS 3
Какие бывают мета-теги (метатеги)?
Что такое мета-теги?
Начнем с того, что «мета-теги» или «метатеги» — это теги, содержащие в себе информацию, которая предназначена для браузеров, поисковых систем, программного обеспечения и сервисов, которые так или иначе могут взаимодействовать с вашим веб-приложением (сайтом).
Такие теги могут нести в себе описание страницы (например, ключевые слова и само описание), информацию об авторских правах или самом авторе, указания браузеру на какие-то внешние или внутренние механизмы обработки страницы и даже команды браузеру, а также правила «поведения» для поисковых систем.
Нужно заметить, что правильное написание («мета-теги» или «метатеги») нигде не регламентировано, а следовательно, здесь вы можете шалить как душе угодно. На википедии оперируют метатегами и мета-тегами наравне. Но не будем о грустном мира сего, пойдём дальше.
Сразу же нужно уяснить, что не всякий тег имеет приставку мета. Мета-тегом он будет называться, если находится между тегами <head>...</head> и его содержимое как-то соотносится с тем, что умеет браузер.
Отсюда вытекает следующая проблема — не все браузеры понимают некоторые специфичные мета-теги. Например, мета-тег theme-color, который предназначен для мобильных версий браузера Chrome никак не повлияет на, допустим, сам Chrome, который запущен на десктопе. Иначе говоря, те браузеры, что не могут соотнести мета-тег с функционалом, который в них заложен — просто игнорируют его.
На самом деле так же дела обстоят и с другими тегами. Недавно перешедшая в статус официальной рекомендации спецификация HTML5, содержит в себе реинкарнацию элемента dialog, который до сих пор поддерживается только Chrome и Opera. Однако, это не значит, что в других браузерах этот элемент и его содержимое будет игнорироваться вовсе — он просто будет обычным тегом, например, таким, как <div>. Разумеется, что и доступное для него API (по спецификации) в таком браузере не будет реализовано, хотя в DOM такой элемент будет, и его содержимое будет отображаться на странице.
Как использовать мета-теги?
Так как же использовать мета-теги? — поверьте, очень просто. Достаточно лишь запомнить основные из них и применять тогда, когда это необходимо
<!doctype html>
<head>
<meta charset="utf-8">
<title>Canonium?!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Блог для тех, кто делает сайты — от того, кто делает сайты.">
</head>
<body>
...
</body>
</html>
Всё это вы должны уже знать, так как мой блог не рассчитан на обучение с нуля, да и на профессионалов своего дела тоже, так как одним будет не понятно о чём здесь речь, а другим будет скучно. Поэтому не будем вдаваться в подробности, перейдём к сути статьи.
Какие бывают мета-теги?
Вот и настал тот самый момент, когда вы сможете увидеть хоть что-то интересное или не очень интересное… или совсем не интересное… В любом случае, поехали!
В этой части статьи собран джентльменский набор мета-тегов для веб-приложений.
Джентльменский набор
Такие мета-теги есть практически на всех сайтах, они распространены и популярны. Без них жизнеспособность вашего сайта под вопросом.
Кодировка
<meta charset="кодировка">
Этот мета-тег указывает кодировку страницы, чаще всего utf-8.
Описание страницы
<meta name="description" content="описание страницы">
Описание вашего сайта. Максимум 150 символов, поэтому подумайте над его содержимым.
Ключевые слова
<meta name="keywords" content="ключевые слова через запятую">
Ключевые слова, которые отображают всю суть содержимого страницы или сайта. Необходим для SEO. Поговаривают, что количество ключевых слов должно быть не больше 10 штук.
Устарел или устаревает, так как поисковые системы сами в состоянии определить ключевые слова страницы и умеют игнорировать содержимое этого тега, если оно не соотносится с содержимым страницы.
Режим совместимости (отображения)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Этот мета-тег управляет режимом отрисовки (рендеренга) страницы.
Подробнее можно почитать у Вадима Макеева.
Область просмотра
<meta name="viewport" content="width=device-width, initial-scale=1">
Область просмотра определяет, как веб-страница отображается на мобильном устройстве.
Подробнее можно узнать у Google Developers.
Robots
<meta name="robots" content="index, follow">
Альтернатива robots.txt. Всё тоже самое, только в упрощенном виде и для конкретной страницы.
Подробнее про файл robots.txt и конкретно про мета-тег.
Автор
<meta name="author" content="humans.txt">
На самом деле, вместо humans.txt некоторые пишут своё ФИО, почту и прочее. Однако, я советую писать humans.txt, так как в нём вы можете полностью описать состав вашей команды, конечно, если вы не корпорация, где над сайтом трудится не один десяток человек.
Подробнее про файл humans.txt.
Копирайт
<meta name="copyright" content="информация о вашей фирме">
Всегда можно указать владельца сайта, если владелец не частное лицо, а, например, фирма. Обычно не указывается, так как для этого используется тег author.
Полезные мета-теги
Разумеется, что все мета-теги перечислять очень долго, и я даже почти уверен, что смогу упереться в ограничение поля content, у которого стоит тип TEXT (65К символов), в Anchor CMS. Поэтому дальнейшие мета-теги я приведу списком, который будет разделён на категории, сопровождаемые небольшими комментариями и будет содержать интересные на мой взгляд теги.
Контент
// Основной язык страницы
<meta name="language" content="язык (RU, EN, ES и т.д.)">
// Установка языка
// Не рекомендуется использовать:
// http://www.w3.org/International/questions/qa-http-and-lang.ru.php
<meta http-equiv="Content-Language" content="en">
// Дата последнего обновления содержимого страницы
<meta name="revised" content="дата">
Apple
Оптимизация страниц для мобильных платформ сейчас очень важна, поэтому постарайтесь не забыть про них.
// Название веб-приложения
<meta name="apple-mobile-web-app-title" content="название веб-приложения">
// Полноэкранный режим (минимизация верхнего бара браузера)
<meta name="apple-mobile-web-app-capable" content="yes">
// Устанавливает стиль строки состояния для веб-приложения
<meta name="apple-mobile-web-app-status-bar-style" content="black">
// Управление обнаружением телефонных номеров
<meta name="format-detection" content="telephone=no">
// Иконка для веб-приложения, отображаемая в закладках и на рабочем столе
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon-152x152.png">
// Изображение, которое отображается при открытии закладки с рабочего стола
<link rel="apple-touch-startup-image" href="images/touch/startup.png">
Не путайте link и meta — это разные теги. Тег link не является по сути своей мета-тегом, так как предоставляет информацию браузеру о том, с какими внешними ресурсами связана открытая страница.
Android
Всё тоже самое, но для зелёного лагеря 🙂
// Название веб-приложения
<meta name="application-name" content="название веб-приложения">
// Полноэкранный режим (минимизация верхнего бара браузера)
<meta name="mobile-web-app-capable" content="yes">
// Цвет заголовка у вкладки
<meta name="theme-color" content="#hex-цвет">
// Иконка для веб-приложения, отображаемая в закладках и на рабочем столе
<link rel="icon" href="images/touch/chrome-touch-icon-192x192.png">
Windows 8
Раз уж речь зашла про мобильные платформы, то будет плохим тоном обойти Windows 8 и его верного спутника Internet Explorer.
// Название веб-приложения
<meta name="application-name" content="название веб-приложения">
// Содержат текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню "Пуск" Windows или на рабочем столе
<meta name="msapplication-tooltip" content="подсказка">
// Определяет пользовательский цвет кнопок Назад и Вперед в окне браузера закрепленного сайта
<meta name="msapplication-navbutton-color" content="#hex-цвет">
// Определяют исходный размер окна закрепленного сайта при первом запуске
<meta name="msapplication-window" content="width=1024;height=768">
// Цвет плитки (тайла)
<meta name="msapplication-TileColor" content="#hex-цвет">
// Изображение для старого типа тайлов
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
// Изображение для нового типа тайлов (XXxYY) [70x70 | 150x150 | 310x150 | 310x310]
<meta name="msapplication-squareXXxYYlogo" content="images/tile.png">
Open Graph и Twitter
Мета-теги для организации разметки Open Graph. Что это такое и с чем это едят, можно узнать на web-koshka.ru.
К вашему сожалению, привожу список тегов без описания, так как всё это написано и собрано в документации к протоколу и присутствует у Яндекса на русском языке.
Заинтересованным в продвижении своего веб-приложения обязательно к просмотру и изучению, так как на основе Open Graph строится «карточка» сайта при, допустим, нажатии на кнопку социальных сетей (если не задано специальными тегами самих сетей).
// Обязательные поля
<meta property="og:title" content="The Rock">
<meta property="og:type" content="movie">
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/">
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg">
<meta property="og:site_name" content="IMDb">
<meta property="og:description" content="A group of U.S. Marines, under command of...">
// Месторасположение
<!-- см. комментарий в конце статьи от Дениса Семенова -->
// Видео
<meta property="og:video" content="http://example.com/awesome.swf">
<meta property="og:video:height" content="640">
<meta property="og:video:width" content="385">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content="http://example.com/html5.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video" content="http://example.com/fallback.vid">
<meta property="og:video:type" content="text/html">
// Аудио
<meta property="og:audio" content="http://example.com/amazing.mp3">
<meta property="og:audio:title" content="Amazing Song">
<meta property="og:audio:artist" content="Amazing Band">
<meta property="og:audio:album" content="Amazing Album">
<meta property="og:audio:type" content="application/mp3">
К счастью или к сожалению, Twiter пошел своей дорогой и создал свои карточки. У Facebook есть дополнительные мета-теги.
Супер-пупер-гипер-мега-ультра-сверх-листинг
Для самостоятельных, независимых и отверженных людей предоставляю ссылку на список всех валидных HTML5 мета-тегов — клац. Все мета-теги приведены с описаниями и ссылками на соответствующие спецификации. Правда, всё это на английском языке, но это мелочи.
Пользовательские мета-теги
Помимо тех мета-тегов, которые можно увидеть в супер-пупер-гипер-мега-ультра-сверх-листинге, никто не запрещает писать свои мета-теги, необходимые для каких-то личных нужд.
Например, так поступают некоторые сервисы, предоставляющие какие-то услуги:
<meta name="google-analytics" content="1-AHFKALJ">
<meta name="disqus" content="abcdefg">
<meta name="uservoice" content="asdfasdf">
<meta name="mixpanel" content="asdfasdf">
Заключение
Эта небольшая статья основана на найденном мной ещё в том году листинге мета-тегов от Lance Pollard, когда мне самому стала интересна эта тема. Поэтому не удивляйтесь, что раздел с мета-тегами Open Graph полностью скопирован оттуда.
По поводу того, стоит ли применять те или иные теги — решать вам. Как бы то ни было, в любом случае, набор мета-тегов для вашего сайта (веб-приложения) будет индивидуальным и строиться на тематике сайта, его возможностях и прочих аспектах.
Например, для интернет-магазина и блога, как мне кажется, просто необходимы кнопки по типу «рассказать друзьям», а отсюда вытекает необходимость работы с мета-тегами Open Graph или настройками этих кнопок для удовлетворительного отображения карточки товара или записи в ленте социальной сети. Для магазина (интернет-магазина) также пригодятся мета-теги месторасположения и контактной информации, которая вроде как может отображаться при поиске и на карте (поиск этой информации целиком и полностью на вас).
Другим примером может послужить веб-приложение, по типу Github, которое использует протокол Open Graph и карточки Twitter, иконки для мобильных платформ, оформление плиток (тайлов) для Windows 8.x и даже свои собственные мета-теги.
Поэтому старайтесь относиться с умом к использованию мета-тегов на страницах вашего проекта. Да, лишние мета-теги не помешают ему, но и не прибавят ему веса для поисковых систем. Не будем рассуждать тут о SEO и прочих шалостях, так как я в этом не особо силён, если не сказать, что практически вообще не бум-бум 🙂
Хотя, как мне кажется, сейчас поисковые системы в большей степени обращают своё внимание на содержимое страницы и базовые мета-теги, нежели чем на миллион и ещё один дополнительный мета-тег.
Мета-теги в HTML | мета-тег description
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание форм в HTML. В данной статье я бы хотел поговорить о мета-тегах в HTML. По сути, мета-теги несут в себе специальную служебную информацию и делятся на несколько типов: для поисковых систем, для страницы, для браузера. Сразу скажу, что все мета-теги вставляются в заголовок документа, т.е. между тегами <head> и </head>.
Давайте постепенно начнем разбираться с мета-тегами для поисковых систем.
Мета-теги для поисковых систем имеют большую важность, так как они влияют на оптимизацию страницы.
Выпишем все мета-теги для поисковых систем:
<meta name="description" content="Мета-теги в HTML - в данной статье вы можете прочитать обо всех мета-тегах в HTML"/> <meta name="keywords" content="Мета-теги HTML, мета-теги для поисковых систем, мета-теги для браузера, мета-теги для страницы"/> <meta name="robots" content="noindex,nofollow"/>
Мета-тег description отвечает за описание страницы, рекомендую ставить на каждой странице, так как данный мета-тег влияет на выдачу в поисковой системе.
Мета-тег keywords содержит все ключевые слова, которым соответствует ваша страница, также рекомендую ставить на каждой странице вашего сайта.
Мета-тег robots необходим для того, чтобы сказать поисковой системе нужно ли индексировать данную страницу и переходить по ссылкам на ней.
У данного мета-тега существуют 4 значения:
index, follow — страницу нужно индексировать и переходить по ссылкам на ней.
index, nofollow — страницу нужно индексировать и не нужно переходить по ссылкам на ней
noindex, follow — страницу не нужно индексировать, но нужно переходить по ссылкам на ней
noindex, nofollow — страницу не нужно индексировать, также не нужно переходить по ссылкам на ней.
Обычно вся информация о том, что нужно индексировать, а что нет, содержится в файле robots.txt, который должен быть абсолютно на любом сайте, но о данном файле поговорим в одной из следующих статей.
Давайте теперь разберем мета-теги для страницы. Сразу отмечу, что мета-теги для страницы необязательны и несут в себе лишь ознакомительную информацию. Напишем наиболее встречаемые из них:
<meta name = "author" content = "Aleksey Gulynin" /> <meta name = "generator" content = "Wordpress" /> <meta name = "reply-to" content = "[email protected]" /> <meta name = "site-created" content = "25.05.2014" />
Кратенько напишу о каждом из этих мета-тегов, хотя здесь и так всё прозрачно.
Мета-тег author указывает на автора данной страницы. Очень редко где встречал, разве что новички обычно вставляют его на свой сайт.
Мета-тег generator указывает на то, в чем была сделана данная страница. Обычно данный тег присутствует у всех систем управления контентом (CMS), таких как Joomla, WordPress. И обычно люди убирают данный мета-тег, чтобы скрыть, что их сайт сделан на данной CMS (однако, если взглянуть на код страницы, то итак становится понятно,на чем она сделана).
Мета-тег reply-to указывает на e-mail автора.
Мета-тег site-created указывает на то, когда был создан сайт.
Включать или нет мета-теги для страниц своего сайта — решать вам, но смысла особо большого в этом я не вижу.
Осталась ещё одна группу мета-тегов — это мета-теги для браузера. Это также очень важная группа мета-тегов. Сразу примеры:
<meta http-equiv = "Content-type" content = "text/html; charset = utf-8" /> <meta http-equiv = "Content-language" content = "ru" /> <meta http-equiv = "Refresh" content = "10; url = https://alekseygulynin.ru" />
Мета-тег Content-type является, на мой взгляд, самым важным мета-тегом, так как в нём указывается тип страницы и кодировка. Если не указывать данный мета-тег, то в будущем могут возникнуть проблемы с кодировкой на сайте. О том, как решить данную проблему, вы можете прочитать в этой статье.
Мета-тег Content-language указывает язык страницы. Обычно браузеры сами распознают язык на странице.
Мета-тег Refresh отвечает за обновление страницы. В данном случае написано, что каждые 10 секунд будет происходить обновление страницы и переход на мой сайт. Автообновление страницы бывает нужным, например для страницы, содержащий заказы интернет-магазина.
Домашнее задание: создайте тестовую страницу и сделайте, чтобы каждые 5 секунд страница обновлялась, без перехода на другой ресурс.
В данной статье вы узнали что такое мета-теги в HTML и рассмотрели наиболее важные из них.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Следующая статья >
Тег meta — служебные команды
Тег meta задает некоторые служебные
команды браузеру или поисковым системам:
кодировку страницы, описание страницы для
поисковиков, автора страницы и так далее.
Принцип работы тега такой (за некоторым исключением):
задается имя команды (в атрибуте name или в атрибуте http-equiv), а значение
команды задается в атрибуте content.
По сути данный тег содержит в себе группу
тегов (команд), общее название которым мета-теги
Тег meta не требует закрывающего тега.
Тег meta следует использовать внутри
тега head.
Популярные примеры использования
Кодировка документа
В настоящее время стандартом кодировки является utf-8. Теоретически явно (через тег meta) кодировку можно и не задавать
— браузер должен вас понять. На практике
я бы не советовал так поступать — кодировка
может сбиться и вместо русского текста вы
увидите крокозябры.
В HTML5 кодировка задается в упрощенном виде:
<meta charset="utf-8">
Раньше кодировка задавалась так (сейчас так делать не стоит, устарело, можете встретить в устаревающих учебниках):
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Описание документа
Мета-описание документа предназначено для поисковиков, в нем должно лежать краткое описание страницы. Из этого описания при некоторых условиях поисковик может сделать сниппет страницы сайта. Сниппет — это короткое описание страницы сайта при поиске. Соответственно мета-описание страницы следует делать таким, каким вы хотите видеть сниппет страницы на поиске и для каждой страницы сайта свое.
Пользоваться следует так:
<meta name="description" content="Эта страница рассказывает от мета-тегах.">
Ключевые слова документа
Мета-keywords (ключевые слова) предназначены для поисковиков, чтобы указать самые главные слова, по которым будут искать страницу. В настоящее время из-за злоупотреблений со стороны веб-мастеров поисковики не придают значения этому мета-тегу.
Пользоваться следует так (ключевые слова и фразы перечисляются через запятую):
<meta name="keywords" content="Метатег, Мета-описание, HTML редирект" >
Редирект (перебрасывание на другую страницу)
Можно сделать, чтобы при заходе на некоторую страницу пользователя автоматически перебрасывало на другую (например, если страница переехала). Пользоваться так (5 — это количество секунд, через которые произойдет переброс):
<meta http-equiv="refresh" content="5; url=http://www.example.com/">
Больше примеров
Больше примеров вы можете найти по данной ссылке.
Возможные атрибуты
| Атрибут | Описание |
|---|---|
name | Имя мета-тега. Значение мета-тега с данным именем задается атрибутом content. |
http-equiv | Позволяет устанавливать http заголовки, для отправки их в браузер.
Задает имя заголовка. Значение заголовка задается атрибутом content. |
content | Устанавливает значение атрибута, заданного с помощью атрибута name или http-equiv. |
charset | Задает кодировку документа. В настоящее время стандартом является utf-8. |
Html мета-ключевые слова должны содержать запятые?
важно ли использовать запятые в мета-ключевых словах?
А что, если у меня нет запятых?
html meta-tagsПоделиться Источник Unknown 08 марта 2009 в 13:15
5 ответов
- Мета-ключевые слова-используйте слова или фразы?
Я знаю, что релевантность мета-ключевых слов практически отсутствует, но мой клиент хочет их получить. Более того, они дали мне список ключевых фраз. Должен ли я вставлять ключевые фразы, разделенные запятыми, даже если они повторяют определенные ключевые слова, или я должен включать каждое…
- cakephp разделенные мета-ключевые слова и описание
У меня есть сайт, сделанный с cakephp . он имеет 3 уровня дома, разделы, статьи Я разделил мета-ключевые слова & описание для каждого раздела & каждой статьи. Я поставил мета-описание для домашней страницы Вот так <? if($title_for_layout==Home){?> <title><?php echo…
10
В соответствии со стандартами W3 :
- Некоторые механизмы индексирования ищут элементы META, которые определяют разделенный запятыми список keywords/phrases, или дают краткое описание . Поисковые системы могут представить эти ключевые слова как результат поиска. Значение атрибута name, которое ищет поисковая система, не определяется этой спецификацией .
Другими словами, стандарт HTML не определяет, как должен выглядеть meta с name="keywords" . Все зависит от того, на что вы нацелены. Некоторые поисковые системы используют запятые в теге keywords meta для разделения ключевых слов. Некоторые полностью игнорируют такие теги meta .
Поделиться strager 08 марта 2009 в 13:19
4
Что, если у меня нет запятых?
Тогда ваше ключевое слово-это вся фраза вместе взятая. Поэтому с ключевыми словами “лимонный торт” он не будет совпадать, когда вы ищете только “lemon” или “cake”.
На самом деле мета-ключевые слова в лучшем случае не более эффективны, чем просто включение слов в вашу страницу, а в худшем-полное игнорирование. Так что использовать его очень мало смысла.
Поделиться bobince 08 марта 2009 в 15:57
2
На самом деле большинство поисковых систем игнорируют мета-элемент ключевого слова. Так что на самом деле вы можете просто стереть его и сохранить несколько байтов… 😛
Поделиться Saebekassebil 08 марта 2009 в 13:43
0
Я согласен, что вы, вероятно, можете просто игнорировать тег, так как, например, Google их не использует. Yahoo однако, похоже, использует его (по крайней мере, в конце 2007 года), поэтому, если вам нужна дополнительная информация, я нашел эту статью интересной для чтения.
Поделиться jeroen 08 марта 2009 в 14:52
-3
Нет, просто пробел … по крайней мере, это работает для меня 🙂
Поделиться Martin Janiczek 08 марта 2009 в 13:17
Похожие вопросы:
Почему веб-разработчики до сих пор используют мета-ключевые слова и теги мета-описания?
Google вообще не использует тег meta-keywords , потому что ключевые слова в основном используются для спама поисковых систем. Google не использует мета-тег description на ранжирование. Иногда тег…
regex чтобы получить мета-ключевые слова
Привет, я надеялся, что кто-то может помочь мне с этим regex. Я хочу сопоставить патерн ниже один раз, чтобы извлечь мета-ключевые слова со страницы: .match(/(<meta…
Мета ключевые слова и google
Я вспоминаю статью (сотрудника Google), в которой говорится, что ключевые слова теперь устарели относительно SEO. Это может быть правдой, но возможно ли, что мета-ключевые слова могут определять…
Мета-ключевые слова-используйте слова или фразы?
Я знаю, что релевантность мета-ключевых слов практически отсутствует, но мой клиент хочет их получить. Более того, они дали мне список ключевых фраз. Должен ли я вставлять ключевые фразы,…
cakephp разделенные мета-ключевые слова и описание
У меня есть сайт, сделанный с cakephp . он имеет 3 уровня дома, разделы, статьи Я разделил мета-ключевые слова & описание для каждого раздела & каждой статьи. Я поставил мета-описание для…
Генерируйте мета-ключевые слова и мета-описание в asp.net mvc4
Я хочу визуализировать мета-ключевые слова и мета-описание в asp.net mvc4. В _layout.cshtml я добавляю необязательный раздел: @RenderSection(Header, required: false) и я определяю мета-теги на любой…
Ключевые слова мета-тег: полезно или расточитель времени?
Я всегда помещаю мета-ключевые слова на страницы своих сайтов. Но до меня дошли слухи, что вы не обязаны этого делать. Должен ли я продолжать размещать ключевые слова на своих страницах или это…
Мета ключевые слова с переменной на блоггере
я постараюсь определить мета-ключевые слова на шаблонах блоггера для каждого поста. Я использую метку поста как ключевые слова. <b:if cond=’data:post.labels’> <b:loop…
как динамически изменять мета-заголовок,мета-ключевые слова,мета-описание в AngularJs 1.x?
Я планирую динамически изменять мета-заголовок,мета-ключевые слова и мета-описание,используя AngularJS 1.x для отражения в Facebook,Twitter, Google Plus и LinkedIn. Есть ли способ динамично…
Целесообразно ли использовать мета-ключевые слова (2017)?
По-прежнему ли целесообразно использовать мета-ключевые слова в дизайне сайта? Поиск в Google, похоже, предполагает, что они попали в немилость у поисковых систем.
Мета Теги.
Тег <head> не содержит никаких атрибутов, однако внутри этого тега содержатся дополнительные теги, которые влияют на отображение web — страницы браузером, а также содержат информацию, представляющую интерес для поисковых систем. Такие теги носят название метатегов.
Внутри тега <head> могут содержаться следующие теги:
- <title> — данный тег мы разбирали в прошлом уроке.
- <meta> — данный тег задает различную служебную информацию. Данный тег не требует закрывающего тега. На одной web – странице можно использовать несколько тегов <meta>, т.к. в зависимости от используемых атрибутов, они могут нести разную информацию. Тег <meta> имеет множество атрибутов, которые часто называют мета тегами. Все мета теги можно объединить в 2 группы: HTTP-EQUIV и NAME.
Мета Теги группы http-equiv.
Группа мета тегов «http-equiv» дает браузеру информацию о том, как следует обрабатывать тот или иной документ. Сюда входят следующие метатеги:
- Content-Type – этот метатег определяет тип содержимого документа и его кодировку. Метатег имеет атрибут «content», в котором задается значение для данного метатега. Для примера, возьмем такую запись: <meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />. В данном случае задается метатег «content-type» из группы «http-equiv», а атрибут «content» задает значения для этого метатега. Значение «text/html» описывает тип содержимого документа и означает, что документ имеет html – формат (есть и другие типы содержимого, например, «image/png», «image/gif», «video/mpeg», «text/css» и «audio/basic»). Атрибут «charset» устанавливает кодировку документа. В данном случае атрибуту «charset» присваивается значение «windows-1251», что означает, что данная web – страница имеет кодировку «windows-1251». Если бы атрибут «charset» имел бы значение «utf-8», то это означало бы, что данная страница имеет кодировку «utf-8». Если вы не укажите кодировку, то браузеры могут неправильно отобразить вашу web – страницу, а поисковые системы неправильно проиндексировать документ. Здесь необходимо запомнить, что когда вы создаете web — страницу (например, с помощью «блокнота»), то при её сохранении вы должны вибирать кодировку, указанную в атрибуте «charset».
-
Expires – этот метатег управляет кэшированием документа. Если дата, указанная в атрибуте «content» прошла, то браузер должен повторно загрузить web – страницу с сервера, а не использовать копию из кэша. Дата записывается в формте [RFC850] на английском языке, например, Sun, 01 Oct 2012 15:09:00 GMT+3. Пример записи мета тега Expires: <meta http-equiv=»expires» content=»Sun, 01 Oct 2012 15:09:00 GMT+3″ />
-
Pragma управляет кэшированием документа. Он также имеет атрибут «content», который может принимать только одно значение «no-cash», устанавливающее запрет на кэширование документа. Соответственно, чтобы запретить кэширование той или иной web – страницы необходимо записать <meta http-equiv=»pragma» content=»no-cache» />.
- Refresh позволяет автоматически обновить web – страницу или загрузить вместо текущей страницы другую web – страницу. В атрибуте «content» указывается время через которое обновится страница или время и URL – адрес страницы, которая загрузится на место текущей страницы. Например, запись<meta http-equiv=»Refresh» content=»10″ /> позволяет автоматически обновлять текущую страницу каждые 10 секунд. Запись<meta http-equiv=»Refresh» content=»5; URL=http://www.site.ru» /> позволит через 5 секунд загрузить на место текущей страницы страницу с URL – адресом http://www.site.ru. Данный метатег полезен в тех случаях, когда страницы с данным адресом уже не существует и посетителя необходимо перебросить на новую страницу.
-
Content-language является аналогом атрибута «lang» тега <html> и определяет язык текущей web – страницы. В атрибуте «content» указывается значение для этого метатега. Ниже представлена таблица, в которой перечислены некоторые из допустимых значений.
| de | немецкий |
| en | английский |
| En-GB | английский, Великобритания |
| En-US | английский, американский |
| es | испанский |
| fr | французский |
| ru | русский |
| uk | украинский |
Например, запись <META HTTP-EQUIV=»Content-language» content =»ru»> указывает на то, что язык данной web – страницы является русским. Данный метатег используется поисковыми машинами при индексировании документов, хотя большинство из них умеет определять язык по тексту.
- Content-Script-Type определяет типы сценариев, используемых на сайте. Как и для всех остальных метатегов здесь присутствует атрибут «content», который задает различные значения. Ниже представлена таблица, в которой перечислены некоторые из этих значений.
|
Text/javascript |
JavaScript |
|
Text/perlscript |
PerlScript |
|
Text/tcl |
TCL |
|
Text/vbscript |
VBScript |
Так, запись <META HTTP-EQUIV=»Content-Script-Type» content=»text/perlscript»> означает, что для написания сценариев для данной страницы используется язык программирования Perl.
- Content-Style-Type определяет язык таблиц стилей, используемых для данной web – страницы. Так, запись <META HTTP-EQUIV=“Content-Style-Type” CONTENT=“text/css”> означает, что для данной страницы используются каскадные таблицы стилей CSS.
Мета Теги группы NAME
Вторую группу мета тегов составляют мета теги группы NAME. Сюда входят следующие мета теги:
- keywords используется для задания ключевых слов вашей web – страницы. Этот тег используют поисковые машины для ассоциации вашего сайта с определенной тематикой. Например, запись <meta name=»keywords» content=»тег, мета, индексация, поиск» /> означает для поисковых систем, что данная web – страница посвящена тегам, индексации, поиску и т.д. Как видите, ключевые слова web – страницы перечисляются через запятую в атрибуте «content». Когда-то давным-давно данный тег играл большую роль в индексации страницы поисковыми системами. На запрос посетителя поисковая машина (Яндекс, Google и др.) выдавали результаты, во многом ориентируясь на этот метатег. Поэтому многие web – мастера, для увеличения посещаемости своих сайтов, указывали в метатеге keywords слова, которые соответствовали наиболее популярным запросам посетителей, но которые никак не относились к тематике сайта. Поэтому в настоящее время данный метатег не учитывается поисковыми системами. Точнее не учитываются поисковыми системами Gogle и Rambler. Яндекс и Bing учитывают или, точнее будет сказать, могут учитывать данный метатег при соблюдении определенных условий. Например, если Яндекс не сочтет данный метатег СПАМНЫМ и ключевые слова, записанные в нем будут встречаться в тексте web – страницы, то возможно яндекс учтет этот метатег и страничка получит небольшой плюс по данному ключевому слову при ранжировании. Кроме того, следует сказать, что алгоритмы на основе которых поисковые системы индексируют web – страницы, являются тайной за семью печатями, поэтому никто точно не знает какое влияние оказывает метатег keywords на поиск. Поэтому, все же лучше использовать его при создании своих web – страниц.
При использовании метатега «keywords» следует учитывать несколько правил:
- В качестве ключевых слов следует использовать только те слова, которые имеют непосредственное отношение к тематике данной web – страницы. Например, если страница посвящена метатегам, то в качестве ключевых слов целесообразно использовать слова «тег», «html», «индексация» и т.д. Причем эти самые ключевые слова должны встречаться в тексте самой страницы.
- Не стоит использовать повторяющиеся ключевые слова. Например, в записи <meta name=»keywords» content=»тег, мета, индексация, поиск, тег» /> лучше убрать последнее слово «тег». Использование повторяющихся ключевых слов может быть расценено поисковыми системами как СПАМ и привести к понижению рейтинга сайта в выдаче.
- Если в качестве ключевых слов используются словосочетания, то из них необходимо убрать все союзы и предлоги, т.к. они игнорируются поисковыми системами. Например, в записи <meta name=»keywords» content=»теги в html, » /> лучше убрать слово «и» и записать просто <meta name=»keywords» content=»теги html, » />
- Количество ключевых слов в метатеге «keywords» является спорным вопросом. В интернете есть множество рекомендаций относительно длины данного тега. Называют цифры от 100 до 1000 символов. Однако, как правило, одна web – страница продвигается по 3-4 поисковым запросам, соответственно и ключевых слов должно быть столько же.
- Description используют для краткого описания той или иной web – страницы. Данный тег учитывается поисковыми системами, например, Google в выдаче результатов по запросу пользователя может поместить содержимое мета тега Description в качестве описания web – страницы, которое располагается после названия web – страницы. Данное описание носит название сниппет. На рис.снизу показана выдача Яндекса по запросу «сниппет». Зеленой рамкой помечены сниппеты, которые могли быть взяты из метатега Description.
- Author. Данный мета тег используется для идентификации автора web – страницы. Например, запись <meta name=»author» content=»Владимир Путин» /> будет означать для поисковых систем, что автором данной web – страницы является Владимир Путин.
- Copyright аналогичен тегу «Author», однако используется для указания принадлежности web – страницы не конкретному человеку, а какой-либо организации.
- Document-state позволяет задавать режим индексации сайта. Атрибут «content» в данном случае может принимать 2 значения: Static – дает понять поисковым системам, что нет необходимости больше индексировать данную страницу; Dynamic – дает поисковым системам понять, что данную web – страницу необходимо индексировать регулярно. По умолчанию, ваш сайт является динамическим, т.е. все страницы сайта регулярно индексируются. Если вы создали web – страницу и не планируете вносит в нее изменения, то для данной web – страницы целесообразно установить значение «Static». Два возможных варианта записи:
<meta name=»document-state» content=»Dynamic» />
<meta name=»document-state» content=»Static» />
- Generator не представляет какой – либо ценности для web – мастера. Как правило, данный тег используется производителями программного обеспечения для рекламирования своей продукции. Например, данный сайт находится под управлением CMS Joomla. Соответственно, если посмотреть исходный код любой страницы, то можно встретить такую строчку: <meta name=»generator» content=»Joomla! 1.5 — Open Source Content Management» />. Здесь CMS JOOMLA автоматически генерирует это строку с целью саморекламы.
- Robots. Данный мета тег содержит информация о том, как следует вести себя поисковым роботам при индексировании данной страницы. Атрибут Content может принимать значения, указанные в таблице снизу.
|
Значение атрибута content |
Описание |
|
Index |
Эта страница должна индексироваться |
|
Noindex |
Эта страница не должна индексироваться |
|
Follow |
Должны индексироваться страницы по ссылкам с этой страницы |
|
Nofollow |
Не должны индексироваться страницы по ссылкам с этом страницы |
|
All |
Эта страница должна индексироваться и страницы по ссылкам с этой страницы должны индексироваться |
|
None |
Эта страница не должна индексироваться и страницы по ссылкам с этой страницы не должны индексироваться |
Например, запись <meta name=»Robots» content=»index, follow» /> означает, что данная страница и страницы по ссылкам с этой страницы должны индексироваться. Эта запись аналогична записи <meta name=»Robots» content=»all» />
Метатег ключевого слова в html
Тег определяет метаданные о HTML-документ. Метаданные — это данные (информация) о данных., Опишите метаданные в документе HTML :, теги всегда находятся внутри элемента
, и обычно используются для указания набора символов, описания страницы, ключевые слова, автор документа и настройки области просмотра. Тег также поддерживает глобальные атрибуты в HTML.Определение и использование
Тег определяет метаданные о
HTML-документ.Метаданные — это данные (информация) о данных.
загрузить больше v
Вы можете использовать тег, чтобы указать важные ключевые слова, связанные с документом, а затем эти ключевые слова используются поисковыми системами при индексировании вашей веб-страницы для целей поиска., Вы можете использовать тег, чтобы указать краткое описание документа. Это снова может быть использовано различными поисковыми системами при индексировании вашей веб-страницы для целей поиска. Вы можете использовать тег, чтобы предоставить информацию о том, когда последний раз обновлялся документ.Эта информация может использоваться различными веб-браузерами при обновлении вашей веб-страницы. Вы можете использовать тег, чтобы указать набор символов, используемый на веб-странице.
Пример метатегов Здравствуйте, HTML5!
загрузить больше v
Метатег robots сообщает поисковым системам, должны ли и как они сканировать ваши веб-страницы., Метатег charset устанавливает кодировку символов для веб-страницы. Другими словами, он сообщает браузеру, как должен отображаться текст на вашей веб-странице., Мета-описание суммирует содержимое страницы. Поисковые системы часто используют его для фрагмента в результатах поиска. Мета-тег описания обычно должен информировать и интересовать пользователей кратким, релевантным описанием того, о чем конкретная страница. Они похожи на презентацию, которая убеждает пользователя в том, что страница — это именно то, что он ищет.
Вставьте приведенный ниже код в раздел вашей страницы:
Это заголовок страницы.
загрузить еще v
Как добавить метатеги на свой сайт , Как добавить рекламу на свой сайт , Как выровнять и разместить изображения на вашем сайте , HostPapa Конструктор сайтов
Описание и ключевые слова вводятся в тегах . Например, в приведенном ниже коде у нас есть мета-имя = «описание» и мета-имя = «ключевые слова» . Метатег http-Equiv определяет кодировку символов и был автоматически добавлен моим редактором HTML при создании страницы.
Как добавить метатеги на веб-страницу
Мета-ключевые слова — это тип метатегов в исходном HTML-коде веб-страницы, который больше не имеет никакого отношения к пониманию страницы поисковой системой и, следовательно, не может влиять на органический рейтинг.Ключевые слова обычно пишутся строчными буквами и разделяются запятыми. Из-за того, что ими активно манипулировали во время попыток повысить рейтинг страницы в обычном поиске, они не имеют отношения к поисковой оптимизации и не имеют никакого влияния на ранжирование. , Индексирование: поисковые системы сканируют веб-сайт и сохраняют копию всего содержимого в своих базах данных. Сюда входят любые метаданные. Поэтому мета-ключевые слова определенно индексируются Google и Co, но они не обязательно используются для иерархии результатов поиска., Чтобы понять использование мета-ключевых слов поисковыми системами, мы должны различать индексацию, поиск информации и ранжирование. Таким образом, можно проиллюстрировать различия во взвешивании мета-ключевых слов по отношению к ранжированию. [2] , Мета-ключевые слова считаются релевантными поисковыми системами только в некоторых случаях. Google не использует ключевые слова, перечисленные в мета-области веб-сайта для ранжирования. Даже Yahoo и Bing используют их лишь в ограниченной степени для иерархии результатов поиска. В последнем случае эта информация является лишь одним из многих факторов, определяющих порядок результатов поиска.
Другие запросы типа «undefined-undefined», связанные с тегом «Meta keyword в html»
HTML-тег — GeeksforGeeks
Пример: Это Простой пример иллюстрирует использование метатега в теге заголовка, который предоставляет информацию.
Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью Web Design for Beginners | HTML курс.
HTML
ширина содержимого body |
Выход:
Метаданные означают информацию о данных.Тег в HTML предоставляет информацию о документе HTML или, говоря простыми словами, он предоставляет важную информацию о документе. Добавление метатега при создании веб-страницы или веб-сайта является хорошей практикой, поскольку поисковые системы, такие как Google, ищут этот метатег, чтобы понять информацию, предоставляемую веб-сайтом. Также полезно, если пользователь ищет конкретный веб-сайт, тогда на странице результатов поисковой системы в результатах поиска будут отображаться фрагменты, которые будут предоставлять информацию, относящуюся к этому веб-сайту.Эти теги в основном используются для добавления пар имя / значение для описания свойств документов HTML, таких как дата истечения срока действия, имя автора, список ключевых слов, автор документа и т. Д., То есть они используются для указания набора символов, описания страницы, ключевых слов. , автора документа и настройки области просмотра. Этот тег является пустым элементом, потому что у него есть только открывающий тег и нет закрывающего тега, но он несет информацию в своих атрибутах. Веб-документ может включать один или несколько метатегов в зависимости от информации, но в целом это не влияет на внешний вид документа.
Синтаксис
Атрибуты: Этот тег принимает четыре атрибута, которые упомянуты и описаны ниже.
- имя : Этот атрибут используется для определения имени свойства.
- http-Equiv : Этот атрибут используется для получения заголовка сообщения HTTP-ответа.
- содержимое : Этот атрибут используется для указания значения свойств.
- кодировка : Этот атрибут используется для указания кодировки символов для файла HTML.
Примечание: Метатег также принимает глобальные атрибуты в HTML
Ключевые моменты:
- Содержимое тега не отображается в вашем браузере, но может быть проанализировано компьютером.
- Они просто используются для предоставления дополнительной информации о документе HTML.
- Теги добавляются в наш HTML-документ с целью поисковой оптимизации.
- Они добавляются внутри тега и используются браузерами, поисковыми системами и другими веб-службами.
- С помощью тега дизайнер может управлять окном просмотра.
Мы поймем все эти концепции на примере.
Выделение важных ключевых слов: Мета-тег содержит важные ключевые слова, которые присутствуют на веб-странице и используются веб-браузером для ранжирования страницы в соответствии с поисковыми запросами. Поисковая оптимизация - это еще один термин для оптимизации SEO-рейтинга контента.
Пример:
HTML
90 007 |
Выход:
Привет, GeeksforGeeks!
Предоставление описания веб-страницы : Краткое / краткое описание веб-страницы может быть включено в метатег, который поможет повысить рейтинг веб-страницы в Интернете.
Пример:
HTML
meta name = "description" GeeksforGeeks! Дата редакции документа: Мета-тег используется для предоставления информации о последнем обновленном документе.Эта информация используется различными веб-браузерами при обновлении веб-страницы. Пример: HTML
: В метатеге будет указано указанное время, после которого веб-страница будет автоматически обновлена, т.е., этот метатег используется для указания продолжительности, по истечении которой веб-страница будет автоматически обновляться по истечении указанного времени. Пример: Приведенный ниже код обновит веб-страницу через 8 секунд. HTML
Вывод: Указание автора веб-страницы: MetaTag позволяет нам указать имя автора веб-страницы следующим образом. Пример: HTML
|