Мета тег charset

Meta теги

— закрытие головы
— начало тела
— закрытие тела
— конец документа

Где между тегами указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.

С тегом мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.

тег имеет следующие атрибуты:

  • http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
  • name — информационное имя. (применяется в паре с атрибутом content)
  • content — информационное содержание, связанное с мета именем (name)

Теперь на примерах будем вникать в суть дела.

Пример (очень нужный и важный):

Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница — формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows.

Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку «иероглифов» у разных пользователей тех или иных браузеров.

Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.

Обратите внимание

Теперь разберём по «слогам» нашу запись:
— документ для 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 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.

Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели

Месяцы:От Английского:Сокращения:
Январь January Jan
Февраль February Feb
Март March Mar
Апрель April Apr
Май May May
Июнь June Jun
Июль July Jul
Август August Aug
Сентябрь September Sep
Октябрь October Oct
Ноябрь November Nov
Декабрь December Dec
Дни недели:От Английского:Сокращения:
Понедельник Monday Mon
Вторник Tuesday Tue
Среда Wednesday Wed
Четверг Thursday Thu
Пятница Friday Fri
Суббота Saturday Sat
Воскресенье Sunday Sun

Атрибуту content можно присвоить значение «0» в этом случае страница всегда будет загружаться с сервера.

И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..

Пример:

А такая запись вовсе запретит браузеру кэшировать данную страницу.

Пример:

Данный мета тег предназначен для подачи поисковому роботу той или иной команды.

Список возможных команд роботу:

  • Index — индексировать страницу
  • Noindex — не индексировать страницу
  • Follow — прослеживать гиперссылки на странице
  • Nofollow — не прослеживать гиперссылки на странице
  • All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
  • None — не индексировать страницу и не прослеживать гиперссылки на странице

Пример:

Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:

Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:

http://www.mysite.ru/

Нажмите здесь для того чтобы выполнить переход немедленно.

Приносим извинения за доставленные неудобства.

Разберём и осмыслим строчку из примера:

meta http-equiv=»Refresh» — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить

content=»10; — обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html»— адрес новой/другой страницы на которую следует перейти.

Пример:

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.

Пример:

Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.

  • Page-Enter — Эффект появления страницы
  • Page- Exit — Эффект исчезновения страницы

В которых:

  • Duration — время действия эффекта в секундах
  • Transition — Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
НомерОписание эффектаНомерОписание эффекта
Прямоугольники внутрь 12 Растворение
1 Прямоугольники наружу 13 Вертикальная панорама внутрь
2 Круг внутрь 14 Вертикальная панорама наружу
3 Круг наружу 15 Горизонтальная панорама внутрь
4 Наплыв наверх 16 Горизонтальная панорама наружу
5 Наплыв вниз 17 Уголки влево — вниз
6 Наплыв вправо 18 Уголки влево — вверх
7 Наплыв влево 19 Уголки вправо – вниз
8 Вертикальные жалюзи 20 Уголки вправо – вверх
9 Горизонтальные жалюзи 21 Случайные горизонтальные полосы
10 Шажки горизонтальные 22 Случайные вертикальные полосы
11 Шажки вертикальные 23 Случайный выбор эффекта

Пример:

Файл page1.html

На заметку:

Эффекты перехода с одной страницы на другую работают не во всех браузерах.

Нажмите на «Перейти» чтобы перейти к следующей странице

и оценить эффект перехода от одной странице к другой.

«Перейти»

Файл page2.html

На заметку:

Эффекты открытия и закрытия веб-страниц будут видны только при переходе

от одной страницы к другой или же при помощи кнопок «назад» «вперёд».

При первом открыти страницы, а также во время перезагрузки

эффекты перехода видны не будут.

Нажмите на «Перейти» чтобы перейти к следующей странице

и оценить эффект перехода от одной странице к другой.

«Перейти»

  • Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
  • Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!
Читайте также:  Раскрутка группы вконтакте

Источник: http://www.webremeslo.ru/html/glava10.html

HTML: Теги

В нашем примере мы использовали три элемента : первый указывает браузеру кодировку HTML-документа, два других мета тега предназначены для предоставления информации о содержимом веб-страницы для поисковых систем. Далее мы рассмотрим каждый из них подробнее.

Примечание: теги должны располагаться в элементе

Примечание: UTF-8 является универсальной кодировкой, поддерживающей большинство языков и спецсимволов.

keywords (ключевые слова)

У любого сайта есть набор ключевых слов и словосочетаний, по которым поисковые системы ищут нужные ресурсы в сети. Именно эти слова и должны составлять содержимое keywords.

Самый простой способ подобрать нужные ключевые слова для текущей страницы — это определить по каким словам вы сами стали бы искать материал, представленный на ней? Вот это и будут нужные ключевые слова. Пример:

Ключевые слова указываются через запятую или пробел и могут быть написаны в любом регистре. Рекомендуется указывать не более 10-15 ключевых слов или словосочетаний.

В настоящее время поисковые системы стали более продвинутые и определяют категорию, к которой относится информация, по содержимому веб-страницы, а ключевые слова отошли на второй план или полностью игнорируются.

description (краткое описание)

Значение description используется для краткого описания содержимого, расположенного на текущей странице. Рекомендуемая максимальная длина такого описания не должна превышать 180 символов:

Краткое описание страницы может быть использовано поисковыми система на странице с результатами поиска под названием страницы и URL-адреса:

Также краткое описание используется на сайтах некоторых соцсетей, при добавлении ссылки:

При составлении краткого описания следует учитывать следующие моменты:

  • в описании нужно указывать именно ту информацию, которая отражает содержимое, опубликованное на данной странице;
  • описание должно быть уникальным и не должно повторяться для разных страниц;
  • старайтесь в описание страницы также включать необходимые ключевые слова, которые будут учитываться в поисковых запросах.

Примечание: краткое описание, расположенное под ссылкой на странице с результатами поиска, называется сниппетом.

Тег

Тег является частью метаданных и используется для указания заголовка страницы. Заголовок страницы можно сравнить с названием главы книги, так как он должен говорить пользователям и поисковым системам об информации представленной на странице.

Заголовок должен содержать важные ключевые слова для того, чтобы поисковые системы могли включить вашу страницу в результаты поиска по определенным запросам. Также он может помочь пользователям решить, стоит ли посетить ваш сайт или нет, так как они будут видеть заголовок в качестве текста ссылки в результатах поиска:

Тег является одним из наиболее важных тегов на странице. Рассмотрим небольшой список рекомендаций, которых нужно придерживаться для написания оптимизированного заголовка для поисковых систем:

  • Длина заголовка не должна превышать 70 символов, включая пробелы.
  • Самые важные ключевые слова нужно располагать первыми в заголовке, т.е. поисковые системы будут определять ценность ключевых слов по их очередности в заголовке: первое будет считаться наиболее важным, последнее — наименее.
  • Для разделения ключевых слов или фраз лучше использовать вертикальную черту «|». Знаки пунктуации, подчеркивания и другие символы разделители желательно не использовать или использовать в тех случаях, когда ключевое слово или фразу без них написать нельзя.
  • Старайтесь исключить из заголовка разные частицы речи (например: и, если, но, потом и т.д.).
  • Можно включить в заголовок название сайта или фирмы, если название является частью ключей фразы, или если это бренд, видя который, пользователи будут заходить именно на ваш сайт.
  • Не дублируйте текст тега , заголовок должен быть уникальным для каждой страницы сайта.
  • Заголовок должен быть актуален для страницы, он должен описывать то, что в данный момент представлено на странице, например его можно написать так:

Тема страницы|Ключевые слова|Название компании или сайта Ключевые слова|О нас|Название компании или сайта

Источник: https://puzzleweb.ru/html/15_head_and_meta.php

Кодировка UTF – основной стандарт текста в интернете

Нужно правильно раскодировать сигналы, которые наш мозг получает из окружающей среды. Проще говоря, следует правильно «настроить» свой взгляд на жизнь. Ну, вроде не полупустой кошелек, а наполовину полный. То есть, требуется использовать нужную кодировку. Для интернета чаще всего правильной является кодировка utf:

Немного о кодировках

Наверное, не является секретом тот факт, что основным типом содержимого во всемирном веб-пространстве является текст. Конечно, сейчас с этим утверждением можно поспорить, но буквально какой-то десяток лет назад это было так.

