04:29 Урок 10 - Заголовочные теги <head> в html. Описание meta-тегов | |
Заголовочные теги <head> в htmlЗаголовочные теги в html - это группа специальных тегов, которые находятся между тегами <head> и </head>. Они выполняют две важных задачи:
Особенностью заголовочных тегов является то, что они визуально для пользователя не видны (исключением является тег <title>, который может быть виден сверху во вкладке браузера). Все заголовочные теги являются необязательными, но это не означает, что они не нужны. Эти теги можно разделить на 4 группы.
Давайте рассмотрим каждую группу в отдельности. 1. Тег <title></title><title></title> - название страницы. Это единственный заголовочный тег, который виден пользователям. Он имеет большую важность для поисковых систем в плане SEO. Именно этот заголовок страницы выводится в выдаче когда указываются названия страниц. Грамотно составить <title> для новичка непросто, поскольку нужно учесть несколько нюансов. Идеальный заголовочный тег должен быть привлекательным для пользователей и содержать ключевые фразы для поисковых систем. Нельзя делать этот тег очень длинным, поскольку поисковыми системами это может быть воспринято как спам. Для каждой страницы этот тег должен быть уникальным! Рассмотреть более все нюансы этого тега в этой статье было бы неправильным, т.к. это большая отдельная тема. Более подробно про тайтл читайте в специальной статье: как правильно составить тег <title> 2. Теги <meta><meta> - эти теги содержат в себе информацию о странице. Рассмотрим отдельно каждый из них. 2.1. Content-Type Синтаксис этого атрибута следующий: <head> ... <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> ... </head> Этот тег указывает кодировку страницы. Конкретное значение записывается через атрибут charset. В данном случае указана кодировка windows-1251. Чаще всего на сайтах используется кодировка UTF-8. В случае, если кодировка сайта и конкретного html-страницы (или же в базе данных) не будут совпадать, то сайт может отображаться через иероглифы. 2.2. Description <head> ... <meta name="description" content="Описание страницы"> ... </head> В атрибуте content содержится описание страницы. Чаще всего это описание используется как сниппет для поисковой системы. Не является обязательным тегом. Например, поисковая система Яндекс на своё усмотрение определяет сниппет, Google же пользуется этим описанием и выводит так, как оно написано. Не стоит пренебрегать этим тегом, если ваша цель привлечение пользователей с поисковых систем. Более подробно про Description Вы можете прочитать здесь. Также советую ознакомиться с важной статьей: оптимизация сниппетов при продвижении сайта » 2.3. Keywords <head> ... <meta name="keywords" content="ключевые слова"> ... </head> Этот тег вызывает много споров о том, нужен ли он вообще. Поисковые машины не заявляют, что эти ключевые слова как-то участвуют при ранжировании сайта. В атрибут content перечисляются ключевые слова. Вряд ли это кардинально повлияет на продвижение сайта, но при каких-то спорных моментах это может повлиять в вашу пользу. Ключевые слова должны быть написаны через запятую. Не пишите ключевые слова, которых нету на странице. Более подробно о Keywords Вы можете прочитать здесь. 2.4. Refresh <head> ... <meta http-equiv="refresh" content="1;http://site.ru/"> ... </head> Этот тег нужен для организации редиректа. В content указывается время через которое произойдет переход (в нашем примере 1 секунда), а через точку с запятой URL куда произойдет переход (в нашем примере http://site.ru/). Что такое редирект и для чего он нужен читайте в статье как сделать редирект » Существуют множество других метатегов, но они не представляют никакой важности как для браузеров, так и для поисковых систем, поэтому нет смысла их использовать. 3. Теги <link><link> - используется в основном для подключения каких-то данных к документу. Рассмотрим более подробно атрибуты этого тега. 3.1. Stylesheet <head> ... <link rel="stylesheet" type="text/css" href="style.css"> ... </head> В атрибуте href указывается файл со стилями, который подключается к документу. Этот тег можно использовать несколько раз и соответственно подключить несколько файлов со стилями. Используется практически всегда из-за его удобства. 3.2. Shortcut icon <head> ... <link rel="shortcut icon" href="images/favicon.ico"> ... </head> В атрибуте href указывается адрес изображение с форматом .ico (иконка). Это изображение будет отображено рядом с URL Вашего сайта. Favicon является совсем не обязательным элементом для сайта, но чаще всего его используют. Считается, что благодаря иконке пользователи лучше запоминают сайт и к нему есть большее доверие. Советую прочитать: как сделать favicon » 3.3. Alternate <head> ... <link rel="alternate" type="application/rss+xml" title="Название RSS-ленты" href="URL-ленты"> ... </head> В атрибуте href указывается расположение 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). | |
| Категория: Все о сайтах | Просмотров: 338 | | |
| Всего комментариев: 0 | |