{"id":13495132,"url":"https://github.com/htmlacademy/HEAD","last_synced_at":"2025-03-28T16:31:36.482Z","repository":{"id":41932314,"uuid":"379196752","full_name":"htmlacademy/HEAD","owner":"htmlacademy","description":"Список того, что вы можете указать в HEAD","archived":false,"fork":true,"pushed_at":"2024-04-27T09:04:13.000Z","size":378,"stargazers_count":186,"open_issues_count":0,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-01T19:53:56.773Z","etag":null,"topics":["favicon","head","html","list","meta-tags"],"latest_commit_sha":null,"homepage":"http://html-head.ru","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"joshbuchea/HEAD","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/htmlacademy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["joshbuchea"]}},"created_at":"2021-06-22T08:28:51.000Z","updated_at":"2024-07-30T03:13:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/htmlacademy/HEAD","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2FHEAD","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2FHEAD/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2FHEAD/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2FHEAD/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/htmlacademy","download_url":"https://codeload.github.com/htmlacademy/HEAD/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222395699,"owners_count":16977608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["favicon","head","html","list","meta-tags"],"created_at":"2024-07-31T19:01:31.430Z","updated_at":"2024-10-31T10:30:32.204Z","avatar_url":"https://github.com/htmlacademy.png","language":null,"funding_links":["https://github.com/sponsors/joshbuchea"],"categories":["Others"],"sub_categories":[],"readme":"# 🤯 HEAD\n\n\u003e Простое руководство по HTML-элементам в `\u003chead\u003e`\n\n[](https://github.com/joshbuchea/HEAD/graphs/contributors)\n[](https://creativecommons.org/publicdomain/zero/1.0/)\n[](https://twitter.com/joshbuchea)\n\n## Оглавление\n\n- [Рекомендуемый минимум](#рекомендуемый-минимум)\n- [Элементы](#элементы)\n- [Мета](#мета)\n- [Ссылки](#ссылки)\n- [Иконки](#иконки)\n- [Социальные сети](#социальные-сети)\n - [Facebook Open Graph](#facebook-open-graph)\n - [Twitter Card](#twitter-card)\n - [Twitter Privacy](#twitter-privacy)\n - [Schema.org](#schemaorg)\n - [JSON-LD](#json-ld)\n - [Pinterest](#pinterest)\n - [Facebook Instant Articles](#facebook-instant-articles)\n - [OEmbed](#oembed)\n - [QQ/Wechat](#qqwechat)\n- [Браузеры / Платформы](#браузеры--платформы)\n - [Apple iOS](#apple-ios)\n - [Google Android](#google-android)\n - [Google Chrome](#google-chrome)\n - [Microsoft Internet Explorer](#microsoft-internet-explorer)\n- [Браузеры (китайские)](#браузеры-китайские)\n - [360 Browser](#360-browser)\n - [QQ Mobile Browser](#qq-mobile-browser)\n - [UC Mobile Browser](#uc-mobile-browser)\n- [CSRF](#csrf)\n- [Подсказки клиентов](#подсказки-клиентов)\n- [Устаревшее](#устаревшее)\n- [Другие ресурсы](#другие-ресурсы)\n- [Связанные проекты](#связанные-проекты)\n- [Переводы](#-переводы)\n- [Contributing](#-contributing)\n - [Contributors](#-contributors)\n- [Автор оригинального репозиторий](#-автор-оригинального-репозитория)\n- [Лицензия](#-лицензия)\n\n## Рекомендуемый минимум\n\nНиже приведены основные элементы для любого веб-документа (веб-сайта/приложения):\n\n```html\n\u003chead\u003e\n \u003cmeta charset=\"utf-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n \u003c!--\n Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в \u003chead\u003e.\n Для обеспечения правильного отображения документов.\n Любой другой элемент заголовка должен идти *после* этих тегов.\n --\u003e\n \u003ctitle\u003eЗаголовок страницы\u003c/title\u003e\n\u003c/head\u003e\n```\n\n`meta charset` - определяет кодировку веб-сайта, стандартом является `utf-8`.\n\n`meta name=\"viewport\"` - настройки viewport, связанные с мобильной отзывчивостью\n\n`width=device-width` - физическая ширина устройства (отлично подходит для мобильных устройств!)\n\n`initial-scale=1` - начальный масштаб, 1 означает отсутствие масштабирования\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Элементы\n\nДопустимые элементы `\u003chead\u003e` включают `base`, `link`, `meta`, `noscript`, `script`, `style`, `template` и `title`.\n\nЭти элементы предоставляют информацию о том, как документ должен восприниматься и отображаться веб-технологиями, например, браузерами, поисковыми системами, ботами и так далее.\n\n```html\n\u003c!--\n Установите кодировку символов для этого документа так, чтобы\n все символы в пространстве UTF-8 (например, эмодзи)\n отображались правильно.\n--\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\n\u003c!-- Установите заголовок документа --\u003e\n\u003ctitle\u003eЗаголовок страницы\u003c/title\u003e\n\n\u003c!-- Установите базовый URL для всех относительных URL в документе --\u003e\n\u003cbase href=\"https://example.com/page.html\"\u003e\n\n\u003c!-- Ссылка на внешний файл CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"styles/styles.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"styles/print.css\" media=\"print\"\u003e\n\n\u003c!-- Используется для добавления CSS в документ. Используется для важной стилизации --\u003e\n\u003cstyle\u003e\n/* ... */\n\u003c/style\u003e\n\n\u003c!-- Ссылка на внешний JavaScript файл --\u003e\n\u003cscript src=\"scripts/scripts.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Используется для добавления JavaScript в документ--\u003e\n\u003cscript\u003e\n // функция(и) идут здесь\n\u003c/script\u003e\n\n\u003c!-- Используется на случай если JavaScript отключен в браузере --\u003e\n\u003cnoscript\u003e\n \u003c!-- Альтернатива, когда JavaScript отключен --\u003e\n\u003c/noscript\u003e\n\n\u003c!-- \n Используется для объявления HTML-фрагментов, которые могут быть клонированы и вставлены в документ.\n Если указан в \u003chead\u003e, то \u003ctemplate\u003e может содержать только метаданные \n--\u003e\n\u003ctemplate\u003e\n \n\u003c/template\u003e\n```\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Мета\n\n```html\n\u003c!--\n Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в \u003chead\u003e.\n Для обеспечения правильного отображения документов.\n Любой другой элемент заголовка должен идти *после* этих тегов.\n--\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n```\n\n```html\n\u003c!-- viewport-fit для управления безопасной зоны --\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"\u003e\n```\n\n- `contain`: вьюпорт должен полностью вмещать веб-контент. \n- `cover`: веб-контент должен полностью покрывать вьюпорт. \n- `auto`: значение по умолчанию, работает как `contain`.\n\n[Подробнее в блоке css-live](https://css-live.ru/articles/ponimanie-vyuporta-webview-v-ios-11.html)\n\n```html\n\u003c!--\n Позволяет контролировать, откуда загружаются ресурсы.\n Поместите как можно раньше в \u003chead\u003e, так как тег \n применяется только к ресурсам, которые объявлены после него.\n--\u003e\n\u003cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'\"\u003e\n\n\u003c!-- Название веб-приложения (должно использоваться только в том случае, если веб-сайт используется как приложение) --\u003e\n\u003cmeta name=\"application-name\" content=\"Имя приложения\"\u003e.\n\n\u003c!-- Цвет вкладки для Chrome на Android, Vivaldi, Safari 15 --\u003e\n\u003cmeta name=\"theme-color\" content=\"#4285f4\"\u003e\n\n\u003c!-- Список ключевых слов --\u003e\n\u003cmeta name=\"keywords\" content=\"ваши, теги\"\u003e\n\n\u003c!-- Краткое описание документа (ограничение до 150 символов) --\u003e\n\u003c!-- Это содержимое *может* использоваться в результатах поисковых систем. --\u003e\n\u003cmeta name=\"description\" content=\"Описание страницы\"\u003e.\n```\n\n```html\n\u003c!-- Управление поведением поисковых машин при осмотре и индексации сайта --\u003e\n\u003cmeta name=\"robots\" content=\"index,follow\"\u003e\u003c!-- Все поисковые системы --\u003e\n\u003cmeta name=\"googlebot\" content=\"index,follow\"\u003e\u003c!-- Специфика Google --\u003e\n\u003cmeta name=\"bingbot\" content=\"index,follow\"\u003e\u003c!-- Специфика Bing --\u003e\n```\n\nДля роботов есть несколько значений:\n* `all` - нет ограничений на индексирование и показ контента.\n* `noindex` - не показывать эту страницу в результатах поиска.\n* `nofollow` - не выполнять переход по ссылкам на странице.\n* `none` - эквивалент noindex, nofollow.\n* `noarchive` - запрещает показывать ссылку на кеш в результатах поиска.\n* `nosnippet` - не показывать в результатах поиска текстовый фрагмент или видео.\n* `max-snippet: [number]` - ограничение на количество символов в текстовом фрагменте\n* `max-image-preview: [setting]` - определяет максимальный размер изображений, которые могут показываться в результатах поиска для этой страницы.\n* `max-video-preview: [number]` - задает для фрагмента видео со страницы ограничение по длительности в секундах при показе в результатах поиска.\n* `notranslate` - не предлагать перевести эту страницу в результатах поиска.\n* `noimageindex` - не индексировать изображения на странице.\n* `unavailable_after: [date/time]` - запрещает показывать страницу в результатах поиска после даты и времени.\n* `noyaca` - запрет на использование информации из Яндекса. Каталога для описания в сниппете\n* `noodp` — запрет на использование описания из dMoz для сниппета;\n* `noydir` — запрет на использование описания из Yahoo! Directory для сниппета.\n \nЗначения можно писать через запятую `content=\"max-snippet:-1, max-image-preview:large, max-video-preview:-1\"`. \nПодробнее в документации [Google Поиска](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag)\n\n```html\n\u003c!-- Указывает Google не показывать поисковую строку sitelinks --\u003e\n\u003cmeta name=\"google\" content=\"nositelinkssearchbox\"\u003e\n\n\u003c!-- Указывает Google не переводить документ --\u003e\n\u003cmeta name=\"google\" content=\"notranslate\"\u003e\n\n\u003c!-- Проверить право собственности сайта --\u003e\n\u003cmeta name=\"google-site-verification\" content=\"verification_token\"\u003e\u003c!-- Google Search Console --\u003e\n\u003cmeta name=\"yandex-verification\" content=\"verification_token\"\u003e\u003c!-- Яндекс Вебмастерам --\u003e\n\u003cmeta name=\"msvalidate.01\" content=\"verification_token\"\u003e\u003c!-- Bing Webmaster Center --\u003e\n\u003cmeta name=\"alexaVerifyID\" content=\"verification_token\"\u003e\u003c!-- Alexa Console --\u003e\n\u003cmeta name=\"p:domain_verify\" content=\"code_from_pinterest\"\u003e\u003c!-- Pinterest Console--\u003e\n\u003cmeta name=\"norton-safeweb-site-verification\" content=\"norton_code\"\u003e\u003c!-- Norton Safe Web --\u003e\n\n\u003c!-- Укажите программное обеспечение, использованное для создания документа (например, WordPress, Dreamweaver) --\u003e\n\u003cmeta name=\"generator\" content=\"название программного обеспечения\"\u003e\n\n\u003c!-- Краткое описание темы вашего документа --\u003e\n\u003cmeta name=\"subject\" content=\"тема вашего документа\"\u003e\n\n\u003c!-- Дает общую возрастную оценку, основанную на содержании документа --\u003e\n\u003cmeta name=\"rating\" content=\"General\"\u003e\n\n\u003c!-- Позволяет контролировать, как передается информация о реферере --\u003e\n\u003cmeta name=\"referrer\" content=\"no-referrer\"\u003e\n```\n\n```html\n\u003c!-- Отключить автоматическое определение и форматирование возможных телефонных номеров --\u003e\n\u003cmeta name=\"format-detection\" content=\"telephone=no\"\u003e\n\n\u003c!-- а также можно отключить дату, адрес, url и email --\u003e\n\u003cmeta name=\"format-detection\" content=\"date=no\"\u003e\n\u003cmeta name=\"format-detection\" content=\"address=no\"\u003e\n\u003cmeta name=\"format-detection\" content=\"url=no\"\u003e\n\u003cmeta name=\"format-detection\" content=\"email=no\"\u003e\n\n\u003c!-- можно комбинировать несколько значений--\u003e\n\u003cmeta name=\"format-detection\" content=\"telephone=no,date=no,address=no,email=no,url=no\"\u003e\n```\nПодробнее в:\n- [Документации для разработчиков от Apple](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)\n- [Гисте про комбинирование](https://gist.github.com/yuezk/15c5bb1370e30d0a2a60)\n\n\n```html\n\u003c!-- Полностью отказаться от предварительной выборки DNS, установив значение \"off\" --\u003e\n\u003cmeta http-equiv=\"x-dns-prefetch-control\" content=\"off\"\u003e\n\n\u003c!-- Указывает документ, который будет отображаться в определенном фрейме --\u003e\n\u003cmeta http-equiv=\"Window-Target\" content=\"\"\u003e\n```\n\nУ `Window-Target` есть несколько значений значения:\n- `_self` - загружает документ в текущем окне\n- `_blank` - загружает документ в новом окне\n- `_parent` - загружает документ в родительском фрейме\n- `_top` - загружает документ в полном окне браузера\n- `имя_фрейма` - загружает документ в указанном фрейме\n\n```html\n\u003c!-- Гео-теги --\u003e\n\u003cmeta name=\"ICBM\" content=\"широта, долгота\"\u003e.\n\u003cmeta name=\"geo.position\" content=\"широта;долгота\"\u003e\n\u003cmeta name=\"geo.region\" content=\"country[-state]\"\u003e\u003c!-- Код страны (ISO 3166-1): обязательный, код штата (ISO 3166-2): необязательный; например, content=\"US\" / content=\"US-NY\" --\u003e\n\u003cmeta name=\"geo.placename\" content=\"city/town\"\u003e\u003c!-- например, content=\"New York City\" --\u003e\n\n\u003c!-- Монетизация веб-сайтов https://webmonetization.org/docs/getting-started --\u003e\n\u003cmeta name=\"monetization\" content=\"$paymentpointer.example\"\u003e\n\n\u003c!-- Подсказывает, что сайт оптимизирован для мобильных устройств--\u003e\n\u003cmeta name=\"HandheldFriendly\" content=\"true\"\u003e\n\n\u003c!-- Указывает автора документа --\u003e\n\u003cmeta name=\"author\" content=\"Nikolai Shabalin\"\u003e\n\n\u003c!-- Принадлежность авторских прав--\u003e\n\u003cmeta name=\"copyright\" content=\"Nikolai Shabalin\"\u003e\n\n\u003c!-- Создатель документа --\u003e\n\u003cmeta name=\"creator\" content=\"Nikolai Shabalin\"\u003e\n\n\u003c!-- Владелец --\u003e\n\u003cmeta name=\"owner\" content=\"\"\u003e\n\n\u003c!-- Перезагружает страницу через указанное количество секунд --\u003e\n\u003cmeta http-equiv=\"Refresh\" content=\"20\"\u003e\n\u003cmeta http-equiv=\"Refresh\" content=\"20; URL=page4.html\"\u003e \u003c!-- Перезагружает к указанной странице --\u003e\n\n\u003c!-- Язык документа --\u003e\n\u003cmeta name=\"language\" content=\"Russian\"\u003e\n```\n\n```html\n\u003c!-- контролирует занесение страниц в кэш-память --\u003e\n\u003cmeta http-equiv=\"pragma\" content=\"no-cache\"\u003e\n```\n[Подробнее про pragma](https://mpbox.ru/html/meta-tags/http-equiv/pragma/).\n\n```html\n\u003c!-- Сделать повторный сетевой запрос после указанной даты и времени --\u003e\n\u003cmeta http-equiv=\"Expires\" content=\"Sun, 01 Jan 2012 00:00:01 GMT\" /\u003e\n```\n[Подробнее про expires](https://karashchuk.com/HTML/meta_Expires/).\n\n```html\n\u003c!-- Как часто посещать сайт роботу--\u003e\n\u003cmeta name=\"revisit\" content=\"10 day\"\u003e\n\n\u003c!-- Дата последнего изменения документа --\u003e\n\u003cmeta name=\"revised\" content=\"Sunday, July 18th, 2010, 5:15 pm\" /\u003e\n\n\u003c!-- Как часто посещать сайт роботу--\u003e\n\u003cmeta name=\"revisit-after\" content=\"10 day\"\u003e\n```\n`revisit-after` поисковыми роботами [чаще всего игнорируется](https://developers.google.com/search/blog/2007/12/answering-more-popular-picks-meta-tags).\n\n```html\n\u003c!-- Используется как description, но для научных статей--\u003e\n\u003cmeta name=\"abstract\" content=\"\"\u003e\n\u003cmeta name=\"topic\" content=\"\"\u003e\n\u003cmeta name=\"summary\" content=\"\"\u003e\n\n\u003c!-- Для обратной связи --\u003e\n\u003cmeta name=\"reply-to\" content=\"email@hotmail.com\"\u003e\n```\n\n```html\n\u003c!-- Соль --\u003e\n\u003cmeta name=\"salt\" content=\"21f157b19463e98d0e9723cf486d620a\"\u003e\n```\n\n[Про соль подробнее](https://www.php.net/manual/ru/faq.passwords.php#faq.passwords.salt)\n\n```html\n\u003c!-- Регистрация доменного имени --\u003e\n\u003cmeta name=\"parking\" content=\"имя регистратора\"\u003e\n```\n\n[Подробнее про парковку доменов](https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D1%80%D0%BA%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B4%D0%BE%D0%BC%D0%B5%D0%BD%D0%BE%D0%B2)\n\n\n```html\n\u003c!-- Отключает возможность Скайпа звонить по номерам на странице--\u003e\n\u003cmeta name=\"SKYPE_TOOLBAR\" content=\"SKYPE_TOOLBAR_PARSER_COMPATIBLE\" /\u003e\n```\n\n[Подробнее про отключение Скайпа](http://mpbox.ru/html-and-css-tricks/different/skype-addon.html)\n\n- 📖 [Мета-теги, которые понимает Google](https://support.google.com/webmasters/answer/79812?hl=en)\n- 📖 [WHATWG Wiki: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions)\n- 📖 [ICBM в Википедии](https://en.wikipedia.org/wiki/ICBM_address#Modern_use)\n- 📖 [Геотеги в Википедии](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Ссылки\n\n```html\n\u003c!-- Путь до внешней таблицы стилей --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://example.com/styles.css\"\u003e.\n\n\u003c!-- Помогает предотвратить проблемы дублированного контента --\u003e\n\u003clink rel=\"canonical\" href=\"https://example.com/article/?page=2\"\u003e\n\n\u003c!-- Ссылки на AMP HTML версию текущего документа --\u003e\n\u003clink rel=\"amphtml\" href=\"https://example.com/path/to/amp-version.html\"\u003e\n\n\u003c!-- Ссылка на JSON-файл, в котором указаны данные для \"установки\" веб-приложения --\u003e\n\u003clink rel=\"manifest\" href=\"manifest.json\"\u003e\n\u003clink rel=\"manifest\" href=\"manifest.webmanifest\"\u003e\n```\n\n```html\n\u003c!-- Ссылки на информацию об авторе (авторах) документа --\u003e\n\u003clink rel=\"author\" href=\"humans.txt\"\u003e\n```\n\n[О human.txt подробнее](https://humanstxt.org/RU)\n\n```html\n\u003c!-- Ссылается на заявление об авторском праве, применимое к контексту ссылки --\u003e\n\u003clink rel=\"license\" href=\"copyright.html\"\u003e\n\n\u003c!-- Дает ссылку на место в вашем документе, который может быть на другом языке --\u003e\n\u003clink rel=\"alternate\" href=\"https://es.example.com/\" hreflang=\"es\"\u003e\n\n\u003c!-- Предоставляет информацию об авторе или другом человеке. \nИспользуется для RelMeAuth, распределённой формы проверки личности. Смотри https://microformats.org/wiki/RelMeAuth, чтобы узнать больше --\u003e\n\u003clink rel=\"me\" href=\"https://google.com/profiles/thenextweb\" type=\"text/html\"\u003e\n\u003clink rel=\"me\" href=\"mailto:name@example.com\"\u003e.\n\u003clink rel=\"me\" href=\"sms:+15035550125\"\u003e\n\n\u003c!-- Ссылки на документ, описывающий коллекцию записей, документов или других материалов, представляющих исторический интерес --\u003e\n\u003clink rel=\"archives\" href=\"https://example.com/archives/\"\u003e\n\n\u003c!-- Ссылки на ресурс верхнего уровня в иерархической структуре --\u003e\n\u003clink rel=\"index\" href=\"https://example.com/article/\"\u003e\n\n\u003c!-- Обеспечивает самостоятельную ссылку - полезно, когда документ имеет несколько возможных ссылок --\u003e\n\u003clink rel=\"self\" type=\"application/atom+xml\" href=\"https://example.com/atom.xml\"\u003e\n\n\u003c!-- Предыдущий и следующий документы в серии документов, соответственно --\u003e\n\u003clink rel=\"prev\" href=\"https://example.com/article/?page=1\"\u003e\n\u003clink rel=\"next\" href=\"https://example.com/article/?page=3\"\u003e\n\n\u003c!-- Используется, когда для ведения блога используется сторонний сервис --\u003e\n\u003clink rel=\"EditURI\" href=\"https://example.com/xmlrpc.php?rsd\" type=\"application/rsd+xml\" title=\"RSD\"\u003e\n\n\u003c!-- Формирует автоматический комментарий, когда другой блог WordPress ссылается на ваш блог WordPress или пост --\u003e\n\u003clink rel=\"pingback\" href=\"https://example.com/xmlrpc.php\"\u003e\n\n\u003c!-- Уведомляет URL, когда вы ссылаетесь на него в вашем документе. Дополнительная информация на https://webmention.net --\u003e\n\u003clink rel=\"webmention\" href=\"https://example.com/webmention\"\u003e\n\n\u003c!-- Позволяет размещать сообщения на вашем собственном домене с помощью клиента Micropub. Более подробная информация на https://indieweb.org/Micropub --\u003e\n\u003clink rel=\"micropub\" href=\"https://example.com/micropub\"\u003e\n\n\u003c!-- Позволяет использовать ваш сайт с [социальным ридером](https://indieweb.org/social_reader) на базе Microsub. Более подробная информация на https://indieweb.org/Microsub --\u003e\n\u003clink rel=\"microsub\" href=\"https://example.com/microsub\"\u003e\n\n\u003c!-- Позволяет использовать ваш сайт с IndieAuth, для проверки личности с помощью вашего доменного имени. Подробнее на https://indieauth.net --\u003e\n\u003clink rel=\"token_endpoint\" href=\"https://example.com/token\"\u003e\n\u003clink rel=\"authorization_endpoint\" href=\"https://example.com/auth\"\u003e\n\n\u003c!-- Open Search --\u003e\n\u003clink rel=\"search\" href=\"open-search.xml\" type=\"application/opensearchdescription+xml\" title=\"Заголовок поиска\"\u003e\n\n\u003c!-- Фиды --\u003e\n\u003clink rel=\"alternate\" href=\"https://feeds.feedburner.com/example\" type=\"application/rss+xml\" title=\"RSS\"\u003e\n\u003clink rel=\"alternate\" href=\"https://example.com/feed.atom\" type=\"application/atom+xml\" title=\"Atom 0.3\"\u003e\n\n\u003c!-- Prefetching, preloading, prebrowsing --\u003e\n\u003c!-- Дополнительная информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ --\u003e\n\u003clink rel=\"dns-prefetch\" href=\"//example.com/\"\u003e\n\u003clink rel=\"preconnect\" href=\"https://www.example.com/\"\u003e\n\u003clink rel=\"prefetch\" href=\"https://www.example.com/\"\u003e\n\u003clink rel=\"prerender\" href=\"https://example.com/\"\u003e\n```\n\n```html\n\u003clink rel=\"preload\" as=\"image\" href=\"important.png\"\u003e\n```\n\nЗначений `as` может быть несколько:\n- `audio`: аудиофайл\n- `document`: HTML-документ\n- `embed`: внедренный ресурс\n- `fetch`: любой ресурс, который не подходит ни под одну из остальных категорий\n- `font`: шрифт\n- `image`: изображение\n- `object`: объект\n- `script`: JavaScript-файл\n- `style`: CSS-файл\n- `track`: файл субтитров\n- `video`: видеофайл\n- `worker`: воркер\n\nУ `image` есть уникальная возможность указать адаптивную картинку:\n```html\n\u003clink rel=\"preload\" as=\"image\" imagesrcset=\"wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w\"\u003e\n```\n\n- 📖 [Предварительная загрузка адаптивных изображений](https://web.dev/articles/preload-responsive-images)\n\n\n```html\n\u003clink rel=\"modulepreload\" href=\"super-critical-stuff.js\"\u003e \u003c!-- Предзагрузка модулей --\u003e\n```\n\n- 📖 [Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml)\n- 📖 [Предзагрузка модулей](https://developers.google.com/web/updates/2017/12/modulepreload)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Иконки\n\n```html\n\u003c!-- Для IE 10 и ниже --\u003e\n\u003clink rel=\"icon\" href=\"favicon.ico\"\u003e\u003c!-- 32×32 --\u003e\n```\n\n`\u003clink rel=\"icon\" href=\"favicon.ico\"\u003e` - необязательно указывать в `\u003chead\u003e`. Любой сервер ищет `favicon.ico`, но для этого `favicon.ico` обязательно нужно положить в корень проекта. От `.ico` лучше не отказываться, так как могут перестать работать иконки, например в RSS-читалках. В `.ico` поддерживается прозрачность.\nНа данный момент в Хром есть [баг](https://bugs.chromium.org/p/chromium/issues/detail?id=1162276). Если в проекте подключены `ICO` и `SVG` версии, то всё равно предпочтение отдаётся `ICO`.\n\n```html\n\u003clink rel=\"icon\" href=\"icon.svg\" type=\"image/svg+xml\"\u003e\n```\n\nПреимущество SVG-фавиконки в том, что, помимо того, что он векторный, он может подстраиваться под тёмную тему с помощью ` @media (prefers-color-scheme: dark)`. [Поддержка векторных фавиконок](https://caniuse.com/link-icon-svg).\n\n```html\n\u003c!-- IOS 8+ --\u003e\n\u003clink rel=\"apple-touch-icon\" href=\"apple-touch-icon.png\"\u003e\u003c!-- 180×180 --\u003e\n```\n\nИспользуется для отображения ярлыка на домашнем экране IPhone и IPad.\n\nВыше указаны три версии для фавиконки, но можно добавить ещё 2, чтобы учесть большинство современных браузеров. Чтобы не увеличивать HTML другие фавиконки добавляют в веб-манифест\n\n```html\n\u003clink rel=\"manifest\" href=\"/manifest.webmanifest\"\u003e\n```\n\n_manifest.webmanifest_\n```json\n{\n \"icons\": [\n { \"src\": \"192.png\", \"type\": \"image/png\", \"sizes\": \"192x192\" },\n { \"src\": \"12.png\", \"type\": \"image/png\", \"sizes\": \"512x512\" }\n ]\n}\n```\n\n- 📖 [Все о фавиконах (и сенсорных иконках)](https://bitsofco.de/all-about-favicons-and-touch-icons/)\n- 📖 [Создание прикрепленных иконок вкладок](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)\n- 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)\n- 📖 [Иконки и цвета браузера](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/)\n- 📖 [Как создать Favicon в 2021 году: шесть файлов, которые подходят большинству потребностей](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Социальные сети\n\n### Facebook Open Graph\n\u003e Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook. [Подробнее о разметке Facebook Open Graph](https://developers.facebook.com/docs/sharing/webmasters#markup)\n\n```html\n\u003cmeta property=\"fb:app_id\" content=\"123456789\"\u003e\n\u003cmeta property=\"og:url\" content=\"https://example.com/page.html\"\u003e\n\u003cmeta property=\"og:type\" content=\"website\"\u003e\n\u003cmeta property=\"og:title\" content=\"Заголовок содержимого\"\u003e\n\u003cmeta property=\"og:image\" content=\"https://example.com/image.jpg\"\u003e\n\u003cmeta property=\"og:image:alt\" content=\"Описание того, что находится на изображении (не подпись)\"\u003e\n\u003cmeta property=\"og:description\" content=\"Описание\"\u003e\n\u003cmeta property=\"og:site_name\" content=\"Название сайта\"\u003e\n\u003cmeta property=\"og:locale\" content=\"ru_RU\"\u003e\n\u003cmeta property=\"article:author\" content=\"\"\u003e\n```\n\n- 📖 [Open Graph protocol](http://ogp.me/)\n- 🛠 Протестируйте свою страницу с помощью [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)\n\n### Twitter Card\n\u003e С помощью Twitter Cards вы можете прикреплять к твитам фотографии, видео и мультимедийные файлы, тем самым способствуя привлечению трафика на ваш сайт. [Подробнее о Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)\n\n```html\n\u003cmeta name=\"twitter:card\" content=\"summary\"\u003e\n\u003cmeta name=\"twitter:site\" content=\"@site_account\"\u003e\n\u003cmeta name=\"twitter:creator\" content=\"@individual_account\"\u003e\n\u003cmeta name=\"twitter:url\" content=\"https://example.com/page.html\"\u003e\n\u003cmeta name=\"twitter:title\" content=\"Заголовок контента\"\u003e.\n\u003cmeta name=\"twitter:description\" content=\"Описание контента менее 200 символов\"\u003e.\n\u003cmeta name=\"twitter:image\" content=\"https://example.com/image.jpg\"\u003e.\n\u003cmeta name=\"twitter:image:alt\" content=\"Текстовое описание изображения, передающее его суть пользователям с ослабленным зрением. Максимум 420 символов.\"\u003e\n```\n\n- 📖 [Начало работы с карточками - Twitter Developers](https://dev.twitter.com/cards/getting-started)\n- 🛠 Проверьте свою страницу с помощью [Twitter Card Validator](https://cards-dev.twitter.com/validator)\n\n### Twitter Privacy\nЕсли вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter. [Подробнее о возможностях конфиденциальности Twitter](https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have).\n```html\n\u003c!-- запретить Twitter использовать информацию о вашем сайте в целях персонализации --\u003e\n\u003cmeta name=\"twitter:dnt\" content=\"on\"\u003e\n```\n\n### Schema.org\n\n```html\n\u003chtml lang=\"\" itemscope itemtype=\"https://schema.org/Article\"\u003e\n \u003chead\u003e\n \u003clink rel=\"author\" href=\"\"\u003e\n \u003clink rel=\"publisher\" href=\"\"\u003e\n \u003cmeta itemprop=\"name\" content=\"Заголовок контента\"\u003e.\n \u003cmeta itemprop=\"description\" content=\"Описание содержимого менее 200 символов\"\u003e.\n \u003cmeta itemprop=\"image\" content=\"https://example.com/image.jpg\"\u003e\n \u003c/head\u003e\n\u003c/html\u003e\n```\n\n**Примечание:** Эти мета-теги требуют добавления атрибутов `itemscope` и `itemtype` к тегу `\u003chtml\u003e`.\n\n- 📖 [Начало работы - schema.org](https://schema.org/docs/gs.html)\n- 🛠 Протестируйте свою страницу с помощью [Rich Results Test](https://search.google.com/test/rich-results)\n\n\n### JSON-LD\n\nМожет использоваться компанией для того, чтобы ваш сайт отображался в графе знаний, когда кто-то набирает ваш запрос. (это панель справа от результатов поиска, которая обычно появляется у крупных брендов.)\n\n```\n\u003cscript type=\"application/ld+json\"\u003e\n {\n \"@context\": \"https://schema.org\",\n \"@type\": \"Article\",\n \"author\": {\n \"@type\": \"Person\",\n \"name\": \"Your Name\"\n },\n \"publisher\": {\n \"@type\": \"Organization\",\n \"name\": \"Your Organization\"\n },\n \"headline\": \"Article Headline\",\n \"image\": \"https://example.com/image.jpg\",\n \"datePublished\": \"2020-02-05T08:00:00+08:00\",\n \"dateModified\": \"2020-03-05T09:20:00+08:00\"\n }\n\u003c/script\u003e\n```\n\n- [Спецификация](https://www.w3.org/TR/json-ld11/)\n- [Официальный сайт](https://json-ld.org/)\n- [Документация от Google](https://developers.google.com/search/docs/data-types/article)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n### Pinterest\n\nPinterest позволяет запретить людям сохранять страницы вашего сайта, согласно [их центру помощи](https://help.pinterest.com/en/business/article/prevent-saves-to-pinterest-from-your-site). Описание `description` является необязательным.\n\n```html\n\u003cmeta name=\"pinterest\" content=\"nopin\" description=\"Извините, вы не можете сохранить с моего сайта!\"\u003e.\n```\n\n### Facebook Instant Articles\n\n```html\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cmeta property=\"op:markup_version\" content=\"v1.0\"\u003e\n\n\u003c!-- URL веб-версии вашей статьи --\u003e\n\u003clink rel=\"canonical\" href=\"https://example.com/article.html\"\u003e\n\n\u003c!-- Стиль, который будет использоваться для этой статьи --\u003e\n\u003cmeta property=\"fb:article_style\" content=\"myarticlestyle\"\u003e\n```\n\n- 📖 [Создание статей - мгновенные статьи](https://developers.facebook.com/docs/instant-articles/guides/articlecreate)\n- 📖 [Образцы кода - мгновенные статьи](https://developers.facebook.com/docs/instant-articles/reference)\n\n### OEmbed\n\n```html\n\u003clink rel=\"alternate\" type=\"application/json+oembed\"\n href=\"https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F\u0026amp;format=json\"\n title=\"Профиль oEmbed: JSON\"\u003e\n\u003clink rel=\"alternate\" type=\"text/xml+oembed\"\n href=\"https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F\u0026amp;format=xml\"\n title=\"oEmbed Profile: XML\"\u003e\n```\n\n- 📖 [oEmbed format](https://oembed.com/)\n\n### QQ/Wechat\n\nПользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения\n\n```html\n\u003cmeta itemprop=\"name\" content=\"название акции\"\u003e\n\u003cmeta itemprop=\"image\" content=\"http://imgcache.qq.com/qqshow/ac/v4/global/logo.png\"\u003e\n\u003cmeta name=\"description\" itemprop=\"description\" content=\"поделиться содержимым\"\u003e\n```\n- 📖 [Code Format Docs](http://open.mobile.qq.com/api/mqq/index#api:setShareInfo)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Браузеры / Платформы\n\n### Apple iOS\n\n```html\n\u003c!-- Баннер умного приложения --\u003e\n\u003cmeta name=\"apple-itunes-app\" content=\"app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT\"\u003e\n\n\u003c!-- Отключить автоматическое определение и форматирование возможных телефонных номеров --\u003e\n\u003cmeta name=\"format-detection\" content=\"telephone=no\"\u003e\n\n\u003c!-- Иконка запуска (180x180px или больше) --\u003e\n\u003clink rel=\"apple-touch-icon\" href=\"/path/to/apple-touch-icon.png\"\u003e\n\n\u003c!-- Изображение экрана запуска --\u003e\n\u003clink rel=\"apple-touch-startup-image\" href=\"/path/to/launch.png\"\u003e\n\n\u003c!-- Заголовок значка запуска --\u003e\n\u003cmeta name=\"apple-mobile-web-app-title\" content=\"Название приложения\"\u003e.\n\n\u003c!-- Включить автономный (полноэкранный) режим --\u003e\n\u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\"\u003e\n\n\u003c!-- Внешний вид строки состояния (не влияет, если не включен автономный режим) --\u003e\n\u003cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"\u003e\n\n\u003c!-- Глубокое связывание приложений iOS --\u003e\n\u003cmeta name=\"apple-itunes-app\" content=\"app-id=APP-ID, app-argument=http/url-sample.com\"\u003e\n\u003clink rel=\"alternate\" href=\"ios-app://APP-ID/http/url-sample.com\"\u003e\n```\n\n- 📖 [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)\n\n### Google Android\n\n```html\n\u003c!-- Цветовая тем приложения --\u003e\n\u003cmeta name=\"theme-color\" content=\"#E64545\"\u003e\n\n\u003c!-- Добавить на главный экран --\u003e\n\u003cmeta name=\"mobile-web-app-capable\" content=\"yes\"\u003e\n\u003c!-- Дополнительная информация: https://developer.chrome.com/multidevice/android/installtohomescreen --\u003e\n\n\u003c!-- Глубокое связывание приложений Android --\u003e\n\u003cmeta name=\"google-play-app\" content=\"app-id=package-name\"\u003e\n\u003clink rel=\"alternate\" href=\"android-app://package-name/http/url-sample.com\"\u003e\n```\n\n### Google Chrome\n\n```html\n\u003clink rel=\"chrome-webstore-item\" href=\"https://chrome.google.com/webstore/detail/APP_ID\"\u003e.\n\n\u003c!-- Отключить подсказку перевода --\u003e\n\u003cmeta name=\"google\" content=\"notranslate\"\u003e\n```\n\n### Microsoft Internet Explorer\n\n```html\n\u003c!-- Заставить IE 8/9/10 использовать свой последний движок рендеринга --\u003e\n\u003cmeta http-equiv=\"x-ua-compatible\" content=\"ie=edge\"\u003e\n\n\u003c!-- Отключить автоматическое определение и форматирование возможных телефонных номеров расширением для браузера Skype Toolbar--\u003e\n\u003cmeta name=\"skype_toolbar\" content=\"skype_toolbar_parser_compatible\"\u003e\n\n\u003c!-- Плитки Windows --\u003e\n\u003cmeta name=\"msapplication-config\" content=\"/browserconfig.xml\"\u003e\n```\n\nМинимально необходимая разметка xml для `browserconfig.xml`:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cbrowserconfig\u003e\n \u003cmsapplication\u003e\n \u003ctile\u003e\n \u003csquare70x70logo src=\"small.png\"/\u003e\n \u003csquare150x150logo src=\"medium.png\"/\u003e\n \u003cwide310x150logo src=\"wide.png\"/\u003e\n \u003csquare310x310logo src=\"large.png\"/\u003e\n \u003c/tile\u003e\n \u003c/msapplication\u003e\n\u003c/browserconfig\u003e\n```\n\n- 📖 [Ссылка на схему конфигурации браузера](https://msdn.microsoft.com/en-us/library/dn320426.aspx)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Браузеры (китайские)\n\n### 360 Browser\n\n```html\n\u003c!-- Выбор порядка движков рендеринга --\u003e\n\u003cmeta name=\"renderer\" content=\"webkit|ie-comp|ie-stand\"\u003e\n```\n\n### QQ Mobile Browser\n\n```html\n\u003c!-- Фиксирует экран в заданной ориентации --\u003e\n\u003cmeta name=\"x5-orientation\" content=\"landscape/portrait\"\u003e\n\n\u003c!-- Отображение этого документа в полноэкранном режиме --\u003e\n\u003cmeta name=\"x5-fullscreen\" content=\"true\"\u003e\n\n\u003c!-- Документ будет отображаться в \"режиме приложения\" (полноэкранный режим и т.д.) --\u003e\n\u003cmeta name=\"x5-page-mode\" content=\"app\"\u003e\n```\n\n### UC Mobile Browser\n\n```html\n\u003c!-- Фиксация экрана в заданной ориентации --\u003e\n\u003cmeta name=\"screen-orientation\" content=\"landscape/portrait\"\u003e\n\n\u003c!-- Отображение этого документа в полноэкранном режиме --\u003e\n\u003cmeta name=\"full-screen\" content=\"yes\"\u003e\n\n\u003c!-- Браузер UC будет отображать изображения, даже если находится в \"текстовом режиме\" --\u003e\n\u003cmeta name=\"imagemode\" content=\"force\"\u003e\n\n\u003c!-- Документ будет отображаться в \"режиме приложения\" (полноэкранный режим, запрещающий жест и т.д.) --\u003e\n\u003cmeta name=\"browsermode\" content=\"application\"\u003e\n\n\u003c!-- Отключение \"ночного режима\" браузера UC для этого документа --\u003e\n\u003cmeta name=\"nightmode\" content=\"disable\"\u003e\n\n\u003c!-- Упростить документ, чтобы уменьшить передачу данных --\u003e\n\u003cmeta name=\"layoutmode\" content=\"fitscreen\"\u003e\n\n\u003c!-- Отключить функцию браузера UC \"увеличивать масштаб шрифта, когда в документе много слов\" --\u003e\n\u003cmeta name=\"wap-font-scale\" content=\"no\"\u003e\n```\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## CSRF\n\n```html\n\u003c!-- Токен для идентификации формы --\u003e\n\u003cmeta name=\"csrf-token\" content=\"токен\"\u003e\n\u003cmeta name=\"csrf-param\" content=\"csrf_token\"\u003e\n```\n\nПодробнее про [CSRF-атаки](https://habr.com/ru/post/274457/)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Подсказки клиентов\n\n``` html\n\u003c!-- Включает подсказки клиентов --\u003e\n\u003cmeta http-equiv=\"Accept-CH\" content=\"DPR\"\u003e\n\u003cmeta http-equiv=\"Accept-CH\" content=\"DPR, Width\"\u003e\n```\n\n[Подробнее про подсказки клиентов](https://developer.mozilla.org/en-US/docs/Glossary/Client_hints)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Устаревшее\n\n### Значок прикрепленной вкладки Safari\n\nВ macOS 10.11 появились закреплённые закладки, но стандартные не подошли. Поэтому создали новый тип фавиконки. Далее эти значки использовались в тач-баре Макбуков. \n\nДля таких значков есть ряд [требований](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html#//apple_ref/doc/uid/TP40002051-CH18-SW1):\n- только SVG\n- 100% чёрный вектор\n- с помощью color менять цвет\n- SVG должен быть однослойным\n- `viewBox` должен быть равен `\"0 0 16 16\"`\n- фон должен быть прозрачным\n\n```html\n\u003clink rel=\"mask-icon\" href=\"/path/to/icon.svg\" color=\"blue\"\u003e\n```\n\nПроблемой было то, что такие значки, хоть они и SVG, никак не менялись для тёмной темы. А прозрачный фон становился контрастным, но вы это не могли контролировать.\n\nСейчас для тач-бара и закрепленной вкладки хорошо подходят:\n- Apple touch иконки `\u003clink rel=\"apple-touch-icon\" href=\"/custom_icon.png\"\u003e`\n- Фавиконка `\u003clink rel=\"icon\" href=\"favicon.png\"\u003e`\n- Монограмма. Если никаких иконок нет, то значок создаётся из первой буквы заголовка страницы или имени домена верхнего уровня\n\nНачиная с Safari 12 отдельный вариант иконок стал не нужен.\n\n### Значок плитки Windows\n\n```html\n\u003cmeta name=\"msapplication-TileColor\" content=\"#efefef\"\u003e\n```\n\nБраузер Edge раньше поддерживал такой формат значков для меню \"Пуск\". Для последних версий Windows это больше не требуется\n\n### Отображение документа в нужном режиме для IE\n\nВ зависимости от переданного значения `content` заставляет различные версии IE отображать документ в том или ином режиме.\n\n```html\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=5\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=7\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE8\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=8\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE9\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=9\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE10\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=10\"\u003e\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n```\n\nНо начиная с IE11 режимы документов устарели. Режим `Edge` стал предпочтительным.\n\n### `shortcut` для фавиконок\n\n```html\n\u003clink rel=\"shortcut icon\" href=\"favicon.ico\"\u003e\n```\n\n`shortcut` - использовался исключительно IE.\n\n[Почему не стоит использовать shortcut](https://mathiasbynens.be/notes/rel-shortcut-icon)\n\n### Яндекс табло\n\n```html\n\u003clink rel=\"yandex-tableau-widget\" href=\"/manifest.json\"\u003e\n```\n\n_manifest.json_\n```json\n{\n\"version\": \"1.0\",\n\"api_version\": 1,\n\"layout\":\n\t{\n\t\"logo\": \"https://webliberty.ru/wp-content/themes/lime/images/manifest.png\",\n\t\"color\": \"#e9ffd0\",\n\t\"show_title\": false\n\t}\n}\n```\n\nЯндекс для своего браузера, а точнее их [табло](https://browser.yandex.ru/help/personalization/tableau.html) позволяет указать дополнительную иконку. \nСейчас Яндекс удалил техническую документацию по этой иконки и начали работать со стандартным веб-манифестом.\n\n### Ссылки на приложения\n\n[Поддержка прекращена](https://developers.facebook.com/docs/graph-api/changelog/2020-02-03-endpoint-deprecations#links)\n\n```html\n\u003c!-- iOS --\u003e\n\u003cmeta property=\"al:ios:url\" content=\"applinks://docs\"\u003e\n\u003cmeta property=\"al:ios:app_store_id\" content=\"12345\"\u003e\n\u003cmeta property=\"al:ios:app_name\" content=\"App Links\"\u003e\n\n\u003c!-- Android --\u003e\n\u003cmeta property=\"al:android:url\" content=\"applinks://docs\"\u003e\n\u003cmeta property=\"al:android:app_name\" content=\"App Links\"\u003e\n\u003cmeta property=\"al:android:package\" content=\"org.applinks\"\u003e\n\n\u003c!-- Web fall back --\u003e\n\u003cmeta property=\"al:web:url\" content=\"https://applinks.org/documentation\"\u003e\n```\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n### Первый и последний документы в серии документов\n\n- [Поддержка прекращена](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)\n- [Отсутствует в спецификации](https://html.spec.whatwg.org/multipage/links.html#linkTypes)\n- [Обсуждение](https://stackoverflow.com/questions/42841618/what-is-the-alternative-to-rel-first)\n\n```html\n\u003c!-- Первый и последний документы в серии документов, соответственно --\u003e\n\u003clink rel=\"first\" href=\"https://example.com/article/\"\u003e\n\u003clink rel=\"last\" href=\"https://example.com/article/?page=42\"\u003e\n```\n\n## Другие ресурсы\n\n- 📖 [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/master/docs/html.md)\n- 📖 [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/master/docs/extend.md)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## Связанные проекты\n\n- [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom пакет для `HEAD` сниппетов\n- [Sublime Text HTML Head Snippets](https://github.com/marcobiedermann/sublime-head-snippets) - пакет Sublime Text для `HEAD` сниппетов\n- [head-it](https://github.com/hemanth/head-it) - CLI интерфейс для `HEAD` сниппетов\n- [vue-head](https://github.com/ktquez/vue-head) - Манипулирование метаинформацией тега `HEAD` для Vue.js\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## 🌐 Переводы\n\n- 🇮🇩 [Индонезийский](https://github.com/rijdz/HEAD)\n- 🇧🇷 [Бразильский португальский](https://github.com/Webschool-io/HEAD)\n- 🇨🇳 [Китайский (упрощенный)](https://github.com/Amery2010/HEAD)\n- 🇩🇪 [Немецкий](https://github.com/Shidigital/HEAD)\n- 🇮🇹 [Итальянский](https://github.com/Fakkio/HEAD)\n- 🇯🇵 [Японский](https://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html)\n- 🇰🇷 [Корейский](https://github.com/Lutece/HEAD)\n- 🇪🇸 [Испанский](https://github.com/alvaroadlf/HEAD)\n- 🇹🇷 [Турецкий](https://github.com/mkg0/HEAD)\n\n**[⬆ вернуться к началу](#оглавление)**.\n\n## 🤝 Contributing\n\n**Откройте `issue` или `PR`, чтобы предложить изменения или дополнения.**\n\n\n## 🌟 Contributors\n\nПосмотрите на всех супер классных [авторов](https://github.com/joshbuchea/HEAD/graphs/contributors) 🤩\n\n## 👤 Автор оригинального репозитория\n\n**Josh Buchea**\n\n- GitHub: [@joshbuchea](https://github.com/joshbuchea)\n- Twitter: [@joshbuchea](https://twitter.com/joshbuchea)\n\n## 💛 Поддержка\n\nЕсли этот проект был полезен для вас или вашей организации, пожалуйста, рассмотрите возможность прямой поддержки моей работы автора оригинального репозитория:\n\n- 💛 [Sponsor me on GitHub](https://github.com/sponsors/joshbuchea)\n- ⭐️ [Star this project on GitHub](https://github.com/joshbuchea/HEAD)\n- 🐙 [Следуйте за Джошем на GitHub](https://github.com/joshbuchea)\n- 🐦 [Следуйте за Джошем в Twitter](https://twitter.com/joshbuchea)\n\nВсем кто помогает, спасибо! 🙏\n\n— Josh\n\n## 📝 Лицензия\n\n[](https://creativecommons.org/publicdomain/zero/1.0/)\n\n**[⬆ вернуться к началу](#оглавление)**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlacademy%2FHEAD","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtmlacademy%2FHEAD","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlacademy%2FHEAD/lists"}