Но передача текста в цифровом формате происходит совсем иначе, чем у нас на экране. Для перевода текста в машинный код используется двоичная система исчисления, состоящая лишь из 0 и 1.

Следующим этапом передачи текста в виртуальном пространстве является его отображение на клиентских машинах с помощью браузера, интерпретирующего html. Вот тут и начинается самое интересное, когда браузер клиента и веб-страница содержат в себе текстовые данные в разных кодировках. Тогда пользователь на своем мониторе видит не текст, а какие-то непонятные (нечитаемые) символы:

Чаще всего нужно всего лишь поменять кодировку веб-страницы на кодировку utf8. Ведь она является наиболее распространенной во всем интернете.

Кодировка UTF-8

Наиболее распространенная среди стандартизированных и общепринятых текстовых кодировок. Расшифровывается как «восьмибитный формат преобразования Юникода» или «Unicode Transformation Format».

Стандарт был разработан еще в 1992 году. В настоящее время он широко применяется не только во всемирной паутине, но и на прикладном уровне (локальные машины и операционные системы). Основным достоинством кодировки является ее совместимость с ASCII:

ASCII («American standard code for information interchange») еще одна (но более старая) кодировка представления текстовых данных. В ее таблице символов значения печатных и непечатных знаков заданы с помощью чисел в шестнадцатеричной системе исчисления.

При использовании UTF-8 для передачи данных в формате ASCII используются 7 первых битов. Последний (восьмой) служит для вывода «мусора» (некорректно раскодированных данных). Что при использовании кодировки для латинских символов существенно уменьшает объем текстовых данных.

Как уже говорилось, часто для корректного отображения текста достаточно лишь поменять кодировку документа. Рассмотрим, как это можно сделать в различных дисциплинах, применяемых для построения веб-пространства.

Как установить кодировку в HTML и PHP

Для установки utf 8 кодировки в html используется специальный тег . Он объединяет в себе в форме атрибутов значение метатегов.

Метатеги используются для передачи и хранения информации, предназначенной для браузеров и поисковиков. Одним из атрибутов тега является charset. Он служит для установки кодировки веб-страницы. Пример использования:

Также можно установить кодировку некоторым элементам страницы. Например, ссылке. Для этого также используется атрибут charset, значением которого выступает нужная кодировка:

list of publications

Важно

Кроме этого можно присваивать значения непосредственно заголовкам http, которые передаются вместе с ответом на запрос от браузера к серверу. В таком случае кодировка сайта utf 8, переданная через заголовок, будет доминирующей над значением, заданным внутри веб-страницы.

Многие из страниц ресурсов не являются статическими, а динамически создаются благодаря использованию серверных языков программирования. Чаще всего для построения сайтов применяют PHP. Поэтому важно знать о его средствах, позволяющих «на лету» поменять кодировку генерируемой веб-страницы.

Для установки и модификации значений заголовка используется функция header(). Ее синтаксис:

void header ( string $string [, bool $replace = true [, int $http_response_code ]] )

Пример записи:

header('Content-Type: text/html; charset= utf-8');

Чтобы корректно задать в php кодировку utf 8, вызов функции header() в коде должен находиться выше всех тегов html.

Глобальные настройки кодировки

Описанные выше методы могут использоваться для отдельных веб-страниц или небольших сайтов. Но что делать, если вы имеете дело с ресурсом, состоящим из нескольких сотен страниц и десятка разделов? Давайте разберемся, как установить кодировку utf 8 для всего сайта.

Для этого нужно вносить изменения в дополнительный файл конфигурации ресурса. Он носит название .htaccess. Сначала его нужно открыть в любом текстовом редакторе, а затем добавить туда строку:

В качестве более глобального способа изменения кодировки стоит рассмотреть пример на основе любого локального сервера. Для большей наглядности мы возьмем Denwer, который довольно широко распространен в наших краях.

Чтобы изменить кодировку всех ресурсов, размещенных на нашем сервере Apache, нужно отредактировать содержимое конфигурационного файла httpd.conf. Он находится по пути:

Как и в предыдущем примере, в нем нужно заменить значение AddDefaultCharset на нужное. В нашем случае это utf-8:

Изменение кодировки базы данных

Изменение кодировки рассмотрим на примере MySQL. Так как это одна из самых востребованных и распространенных СУБД, применяемых в сайтостроении. Все изменения можно произвести в файле my.ini. В Денвере он находится по пути:

Здесь нужно поменять значение нескольких полей на utf-8:

  • default-character-set;
  • character-set-server;
  • init-connect = «set names»;
  • default-character-set.

И затем добавить строку skip-character-set-client-handshake:

Подобные изменения можно внести не только для всех баз данных на сервере, но и для отдельно взятой в php базы mysql. Сделать это можно через пользовательский интерфейс оболочки PHPMyAdmin.

Сначала узнаем, какие кодировки установлены по умолчанию в нашей базе данных. Для этого вводим запрос SQL:

Источник: https://www.internet-technologies.ru/articles/kodirovka-utf-osnovnoy-standart-teksta-v-internete.html

vs

Еще одна причина, по которой нужно пойти с коротким, состоит в том, что она соответствует другим экземплярам, ​​где вы можете указать набор символов в разметке. Например:

Example Site

Консистенция помогает уменьшить ошибки и сделать код более читаемым.

Обратите внимание, что атрибут charset не учитывает регистр. Вы можете использовать UTF-8 или utf-8, однако UTF-8 более четкий, читаемый и более точный.

Кроме того, нет абсолютно никакой причины использовать любое значение, отличное от UTF-8, в атрибуте мета-charset или заголовке страницы. UTF-8 является кодировкой по умолчанию для веб-документов с HTML4 в 1999 году и единственным практическим способом создания современных веб-страниц.

Совет

Также вы не должны использовать HTML-объекты в UTF-8. Символы, подобные символу авторского права, должны быть напечатаны напрямую. Единственными сущностями, которые вы должны использовать, являются 5 зарезервированных символов разметки: меньше, больше, амперсанд, простой, двойной премьер.

Сущностям нужен парсер HTML, который вы не всегда можете использовать в будущем, они вносят ошибки, делают ваш код менее читаемым, увеличивают размеры вашего файла и иногда неправильно декодируют в разных браузерах в зависимости от того, какие объекты вы использовали.

Узнайте, как вводить/вставлять авторские права, торговую марку, открытую цитату, закрывать цитату, апостроф, em dash, en dash, bullet, Euro и любые другие символы, с которыми вы сталкиваетесь в своем контенте, и использовать эти фактические символы в своем коде.

У Mac есть средство просмотра символов, которое вы можете включить в настройке системы клавиатуры, и вы можете найти, а затем перетащить нужные символы или использовать соответствующий инструмент просмотра клавиатуры, чтобы узнать, какие ключи нужно вводить. Например, товарный знак — Option + 2.

UTF-8 содержит все символы и символы на каждом письменном человеческом языке. Поэтому нет никакого оправдания для использования — вместо em emash. Неплохая идея также изучить правила пунктуации и типографики… например, зная, что период проходит внутри закрытой цитаты, а не снаружи.

Нет, это не так. Браузер начинает синтаксический анализ файла в качестве кодировки по умолчанию браузера: UTF-8 или ISO-8859-1. Поскольку US-ASCII является подмножеством как ISO-8859-1, так и UTF-8, браузер может отлично читать в любом случае… это то же самое.

Читайте также:  Рейтинг партнерских программ

Когда браузер встречает тег мета-кодировки, если кодировка отличается от того, что браузер уже использует, браузер перезагружает страницу в указанной кодировке. Вот почему мы помещаем мета-чарт-тег вверху, сразу после заголовка, перед чем-либо еще, даже заголовком.

Таким образом, вы можете использовать символы UTF-8 в своем названии.

Это не совсем так. Если в документе есть только символы US-ASCII, вы можете сохранить его как US-ASCII и использовать его как UTF-8, потому что это подмножество. Но если есть символы Unicode, вы правы, вы должны сохранить как UTF-8 без спецификации.

На Mac используйте Bare Bones TextWrangler (бесплатно) из Mac App Store или Bare Bones BBEdit, который находится в Mac App Store за 39,99 $… очень дешево для такого отличного инструмента.

В любом приложении есть меню в нижней части окна документа, где вы указываете кодировку документа, и вы можете легко выбрать «UTF-8 no BOM».

Обратите внимание

И, конечно, вы можете установить это как значение по умолчанию для новых документов в настройках.

Это неверно.

Конечно, вы должны установить кодировку в HTTP-заголовке, но вы также должны установить ее в атрибуте мета-charset, чтобы страница могла быть сохранена пользователем, из браузера на локальное хранилище, а затем снова открыта позже, и в этом случае единственным признаком кодирования, которое будет присутствовать, является атрибут мета-кодировки. Вы также должны установить базовый тег по той же причине… на сервере базовый тег не нужен, но при открытии из локального хранилища базовый тег позволяет странице работать так, как если бы она была на сервере, при этом все активы на месте и т.д., не сломанные ссылки.

Или вы можете просто изменить кодировку определенных типов файлов следующим образом:

AddType text/html;charset=utf-8 html

Совет для обслуживания файлов UTF-8 и Latin-1 (ISO-8859-1) должен предоставить UTF-8 файлам текстовое расширение и латинские файлы «txt.»

AddType text/plain;charset=iso-8859-1 txt
AddType text/plain;charset=utf-8 text

Наконец, рассмотрите вопрос о сохранении ваших документов с окончанием строки Unix, а не в устаревших версиях DOS или (классической) линии Mac, которые не помогают и могут повредить, особенно по линии, поскольку мы все больше и больше получаем от этих устаревших систем.

HTML-документ с допустимой кодировкой HTML5, UTF-8 и окончанием строки Unix — это хорошо выполненная работа. Вы можете делиться и редактировать, хранить, читать и восстанавливать и полагаться на этот документ во многих контекстах. Это lingua franca. Это цифровая бумага.

Источник: http://qaru.site/questions/862/meta-charset-utf-8-vs-meta-http-equiv-content-type

Тег meta

Тег meta задает некоторые служебные команды браузеру или поисковым системам: кодировку страницы, описание страницы для поисковиков, автора страницы и так далее.

Принцип работы тега такой (за некоторым исключением): задается имя команды (в атрибуте name или в атрибуте http-equiv), а значение команды задается в атрибуте content. По сути данный тег содержит в себе группу тегов (команд), общее название которым мета-теги

Тег meta не требует закрывающего тега.

Тег meta следует использовать внутри тега head.

Популярные примеры использования

Кодировка документа

В настоящее время стандартом кодировки является utf-8. Теоретически явно (через тег meta) кодировку можно и не задавать — браузер должен вас понять. На практике я бы не советовал так поступать — кодировка может сбиться и вместо русского текста вы увидите крокозябры.

В HTML5 кодировка задается в упрощенном виде:

Раньше кодировка задавалась так (сейчас так делать не стоит, устарело, можете встретить в устаревающих учебниках):

Описание документа

Мета-описание документа предназначено для поисковиков, в нем должно лежать краткое описание страницы. Из этого описания при некоторых условиях поисковик может сделать сниппет страницы сайта.

Сниппет — это короткое описание страницы сайта при поиске. Соответственно мета-описание страницы следует делать таким, каким вы хотите видеть сниппет страницы на поиске и для каждой страницы сайта свое.

Пользоваться следует так:

Ключевые слова документа

Мета-keywords (ключевые слова) предназначены для поисковиков, чтобы указать самые главные слова, по которым будут искать страницу. В настоящее время из-за злоупотреблений со стороны веб-мастеров поисковики не придают значения этому мета-тегу.

Пользоваться следует так (ключевые слова и фразы перечисляются через запятую):

Редирект (перебрасывание на другую страницу)

Можно сделать, чтобы при заходе на некоторую страницу пользователя автоматически перебрасывало на другую (например, если страница переехала). Пользоваться так (5 — это количество секунд, через которые произойдет переброс):

Больше примеров

Больше примеров вы можете найти по данной ссылке.

Возможные атрибуты

АтрибутОписание
name Имя мета-тега. Значение мета-тега с данным именем задается атрибутом content.
http-equiv Позволяет устанавливать http заголовки, для отправки их в браузер. Задает имя заголовка. Значение заголовка задается атрибутом content.
content Устанавливает значение атрибута, заданного с помощью атрибута name или http-equiv.
charset Задает кодировку документа. В настоящее время стандартом является utf-8.

Источник: http://code.mu/html/meta.html

HTML Мета-теги

, которые никак не отображаются браузером (за исключением содержимого тега ).

Мета-теги могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. Мета-теги для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.

Всегда применяйте только те мета-теги, которые реально нужны для работы веб-сайта. Не следует загромождать область Основное содержимое страницы

«description» (описание страницы)

Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу.

При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова.

Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница.

«Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description»:

Основное содержимое страницы

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author»:

Основное содержимое страницы

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

  • index — страница должна быть проиндексирована;
  • noindex — страница не индексируется;
  • follow — гиперссылки на странице учитываются;
  • nofollow — гиперссылки на странице не учитываются
  • all — включает значения index и follow, включен по умолчанию;
  • none — включает значения noindex и nofollow.

HTML-код с «robots»:

Основное содержимое страницы

Content-Type определяет тип документа и его кодировку.

HTML-код с «Content-Type»:

Основное содержимое страницы

В HTML5 указание кодировки упрощено:

«refresh»

Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

HTML-код с «refresh»:

Основное содержимое страницы

Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся.

«Content-Language»

Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

HTML-код с «content-language»:

Основное содержимое страницы

В HTML5 указание языка упрощено:

В этом уроке перечислены не все метатеги, которые вы можете встретить при изучении веб-ремесла. Остальные специфичны и вы познакомитесь с ними в дальнейшем при изучении наших уроков. Из всех же вышеперечисленных к использованию на каждой странице вашего сайта рекомендуются метатеги и их атрибуты приведенные в следующем примере:

Попробуй сам
Основное содержимое страницы

Задачи

Итоговое задание [10-14]

На этом уроке вы познакомились с наиболее важными метатегами основным предназначением которых является предоставление структурированных метаданных о веб-странице.

Пришло время повторить изученное и выполнить четыре несложных задания:

С помощью одинарного тега задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.

Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.

Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.

Важно

С помощью одинарного тега разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.

Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.

Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.

С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.

Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.

Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.

Сделайте так, чтобы через 5 сек после загрузки страницы браузер перешел на адрес http://www.wm-school.ru.

Совет

В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.

Совет

В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.

Источник: http://wm-school.ru/html/html_meta_tags.html

Meta теги

Мет-теги никак не влияют на отображаемое в браузере содержимое, но используются поисковыми системами для каталогизации информации о веб-страницах.

Читайте также:  Где можно купить сайт

Только мета-теги можно использовать внутри столько раз, сколько вам угодно, и включают они в себя следующие атрибуты: charset, name, http-equiv и content.

Причем атрибут content используется только после того, как были использованы атрибуты name и/или http-equiv.

Имена

Атрибут name может принимать любое значение. Наиболее популярные – это author, description, keywords.


Author указывает на автора HTML-страницы, description используется поисковыми системами для отображения описания страницы в результатах поиска.

Раньше поисковые системы формировали профиль страницы опираясь на мета-теги, поэтому они были очень важны. Сейчас большинство поисковиков использует фактическое содержимое страницы (но мета все равно важны!).

HTTP эквиваленты

Атрибут http-equiv может использоваться вместо атрибута name. По сути – это http заголовок с информацией, которая отправляется на сервер веб-страницы.
Атрибут может принимать следующие значения:

  1. content-type – объявление кодировки, определение используемого набора символов.
  2. default-style – стиль по умолчанию, предпочтительный стиль, который указывается в виде набора стилей или ссылки.
  3. refresh – указание (в секундах)  как часто необходимо обновлять или автоматически переадресовать страницу. Не стоит это использовать, если для вас важна доступность страницы.

Атрибут charset может использоваться для определения кодировки и в сокращенном виде (и это хорошо)

<meta charset=»utf-8″>

то же самое, что и

 <meta http-equiv=»content-type» content=»text/html; charset=utf-8″>

Пример кода

<head>  <title>Кондиционеры? ООООО, ДА!</title>  <meta charset=»utf-8″>  <meta http-equiv=»refresh» content=»3″> <!— нормальные люди так не делают—>  <meta name=»description» content=»Это моя самая, самая, самая, САМАЯ крутецкая страница о кондиционерах»>…

Оригинал статьи

