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

Что можно положить в тег

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

   . для обеспечения правильного отображения документов. Любой другой элемент заголовка должен идти *после* этих тегов. -->  

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

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

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

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

Элементы

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

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

              , то может содержать только метаданные --> 

Мета

. для обеспечения правильного отображения документов. Любой другой элемент заголовка должен идти после этих тегов. -->  , так как тег применяется только к ресурсам, которые объявлены после него. -->  .    .                             .    

Ссылки

Иконки

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

Facebook Open Graph

Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook. Подробнее о разметке Facebook Open Graph

Twitter Card

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

Twitter Privacy

Если вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter. Подробнее о возможностях конфиденциальности Twitter.

Schema.org

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

Pinterest

Pinterest позволяет запретить людям сохранять страницы вашего сайта, согласно их центру помощи. Описание description является необязательным.

Facebook Instant Articles

OEmbed

QQ/Wechat

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

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

Apple iOS

Google Android

Google Chrome

Microsoft Internet Explorer

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

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

360 Browser

QQ Mobile Browser

UC Mobile Browser

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

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

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

• Atom HTML Head Snippets — Atom пакет для HEAD сниппетов
• Sublime Text HTML Head Snippets — пакет Sublime Text для HEAD сниппетов
• head-it — CLI интерфейс для HEAD сниппетов
• vue-head — Манипулирование метаинформацией тега HEAD для Vue.js

Другие форматы

​ Переводы

​ Contributing

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

​ Contributors

Посмотрите на всех супер классных авторов ​

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

Josh Buchea

​ Поддержка

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

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

Примечание автора: это русский перевод репозитория HEAD от Josh Buchea. Мы поддерживаем русскую версию в отдельном репозитории, куда вы можете отправлять issue или PR напрямую, если нашли неточности или вам есть, что добавить. Публикуем перевод на Хабре, чтобы поделиться с русскоязычным сообществом полезным материалом.

Источник

HTML Tag

The tag defines metadata about an HTML document. Metadata is data (information) about data.

tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the tag (See «Setting The Viewport» example below).

Browser Support

Attributes

Attribute	Value	Description
charset	character_set	Specifies the character encoding for the HTML document
content	text	Specifies the value associated with the http-equiv or name attribute
http-equiv	content-security-policy content-type default-style refresh	Provides an HTTP header for the information/value of the content attribute
name	application-name author description generator keywords viewport	Specifies a name for the metadata

Global Attributes

More Examples

Define keywords for search engines:

Источник

HTML — The Head Element

The HTML element is a container for the following elements: , , , , , and .

The HTML Element

The element is a container for metadata (data about data) and is placed between the tag and the tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML Element

The element defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab.

The element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

Example

The content of the document.

The HTML Element

The element is used to define style information for a single HTML page:

Example

The HTML Element

The element defines the relationship between the current document and an external resource.

The tag is most often used to link to external style sheets:

Example

Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML Element

The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples

Define the character set used:

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

Setting the viewport to make your website look good on all devices:

Example

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

The HTML Element

The element is used to define client-side JavaScripts.

The following JavaScript writes «Hello JavaScript!» into an HTML element with >

Example

Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML Element

The element specifies the base URL and/or target for all relative URLs in a page.

The tag must have either an href or a target attribute present, or both.

There can only be one single element in a document!

Example

Specify a default URL and a default target for all links on a page:

Chapter Summary

• The element is a container for metadata (data about data)
• The element is placed between the tag and the tag
• The element is required and it defines the title of the document
• The element is used to define style information for a single document
• The tag is most often used to link to external style sheets
• The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
• The element is used to define client-side JavaScripts
• The element specifies the base URL and/or target for all relative URLs in a page

HTML head Elements

Tag	Description
	Defines information about the document
	Defines the title of a document
	Defines a default address or a default target for all links on a page
	Defines the relationship between a document and an external resource
	Defines metadata about an HTML document
	Defines a client-side script
	Defines style information for a document

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник