Метатеги (англ. meta tags) — теги, предназначенные для предоставления структурированных метаданных о веб-странице.
Как правило, указываются в заголовке HEAD, внутри структуры страницы HTML
<html> <head> </head> <body> </body> </html>
Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и исключение тег revisit.
Метатеги разделены на нескольких основных групп. Основные — NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о странице, её авторе, а также — рекомендации для поисковых систем. HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.
Новая группа метатегов – PROPERTY. Используется для передачи в социальные сети, какую информацию передавать и отображать.
В HTML используется атрибут charset, для указания кодировки документа. Поддерживается всеми современными браузерами.
Группа NAME
Метатег Author и Copyright
Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо организации, целесообразнее использовать тег Copyright. Выглядит данный тег следующим образом:
<meta name="author" content="Велимира Лисичкина" />
Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства
<meta name="copyright" lang="ru" content="ПБОЮЛ Велимира Лисичкина" />
Метатег Description
Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике.
<meta name="description" content="Метатеги в Википедии" />
Метатег Document-state
Метатег Document-state также имеет значение при индексации страницы в поисковых системах. Тег обладает двумя значениями — Static и Dynamic. Значение «Static» отмечает, что системе нет необходимости индексировать документ в дальнейшем, «Dynamic» позволяет регулярно индексировать Интернет-страницу.
<meta name="document-state" content="Dynamic" />
Метатег Generator
Данный метатег в первую очередь использовался разработчиками программ для редактирования веб-страниц с целью саморекламы — в качестве значения тега разработчики таких программ, как правило, указывали название своего продукта.
<meta name="generator" content="Macromedia Dreamviewer 4.0" />
В настоящее время практически не используется.
Метатег Keywords
Данный метатег поисковые системы используют для того, чтобы определить релевантность ссылки. При формировании данного тега необходимо использовать только те слова, которые содержатся в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Рекомендованное количество слов в данном теге — не более десяти. Кроме того, выявлено, что разбивка этого тега на несколько строк влияет на оценку ссылки поисковыми машинами.
<meta name="keywords" content="Википедия, Метатег, статья" />
Метатег Resource-type
Тег Resource-type описывает свойство или состояние страницы. Если значения тега отличается от «Document», то поисковые системы его не индексируют. Метатег предназначен для масштабирования document (используется по умолчанию), rating, version, operator, formatter, creation и другие.
<meta name="resource-type" content="document" />
Метатег Revisit
Тег позволяет управлять частотой индексации документа в поисковой системе. Для переиндексации сайта раз в две недели используется тег следующего вида:
<meta name="revisit" content="14" />
Поисковые системы Яндекс и Google игнорируют содержимое этого метатега
Мeтатег Robots
Тег формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем. Значения тега могут быть следующими: Index (страница должна быть проиндексирована), Noindex (документ не индексируется), Follow (гиперссылки на странице отслеживаются), Nofollow (гиперссылки не прослеживаются), All (включает значения index и follow, включен по умолчанию), None (включает значения noindex и nofollow).
Пример 1. Разрешить индексирование страницы и использование размещённых на ней ссылок для последующей индексации.
<meta name="robots" content="index,follow" />
сжимает или равноценный аналог
<meta name="robots" content="all" />
Пример 2. Запретить индексирование страницы, разрешить использование размещённых на ней ссылок для последующей индексации.
<meta name="robots" content="noindex,follow" />
Пример 3. Разрешить индексирование страницы, запретить использование размещённых на ней ссылок для последующей индексации.
<meta name="robots" content="index,nofollow" />
Пример 4. Запретить индексирование страницы и использование размещённых на ней ссылок для последующей индексации.
<meta name=”robots” content=”noindex,nofollow” />
или равноценный аналог
<meta name="robots" content="none">
Мeтатег Subject
Определяет тематику документа. Практически бесполезен из-за отсутствия четкой и согласованной классификации тем в различных поисковых системах.
Мeтатег url
Тег прекращает индексацию страницы поисковой системой, и перенаправляет робота поисковой машины по указанной ссылке. Тег применяется для отмены индексации «зеркала» и генерируемых страниц.
<meta name="url" content="http://ru.wikipedia.org/" />
Метатег Viewport
Относительно новый тэг – указывает браузеру на мобильном устройстве, как отображать контент сайта. По умолчанию (при отсутствии тэга) браузер на мобильном устройстве “сжимает” ширину сайта до ширины экрана мобильного устройства. Т.е. если Ваш сайт шириной 960 px, то он будет пропорционально сжат до ширины дисплея телефона – и ничего увидеть нормально не удастся. Т.е. нужно использовать или адаптивный дизайн сайта (когда меняются расположения блоков под меньшую ширину экрана) или запретить браузеру вписывать широкий сайт в узкий экран (появится полоса горизонтальной прокрутки)
<meta name="viewport" content="width=device-width">
| Атрибут | Возможное значение | Описание |
|---|---|---|
| width | Целое неотрицательное значение (от 200px — 10,000px) или константа device-width. | Определяет ширину viewport. Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px. |
| height | Целое неотрицательное значение (от 223px до 10,000px) или константа deviceheight | Определяет высоту viewport. В большинстве случаев на этот атрибут можно не обращать внимание |
| initial-scale | Число с точкой (от 0.1 до 10). Значение 1.0 — не масштабировать | Определяет начальный масштаб страницы. Чем больше число, тем выше масштаб. |
| user-scalable | no или yes | Определяет, может ли пользователь изменять масштаб в окне. По-умолчанию “yes” в мобильном Safari. |
| minimum-scale | Число с точкой (от 0.1 до 10). 1.0 — не масштабировать | Определяет минимальный масштаб viewport. По-умолчанию “0.25” в мобильном Safari. |
| maximum-scale | Число с точкой (от 0.1 до 10). 1.0 — не масштабировать | Определяет максимальный масштаб viewport. По-умолчанию “1.6” в мобильном Safari. |
Представление сайта с использованием/без использования этого тэга
Сайт на большом мониторе | |
| Сайт на мобильном устройстве по умолчанию | Сайт на мобильном устройстве с использованием тэга Viewport |
 |  |