Что нового мы узнали? Мета-теги всего лишь служебная информация, ее любят СЕО-шники (или любили?) потому что она позволяет продвигать страницы для поисковиков.
Что действительно интересно, так это значения refresh – тут, пожалуй, с автором статьи я согласна.

На кой черт перегружать страницы?? А вот default-style меня удивил по полной. Получается, мы можем напрямую задать дефолтный стиль, перекрыв, таким образом дефолтный браузерный. Скоростной гуглеж показал, первое, что не только для меня этот атрибут был открытием (а он, на минуточку, в стандарте с версии 4.

01), и, второе, что браузеры поддерживают этот дефолтный стиль через пень колоду. Особенно отличились Файерфокс и Опера.

Источник: https://keynikell.ru/meta-tegi

Какие бывают META теги и зачем они нужны

(особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.

 Пруфлинк: http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)  

Атрибут HTTP-EQUIV

META-теги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками.

Теги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.

Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.  

Значения  поля content  для Аттрибута   HTTP-EQUIV

Значение Описание Пример использования Эффект
Expires Дата устаревания. Управление кэшированием в HTTP/1.0. Если указанная дата прошла, то очередной запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением «0» интерпретируется как «сейчас». Такое значение заставляет броузер каждый раз при запросе проверять — изменялся ли этот документ. Это, кстати относится и к прокси-агентам. Дата должна быть задана в формате, описываемом в RFC850, что эквивалентно HTTP-заголовкуExpires: Wed, 26 Feb 2008 08:21:57 GMT Поисковые роботы могут либо совсем не индексировать такой документ, либо постоянно «обнюхивать» его.
Pragma Эта директива показывает, что кешированная информация не должна использоваться и вместо этого запросы должны посылаться на сервер. Это директива имеет тоже самое значение что и CACHE-CONTROL:NO-CACHE и представлена для обратной совместимости с HTTP/1.0. Клиенты должны использовать оба значения PRAGMA:NO-CACHE и CACHE-CONTROL:NO-CACHE когда нужно послать некешируемый запрос к серверу, про который неизвестно – совместим ли он с HTTP/1.1. Если известно, что сервер совместим с HTTP/1.1 клиент НЕ должен посылать PRAGMA заголовок. HTTP/1.1 кэш должен понимать «PRAGMA:NO-CACHE» точно также, как будто клиент послал «CACHE-CONTROL:NO-CACHE».
Content-Type Указание типа документа. Может быть расширено указанием кодировки страницы (charset). Если же указывать charset в содержании META-тега, то некоторые браузеры выводят такую страницу уже в заданном charset.  Используют браузеры и поисковые системы
Content-language Указание языка документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого броузером) с содержимым Content-language может быть условием выбора сервером того или иного языка. что эквивалентно HTTP-заголовку  Язык описывается парой значений (язык-диалект). В примере: Английский-ВеликобританияДля русского языка – ru-RU Используется некоторыми поисковиками
Refresh Определение задержки в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность — автоматическая загрузка другого документа. что эквивалентно HTTP-заголовкуRefresh: 3; URL=http://www.name.com/page.html

Источник: https://habr.com/post/72141/

Мета теги. Информация в заголовке

Тег

Тег устанавливает связь с внешним файлом, который имеет отношение к текущему html-документу.

Контейнер

В этом примере подключается внешний файл стилей style.css и устанавливается иконка сайта favicon.ico.

Атрибуты тега

href Адрес связанного файла.
media Устройство, для которого следует применять стилевое оформление.

Возможные значение атрибута:

all все типы (значение по умолчанию);
print принтеры и другие печатающие устройства;
projection проекторы;
screen экран монитора;
speech речевые синтезаторы и программы для воспроизведения текста вслух.

Например, речевые браузеры.

В качестве значения можно также использовать медиа-запросы.

Например, чтобы css-файл не влиял на вид страницы на мобильных устройствах:

Устаревшие, хотя и корректные типы, которые не дают результата:
braille устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми;
embossed принтеры, использующие для печати систему Брайля;
handheld наладонники, смартфоны, устройства с малой шириной экрана;
projection проекторы;
tty устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея);
tv телевизоры.
rel Отношение между текущим документом и связанным файлом.
Возможные значение атрибута:

