- Описание мета-тегов
- Описание страницы
- Title
- Description
- Keywords
- Кодировка сайта
- Application-Name
- Generator
- Author
- Copyright
- Reply-To
- Content-Language
- Help
- Управление индексацией
- Robots
- Last-Modified
- Document-State
- Revisit-After
- Управление кэшированием
- Cache-Control
- Pragma
- Expires
- Canonical — предпочитаемый канонический адрес
- Prev
- Next
- Meta теги
- Кодировка символов и язык
- Информация о документе
- Описание страницы и ключевые слова
- Адрес
- Обновление страницы
- Время действия документа и кэш
- Команды для робота
- Автоматический переход на другую страницу
- Эффекты при переходе по ссылке
- На заметку:
- На заметку:
- Полезные советы:
Описание мета-тегов
Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.
Описание страницы
Title
Заголовок страницы, оптимальная длина 50-60 символов.
Description
Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.
Keywords
Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.
Кодировка сайта
Application-Name
Название веб-приложения. Можно указать несколько названий для разных языковых локалей.
- В Android используется при добавлении сайта на главный экран.
- В Windows 8, 10 при добавлении сайта в панель приложений и плиткой в меню пуск.
Generator
Сообщает, с помощью какой программы был сгенерирован код страницы.
Author
Информация об авторе сайта.
Copyright
Информация о владельце сайта.
Reply-To
Указывает способ связи с автором страницы.
Content-Language
Указывает язык страницы. Используется поисковыми машинами при индексировании.
Help
Предоставляет ссылку на справку или e-mail.
Управление индексацией
Robots
Задает правила индексации для поисковых роботов.
Общие значения:
| index , follow или all | Разрешено индексировать текст и ссылки на странице |
| noindex | Не индексировать текст страницы |
| nofollow | Не переходить по ссылкам на странице |
| noindex , nofollow или none | Запрещено индексировать текст и переходить по ссылкам |
| noarchive | Не показывать ссылку на сохраненную копию в поисковой выдаче |
| noyaca | Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска |
| nosnippet | Запрещает показывать видео или фрагмент текста в результатах поиска |
| noimageindex | Запрещает указывать вашу страницу как источник ссылки для изображения |
| noodp | Не использовать описание из каталога DMOZ |
Last-Modified
Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц.
Document-State
Определяет частоту индексации для поисковых роботов.
Revisit-After
Указывает как часто обновляется информация на сайте, и как часто поисковая система должна на него заходить.
Управление кэшированием
Cache-Control
Указывает как браузеру кэшировать страницу.
Допустимые значения:
| public | Кэшируется все |
| private | Кэшируется браузером, но не proxy-сервером |
| no-cache | Запрещает кэширование |
| max-age=0 | Сколько секунд хранить в кэше |
Pragma
Expires
Дата окончания кэша браузера. Если указать прошедшую дату или 0, то документ не будет кэшироваться.
Canonical — предпочитаемый канонический адрес
Если у страницы есть дубликаты с одним содержанием и разными URL, например:
В rel=»canonical» указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.
Prev
Указывает URL предыдущий страницы при пагинации.
Next
Указывает URL следующий страницы при пагинации.
Meta теги
В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:
— начало документа
— начало головы
— закрытие головы
— начало тела
— закрытие тела
— конец документа
Где между тегами указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.
С тегом мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.
- http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
- name — информационное имя. (применяется в паре с атрибутом content )
- content — информационное содержание, связанное с мета именем ( name )
Теперь на примерах будем вникать в суть дела.
Кодировка символов и язык
Пример (очень нужный и важный):
Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница — формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку «иероглифов» у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.
Теперь разберём по «слогам» нашу запись:
— указываем что в этом мета теге мы будем заниматься Content-Type — типом содержания
Content > — документ для Windows — Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252
В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8
То есть писать в голове документа вот так:
В этой строчке говорится о том что язык Language документа является русским Content=»ru»
Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.
Информация о документе
Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name=»author» указывает имя автора страницы, а name=»copyright» авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду.
Если хотите можете указать с помощью какого html редактора была написана данная страница.
Описание страницы и ключевые слова
Description — краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.
Keywords — ключевые слова веб-страницы, опять таки предназначены для поисковых машин.
Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта 🙂 Какие слова и фразы Вы будите вводить в строке «Поиск»? ну наверно что то типа: «Где продать коровьи рога?» или «Реализовать копыта по выгодной цене» Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.
Помните что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.
Адрес
Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL
Обновление страницы
Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить «к Вам в гости» раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..
Время действия документа и кэш
Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно «но», дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем «беда» примет Ваш сайт за «мертвый» заброшенный и никем не обновляемый.
Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс( GMT+03:00 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.
Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели
Атрибуту content можно присвоить значение «0» в этом случае страница всегда будет загружаться с сервера.
И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..
А такая запись вовсе запретит браузеру кэшировать данную страницу.
Команды для робота
Данный мета тег предназначен для подачи поисковому роботу той или иной команды.
Список возможных команд роботу:
- Index — индексировать страницу
- Noindex — не индексировать страницу
- Follow — прослеживать гиперссылки на странице
- Nofollow — не прослеживать гиперссылки на странице
- All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
- None — не индексировать страницу и не прослеживать гиперссылки на странице
Автоматический переход на другую страницу
Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:
Разберём и осмыслим строчку из примера:
meta http-equiv=»Refresh» — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content — адрес новой/другой страницы на которую следует перейти.
А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.
Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.
Эффекты при переходе по ссылке
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
- Page-Enter — Эффект появления страницы
- Page- Exit — Эффект исчезновения страницы
На заметку:
Эффекты перехода с одной страницы на другую работают не во всех браузерах.
Нажмите на «Перейти» чтобы перейти к следующей странице
и оценить эффект перехода от одной странице к другой.
«Перейти»
Файл page2.html
На заметку:
Эффекты открытия и закрытия веб-страниц будут видны только при переходе
от одной страницы к другой или же при помощи кнопок «назад» «вперёд».
При первом открыти страницы, а также во время перезагрузки
эффекты перехода видны не будут.
Нажмите на «Перейти» чтобы перейти к следующей странице
и оценить эффект перехода от одной странице к другой.
«Перейти»
Полезные советы:
Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!