Content-Type — Веб-технологии для разработчиков
Заголовок-сущность Content-Type
используется для того, чтобы определить MIME тип ресурса.
В ответах сервера заголовок Content-Type
сообщает клиенту, какой будет тип передаваемого контента. В некоторых случаях браузеры пытаются сами определить MIME тип передаваемого контента, но их реакция может быть неадекватной. Чтобы предотвратить такие ситуации, Вы можете установить в заголовке X-Content-Type-Options
значение nosniff
.
В запросах (таких, как POST
или PUT
), клиент сообщает серверу тип отправляемых данных.
Синтаксис
Content-Type: text/html; charset=utf-8 Content-Type: multipart/form-data; boundary=something
Директивы
media-type
- MIME тип ресурса или данных.
- charset
- Используемая кодировка.
- boundary
- Директива
boundary
обязательна для составных сущностей. Она содержит от 1 до 70 символов (не должна заканчиваться пробелом), которые без искажений пройдут через шлюзы email и служит для корректной инкапсуляции всех частей составной сущности.
Примеры
Content-Type
в HTML формах
В POST
запросе, сгенерированном в результате отправки HTML формы, Content-Type
запроса определяется в атрибуте enctype
тега <form>
.
<form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myFile"> <button type="submit">Submit</button> </form>
Запрос в этом случае может выглядеть так (менее интересные заголовки опущены):
POST /foo HTTP/1.1 Content-Length: 68137 Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575 -----------------------------974767299852498929531610575 Content-Disposition: form-data; name="description" some text -----------------------------974767299852498929531610575 Content-Disposition: form-data; name="myFile"; filename="foo.txt" Content-Type: text/plain (content of the uploaded file foo.txt) -----------------------------974767299852498929531610575--
Спецификации
Совместимость с браузерами
The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотрите также
Какие бывают META теги и зачем они нужны / Хабр
META-теги
В продолжении первого поста про DOCTYPE, я, как и обещал, продолжу про META теги.
META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для броузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей.
META-теги имеют два возможных атрибута
—
—
META-теги должны находиться в заголовке HTML-документа между и (особенно это важно для документов, использующих фреймы).
Стандартом 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-заголовки.
Значения поля content для Аттрибута HTTP-EQUIV
Значение | Описание | Пример использования | Эффект |
Expires | Дата должна быть задана в формате, описываемом в RFC850, <META HTTP-EQUIV=»expires» CONTENT=»Wed, 26 Feb 2008 08:21:57 GMT»> что эквивалентно 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. |
<META HTTP-EQUIV=»PRAGMA» CONTENT=»NO-CACHE»> | |
Content-Type | Указание типа документа. Может быть расширено указанием кодировки страницы (charset). Если же указывать charset в содержании META-тега, то некоторые браузеры выводят такую страницу уже в заданном charset. | <META HTTP-EQUIV=»Content-type» CONTENT=»text/html; charset=ISO-2022-JP»> | Используют браузеры и поисковые системы |
Content-language | Указание языка документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого броузером) с содержимым Content-language может быть условием выбора сервером того или иного языка. | <META HTTP-EQUIV=»Content-language» CONTENT=»en-GB»> что эквивалентно HTTP-заголовку Язык описывается парой значений (язык-диалект). В примере: Английский-Великобритания Для русского языка – ru-RU |
Используется некоторыми поисковиками |
Refresh | Определение задержки в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность — автоматическая загрузка другого документа. | <META HTTP-EQUIV=»Refresh» Content=»3, URL=http://www.name.com/page.html»> Refresh: 3; URL=http://www.name.com/page.html |
W3C не рекомендует использовать этот тег. Google страницы с таким тегом игнорирует. Другие поисковые системы, возможно, тоже. |
Cache-Control | Определяет действия кэша по отношению к данному документу. Возможные значения: Public — документ кэшируется в доступных для всех кэшах Private — только в частном кэше no-cache — не может быть кэширован no-store — может быть кэширован, но не сохраняется |
<META http-equiv=»Cache-Control» content=»public»> | Используется некоторыми браузерами |
Атрибут NAME
Robots |
Тег <meta name=»Robots» content=»…»> управляет индексацией конкретной web-страницы. При этом роботам можно запретить не только индексацию самого документа, но и проход по имеющимся в нем ссылкам. Инструкции по индексации записываются в поле content. Возможны следующие инструкции: NOINDEX — запрещает индексирование документа; NOFOLLOW — запрещает проход по ссылкам, имеющимся в документе; INDEX — разрешает индексирование документа; FOLLOW — разрешает проход по ссылкам. NONE — равносильно NOINDEX, NOFOLLOW Значение по умолчанию: <meta name=»Robots» content=»INDEX, FOLLOW»>. В следующем примере робот может индексировать документ, но не должен выделять из него ссылки для поиска дальнейших документов: <META name=»ROBOTS» content=»index, nofollow»> Имя тега, названия и значения полей нечувствительны к регистру. В поле content дублирование инструкций, наличие противоречивых инструкций и т.п. не допускается; в частности, значение поле content не может иметь вид «none, nofollow». Google поддерживает дополнительное значение NOARCHIVE, которое запрещает помещать страницу в архив google | <META NAME=»Robots» CONTENT=»NOINDEX,FOLLOW»> | Используется большинством поисковиков |
Description | Значение атрибута CONTENT — строка, которая определяет текстовое описание (краткую аннотацию) конкретной страницы Вашего сайта. Не стоит создавать слишком длинное и подробное описание Вашего сайта в данном теге, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов. Этот тег может сильно помочь в случаях, когда в документе мало текста, когда это управляющий фреймами файл (frameset) или в начале документа используются скрипты. | <META NAME=»description» CONTENT=»Данный сайт содержит информацию для любителей старинных автомобилей, на нем Вы можете найти описание с фотографиями редких и эксклюзивных автомобилей»> | Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации. Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот тег, а некоторые выводят содержимое этого тега в результатах поиска (Google), поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением. |
Keywords | Значение атрибута CONTENT — список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, в запрос на которые, Вы хотели бы, появления Вашего сайиа в списке результатов поиска. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также Вы можете здесь записать и английские слова, соответствующие содержимому Вашего сайта. Ну, а какие конкретно нужно писать слова — это уже тема отдельной статьи. Некоторые поисковые системы не индексируют сайты, в которых в данном теге повторяется одно и то же слово для увеличения позиции в списке результатов. | <META NAME=»keywords» CONTENT=»реклама, дизайн, полиграфия»> | Учитывается большинством поисковых систем. Точно известно, что НЕ учитывает Google и Rambler |
document-state | Управление индексацией страницы для поисковых роботов. Определяет частоту индексации — или один раз индексировать (значение Static), или реиндексировать документ регулярно (значение Dynamic). | <META NAME=»Document-state» CONTENT=»Static»> | Используется редко |
GOOGLEBOT | Google поддерживает специальный тег Googlebot с помощью которого вы можете указать Google что он не должен индексировать и архивировать вашу страницу, другие поисковые системы этот тег проигнорируют. | <META NAME=»GOOGLEBOT» CONTENT=»NOARCHIVE»> | |
Author | Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой. | <META NAME=»AUTHOR» CONTENT=»www.neo-systems.ru»> | |
Revisit | Значение этого тега указывает — как часто обновляется информация на вашем сайте, и как часто поисковая система должна на него заходить чтобы увидеть обновления. В силу сложившихся условий — поисковые системы сейчас самостоятельно определяют частоту сканирования сайта, поэтому, возможно, наличие этого тега ничего вам не даст. | <meta name=»revisit-after» content=»15 days»> |
Источники информации:
http://www.citforum.ru/internet/search/metatags.shtml
http://web-support.ru/adv/ps_meta_2.shtml
http://www.shtogrin.com/library/web/meta/
http://vancouver-webpages.com/META/metatags.detail.html
http://www.mattcutts.com/blog/keywords-meta-tag-in-web-search/
http://www.webotdel.ru/notes/metatags/
Очень хорошо и понятно написано http://www.w3schools.com/tags/tag_meta.asp
Какие мета-теги понимает Google http://www.google.com/support/webmasters/bin/answer.py?answer=79812
Какие мета-теги понимает Bing
http://www.bing.com/community/blogs/webmaster/archive/2009/07/18/head-s-up-on-lt-head-gt-tag-optimization-sem-101.aspx
Google не использует мета-тег keywords
http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html
Meta теги. Учебник html
Глава 10
В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:
<html> — начало документа<head> — начало головы
</head> — закрытие головы
<body> — начало тела
</body> — закрытие тела
</html> — конец документа
Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.
С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <meta> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.
<meta> тег имеет следующие атрибуты:- http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
- name — информационное имя. (применяется в паре с атрибутом content)
- content — информационное содержание, связанное с мета именем (name)
Теперь на примерах будем вникать в суть дела.
Пример (очень нужный и важный):
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница — формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку «иероглифов» у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.
Теперь разберём по «слогам» нашу запись:
<meta http-equiv=»Content-Type» — указываем что в этом мета теге мы будем заниматься Content-Type — типом содержания
Content=»text/html; — а именно его текстом
Charset=Windows-1251″> — документ для Windows — Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252
В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8
То есть писать в голове документа вот так:
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
Пример:
<meta http-equiv=»Content-Language» Content=»ru»>
В этой строчке говорится о том что язык Language документа является русским Content=»ru»
Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.
Пример:
<meta name=»author» Content=»Остап Бендер»>
<meta name=»copyright» Content=»»Рога и копыта» Остап Бендер»>
Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name=»author» указывает имя автора страницы, а name=»copyright» авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду…
Пример:
<meta name =»Generator» Content=»Microsoft Notepad»>
Если хотите можете указать с помощью какого html редактора была написана данная страница.
Пример:
<meta name=»description» Content=»Производим закупку по выгодным ценам рогов и копыт!»>
Description — краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.
Пример:
<meta name=»keywords» Content =»рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене»>
Keywords — ключевые слова веб-страницы, опять таки предназначены для поисковых машин.
Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта 🙂 Какие слова и фразы Вы будите вводить в строке «Поиск»? ну наверно что то типа: «Где продать коровьи рога?» или «Реализовать копыта по выгодной цене» Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.
Помните что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.
Пример:
<meta name=»Publisher-Email» Content=»Ваш_e-mail@сервер.домен»>
<meta name=»Publisher-URL» Content=»http://www.Ваш_сайт/»>
Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL
Пример:
<meta name =»revisit-after» Content=»15 days»>
Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить «к Вам в гости» раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..
Пример:
<meta http-equiv=»expires» content=»Sun, 24 jan 2010 12:28:36 GMT+03:00″>
Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно «но», дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем «беда» примет Ваш сайт за «мертвый» заброшенный и никем не обновляемый.
Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(GMT+03:00 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.
Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели
|
|
Атрибуту content можно присвоить значение «0» <meta http-equiv=»Expires» content=»0″> в этом случае страница всегда будет загружаться с сервера.
И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..
Пример:
<meta http-equiv=»pragma» content=»no-cache»>
А такая запись вовсе запретит браузеру кэшировать данную страницу.
Пример:
<meta name=»robots» content=»Index,follow»>
Данный мета тег предназначен для подачи поисковому роботу той или иной команды.
Список возможных команд роботу:
- Index — индексировать страницу
- Noindex — не индексировать страницу
- Follow — прослеживать гиперссылки на странице
- Nofollow — не прослеживать гиперссылки на странице
- All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
- None — не индексировать страницу и не прослеживать гиперссылки на странице
Пример:
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:
<html><head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
<title>Переадресация</title>
</head>
<body>
<font size=»+1″>
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br>
<a href=»http://www.mysite.ru/index.html»><b>http://www.mysite.ru/</b></a><br>
Нажмите <a href=»http://www.mysite.ru/index.html»>здесь</a> для того чтобы выполнить переход немедленно.<br>
Приносим извинения за доставленные неудобства.
</font>
</body>
</html>
Разберём и осмыслим строчку из примера:
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>meta http-equiv=»Refresh» — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content=»10; — обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html»— адрес новой/другой страницы на которую следует перейти.
Пример:
<meta http-equiv=»Refresh» content=»30″>
А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.
Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.
Пример:
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=0)»>
<meta http-equiv =»Page- Exit » Content=»RevealTrans(Duration=3.0, Transition=23)»>
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
- Page-Enter — Эффект появления страницы
- Page- Exit — Эффект исчезновения страницы
В которых:
- Duration — время действия эффекта в секундах
- Transition — Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
Номер | Описание эффекта | Номер | Описание эффекта |
---|---|---|---|
0 | Прямоугольники внутрь | 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<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=12)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c5ffa0″>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page2.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>
Файл page2.html
<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=2.0, Transition=23)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c0e4ff»>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>
от одной страницы к другой или же при помощи кнопок «назад» «вперёд». <br>
При первом открыти страницы, а также во время перезагрузки<br>
эффекты перехода видны не будут.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page1.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>
Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!
описание(description), ключевые слова(keywords), заголовок(title) и другие мета-теги
Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами <head> и </head>, которые никак не отображаются браузером (за исключением содержимого тега <title>). Мета-теги могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. Мета-теги для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.
Всегда применяйте только те мета-теги, которые реально нужны для работы веб-сайта. Не следует загромождать область <head> лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям.
Функции мета-тегов
На данный момент не существует их четкой стандартизации, однако функции мета-тегов достаточно разнообразны. Можно выделить несколько основных направлений использования мета-тегов:
- мета-теги могут идентифицировать авторство веб-документа, его адрес, частоту его обновлений;
- мета-теги используются поисковыми роботами для индексации и создания заголовков гипертекстовых документов;
- мета-теги влияют на режим отображения веб-страниц.
Группы метатегов
Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также — формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.
Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.Атрибут | Описание |
---|---|
Name | Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др. |
content | Устанавливает значение атрибута, заданного с помощью name или http-equiv. |
scheme (устарел) | Указывает полезную информацию о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5. |
charset | Новый атрибут, показывает кодировку документа в HTML5. Пример: <meta charset=»utf-8″> |
http-equiv | Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы. |
Группа значений атрибута NAME
«keywords» (ключевые слова)
Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.
Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.
HTML-код с «keywords»:
<!DOCTYPE html>
<html>
<head>
<title>keywords</title>
<meta name="keywords" content="HTML,CSS,PHP,JavaScript">
</head>
<body>Основное содержимое страницы</body>
</html>
«description» (описание страницы)
Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.
Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!
HTML-код с «description»:
<!DOCTYPE html>
<html>
<head>
<title>description</title>
<meta name="description" content="Сайт об HTML и CSS">
<meta name="keywords" content="HTML,CSS,PHP,JavaScript">
</head>
<body>Основное содержимое страницы</body>
</html>
«Author» и «Copyright»
Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».
HTML-код с «author»:
<!DOCTYPE html>
<html>
<head>
<title>Примеры применения метатегов</title>
<meta name="author" content="Maxim White">
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Сайт об HTML и CSS">
</head>
<body>Основное содержимое страницы</body>
</html>
«Robots»
Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.
У «robots» могут быть следующие значения:
- index — страница должна быть проиндексирована;
- noindex — страница не индексируется;
- follow — гиперссылки на странице учитываются;
- nofollow — гиперссылки на странице не учитываются
- all — включает значения index и follow, включен по умолчанию;
- none — включает значения noindex и nofollow.
HTML-код с «robots»:
<!DOCTYPE html>
<html>
<head>
<title>Примеры применения метатегов</title>
<meta name="robots" content="noindex, nofollow">
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="author" content="Maxim White">
<meta name="description" content="Сайт об HTML и CSS">
</head>
<body>Основное содержимое страницы</body>
</html>
Группа значений атрибута HTTP-EQUIV
«Content-Type»
Content-Type определяет тип документа и его кодировку.
HTML-код с «Content-Type»:
<!DOCTYPE html>
<html>
<head>
<title>Примеры применения метатегов</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Сайт об HTML и CSS">
<meta name="author" content="Maxim White">
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>Основное содержимое страницы</body>
</html>
В HTML5 указание кодировки упрощено:
<meta charset="UTF-8">
«refresh»
Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).
HTML-код с «refresh»:
<!DOCTYPE html>
<html>
<head>
<title>Автозагрузка</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
</head>
<body>Основное содержимое страницы</body>
</html>
Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.
Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся. |
«Content-Language»
Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.HTML-код с «content-language»:
<!DOCTYPE html>
<html>
<head>
<title>Язык документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
<meta http-equiv="content-language" content="ru">
</head>
<body>Основное содержимое страницы</body>
</html>
В HTML5 указание языка упрощено:
<html lang="ru">
В этом уроке перечислены не все метатеги, которые вы можете встретить при изучении веб-ремесла. Остальные специфичны и вы познакомитесь с ними в дальнейшем при изучении наших уроков. Из всех же вышеперечисленных к использованию на каждой странице вашего сайта рекомендуются метатеги и их атрибуты приведенные в следующем примере:
Пример HTML:
Попробуй сам<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="HTML, Meta Tags, метаданные">
<meta name="description" content="Сайт об HTML и CSS">
</head>
<body>Основное содержимое страницы</body>
</html>
Задачи
Итоговое задание [10-14]
На этом уроке вы познакомились с наиболее важными метатегами основным предназначением которых является предоставление структурированных метаданных о веб-странице.
Пришло время повторить изученное и выполнить четыре несложных задания:
Ключевые слова
С помощью одинарного тега <meta> задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Ключевые слова</title>
</head>
<body>
<p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="HTML,CSS,JavaScript">
<title>Ключевые слова</title>
</head>
<body>
<p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p>
</body>
</html>
Индексация веб-страницы
С помощью одинарного тега <meta> разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Индексация и переход по ссылкам</title>
</head>
<body>
<p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="index, nofollow">
<title>Индексация и переход по ссылкам</title>
</head>
<body>
<p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p>
</body>
</html>
Автоматическая перезагрузка страницы
С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Автоматическая перезагрузка страницы</title>
</head>
<body>
<p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="30">
<title>Автоматическая перезагрузка страницы</title>
</head>
<body>
<p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
</body>
</html>
Автозагрузка новой страницы
Сделайте так, чтобы через 5 сек после загрузки страницы браузер перешел на адрес http://www.wm-school.ru.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Автозагрузка новой страницы</title>
</head>
<body>
<p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
<title>Автозагрузка новой страницы</title>
</head>
<body>
<p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
</body>
</html>
Атрибут http-equiv тега | HTML справочник
HTML тег <meta>Значение и применение
Атрибут http-equiv (HTML тега <meta>) фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками. Название заголовка указывается в атрибуте http-equiv, а значение указывается в атрибуте content. В некоторых случаях могут автоматически быть переведены в настоящие HTTP-заголовки.
Если атрибут http-equiv используется, то атрибут name не должен устанавливаться в мета-теге.
Поддержка браузерами
Синтаксис:
<meta http-equiv = "content-security-policy | content-type | default-style | refresh">
Значения атрибута
Значение | Описание |
---|---|
content-security-policy | Это значение позволяет администраторам веб-сайта определить правила (политику) для обслуживаемых ресурсов. Это помогает использовать механизм обеспечения безопасности, с помощью которого можно защищаться от атак с внедрением контента, например, межсайтового скриптинга. |
content-type | Задает кодировку для документа. Считается устаревшим в HTML 5. |
default-style | Указывает имя предпочитаемых стилей документа. Имя задается в атрибуте content и должно соответствовать следующим условиям (ограничениям):
|
refresh | Определяет интервал времени в секундах через который документ будет обновлен. Если внутри атрибута content указать через запятую значение домена (ss, URL=»domain»), то произойдет переход со страницы на заданный ресурс. |
Отличия HTML 4.01 от HTML 5
В HTML 5 значение content-type считается устаревшим.До стандарта HTML 5 значение кодировки страницы указывалось следующим образом:
<meta http-equiv = "Content-Type" content = "text/html; charset = character_set">
Пример использования
<!DOCTYPE html> <html> <head> <meta http-equiv = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- мета элемент, который указывает, что страница будет перезагружена через 15 секунд и перейдет по указанному URL --> <meta http-equiv = "content-security-policy" content = "default-src https:" > <!-- мета элемент, который разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https --> <meta http-equiv = "default-style" content = "default style" > <!-- мета элемент, который указывает имя предпочитаемых css стилей документа --> <title>Пример использования атрибута http-equiv тега <meta></title> <link href = "default.css" rel = "stylesheet" type = "text/css" title = "default style"> </head> <body> <h3> Это заголовок.</h3> <p>Это параграф. </p> </body> </html>
В данном примере мы использовали три элемента <meta> для которых были указаны различные значения атрибута http-equiv:
- первый мета элемент, указывает, что страница будет перезагружена (значение refresh) через 15 секунд и перейдет по указанному URL (значения, указанные в атрибуте content). Если адрес URL не указан, то страница просто будет перезагружена.
- второй мета элемент разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https. Это стало доступным благодаря использованию значения content-security-policy, которое позволяет с использованием атрибута content определить правила (политику) для обслуживаемых ресурсов.
- третий мета элемент, указывает имя предпочитаемых css стилей документа. Обратите внимание, что значение атрибута content должно совпадать со значением глобального атрибута title HTML тега <link>.
HTML тег <meta>
Атрибут http-equiv | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Браузеры преобразовывают значение атрибута http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.
Синтаксис
HTML |
|
XHTML |
|
Значения
Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv.
- Content-Type
- Тип кодировки документа.
- expires
- Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.
- pragma
- Способ кэширования документа.
- refresh
- Загрузить другой документ в текущее окно браузера.
Значение по умолчанию
Нет.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег META, атрибут http-equiv</title>
<meta http-equiv="expires" content="Sun, 01 Jan 2013 07:01:00 GMT">
</head>
<body>
<p>...</p>
</body>
</html>
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
— Веб-технологии для разработчиков
Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского
HTML элемент <meta>
представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как <base>
, <link>
, <script>
, <style>
или <title>
.
Категории контента | Мета данные. Если задан itemprop атрибут: flow content, phrasing content. |
---|---|
Разрешенное содержимое | Отсутствует — это пустой элемент. |
Пропуск тега | Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий — отсутствовать. |
Разрешенные родительские элементы | <meta charset> , <meta http-equiv> : <head> элемент. Если http-equiv это не заявленная декларация, то может быть внутри элемента <noscript> или <head> . |
Разрешёные роли ARIA | Отсутствуют |
DOM интерфейс | HTMLMetaElement |
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
Примечание: атрибут name
имеет особое значение для элемента <meta>
и атрибут itemprop
не должен быть задан в <meta>
элементе в котором уже определены какие-либо name
, http-equiv
или charset
атрибуты.
charset
- Этот атрибут задает кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определенной кодировки, он рекомендует:
- Авторам рекомендуется использовать
UTF-8
. - Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок
JIS_C6226-1983
,JIS_X0212-1990
,HZ-GB-2312
,JOHAB
иEBCDIC
.
Примечание: ASCII-несовместимые кодировки — это те, которые не преобразуют 8-битные коды точек
0x20
,0x7E
,0x0020
,0x007E
в коды Unicode точек.- Авторы не должны использовать
CESU-8
,UTF-7
,BOCU-1
и/илиSCSU
, так как есть примеры атак межсайтового скриптинга использующих данные кодировки. - Авторам не следует использовать кодировку
UTF-32
, потому что не все алгоритмы кодирования HTML5 могут отличить её отUTF-16
.
- Указанный набор символов должен соответствовать одной странице.
Нет веских оснований для объявления неточного набора символов. <meta>
элемент должен находиться внутри элемента<head>
и задаваться в 1024 первых байтах HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.- Этот
<meta>
элемент — часть алгоритма, определяющего набор символов (algorithm to determine the character set) страницы, который браузер поддерживает. ЗаголовокContent-Type
и любые Byte-Order Marks элементы переопределяют данный элемент. - Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting тхнологии могут повредить страницу, например такие как UTF-7 fallback cross-scripting technique. Постоянная установка этого элемента будет защищать Вас от этого риска.
- Этот
<meta>
элемент это синоним для pre-HTML5<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">
гдеIANAcharset
соответствует значению эквивалентногоcharset
атрибута.
Этот синтаксис по-прежнему разрешен, хотя и устарел и больше не рекомендуется.
- Авторам рекомендуется использовать
content
- Этот атрибут содержит значение для
http-equiv
илиname
атрибута, в зависимости от контекста. http-equiv
- Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью
content
и может быть следующим:"content-language"
- Эта прагма определяет значение языка страницы по умолчанию.
Не используйте эту прагму, так как она устарела Используйте глобальный атрибут
<html>
элемента вместо этого. "Content-Security-Policy"
- Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.
"content-type"
- Этот атрибут определяет MIME type документа. За ним следует синтаксис такой же как и в поле заголовка объекта содержимого HTTPI, однако как и внутри HTML элемента, большинство этих значений не доступно.
Поэтому допустимым синтаксисом для его содержимого является литеральная строка ‘text/html
‘, за которой следует набор символов со следующим синтаксисом: ‘; charset=
IANAcharset
‘ гдеIANAcharset
это предпочтительное MIME имя для набора символов, который определяется как IANA. Замечания:- Не используйте эту прагму, так как она устарела. Используйте атибут
charset
в элементе<meta>
вместо этого. <meta>
не может быть использована для выбора типа документа в XHTML документе, или в HTML5 документе, за которым следует XHTML синтаксис, никогда не задавайте MIME тип как XHTML MIME. Это будет некорректно.- Только HTML документ может использовать контент-тип, так что большинство из них являются неиспользуемыми, поэтому они являются устаревшими и заменяются
charset
атрибутом.
- Не используйте эту прагму, так как она устарела. Используйте атибут
"default-style"
- Специализация этой прагмы — предпочтительный стиль таблиц, используемый на странице.
content
атрибут должен содержать заголовок<link>
элемента которыйhref
связывает атрибут с CSS таблцей стилей, или заголовок<style>
элемента, который содержит CSS таблицу стилей. "refresh"
- Эта прагма определяет:
- Количество секунд перезагрузки таблицы, если
content
атрибут содержит только положительный целочисленный номер; - Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если
content
атрибут содержит положительный целочисленный номер, заканчивающийся строкой ‘;url=
‘ и корректный URL.
- Количество секунд перезагрузки таблицы, если
"set-cookie"
- Эта прагма определяет cookie для страницы. Её содержимое должно заканчиваться синтаксисом, определяемым IETF HTTP Cookie Specification.
Замечание: Не используете эту прагму, так как она устарела. Используйте HTTP header set-cookie вместо этого.
name
- Этот атрибут определяет имя уровня документа метаданных.
Его не следует устанавливать, если один из атрибутовitemprop
,http-equiv
илиcharset
также указан в наборе.
Имя этого документального уровня метаданных связано со значением, которое содержится вcontent
атрибуте.Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредтвомcontent
атрибута:application-name
, определяет имя веб-приложения, запущенного на веб-странице; Замечание:- Браузеры могут использовать его для идентификации приложения. Он отличается от
<title>
элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например име документа или статус; - Простые веб-страницы не определяют application-name meta.
- Браузеры могут использовать его для идентификации приложения. Он отличается от
автор
определяет в свободном формате имя автора документа;- описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;
- генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;
- Ключевые слова, представленные строками, разделенными запятыми, связанные с содержанием страницы
referrer
контролирует содержимое HTTP.Referer
HTTP — заголовок, прикрепленный к любому запросу, отправленному из этого документа:Значения содержимого атрибута <meta name=»referrer»> no-referrer
Не отправлять HTTP Referer
заголовок.origin
Отправить оригинал. no-referrer-when-downgrade
Отправить оригинал, как ссылку по умолчанию на безопасный пункт (https->https), но не отправлять ссылку на менее безопасную структуру (https->http). Это поведение по умолчанию. origin-when-crossorigin
Отправляет полный URL (удаленный из параметров) при выполнении запроса с тем же источником, или только оригинал документа в других случаях. unsafe-URL
Отправляет полный URL (удалённый из параметров), при выполнении запроса того же или перекрестного происхождения. Замечание: Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.
Замечание: Динамическая вставка
<meta name="referrer">
(с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.
Атрибут также может иметь значение, взятое из существующего листа определений WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имен:
creator
, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имен больше чем одно, то несколько<meta>
элементов должны быть использованы;googlebot
, синонимrobots
, но только следует за Googlebot, сканирует индексы для Google;publisher
, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;robots
, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже:
Замечания:Значения для содержимого <meta name=»robots»> Значение Описание Используется index
Позволяет роботу индексировать страницу All noindex
Освобождает робота от идексирования страниц All follow
Позволяет роботу переходить по ссылкам со страницы All nofollow
Запрещает роботу переходить по ссылкам со страницы All none
Эквивалетно noindex, nofollow
Google noodp
Запрещает использование Open Directory Project описания, если таковые имеются, как описание страницы на странице результатов поиска Google, Yahoo, Bing
noarchive
Запрещает поисковой системе кэшировать содержимое страницы. Google, Yahoo, Bing nosnippet
Запрещает отображение любого описания страницы на странице результатов поиска Google, Bing noimageindex
Запрещает отображение этой страницы в качестве ссылающейся страницы индексированного изображения. Google nocache
Синоним noarchive
Bing - Только кооперативные роботы будут следовать правилам, определенным именем роботов.
- Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если Вы хотите скрыть от них информацию, то используйте robots.txt файл.
- Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.
- Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.
- Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.
slurp
,синонимrobots
, но следует только за Slurp, индексирующим роботом от Yahoo Search;
Наконец несколько общих терминов:
viewport
, который дает подсказки о размере изначального размера viewport. Эта прагма используется только на некоторых мобильных устройствах.
Замечания:Значения для содержания <meta name="viewport">
Значение Допустимые значения Описание width
положительный целочисленный номер или литерал device-width
Определяет ширину области просмотра в пикселях height
положительный целочисленный номер или литерал device-height
Определяет высоту области просмотра в пикселях initial-scale
положительное число между 0.0
и10.0
Определяет соотношение между шириной устройства и размером области просмотра maximum-scale
положительное число между 0.0
и10.0
Определяет максимальное значение зума; должен быть больше или равен минимальному масштабу или быть неопределенным. minimum-scale
положительное число между 0.0
и10.0
Определяет минимальное значение зума; должен быть меньше или равен максимальному масштабу или быть неопределенным. user-scalable
булевское значение (да или нет) Если весь набор содержит значения нет, то пользователю не доступен зум на веб-странице. По умолчанию задано значение да. - Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.
- Значения по умолчанию могут быть изменены у разных браузеров или устройств..
- Для изучения этой прагмы на Firefox for Mobile, посмотрите статью this article.
scheme
- Этот атрибут определяет схему, которая описывает метаданные.
Схема — это контекст, ведущий к правильной интерпретацииcontent
значения, например формата.Замечание: Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.
Замечания
В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:
- Если в наборе
name
, то это document-level metadata, применяемая ко всей странице. - Если в наборе
http-equiv
, то это pragma directive,
то есть информация, веб-сервер предоставляет информацию о том, как должна обслуживаться веб-страница. - Если в наборе
charset
, то это charset declaration,
то есть кодировка, используемая для сериализованной формы веб-страницы. - Если в наборе
itemprop
, то это user-defined metadata,
прозрачна для агента пользователя, поскольку семантика метаданных зависит от пользователя.
Пример
<!-- In HTML5 --> <meta charset="utf-8"> <!-- Redirect page after 3 seconds --> <meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
Спецификации
Совместимость с браузерами
Смотрите также
Кодировкасимволов — Как установить «Content-Type … charset» в заголовке запроса с помощью ссылки HTML
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
- реклама Обратитесь к разработчикам по всему миру
Кодировка символов типа содержимого в электронной почте HTML
Наши последователи и подписчики задавали много вопросов о том, как почтовые клиенты устанавливают тип содержимого в своих электронных письмах HTML. Как вы, возможно, уже знаете, тип содержимого играет важную роль в способе отображения электронного письма, особенно в отношении специальных символов на нелатинских языках или при копировании из текстового редактора, такого как Microsoft Word.
Короче говоря, все почтовые клиенты игнорируют тип содержимого, определенный в вашем метатеге. Вместо этого они читают его из значения типа содержимого, которое находится в заголовке вашего электронного письма.
Сервер, отправляющий вашу электронную почту, автоматически установит значение типа символа в заголовке. Вы можете изменить это значение, но вам потребуется прямой доступ к почтовому серверу. Самым безопасным решением является преобразование всех ваших специальных символов в объекты HTML, и мы создали бесплатный онлайн-инструмент, который поможет вам в этом процессе.
Попробуйте конвертер символов
Что такое Content-Type?
Content-type сообщает веб-браузеру или почтовому приложению, как интерпретировать текстовые символы в вашем HTML или теле письма. Самые популярные наборы символов — UTF-8 и ISO-8859-1.
Для иллюстрации возьмем следующий код:
Символы UTF-8: ö ü ä
UTF-8 китайский: 激 光 這
Символы объекта HTML: & # 28450; & # 23383;
Вот как это отображается с использованием каждого набора символов:
Как видно выше, китайские символы не представлены в наборе символов ISO-8859-1.Это связано с тем, что ISO-8859-1 включает только символы латинского языка. В результате получается набор беспорядочного текста, который является интерпретацией символов ISO-8859-1.
Установка типа содержимого также важна для доступности электронной почты; это гарантирует, что ничто не нарушит шаблон чтения для подписчика, независимо от того, читает ли подписчик письмо самостоятельно или использует программу чтения с экрана.
В рабочем процессе доступности Campaign Precheck вы можете установить тип содержимого электронной почты одним нажатием кнопки.Мы позаботимся о том, чтобы в ваш HTML был добавлен правильный код.
Инструмент проверки типа содержания Campaign Precheck.Как это вписывается в электронные письма в формате HTML?
При разработке веб-сайтов мы можем указать набор символов в метатеге, используя этот код:
Почтовые клиенты отображают электронные письма, используя одну и ту же предпосылку; он будет отображать электронное письмо в зависимости от типа содержимого. Однако почтовые клиенты читают значение типа содержимого, установленное в заголовке электронной почты, и игнорируют метатег в HTML.
Как установить Content-Type в заголовке электронной почты
Сервер, отправляющий электронное письмо, устанавливает содержание заголовка. Заголовок содержит информацию о том, кто получает электронное письмо («кому»), кто отправляет электронное письмо («от»), дату и время. Пользователи могут видеть часть этой информации в верхней части каждого сообщения при просмотре в почтовом клиенте.
Вот фрагмент заголовка электронного письма (обратите внимание на значение типа содержимого):
Дата: среда, 15 декабря 2010 г. 12:45:55 -0700
Кому: test @ test.ком
От: [email protected]
Тема: UTF-8
Идентификатор сообщения:
X-приоритет: 3
X-Mailer: EOAMailer 5.0.0
MIME-версия: 1.0
Кодирование передачи содержимого: 8 бит
Тип содержимого: текст / html; charset = "UTF-8"
Результаты тестирования почтового клиента
Мы отправили приведенный выше пример кода в тестовую электронную почту всем почтовым клиентам, которые поддерживает Email on Acid. Почти каждый клиент отображает текст на основе значения типа содержимого, установленного в заголовке электронной почты.Gmail — единственный клиент, который автоматически преобразует ваш текст в UTF-8, независимо от того, что вы указали в заголовке.
Вот результаты тестов:
Клиенты | Content-Type |
---|---|
AOL Outlook 2003, 2007 и 2010 Lotus Notes 8 и 8.5 Yahoo Thunderbird iPad iPhone Mail Android Mail | Берет тип содержимого из заголовка вашего электронного письма |
Gmail Android Gmail iPhone Gmail iPad Gmail | Преобразует тип содержимого в UTF-8 |
Мы заметили одно интересное действие: веб-клиенты преобразуют ваш текст в набор символов типа содержимого перед его отображением в браузере.Мы смогли проверить это, просмотрев, какой тип контента они устанавливали в своих метатегах. Как оказалось, большинство из них используют UTF-8.
Решение
Поскольку поставщики услуг электронной почты (ESP) устанавливают тип содержимого в заголовке, мы добавляем еще один уровень сложности в нашу разработку электронной почты. Вот несколько способов решить эту проблему:
Вариант 1:
Обратитесь к своему поставщику услуг электронной почты (ESP) и спросите их, какой тип содержимого они задают в заголовке при отправке электронных писем.Как только вы узнаете тип содержимого, используйте это значение в своем метатеге HTML при создании электронного письма.
Вариант 2:
Преобразуйте все специальные символы в их HTML-объекты, и вам не придется беспокоиться о заголовке Content-Type. Например, следующий символ «漢» имеет значение объекта HTML «& # 28450;». Чтобы помочь вам с преобразованием, мы создали бесплатный онлайн-инструмент, который преобразует все ваши специальные символы за вас. Просто воспользуйтесь этим инструментом преобразования, прежде чем отправлять электронную почту.
Заключительные слова о типе содержимого
Всегда важно проверять наборы символов с помощью Internet Explorer и Firefox, особенно если вы используете нелатинские символы или копируете и вставляете контент из текстового редактора, такого как Microsoft Word.
Когда вы отправляете тестовую электронную почту через Email on Acid, наши серверы настроены на отправку вашей электронной почты с использованием Content-Type UTF-8 каждому из наших поддерживаемых почтовых клиентов.
Вне зависимости от того, вносите ли вы изменения в дизайн электронной почты, меняете тип контента или настраиваете способ кодирования символов HTML, все это может иметь большое влияние на то, как отображается ваше письмо.Вот почему так важно проверять и предварительно просматривать свое письмо перед каждой отправкой. Хотите убедиться в этом сами? Попробуйте нашу бесплатную пробную версию и узнайте, как мы можем помочь вам оптимизировать процесс контроля качества электронной почты.
Попробуй сегодня
Этот пост был обновлен 25 января 2019 года. Последний раз он обновлялся в феврале 2017 года и впервые был опубликован в 2011 году.
Автор: Джон Тис
Джон Тис (John Thies) — генеральный директор и соучредитель Email on Acid, платформы проверки качества электронной почты до развертывания, которая стремится устранить врожденный страх перед нажатием кнопки «Отправить».Он страстный и увлеченный лидер отрасли, который живет, дышит и мечтает об электронной почте (серьезно). Джон также является генеральным директором Cause for Awareness, недавно созданной некоммерческой организации, которая предоставляет другим некоммерческим организациям ресурсы цифрового маркетинга. Он проживает в Денвере, штат Колорадо, с женой и сыном.
Автор: Джон Тис
Джон Тис (John Thies) — генеральный директор и соучредитель Email on Acid, платформы проверки качества электронной почты до развертывания, которая стремится устранить врожденный страх перед нажатием кнопки «Отправить».Он страстный и увлеченный лидер отрасли, который живет, дышит и мечтает об электронной почте (серьезно). Джон также является генеральным директором Cause for Awareness, недавно созданной некоммерческой организации, которая предоставляет другим некоммерческим организациям ресурсы цифрового маркетинга. Он проживает в Денвере, штат Колорадо, с женой и сыном.
, Тип содержимого рядом с текстом / html — qaru
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека
Общественные вопросы и ответы
- Команды
Частные вопросы и ответы для вашей команды
- предприятие
Частные вопросы и ответы для вашего предприятия
- работы
Программирование и связанные с ним возможности технической карьеры
- Талант
Нанять технических талантов
- реклама
Обратитесь к разработчикам по всему миру
Загрузка…
. типов MIME (типы мультимедиа IANA) — веб-технологии для разработчиков
Тип носителя (также известный как многоцелевое расширение почты Интернета или тип MIME ) — это стандарт, который указывает природу и формат документа, файла или набора байтов. Он определен и стандартизирован в IETF RFC 6838.
Internet Assigned Numbers Authority (IANA) отвечает за все официальные типы MIME, и вы можете найти самый последний и полный список на их странице Media Types.
Важно: Браузеры используют тип MIME, а не , а не расширение файла , чтобы определить, как обрабатывать URL-адрес, поэтому важно, чтобы веб-серверы отправляли правильный тип MIME в заголовке Content-Type
ответа. Если это неправильно настроено, браузеры могут неверно истолковать содержимое файлов, а сайты не будут работать правильно, а загруженные файлы могут быть неправильно обработаны.
Структура типа MIME
Самый простой тип MIME состоит из типа и подтипа ; каждая из этих строк, при соединении с косой чертой (/
) между ними, составляет MIME-тип.В типе MIME нельзя использовать пробелы:
тип / подтип
Тип представляет общую категорию, в которую попадает тип данных, например видео
или текст
. Подтип определяет точный вид данных указанного типа, которые представляет тип MIME. Например, для MIME-типа текст
подтип может быть plain
(обычный текст), html
(исходный код HTML) или calendar
(для iCalendar / .ics
) файлы.
Каждый тип имеет свой собственный набор возможных подтипов, а тип MIME всегда имеет как тип, так и подтип, а не только один или другой.
Для предоставления дополнительных сведений можно добавить необязательный параметр :
тип / подтип ; параметр = значение
Например, для любого типа MIME, основным типом которого является текст
, можно использовать необязательный параметр charset
, чтобы указать набор символов, используемый для символов в данных.Если кодировка
не указана, по умолчанию используется кодировка ASCII ( US-ASCII
), если она не отменена настройками пользовательского агента. Чтобы указать текстовый файл UTF-8, используется тип MIME text / plain; charset = UTF-8
.
Типы MIME нечувствительны к регистру, но традиционно записываются в нижнем регистре, за исключением значений параметров, регистр которых может иметь или не иметь конкретное значение.
Типы
Существует два класса типов: дискретный и составной .Дискретные типы — это типы, которые представляют один файл или носитель, например один текстовый или музыкальный файл, или одно видео. Многокомпонентный тип представляет собой документ, состоящий из нескольких составных частей, каждая из которых может иметь свой собственный индивидуальный тип MIME; или же составной тип может инкапсулировать несколько файлов, отправляемых вместе в одной транзакции. Например, составные типы MIME используются при вложении нескольких файлов в электронное письмо.
Дискретные типы
В настоящее время в IANA зарегистрированы следующие дискретные типы:
-
приложение
Список в IANA - Любые двоичные данные, которые явно не относятся ни к одному из других типов; либо данные, которые будут выполняться или интерпретироваться каким-либо образом, либо двоичные данные, требующие использования определенного приложения или категории приложений.Общие двоичные данные (или двоичные данные, истинный тип которых неизвестен) — это
application / octet-stream
. Другие распространенные примеры включают application / pdf
, application / pkcs8
и application / zip
. -
аудио
Список в IANA - Аудио или музыкальные данные. Примеры включают
audio / mpeg
, audio / vorbis
. -
пример
- Зарезервировано для использования в качестве заполнителя в примерах, показывающих, как использовать типы MIME.Их никогда не следует использовать вне списков примеров кода и документации.
, пример
также можно использовать как подтип; например, в примере, относящемся к работе со звуком в Интернете, можно использовать MIME-тип audio / пример
, чтобы указать, что тип является заполнителем и должен быть заменен соответствующим при использовании кода в реальном мире. , -
шрифт
Список в IANA - Данные шрифта / гарнитуры. Общие примеры включают
font / woff
, font / ttf
и font / otf
. -
изображение
Список в IANA - Изображение или графические данные, включая растровые и векторные неподвижные изображения, а также анимированные версии форматов неподвижных изображений, такие как анимированный GIF или APNG. Типичные примеры:
image / jpeg
, image / png
и image / svg + xml
. -
модель
Список в IANA - Данные модели для 3D-объекта или сцены. Примеры включают модель
/ 3mf
и модель / vml
. -
текст
Список в IANA - Только текстовые данные, включая любое удобочитаемое содержимое, исходный код или текстовые данные, такие как данные в формате значений, разделенных запятыми (CSV).Примеры включают
текст / простой
, текст / csv
и текст / html
. -
видео
Список в IANA - Видеоданные или файлы, например фильмы MP4 (видео
/ mp4
).
Для текстовых документов без определенного подтипа следует использовать text / plain
. Точно так же для двоичных документов без определенного или известного подтипа следует использовать application / octet-stream
.
Составные типы
Multipart Типы указывают категорию документа, разбитого на части, часто с разными типами MIME; их также можно использовать — особенно в сценариях электронной почты — для представления нескольких отдельных файлов, которые являются частью одной транзакции.Они представляют собой составной документ .
За исключением multipart / form-data
, используемого в методе POST
HTML-форм, и multipart / byteranges
, используемого с 206
Partial Content
для отправки части документа, HTTP не • обрабатывать составные документы особым образом: сообщение передается в браузер (который, скорее всего, покажет окно «Сохранить как», если он не знает, как отобразить документ).
Есть два составных типа:
-
сообщение
Список в IANA - Сообщение, которое инкапсулирует другие сообщения.Это можно использовать, например, для представления электронного письма, которое включает переадресованное сообщение как часть своих данных, или для того, чтобы разрешить отправку очень больших сообщений частями, как если бы это было несколько сообщений. Примеры включают сообщение
/ rfc822
(для переадресованного сообщения или сообщения с ответом) и сообщение / частичное
, позволяющее автоматически разбивать большое сообщение на более мелкие для автоматической повторной сборки получателем. -
составной
Список в IANA - Данные, состоящие из нескольких компонентов, которые могут иметь разные типы MIME по отдельности.Примеры включают
multipart / form-data
(для данных, созданных с использованием FormData
API) и multipart / byteranges
(определено в RFC 7233: 5.4.1 и используется с ответом HTTP 206
«Частичное содержимое», возвращаемым, когда извлеченные данные — это только часть содержимого, например, доставленные с использованием заголовка Range
).
Важные типы MIME для веб-разработчиков
приложение / октет-поток
Это значение по умолчанию для двоичных файлов.Поскольку это означает неизвестный двоичный файл , браузеры обычно не запускают его или даже не спрашивают, нужно ли его запускать. Они рассматривают это так, как если бы заголовок Content-Disposition
был установлен на вложение
, и предлагают диалоговое окно «Сохранить как».
текст / простой
Это значение по умолчанию для текстовых файлов. Даже если это действительно означает «неизвестный текстовый файл», браузеры предполагают, что они могут его отобразить.
Обратите внимание, что text / plain
не означает «какие-либо текстовые данные.»Если они ожидают определенного типа текстовых данных, они, скорее всего, не сочтут это совпадением. В частности, если они загрузят файл text / plain
из элемента
, объявляющего файл CSS, они не распознают его как действительный файл CSS, если он представлен с text / plain
. Необходимо использовать mime-тип text / css
CSS.
текст / CSS
CSS-файлов, используемых для стилизации веб-страницы. необходимо отправить с текстом / css
. Если сервер не распознает .css
для файлов CSS, он может отправлять их с типами MIME text / plain
или application / octet-stream
. В этом случае они не будут распознаваться большинством браузеров как CSS и будут проигнорированы.
текст / HTML
Все содержимое HTML должно обслуживаться этим типом. Альтернативные типы MIME для XHTML (например, application / xhtml + xml
) в настоящее время в основном бесполезны.
Примечание: Используйте application / xml
или application / xhtml + xml
, если вам нужны строгие правила синтаксического анализа XML, разделы или элементы, не относящиеся к HTML / SVG. / MathML пространства имен.
текст / JavaScript
Согласно спецификации HTML, файлы JavaScript всегда должны обслуживаться с использованием типа MIME text / javascript
. Никакие другие значения не считаются допустимыми, и использование любого из них может привести к тому, что скрипты не будут загружаться или запускаться.
По историческим причинам стандарт MIME Sniffing Standard (определение того, как браузеры должны интерпретировать типы мультимедиа и выяснить, что делать с контентом, у которого нет действительного контента) позволяет использовать JavaScript с использованием любого типа MIME, который по существу соответствует любому из следующие:
-
приложение / javascript
-
приложение / ecmascript
-
приложение / x-ecmascript
-
приложение / x-javascript
-
текст / JavaScript
-
текст / ecmascript
-
текст / javascript1.0
-
текст / javascript1.1
-
текст / javascript1.2
-
текст / javascript1.3
-
текст / javascript1.4
-
текст / javascript1.5
-
текст / jscript
-
текст / livescript
-
текст / x-ecmascript
-
текст / x-javascript
Примечание: Несмотря на то, что любой пользовательский агент может поддерживать любой или все из них, вы должны использовать только text / javascript
.Это единственный тип MIME, который гарантированно будет работать сейчас и в будущем.
Некоторое содержимое, которое вы обнаружите, может иметь параметр charset
в конце типа носителя text / javascript
, чтобы указать набор символов, используемый для представления содержимого кода. Это недопустимо, и в большинстве случаев скрипт не загружается.
Типы изображений
Файлы с типом MIME изображение
содержат данные изображения. Подтип указывает, какой именно формат файла изображения представляют данные.Только несколько типов изображений используются достаточно часто, чтобы их можно было считать безопасными для использования на веб-страницах:
Аббревиатура Формат файла Тип MIME Расширение файла (а) Совместимость с браузером APNG Анимированная переносимая сетевая графика изображение / apng
.apng
Chrome, Edge, Firefox, Opera, Safari БМП Растровый файл изображение / BMP
.БМП
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari GIF Формат обмена графикой изображение / gif
.gif
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari ICO Значок Microsoft изображение / значок x
.ico
, .cur
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari JPEG Объединенная группа экспертов по фотографии изображение изображение / jpeg
.jpg
, .jpeg
, .jfif
, .pjpeg
, .pjp
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari PNG Переносимая сетевая графика изображение / png
.png
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari SVG Масштабируемая векторная графика изображение / svg + xml
.svg
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari TIFF Формат файлов изображений с тегами изображение / tiff
.tif
, .tiff
Нет встроенных; требуются дополнения WebP Формат веб-изображения изображение / webp
.webp
Chrome, Edge, Firefox, Opera
Аббревиатура каждого формата указывает на более подробное описание формата, его возможностей и подробную информацию о совместимости с браузером; в том числе, в каких версиях реализована поддержка и какие специальные функции могут появиться позже.
Типы аудио и видео
Как и в случае с изображениями, HTML не требует, чтобы веб-браузеры поддерживали какие-либо конкретные типы файлов и кодеков для элементов
и
, поэтому важно учитывать вашу целевую аудиторию и диапазон браузеры (и версии этих браузеров), которые они могут использовать при выборе типа файла и кодеков, используемых для мультимедиа.
В нашем руководстве по форматам медиаконтейнеров представлен список типов файлов, которые обычно поддерживаются веб-браузерами, включая информацию о том, каковы могут быть их особые варианты использования, любые недостатки, которые они имеют, и информацию о совместимости, а также другие детали.
В руководствах по аудиокодекам и видеокодекам перечислены различные кодеки, которые часто поддерживаются веб-браузерами, а также приведены сведения о совместимости с технической информацией, например, сколько аудиоканалов они поддерживают, какой тип сжатия используется, какие скорости передачи данных и т. Д. повторно полезен в. Кодеки, используемые в руководстве WebRTC, расширяют это, специально охватывая кодеки, поддерживаемые основными веб-браузерами, поэтому вы можете выбрать кодеки, которые наилучшим образом охватывают диапазон браузеров, которые вы хотите поддерживать.
Что касается типов MIME аудио или видео файлов, они обычно определяют формат контейнера (тип файла). Необязательный параметр кодеков можно добавить к типу MIME, чтобы дополнительно указать, какие кодеки использовать и какие параметры использовались для кодирования мультимедиа, например профиль кодека, уровень или другую подобную информацию.
Наиболее часто используемые типы MIME, используемые для веб-содержимого, перечислены ниже. Однако это не полный список всех типов, которые могут быть доступны. См. Руководство по форматам медиа-контейнеров.
Тип MIME Тип аудио или видео аудио / волна
аудио / wav
аудио / x-wav
аудио / x-pn-wav
Аудиофайл в формате контейнера WAVE. Аудиокодек PCM (кодек WAVE «1») часто поддерживается, но другие кодеки имеют ограниченную поддержку (если таковая имеется). аудио / webm
Аудиофайл в формате контейнера WebM.Vorbis и Opus — это кодеки, официально поддерживаемые спецификацией WebM. видео / webm
Видеофайл, возможно, со звуком, в формате контейнера WebM. VP8 и VP9 — наиболее распространенные видеокодеки; Vorbis и Opus — самые распространенные аудиокодеки. аудио / ogg
Аудиофайл в формате контейнера Ogg. Vorbis — наиболее распространенный аудиокодек, используемый в таком контейнере; однако Opus теперь также поддерживается Ogg. видео / ogg
Видеофайл, возможно со звуком, в формате контейнера Ogg. Theora — это обычный видеокодек, используемый в нем; Vorbis — это обычный аудиокодек, хотя Opus становится все более распространенным. приложение / ogg
Аудио или видео файл, использующий формат контейнера Ogg. Theora — это обычный видеокодек, используемый в нем; Vorbis — обычный аудиокодек.
multipart / form-data
Тип multipart / form-data
может использоваться при отправке значений заполненной HTML-формы из браузера на сервер.
Как формат документа, состоящего из нескольких частей, он состоит из разных частей, разделенных границей (строка, начинающаяся с двойного тире –
). Каждая часть представляет собой отдельный объект со своими собственными заголовками HTTP, Content-Disposition
и Content-Type
для полей загрузки файлов.
Content-Type: multipart / form-data; граница = aBoundaryString
(другие заголовки, связанные с составным документом в целом)
--aBoundaryString
Content-Disposition: форма-данные; Name = "Myfile"; имя файла = "IMG.JPG»
Тип содержимого: изображение / JPEG
(данные)
--aBoundaryString
Content-Disposition: форма-данные; имя = "MyField"
(данные)
--aBoundaryString
(больше подразделов)
--aBoundaryString--
Следующие <форма>
:
отправит это сообщение:
POST / HTTP / 1.1
Хост: localhost: 8000
Пользовательский агент: Mozilla / 5.0 (Macintosh; Intel Mac OS X 10.9; rv: 50.0) Gecko / 20100101 Firefox / 50.0
Принять: text / html, application / xhtml + xml, application / xml; q = 0.9, * / *; q = 0.8
Accept-Language: en-US, en; q = 0,5
Принятие кодировки: gzip, deflate
Подключение: keep-alive
Небезопасные запросы на обновление: 1
Content-Type: multipart / form-data; граница = --------------------------- 8721656041911415653955004498
Длина содержимого: 465
----------------------------- 8721656041911415653955004498
Content-Disposition: форма-данные; имя = "MyTextField"
Тест
----------------------------- 8721656041911415653955004498
Content-Disposition: форма-данные; имя = "myCheckBox"
на
----------------------------- 8721656041911415653955004498
Content-Disposition: форма-данные; Name = "Myfile"; имя файла = "тест.текст"
Content-Type: текст / простой
Простой файл.
----------------------------- 8721656041911415653955004498--
multipart / byteranges
Тип MIME multipart / byteranges
используется для отправки частичных ответов браузеру.
Когда отправляется код статуса 206
Partial Content
, этот тип MIME указывает, что документ состоит из нескольких частей, по одной для каждого из запрошенных диапазонов. Как и другие составные типы, Content-Type
использует границу
для разделения частей.Каждая часть имеет заголовок Content-Type
с его фактическим типом и Content-Range
диапазона, который он представляет.
HTTP / 1.1 206 Частичное содержимое
Accept-Ranges: байты
Content-Type: multipart / byteranges; граница = 3d6b6a416f9b5
Длина содержимого: 385
--3d6b6a416f9b5
Тип содержимого: текст / html
Content-Range: байты 100-200 / 1270
eta http-Equiv = "Content-type" content = "text / html; charset = utf-8" />
Важность установки правильного типа MIME
Большинство веб-серверов отправляют нераспознанные ресурсы как MIME-тип application / octet-stream
.По соображениям безопасности большинство браузеров не позволяют устанавливать пользовательское действие по умолчанию для таких ресурсов, вынуждая пользователя сохранять его на диск, чтобы использовать его.
Некоторые распространенные неправильные конфигурации серверов:
файлов, сжатых в формате RAR. В этом случае идеальным будет настоящий тип исходных файлов; это часто невозможно, так как файлы .RAR могут содержать несколько ресурсов разных типов. В этом случае настройте сервер для отправки application / x-rar-compressed
.
Аудио и видео. В элементах
или
будут воспроизводиться только ресурсы с правильным типом MIME. Обязательно укажите правильный тип носителя для аудио и видео.
Собственные типы файлов. Избегайте использования application / octet-stream
, поскольку большинство браузеров не позволяют определять поведение по умолчанию (например, «Открыть в Word») для этого универсального типа MIME. Конкретный тип, например application / vnd.mspowerpoint
позволяет пользователям автоматически открывать такие файлы в программном обеспечении для презентаций по их выбору.
Обнюхивание MIME
При отсутствии типа MIME или в некоторых случаях, когда браузеры считают, что они неверны, браузеры могут выполнять сниффинг MIME - угадывая правильный тип MIME, глядя на байты ресурса.
Каждый браузер выполняет сниффинг MIME по-своему и при разных обстоятельствах. (Например, Safari будет смотреть на расширение файла в URL-адресе, если отправленный тип MIME не подходит.) Есть проблемы с безопасностью, поскольку некоторые типы MIME представляют исполняемый контент. Серверы могут предотвратить прослушивание MIME, отправив заголовок X-Content-Type-Options
.
Другие способы передачи документа типа
MIME-типы - не единственный способ передать информацию о типе документа:
- Иногда используются суффиксы имени файла, особенно в Microsoft Windows. Не все операционные системы считают эти суффиксы значимыми (например, Linux и MacOS), и нет гарантии, что они верны.
- Магические числа. Синтаксис различных форматов позволяет делать вывод о типах файлов, глядя на их байтовую структуру. Например, файлы GIF начинаются с шестнадцатеричного значения
47 49 46 38 39
( GIF89
), а файлы PNG - с 89 50 4E 47
( .PNG
). Не все типы файлов имеют магические числа, так что это тоже не на 100% надежно.
См. Также
,
Content-Type
ответа. Если это неправильно настроено, браузеры могут неверно истолковать содержимое файлов, а сайты не будут работать правильно, а загруженные файлы могут быть неправильно обработаны./
) между ними, составляет MIME-тип.В типе MIME нельзя использовать пробелы: видео
или текст
. Подтип определяет точный вид данных указанного типа, которые представляет тип MIME. Например, для MIME-типа текст
подтип может быть plain
(обычный текст), html
(исходный код HTML) или calendar
(для iCalendar / .ics
) файлы. текст
, можно использовать необязательный параметр charset
, чтобы указать набор символов, используемый для символов в данных.Если кодировка
не указана, по умолчанию используется кодировка ASCII ( US-ASCII
), если она не отменена настройками пользовательского агента. Чтобы указать текстовый файл UTF-8, используется тип MIME text / plain; charset = UTF-8
. приложение
Список в IANA application / octet-stream
. Другие распространенные примеры включают application / pdf
, application / pkcs8
и application / zip
. аудио
Список в IANA audio / mpeg
, audio / vorbis
. пример
, пример
также можно использовать как подтип; например, в примере, относящемся к работе со звуком в Интернете, можно использовать MIME-тип audio / пример
, чтобы указать, что тип является заполнителем и должен быть заменен соответствующим при использовании кода в реальном мире. , шрифт
Список в IANA font / woff
, font / ttf
и font / otf
. изображение
Список в IANA image / jpeg
, image / png
и image / svg + xml
. модель
Список в IANA / 3mf
и модель / vml
. текст
Список в IANA текст / простой
, текст / csv
и текст / html
. видео
Список в IANA / mp4
). text / plain
. Точно так же для двоичных документов без определенного или известного подтипа следует использовать application / octet-stream
. multipart / form-data
, используемого в методе POST
HTML-форм, и multipart / byteranges
, используемого с 206
Partial Content
для отправки части документа, HTTP не • обрабатывать составные документы особым образом: сообщение передается в браузер (который, скорее всего, покажет окно «Сохранить как», если он не знает, как отобразить документ). сообщение
Список в IANA / rfc822
(для переадресованного сообщения или сообщения с ответом) и сообщение / частичное
, позволяющее автоматически разбивать большое сообщение на более мелкие для автоматической повторной сборки получателем. составной
Список в IANA multipart / form-data
(для данных, созданных с использованием FormData
API) и multipart / byteranges
(определено в RFC 7233: 5.4.1 и используется с ответом HTTP 206
«Частичное содержимое», возвращаемым, когда извлеченные данные — это только часть содержимого, например, доставленные с использованием заголовка Range
). Content-Disposition
был установлен на вложение
, и предлагают диалоговое окно «Сохранить как». text / plain
не означает «какие-либо текстовые данные.»Если они ожидают определенного типа текстовых данных, они, скорее всего, не сочтут это совпадением. В частности, если они загрузят файл text / plain
из элемента
, объявляющего файл CSS, они не распознают его как действительный файл CSS, если он представлен с text / plain
. Необходимо использовать mime-тип text / css
CSS. / css
. Если сервер не распознает .css
для файлов CSS, он может отправлять их с типами MIME text / plain
или application / octet-stream
. В этом случае они не будут распознаваться большинством браузеров как CSS и будут проигнорированы. application / xhtml + xml
) в настоящее время в основном бесполезны. application / xml
или application / xhtml + xml
, если вам нужны строгие правила синтаксического анализа XML, разделы или элементы, не относящиеся к HTML / SVG. / MathML пространства имен.
text / javascript
. Никакие другие значения не считаются допустимыми, и использование любого из них может привести к тому, что скрипты не будут загружаться или запускаться. приложение / javascript
приложение / ecmascript
приложение / x-ecmascript
приложение / x-javascript
текст / JavaScript
текст / ecmascript
текст / javascript1.0
текст / javascript1.1
текст / javascript1.2
текст / javascript1.3
текст / javascript1.4
текст / javascript1.5
текст / jscript
текст / livescript
текст / x-ecmascript
текст / x-javascript
text / javascript
.Это единственный тип MIME, который гарантированно будет работать сейчас и в будущем. charset
в конце типа носителя text / javascript
, чтобы указать набор символов, используемый для представления содержимого кода. Это недопустимо, и в большинстве случаев скрипт не загружается. изображение
содержат данные изображения. Подтип указывает, какой именно формат файла изображения представляют данные.Только несколько типов изображений используются достаточно часто, чтобы их можно было считать безопасными для использования на веб-страницах: изображение / apng
.apng
изображение / BMP
.БМП
изображение / gif
.gif
изображение / значок x
.ico
, .cur
изображение / jpeg
.jpg
, .jpeg
, .jfif
, .pjpeg
, .pjp
изображение / png
.png
изображение / svg + xml
.svg
изображение / tiff
.tif
, .tiff
изображение / webp
.webp
и
, поэтому важно учитывать вашу целевую аудиторию и диапазон браузеры (и версии этих браузеров), которые они могут использовать при выборе типа файла и кодеков, используемых для мультимедиа. аудио / волна
аудио / wav
аудио / x-wav
аудио / x-pn-wav
аудио / webm
видео / webm
аудио / ogg
видео / ogg
приложение / ogg
multipart / form-data
может использоваться при отправке значений заполненной HTML-формы из браузера на сервер.–
). Каждая часть представляет собой отдельный объект со своими собственными заголовками HTTP, Content-Disposition
и Content-Type
для полей загрузки файлов. <форма>
: multipart / byteranges
используется для отправки частичных ответов браузеру. 206
Partial Content
, этот тип MIME указывает, что документ состоит из нескольких частей, по одной для каждого из запрошенных диапазонов. Как и другие составные типы, Content-Type
использует границу
для разделения частей.Каждая часть имеет заголовок Content-Type
с его фактическим типом и Content-Range
диапазона, который он представляет. HTTP / 1.1 206 Частичное содержимое
Accept-Ranges: байты
Content-Type: multipart / byteranges; граница = 3d6b6a416f9b5
Длина содержимого: 385
--3d6b6a416f9b5
Тип содержимого: текст / html
Content-Range: байты 100-200 / 1270
eta http-Equiv = "Content-type" content = "text / html; charset = utf-8" />
application / octet-stream
.По соображениям безопасности большинство браузеров не позволяют устанавливать пользовательское действие по умолчанию для таких ресурсов, вынуждая пользователя сохранять его на диск, чтобы использовать его. файлов, сжатых в формате RAR. В этом случае идеальным будет настоящий тип исходных файлов; это часто невозможно, так как файлы .RAR могут содержать несколько ресурсов разных типов. В этом случае настройте сервер для отправки application / x-rar-compressed
.
Аудио и видео. В элементах или
будут воспроизводиться только ресурсы с правильным типом MIME. Обязательно укажите правильный тип носителя для аудио и видео.
Собственные типы файлов. Избегайте использования application / octet-stream
, поскольку большинство браузеров не позволяют определять поведение по умолчанию (например, «Открыть в Word») для этого универсального типа MIME. Конкретный тип, например application / vnd.mspowerpoint
позволяет пользователям автоматически открывать такие файлы в программном обеспечении для презентаций по их выбору.
X-Content-Type-Options
. 47 49 46 38 39
( GIF89
), а файлы PNG - с 89 50 4E 47
( .PNG
). Не все типы файлов имеют магические числа, так что это тоже не на 100% надежно.