alternate альтернативный вариант документа (например, страница для печати или перевод);
author ссылка на страницу автора документа;
help ссылка на документ помощи;
icon иконка сайта (часто используют с shortcut);
licence ссылка на информацию об авторских правах;
next ссылка на следующий документ в серии;
pingback ссылка на адрес Пинг-бэк сервера, который обрабатывает Пинг-бэки в текущем документе;
prefetch указывает, что конечный документ должен кэшироваться;
prev ссылка на предыдущий документ в серии;
search ссылка на поисковый инструмент;
sidebar ссылка на документ для отображения в боковой панели браузера (если она есть);
stylesheet ссылка на файл стилей.
sizes Размер иконок для визуального отображения (только для rel=»icon»).
Значение: ширина иконки в пикселях без указания единиц, латинская буква х в любом регистре, высота иконки. Если иконок несколько, то можно задавать их размеры через пробел. Ключевое слово any показывает, что иконка может масштабироваться в любой размер. Новый атрибутом для тега в HTML 5.
type MIME-тип данных связанного файла.
Возможные значение атрибута:

text/css для подключения файла стилей;
image/x-icon для подключения иконки сайта.

Тег определяет метаданные, которые предназначены для браузеров и поисковых систем. Чаще всего атрибуты любого метатега сводятся к парам «имя=значение».

Контейнер

В этом примере устанавливается кодировка UTF-8, имя автора HTML-документа и автоматическая перезагрузка страницы через 30 секунд.

Для сайтов на русском языке возможно применение одной из следующих двух кодировок: Windows-1251 или UTF-8. Главное отличие кодировок – это используемый набор символов. Кодировка Windows-1251 однобайтовая, т.е.

представить в ней можно только 255 символов (для кириллицы этого вполне достаточно). В UTF-8 можно представить намного больше символов, т.к. используются последовательности длиной до 6 байт.

Символ русского языка в кодировке UTF-8 занимает 2 байта.

Если документ содержит только буквы русского алфавита и никаких других символов, то в UTF-8 он станет в два раза больше. Если сайт имеет одну версию – русскую, то нет смысла использовать UTF-8, будет вполне достаточно Windows-1251. Но если имеются версии на других языках, то следует выбрать UTF-8.

Не забывайте, что в текстовом редакторе должна быть выбрана та же кодировка, что указана в charset.

charset Кодировка документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега , которая задавала кодировку в предыдущих версиях HTML.
content Значение атрибута, заданного с помощью name или http-equiv. Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.
http-equiv Определяет заголовок HTTP, которому принадлежит информация. Например:

refresh автоматическое обновление страницы или загрузка другого документа через заданное время (W3C не рекомендует использовать этот тег);
expires дата устаревания кэша. Если указанная дата прошла, то очередной запрос этого документа вызывает реальную страницу без использования кэша;
pragma запрет кэширования страницы.

Другие возможные HTTP-заголовки и их значения приведелы в примерах ниже.

name Определяет имя метатега для пары «имя=значение». Например:

author имя автора документа;
description описание страницы;
keywords список ключевых слов, встречающихся на web-странице;
robots управляет индексацией web-страницы.
Возможные значения content:

  • noindex – запрещает индексирование документа;
  • nofollow – запрещает проход по ссылкам, имеющимся в документе;
  • index – разрешает индексирование документа;
  • follow – разрешает проход по ссылкам;
  • all – равносильно index, follow;
  • none – равносильно noindex, nofollow.

На этой странице htmlweb.ru/php/example/show_meta_tag.php Вы можете получить содержимое всех Мета Тегов, содержащихся на любой странице в интернете.

Примеры метатегов

Автоматическое обновление страницы через каждые 30 секунд:

Перенаправление на указанную страницу через 20 секунд:

Указание адреса электронной почты автора:

Защита от превращения телефонных номеров, найденных на web-странице, в Skype-меню:

Дата создания web-страницы:

Не сохранять страницу в кэш (используется для баннеров):

Частота индексации роботами поисковых систем (Яндекс её игнорирует):

Записать информацию (Cookie) на машине клиента:

Метатеги можно хранить во внешнем файле.

Необязательный атрибут тега

Читать дальше: Тег base

Источник: https://htmlweb.ru/html/head.php

Ссылка на основную публикацию