Мета теги в html — это группа специальных тегов, которые находятся между тегами <head> и </head>. Из названия сразу понятно, что располагаются они в начале кода.
1. Тег <title></title>
2. Теги <meta>
2.1. Meta Content-Type
2.2. Meta description
2.3. Meta keywords
2.4. Meta refresh
2.5. Meta viewport
2.6. Meta robots
3. Теги <link>
3.1. Link rel=Stylesheet
3.2. Link rel=Shortcut icon
3.3. Link rel=Alternate
4. Тег <script></script>
Заголовочные теги выполняют две важные задачи:
- Сообщают информацию о html-странице браузеру;
- Сообщают информацию поисковым системам про конкретный html-страницу;
Особенностью заголовочных тегов является то, что они визуально для пользователя не видны (исключением является тег <title>, который может быть виден во вкладке страницы браузера). Все заголовочные теги являются необязательными, но это не означает, что они не нужны.
Эти теги можно разделить на 4 группы.
- Тег <title></title>
- Теги <meta>
- Теги <link>
- Тег <script></script>
Давайте рассмотрим каждую группу в отдельности.
1. Тег <title></title>
<title></title> — название страницы. Это единственный заголовочный тег, который виден пользователям. Он имеет большую важность для поисковых систем в плане SEO. Именно этот заголовок страницы выводится в выдаче когда указываются названия страниц.
<head> ... <title>Заголовок страницы</title> ... </head>
Грамотно составить <title> для новичка непросто, поскольку нужно учесть несколько нюансов. Идеальный заголовочный тег должен быть привлекательным для пользователей и содержать ключевые фразы для поисковых систем. Нельзя делать этот тег очень длинным, поскольку поисковыми системами это может быть воспринято как спам. Для каждой страницы этот тег должен быть уникальным!
Более подробно про тайтл читайте в специальной статье: как правильно составить тег <title>
2. Теги <meta>
<meta> — эти группа служебных тегов, которые содержат в себе информацию о странице. Рассмотрим отдельно каждый из них.
2.1. Meta Content-Type
Синтаксис этого атрибута следующий:
<head> ... <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> ... </head>
Этот тег указывает кодировку страницы. Конкретное значение записывается через атрибут charset. В данном случае указана кодировка windows-1251. Чаще всего на сайтах используется кодировка UTF-8.
В случае, если кодировка сайта и конкретного html-страницы (или же в базе данных) не будут совпадать, то сайт может отображаться через иероглифы в некоторых браузерах.
2.2. Meta description
<head> ... <meta name="description" content="Описание страницы"> ... </head>
В атрибуте content содержится описание страницы. Чаще всего это описание используется как сниппет для поисковой системы. Description не является обязательным тегом. Например, поисковая система Яндекс на своё усмотрение определяет сниппет, Google же пользуется этим описанием и выводит так, как оно написано.
Не стоит пренебрегать этим тегом, если ваша цель привлечение пользователей с поисковых систем. Более подробно про Description Вы можете прочитать здесь. Также советую ознакомиться с важной статьей: оптимизация сниппетов при продвижении сайта »
2.3. Meta keywords
<head> ... <meta name="keywords" content="ключевые слова"> ... </head>
Этот тег вызывает много споров о том, нужен ли он вообще. Поисковые машины не заявляют, что эти ключевые слова как-то участвуют при ранжировании сайта.
В атрибут content перечисляются ключевые слова. Вряд ли это кардинально повлияет на продвижение сайта, но при каких-то спорных моментах это может повлиять в вашу пользу. Ключевые слова должны быть написаны через запятую. Не пишите ключевые слова, которых нету на странице. Более подробно о Keywords Вы можете прочитать здесь.
2.4. Meta refresh
<head> ... <meta http-equiv="refresh" content="1;http://site.ru/"> ... </head>
Этот тег нужен для организации редиректа. В content указывается время через которое произойдет переход (в нашем примере 1 секунда), а через точку с запятой URL куда произойдет переход (в нашем примере http://site.ru/). Что такое редирект и для чего он нужен читайте в статье как сделать редирект »
Существуют множество других метатегов, но они не представляют никакой важности как для браузеров, так и для поисковых систем, поэтому нет смысла их использовать.
2.5. Meta viewport
<head> ... <meta name="Viewport" content="width=device-width"> ... </head>
Мета тег viewport используется для мобильных браузеров. Проблемы с отображением сайта на планшетах, смартфонах и других периферийных устройств существовала всегда. Сайты, как правило, делается под большие разрешения и не учитываются возможности просмотра на экранах с разрешением в 500, в 800 пикселей.
Значение device-width, которое было указано в примере выше, означает, что ширина сайта должна равнять ширине экрана устройства.
2.6. Meta robots
<head> ... <meta name="robots" content="index,follow"> ... </head>
Этот мета тег указывает роботу, что делать со страницей. Значение index разрешает индексацию, follow - переходы по ссылкам внутри документа. Эти значения стоят по умолчанию. Поэтому если страницу сайта нужно проиндексировать и на этой странице можно ходить роботу по ссылкам, то обычно этот тег вообще не пишут.
Чтобы запретить индексацию нужно прописать noindex, чтобы запретить роботу ходить по ссылкам nofollow. Эти значения можно комбинировать в любом порядке. Можно указать только одно значение. Например
<meta name="robots" content="noindex,follow или <meta name="robots" content="noindex
3. Теги <link>
<link> - используется в основном для подключения каких-то данных к документу. Рассмотрим более подробно атрибуты этого тега.
3.1. Link rel=Stylesheet
<head> ... <link rel="stylesheet" type="text/css" href="style.css"> ... </head>
В атрибуте href указывается файл со стилями, который подключается к документу. Этот тег можно использовать несколько раз и соответственно подключить несколько файлов со стилями. Используется практически всегда из-за его удобства.
3.2. Link rel=Shortcut icon
<head> ... <link rel="shortcut icon" href="favicon.ico"> ... </head>
В атрибуте href указывается адрес изображение с форматом .ico (иконка). Это изображение будет отображено рядом с URL Вашего сайта в строке браузера и в выдаче поисковых систем. Favicon является необязательным элементом для сайта, но чаще всего его используют. Считается, что благодаря иконке пользователи лучше запоминают сайт и к нему есть большее доверие. Советую прочитать: как сделать favicon »
3.3. Link rel=Alternate
<head> ... <link rel="alternate" type="application/rss+xml" title="Название RSS-ленты" href="URL-ленты"> ... </head>
В атрибуте href указывается расположение RSS ленты. Используется только в случае наличия RSS-ленты. Для статичных сайтов не используется. Читайте также: как добавить RSS ленту на сайт »
4. Тег <script></script>
<script></script> - подключение java-файлов со скриптами.
<head> ... <script type="text/javascript" src="javafile.js"></script> ... </head>
В атрибуте src указывается расположение подключаемых java-файлов. Используется для уменьшения кода на странице, а также в случае, если какие-то ява функции необходимо использовать при открытии страницы. Также это ускоряет загрузку страницы, т.к. браузеры обычно кэшируют скрипты.
Уважаемый читатель, мы рассмотрели заголовочные теги html документа. Теперь Вы лучше ориентируетесь в оптимизации сайта и в составлении грамотного кода.
Ссылка на следующий урок:
Урок 11. Фреймы (теги frame, frameset, noframe, iframe).
Читайте также:
• Коды символов для HTML
• Тег noindex и атрибут rel="nofollow"
• Добавление социальных кнопок на сайт
• Коды и названия html цветов для сайта
• Как сделать фон для сайта
• Как сделать бегущую строку на сайте
• Как убрать подчеркивание ссылки
• Как сделать кнопку на сайте ссылкой
• Какой выбрать шрифт для сайта