Группа HTTP-EQUIV
Мeтатег Content-Language
Тег позволяет указать язык, на котором создан документ. Пример:
<meta http-equiv="content-language" content="ru" />
В HTML5 указание языка упрощено:
<html lang="ru">
Мeтатег Content-Style-Type
Указания языка таблицы стилей, по умолчанию значение — «text/css».
Пример:
<meta http-equiv="Content-Style-Type" content="text/css">
Мeтатег Content-Type[править | править вики-текст]
Определяет тип документа и его кодировку.
Пример:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
В HTML5 указание кодировки упрощено:
<meta charset="UTF-8">
Мeтатег Expires
Метатеги Expires — управляет кэшированием. Если указанная в теге дата прошла, то браузер должен сделать повторный сетевой запрос, а не использовать копию из кэша. Если изначально указать прошедшую дату, то документ не будет кэшироваться. Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой. Дата должна указываться в стандарте [RFC850].
Пример:
<meta http-equiv="Expires" content="Wed, 26 Feb 1999 08:21:57 GMT">
Метатег PICS-Label
PICS — (от англ. Platform-Independent Content rating Scheme Label) — указывает уровень доступности сайта (в связи с возможными тематиками sex и violence), однако используется и в других целях.
Мeтатег Pragma
Контроль кэширования при страницах, получаемых путём работы заданного скрипта.
<meta http-equiv="Pragma" content="no-cache">
Мeтатег Refresh
Задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой страницы.
<meta http-equiv="refresh" content="5; url=http://www.example.com/" />
После «url=» кавычек быть не должно!
Мeтатег Canonical
Указывает поисковым машинам, что данная страница является основной для показа пользователю. Актуально для разных CMS, которые генерируют одинаковые по содержанию страницы с разными адресами.
<link rel=“canonical” href=“https://site.com/sample-page/” />
Вот статья про дубли страниц в WordPress
Мeтатег Set-Cookie
Настройка cookie браузера
Мeтатег Window-target
Определение окна загружаемой страницы.
Метатег Imagetoolbar
Отключает Панели управления изображениями. Обычно используют при выводе баннеров, фона картинки, карты изображения и др., когда вывод данной панели нежелателен.
<meta http-equiv="imagetoolbar" content="no" />
Ниже краткое описание метатэгов социальных сетей
Метатэги социальных сетей (группа PROPERTY)
Протокол OPEG GRAPH от Facebook.
Протокол появился в 2007 году благодаря разработчикам Facebook. Open Graph, работает в одном пространстве имён og и имеет ограниченный набор типов данных. Как добавить тэги meta property на свой сайт – можно посмотреть здесь.
Основные метатэги
Метатэг og:title
Данная конструкция используется социальными сетями для отображения заголовка материала при его размещении в социальной сети. Заголовки для страницы и для социальной сети могут отличаться.
<meta property="og:title" content="Заголовок">
Метатэг og:image
Один из самых нужных тэгов. Определяет, какая именно картинка будет передаваться в социальную сеть. Обычно, на странице много картинок – как относящихся к материалу, так и являющихся частью элементов управления (кнопки меню и т.д.). Данный тэг позволяет явно указать, какую именно картинку нужно передать.
<meta property="og:image" content="URL-адрес изображения">
Метатэг og:dicription
Аналог основного метатэга discription. Описание страницы. Рекомендуемый объем описания от 150 до 1000 символов. title og:description может отличаться от описания для поисковых систем. В случае его отсутствия в социальной сети отображается…гм…может отображаться все что угодно, обычно социальная сеть берет информацию из meta name discription – но не всегда.
<meta property="og:description" content="Описание страницы">
Метатэг og:url
Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID. Т.е. ссылка на страницу, которая будет указана в социальной сети.
<meta property="og:url" content="Канонический путь к странице">
Метатэг og:url
Указание типа страницы для корректного отображения в социальной сети.
Стандарт предлагает следующие типы – указывается в “Наименование типа”:
- Article — статья
- Book — книга
- Profile – профиль пользователя
- Website – веб-сайт
- song – музыкальный трек
- album – музыкальный альбом
- playlist — плейлист
- radio_station – радиостанция
- movie — видеомтериал
- episode — видеоэпизод
- tv_show – ТВ-шоу
- other – другой видеоматериал
<meta property=”og:type” content=”Наименование типа”>
Сеть LinkedIn
LinkedIn поддерживает oEmbed — открытый формат, созданный с целью упрощения внедрения содержимого одной веб-страницы в другую.
Вот тут статья подробнее
oEmbed. Делаешь веб-сервис? — Делай и oEmbed
В LinkedIn, если вы используете общий доступ к веб-сайту или кнопке “Поделиться”, открытые графические теги на странице будут выполнены, как описано здесь:
https://developer.linkedin.com/documents/setting-display-tags-shares
При отсутствии oEmbed используются метатэги OpenGraph
Свой набор метатэгов.
<meta name="twitter:card" content="summary"/> <!-- Тип окна --> <meta name="twitter:site" content="Название сайта"/> <meta name="twitter:title" content="Название страницы"> <meta name="twitter:description" content="Описание"/> <meta name="twitter:creator" content="автор"/> <meta name="twitter:image:src" content="https://website.com/image250X250.png"/> <meta name="twitter:domain" content="website.com"/>
Может также использовать формат oEmbed
Значение метатегов
Метаданные о веб-странице изначально предназначались в том числе для того, чтобы помочь поисковым машинам отнести веб-страницу к той или иной категории. В 90-е годы метатеги активно использовались в целях раскрутки своего сайта, в том числе предоставляя ложные или избыточные метаданные. В последнее время поисковыми системами было предпринято множество мер по пресечению таких манипуляций: например, из факторов ранжирования был исключён тег keywords, принципы построения правильных основных тегов «title», «description» также поменялись.
В связи с тем, что метатеги несут чисто служебную функцию, и, кроме того, значительно увеличивают размер гипертекстового документа, начинающие Web-дизайнеры зачастую предпочитают их игнорировать. Кроме того, метатеги группы HTTP-EQUIV достаточно сложны в использовании, так как задают жесткие параметры форматирования страницы. Тем не менее, метатеги делают более успешной индексацию Интернет-страницы в поисковых системах.
 | Подпишитесь в VKontakte - нажмите кнопку | |
 | Подпишитесь в Telegram - нажмите кнопку | |
 | Наша группа ODNOKLASSNIKI |
Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла
Запрос на размещение Вашего рекламного поста (тема и email будут добавлены автоматически в письмо)
В Вашем браузере должна быть настроена обработка ссылок mailto
site_post@bk.ru
или просто скопируйте адрес e-mail
Почитать в разделе
ЗАЧЕМ НУЖЕН САЙТ?
Создание сайта (как для фирмы, так и для торговой марки) представляет одно из направлений рекламной политики: - легко запоминающееся имя вида www.имя.ru
- удобные ящики электронной почты вида название@имя.ru
- размещение на сайте каталога продукции
- информация о видах профессионального обучения
- независимость от переезда офиса фирмы и смены номеров телефонов
- ссылки на те места, где уже применяется данная торговая марка
- отзывы реальных клиентов данной торговой марки
Затраты на создание сайта и подержание его работы могут сильно отличаться. Мы будем рассматривать базовый вариант, т.е. для сайта информационого плана (текст и фотографии), без интерактивности.
Базовый вариант...(Читать полностью...)
- Всего статей в разделе: 5
- Показано статей в списке: 4
- Сортировка: название по алфавиту
Выбор хостинга
Хостинг - это такое место, где живет Ваш сайт (точнее, все Ваши файлы, из которых собран сайт).
Как выбрать хостинг
Хостинг бывает платным и бесплатным. Бесплатное место под сайт - это хорошо, но есть некоторые проблемы: на бесплатном хостинге могут начать некоторую перестройку и Ваш сайт на время станет недоступным
на Вашем сайте будет размещаться чужая реклама (бесплатному для Вас хостингу надо на что-то жить)
длинное и неудобное имя для Вашего сайта (например www.имя.narod.ru)
почтовый ящик для Вашей почты тоже будет немного не Вашим Частично проблему с именами можно решить, зарегистрировав в RU-центр имя для Вашего сайта вместе с переадресацией:
- при...(Читать полностью...)
Как создать домен 3-го уровня
Что такое домен третьего уровня? Домен первого уровня .ru - национальный домен верхнего уровня для России.
Домен второго уровня seotable.ru - открывается наш сайт
Домен третьего уровня subdomen.seotable.ru - открывается мини-сайт (из одной строки "Hello, World") на PHP
Домен третьего уровня может быть использован для нескольких целей
1. как алиас основного сайта, делаются настройки у регистратора и наш сайт будет открываться по двум адресам
2. как часть для размещения важного раздела основного сайта
Создаем домен 3-го уровня через редактирование DNS
Что бы сайт в домене 3-го уровня отзывался на subdomen.seotable.ru - нужно: что бы существовал основной домен (настройки...(Читать полностью...)
Сервер доменных имен DNS
DNS – что это за «зверь» такой? DNS – это Domain Name Server, т.е сервер доменных имен. На этом сервере лежат служебные записи, в которых указано:
- на каком сервере лежат файлы сайта (хостинг)
- какой используется почтовый сервер
- другие полезные настройки для работы сайта В целом обеспечение технической работы сайта состоит из 4-х частей: 1. Регистратор доменного имени, т.е. та организация, которая выделяет Вам доменное имя = имя.ru У регистратора же (в данном случае nic.ru) указывается, где находится таблица DNS Указано, что таблица DNS находится на серверах Мастерхоста. В данном случае говорится «домен делегирован на Мастерхост». Видно, что Еще DNS бывают...(Читать полностью...)
Файл favicon.ico
Фавикон - это маленькая иконка рядом с названием сайта (точнее title страницы) в браузере. Вот, например, сайт www.comphome.ru про домашний компьютер. Мы видим картинку с загадочным треугольником. Как она туда попала? Это такой специальный файл favicon.ico для хранения иконки сайта. Он же фавикон. Что бы браузер ее показал, необходимо:
1. Формат файла ICO/png/gif
да, именно так - там может быть и анимированная картинка в формате gif
2. Картинка должна быть физически на сайте:
2.1 Расположение в корне сайта (в 90% случаев это понимают браузеры и поисковые машины для файла favicon.ico)
Например вот так - в корне сайта. Ничего дополнительно указывать не надо - и так...(Читать полностью...)
