Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/htmlacademy/HEAD

Список того, что вы можете указать в HEAD
https://github.com/htmlacademy/HEAD

favicon head html list meta-tags

Last synced: 2 months ago
JSON representation

Список того, что вы можете указать в HEAD

Awesome Lists containing this project

README 

        
# 🤯 HEAD



> Простое руководство по HTML-элементам в ``



[![Contributors](https://img.shields.io/github/contributors/joshbuchea/head.svg?style=for-the-badge)](https://github.com/joshbuchea/HEAD/graphs/contributors)

[![CC0](https://img.shields.io/badge/license-CC0-green.svg?style=for-the-badge)](https://creativecommons.org/publicdomain/zero/1.0/)

[![Follow @joshbuchea on Twitter](https://img.shields.io/badge/Follow_@joshbuchea-blue?logo=twitter&logoColor=white&style=for-the-badge)](https://twitter.com/joshbuchea)



## Оглавление



- [Рекомендуемый минимум](#рекомендуемый-минимум)

- [Элементы](#элементы)

- [Мета](#мета)

- [Ссылки](#ссылки)

- [Иконки](#иконки)

- [Социальные сети](#социальные-сети)

  - [Facebook Open Graph](#facebook-open-graph)

  - [Twitter Card](#twitter-card)

  - [Twitter Privacy](#twitter-privacy)

  - [Schema.org](#schemaorg)

  - [JSON-LD](#json-ld)

  - [Pinterest](#pinterest)

  - [Facebook Instant Articles](#facebook-instant-articles)

  - [OEmbed](#oembed)

  - [QQ/Wechat](#qqwechat)

- [Браузеры / Платформы](#браузеры--платформы)

  - [Apple iOS](#apple-ios)

  - [Google Android](#google-android)

  - [Google Chrome](#google-chrome)

  - [Microsoft Internet Explorer](#microsoft-internet-explorer)

- [Браузеры (китайские)](#браузеры-китайские)

  - [360 Browser](#360-browser)

  - [QQ Mobile Browser](#qq-mobile-browser)

  - [UC Mobile Browser](#uc-mobile-browser)

- [CSRF](#csrf)

- [Подсказки клиентов](#подсказки-клиентов)

- [Устаревшее](#устаревшее)

- [Другие ресурсы](#другие-ресурсы)

- [Связанные проекты](#связанные-проекты)

- [Переводы](#-переводы)

- [Contributing](#-contributing)

  - [Contributors](#-contributors)

- [Автор оригинального репозиторий](#-автор-оригинального-репозитория)

- [Лицензия](#-лицензия)



## Рекомендуемый минимум



Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):



```html



  

  

  

  Заголовок страницы



```



`meta charset` - определяет кодировку веб-сайта, стандартом является `utf-8`.



`meta name="viewport"` - настройки viewport, связанные с мобильной отзывчивостью



`width=device-width` - физическая ширина устройства (отлично подходит для мобильных устройств!)



`initial-scale=1` - начальный масштаб, 1 означает отсутствие масштабирования



**[⬆ вернуться к началу](#оглавление)**.



## Элементы



Допустимые элементы `` включают `base`, `link`, `meta`, `noscript`, `script`, `style`, `template` и `title`.



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



```html



Заголовок страницы



/* ... */



 // функция(и) идут здесь



 



  



```



**[⬆ вернуться к началу](#оглавление)**.



## Мета



```html



```



```html



```



- `contain`: вьюпорт должен полностью вмещать веб-контент. 

- `cover`: веб-контент должен полностью покрывать вьюпорт. 

- `auto`: значение по умолчанию, работает как `contain`.



[Подробнее в блоке css-live](https://css-live.ru/articles/ponimanie-vyuporta-webview-v-ios-11.html)



```html



.



.

```



```html



```



Для роботов есть несколько значений:

* `all` - нет ограничений на индексирование и показ контента.

* `noindex` - не показывать эту страницу в результатах поиска.

* `nofollow` - не выполнять переход по ссылкам на странице.

* `none` - эквивалент noindex, nofollow.

* `noarchive` - запрещает показывать ссылку на кеш в результатах поиска.

* `nosnippet` - не показывать в результатах поиска текстовый фрагмент или видео.

* `max-snippet: [number]` - ограничение на количество символов в текстовом фрагменте

* `max-image-preview: [setting]` - определяет максимальный размер изображений, которые могут показываться в результатах поиска для этой страницы.

* `max-video-preview: [number]` - задает для фрагмента видео со страницы ограничение по длительности в секундах при показе в результатах поиска.

* `notranslate` - не предлагать перевести эту страницу в результатах поиска.

* `noimageindex` - не индексировать изображения на странице.

* `unavailable_after: [date/time]` - запрещает показывать страницу в результатах поиска после даты и времени.

* `noyaca` - запрет на использование информации из Яндекса. Каталога для описания в сниппете

* `noodp` — запрет на использование описания из dMoz для сниппета;

* `noydir` — запрет на использование описания из Yahoo! Directory для сниппета.

  

Значения можно писать через запятую `content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"`. 

Подробнее в документации [Google Поиска](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag)



```html



```



```html



```

Подробнее в:

- [Документации для разработчиков от Apple](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)

- [Гисте про комбинирование](https://gist.github.com/yuezk/15c5bb1370e30d0a2a60)



```html



```



У `Window-Target` есть несколько значений значения:

- `_self` - загружает документ в текущем окне

- `_blank` - загружает документ в новом окне

- `_parent` - загружает документ в родительском фрейме

- `_top` - загружает документ в полном окне браузера

- `имя_фрейма` - загружает документ в указанном фрейме



```html



.



 



```



```html



```

[Подробнее про pragma](https://mpbox.ru/html/meta-tags/http-equiv/pragma/).



```html



```

[Подробнее про expires](https://karashchuk.com/HTML/meta_Expires/).



```html



```

`revisit-after` поисковыми роботами [чаще всего игнорируется](https://developers.google.com/search/blog/2007/12/answering-more-popular-picks-meta-tags).



```html



```



```html



```



[Про соль подробнее](https://www.php.net/manual/ru/faq.passwords.php#faq.passwords.salt)



```html



```



[Подробнее про парковку доменов](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)



```html



```



[Подробнее про отключение Скайпа](http://mpbox.ru/html-and-css-tricks/different/skype-addon.html)



- 📖 [Мета-теги, которые понимает Google](https://support.google.com/webmasters/answer/79812?hl=en)

- 📖 [WHATWG Wiki: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions)

- 📖 [ICBM в Википедии](https://en.wikipedia.org/wiki/ICBM_address#Modern_use)

- 📖 [Геотеги в Википедии](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)



**[⬆ вернуться к началу](#оглавление)**.



## Ссылки



```html



.



```



```html



```



[О human.txt подробнее](https://humanstxt.org/RU)



```html



.



```



```html



```



Значений `as` может быть несколько:

- `audio`: аудиофайл

- `document`: HTML-документ

- `embed`: внедренный ресурс

- `fetch`: любой ресурс, который не подходит ни под одну из остальных категорий

- `font`: шрифт

- `image`: изображение

- `object`: объект

- `script`: JavaScript-файл

- `style`: CSS-файл

- `track`: файл субтитров

- `video`: видеофайл

- `worker`: воркер



У `image` есть уникальная возможность указать адаптивную картинку:

```html



```



- 📖 [Предварительная загрузка адаптивных изображений](https://web.dev/articles/preload-responsive-images)



```html

 

```



- 📖 [Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml)

- 📖 [Предзагрузка модулей](https://developers.google.com/web/updates/2017/12/modulepreload)



**[⬆ вернуться к началу](#оглавление)**.



## Иконки



```html



```



`` - необязательно указывать в ``. Любой сервер ищет `favicon.ico`, но для этого `favicon.ico` обязательно нужно положить в корень проекта. От `.ico` лучше не отказываться, так как могут перестать работать иконки, например в RSS-читалках. В `.ico` поддерживается прозрачность.

На данный момент в Хром есть [баг](https://bugs.chromium.org/p/chromium/issues/detail?id=1162276). Если в проекте подключены `ICO` и `SVG` версии, то всё равно предпочтение отдаётся `ICO`.



```html



```



Преимущество SVG-фавиконки в том, что, помимо того, что он векторный, он может подстраиваться под тёмную тему с помощью ` @media (prefers-color-scheme: dark)`. [Поддержка векторных фавиконок](https://caniuse.com/link-icon-svg).



```html



```



Используется для отображения ярлыка на домашнем экране IPhone и IPad.



Выше указаны три версии для фавиконки, но можно добавить ещё 2, чтобы учесть большинство современных браузеров. Чтобы не увеличивать HTML другие фавиконки добавляют в веб-манифест



```html



```



_manifest.webmanifest_

```json

{

  "icons": [

    { "src": "192.png", "type": "image/png", "sizes": "192x192" },

    { "src": "12.png", "type": "image/png", "sizes": "512x512" }

  ]

}

```



- 📖 [Все о фавиконах (и сенсорных иконках)](https://bitsofco.de/all-about-favicons-and-touch-icons/)

- 📖 [Создание прикрепленных иконок вкладок](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)

- 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)

- 📖 [Иконки и цвета браузера](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/)

- 📖 [Как создать Favicon в 2021 году: шесть файлов, которые подходят большинству потребностей](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)



**[⬆ вернуться к началу](#оглавление)**.



## Социальные сети



### Facebook Open Graph

> Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook. [Подробнее о разметке Facebook Open Graph](https://developers.facebook.com/docs/sharing/webmasters#markup)



```html



```



- 📖 [Open Graph protocol](http://ogp.me/)

- 🛠 Протестируйте свою страницу с помощью [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)



### Twitter Card

> С помощью Twitter Cards вы можете прикреплять к твитам фотографии, видео и мультимедийные файлы, тем самым способствуя привлечению трафика на ваш сайт. [Подробнее о Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)



```html



.

.

.



```



- 📖 [Начало работы с карточками - Twitter Developers](https://dev.twitter.com/cards/getting-started)

- 🛠 Проверьте свою страницу с помощью [Twitter Card Validator](https://cards-dev.twitter.com/validator)



### Twitter Privacy

Если вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter. [Подробнее о возможностях конфиденциальности Twitter](https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have).

```html



```



### Schema.org



```html



   

     

     

     .

     .

     

  



```



**Примечание:** Эти мета-теги требуют добавления атрибутов `itemscope` и `itemtype` к тегу ``.



- 📖 [Начало работы - schema.org](https://schema.org/docs/gs.html)

- 🛠 Протестируйте свою страницу с помощью [Rich Results Test](https://search.google.com/test/rich-results)



### JSON-LD



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



```



  {

    "@context": "https://schema.org",

    "@type": "Article",

    "author": {

      "@type": "Person",

      "name": "Your Name"

    },

    "publisher": {

      "@type": "Organization",

      "name": "Your Organization"

    },

    "headline": "Article Headline",

    "image": "https://example.com/image.jpg",

    "datePublished": "2020-02-05T08:00:00+08:00",

    "dateModified": "2020-03-05T09:20:00+08:00"

  }



```



- [Спецификация](https://www.w3.org/TR/json-ld11/)

- [Официальный сайт](https://json-ld.org/)

- [Документация от Google](https://developers.google.com/search/docs/data-types/article)



**[⬆ вернуться к началу](#оглавление)**.



### Pinterest



Pinterest позволяет запретить людям сохранять страницы вашего сайта, согласно [их центру помощи](https://help.pinterest.com/en/business/article/prevent-saves-to-pinterest-from-your-site). Описание `description` является необязательным.



```html

.

```



### Facebook Instant Articles



```html



```



- 📖 [Создание статей - мгновенные статьи](https://developers.facebook.com/docs/instant-articles/guides/articlecreate)

- 📖 [Образцы кода - мгновенные статьи](https://developers.facebook.com/docs/instant-articles/reference)



### OEmbed



```html



```



- 📖 [oEmbed format](https://oembed.com/)



### QQ/Wechat



Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения



```html



```

- 📖 [Code Format Docs](http://open.mobile.qq.com/api/mqq/index#api:setShareInfo)



**[⬆ вернуться к началу](#оглавление)**.



## Браузеры / Платформы



### Apple iOS



```html



.



```



- 📖 [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)



### Google Android



```html



```



### Google Chrome



```html

.



```



### Microsoft Internet Explorer



```html



```



Минимально необходимая разметка xml для `browserconfig.xml`:



```xml



    

        

            

            

            

            

        

    



```



- 📖 [Ссылка на схему конфигурации браузера](https://msdn.microsoft.com/en-us/library/dn320426.aspx)



**[⬆ вернуться к началу](#оглавление)**.



## Браузеры (китайские)



### 360 Browser



```html



```



### QQ Mobile Browser



```html



```



### UC Mobile Browser



```html



```



**[⬆ вернуться к началу](#оглавление)**.



## CSRF



```html



```



Подробнее про [CSRF-атаки](https://habr.com/ru/post/274457/)



**[⬆ вернуться к началу](#оглавление)**.



## Подсказки клиентов



``` html



```



[Подробнее про подсказки клиентов](https://developer.mozilla.org/en-US/docs/Glossary/Client_hints)



**[⬆ вернуться к началу](#оглавление)**.



## Устаревшее



###  Значок прикрепленной вкладки Safari



В macOS 10.11 появились закреплённые закладки, но стандартные не подошли. Поэтому создали новый тип фавиконки. Далее эти значки использовались в тач-баре Макбуков. 



Для таких значков есть ряд [требований](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html#//apple_ref/doc/uid/TP40002051-CH18-SW1):

- только SVG

- 100% чёрный вектор

- с помощью color менять цвет

- SVG должен быть однослойным

- `viewBox` должен быть равен `"0 0 16 16"`

- фон должен быть прозрачным



```html



```



Проблемой было то, что такие значки, хоть они и SVG, никак не менялись для тёмной темы. А прозрачный фон становился контрастным, но вы это не могли контролировать.



Сейчас для тач-бара и закрепленной вкладки хорошо подходят:

- Apple touch иконки ``

- Фавиконка  ``

- Монограмма. Если никаких иконок нет, то значок создаётся из первой буквы заголовка страницы или имени домена верхнего уровня



Начиная с Safari 12 отдельный вариант иконок стал не нужен.



### Значок плитки Windows



```html



```



Браузер Edge раньше поддерживал такой формат значков для меню "Пуск". Для последних версий Windows это больше не требуется



### Отображение документа в нужном режиме для IE



В зависимости от переданного значения `content` заставляет различные версии IE отображать документ в том или ином режиме.



```html



```



Но начиная с IE11 режимы документов устарели. Режим `Edge` стал предпочтительным.



### `shortcut` для фавиконок



```html



```



`shortcut` - использовался исключительно IE.



[Почему не стоит использовать shortcut](https://mathiasbynens.be/notes/rel-shortcut-icon)



### Яндекс табло



```html



```



_manifest.json_

```json

{

"version": "1.0",

"api_version": 1,

"layout":

	{

	"logo": "https://webliberty.ru/wp-content/themes/lime/images/manifest.png",

	"color": "#e9ffd0",

	"show_title": false

	}

}

```



Яндекс для своего браузера, а точнее их [табло](https://browser.yandex.ru/help/personalization/tableau.html) позволяет указать дополнительную иконку. 

Сейчас Яндекс удалил техническую документацию по этой иконки и начали работать со стандартным веб-манифестом.



### Ссылки на приложения



[Поддержка прекращена](https://developers.facebook.com/docs/graph-api/changelog/2020-02-03-endpoint-deprecations#links)



```html



```



**[⬆ вернуться к началу](#оглавление)**.



### Первый и последний документы в серии документов



- [Поддержка прекращена](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)

- [Отсутствует в спецификации](https://html.spec.whatwg.org/multipage/links.html#linkTypes)

- [Обсуждение](https://stackoverflow.com/questions/42841618/what-is-the-alternative-to-rel-first)



```html



```



## Другие ресурсы



- 📖 [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/master/docs/html.md)

- 📖 [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/master/docs/extend.md)



**[⬆ вернуться к началу](#оглавление)**.



## Связанные проекты



- [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom пакет для `HEAD` сниппетов

- [Sublime Text HTML Head Snippets](https://github.com/marcobiedermann/sublime-head-snippets) - пакет Sublime Text для `HEAD` сниппетов

- [head-it](https://github.com/hemanth/head-it) - CLI интерфейс для `HEAD` сниппетов

- [vue-head](https://github.com/ktquez/vue-head) - Манипулирование метаинформацией тега `HEAD` для Vue.js



**[⬆ вернуться к началу](#оглавление)**.



## 🌐 Переводы



- 🇮🇩 [Индонезийский](https://github.com/rijdz/HEAD)

- 🇧🇷 [Бразильский португальский](https://github.com/Webschool-io/HEAD)

- 🇨🇳 [Китайский (упрощенный)](https://github.com/Amery2010/HEAD)

- 🇩🇪 [Немецкий](https://github.com/Shidigital/HEAD)

- 🇮🇹 [Итальянский](https://github.com/Fakkio/HEAD)

- 🇯🇵 [Японский](https://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html)

- 🇰🇷 [Корейский](https://github.com/Lutece/HEAD)

- 🇪🇸 [Испанский](https://github.com/alvaroadlf/HEAD)

- 🇹🇷 [Турецкий](https://github.com/mkg0/HEAD)



**[⬆ вернуться к началу](#оглавление)**.



## 🤝 Contributing



**Откройте `issue` или `PR`, чтобы предложить изменения или дополнения.**



## 🌟 Contributors



Посмотрите на всех супер классных [авторов](https://github.com/joshbuchea/HEAD/graphs/contributors) 🤩



## 👤 Автор оригинального репозитория



**Josh Buchea**



- GitHub: [@joshbuchea](https://github.com/joshbuchea)

- Twitter: [@joshbuchea](https://twitter.com/joshbuchea)



## 💛 Поддержка



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



- 💛 [Sponsor me on GitHub](https://github.com/sponsors/joshbuchea)

- ⭐️ [Star this project on GitHub](https://github.com/joshbuchea/HEAD)

- 🐙 [Следуйте за Джошем на GitHub](https://github.com/joshbuchea)

- 🐦 [Следуйте за Джошем в Twitter](https://twitter.com/joshbuchea)



Всем кто помогает, спасибо! 🙏



— Josh



## 📝 Лицензия



[![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)



**[⬆ вернуться к началу](#оглавление)**.