Главная » Языки программирования

Html meta name search

Содержание
  1. Standard metadata names
  2. Standard metadata names defined in other specifications
  3. Other metadata names
  4. Specifications
  5. Browser compatibility
  6. See also
  7. Html meta name search
  8. Кратко
  9. Пример
  10. Как понять
  11. Как пишется
  12. Атрибуты
  13. Подсказки
  14. На практике
  15. Дока Дог советует
  16. Алёна Батицкая советует
  17. HTML Tag
  18. Browser Support
  19. Attributes
  20. Global Attributes
  21. More Examples

Standard metadata names

The HTML specification defines the following set of standard metadata names:

    application-name : the name of the application running in the web page.

  • Dynamically inserting (with document.write() or appendChild() ) makes the referrer behavior unpredictable.
  • When several conflicting policies are defined, the no-referrer policy is applied.
meta name="color-scheme" content="dark light" />

Standard metadata names defined in other specifications

The CSS Device Adaptation specification defines the following metadata name:

    viewport : gives hints about the size of the initial size of the viewport.

    Values for the content of
    Value Possible subvalues Description
    width A positive integer number, or the text device-width Defines the pixel width of the viewport that you want the website to be rendered at.
    height A positive integer, or the text device-height Defines the height of the viewport. Not used by any browser.
    initial-scale A positive number between 0.0 and 10.0 Defines the ratio between the device width ( device-width in portrait mode or device-height in landscape mode) and the viewport size.
    maximum-scale A positive number between 0.0 and 10.0 Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scale or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.
    minimum-scale A positive number between 0.0 and 10.0 Defines the minimum zoom level. It must be smaller or equal to the maximum-scale or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.
    user-scalable yes or no If set to no , the user is not able to zoom in the webpage. The default is yes . Browser settings can ignore this rule, and iOS10+ ignores it by default.
    viewport-fit auto , contain or cover The auto value doesn’t affect the initial layout viewport, and the whole web page is viewable. The contain value means that the viewport is scaled to fit the largest rectangle inscribed within the display. The cover value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn’t end up outside the display.
Читайте также:  Python configparser list all sections

Other metadata names

The WHATWG Wiki MetaExtensions page contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:

  • creator : the name of the creator of the document, such as an organization or institution. If there are more than one, several elements should be used.
  • googlebot , a synonym of robots , is only followed by Googlebot (the indexing crawler for Google).
  • publisher : the name of the document’s publisher.
  • robots : the behavior that cooperative crawlers, or «robots», should use with the page. It is a comma-separated list of the values below:
    Value Description Used by
    index Allows the robot to index the page (default). All
    noindex Requests the robot to not index the page. All
    follow Allows the robot to follow the links on the page (default). All
    nofollow Requests the robot to not follow the links on the page. All
    all Equivalent to index, follow Google
    none Equivalent to noindex, nofollow Google
    noarchive Requests the search engine not to cache the page content. Google, Yahoo, Bing
    nosnippet Prevents displaying any description of the page in search engine results. Google, Bing
    noimageindex Requests this page not to appear as the referring page of an indexed image. Google
    nocache Synonym of noarchive . Bing
  • Only cooperative robots follow these rules. Do not expect to prevent email harvesters with them.
  • The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a robots.txt file.
  • If you want to remove a page, noindex will work, but only after the robot visits the page again. Ensure that the robots.txt file is not preventing revisits.
  • Some values are mutually exclusive, like index and noindex , or follow and nofollow . In these cases the robot’s behavior is undefined and may vary between them.
  • Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header X-Robots-Tag ; this allows non-HTML documents like images to use these rules.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник

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

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Таких метатегов может быть любое количество. Все они размещаются внутри тега , желательно в самом начале.

Пример

Скопировать ссылку «Пример» Скопировано

     name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >  head> meta name="description" content="Краткое описание страницы"> meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" > meta name="viewport" content="width=device-width, initial-scale=1.0"> head>

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

Мы рекомендуем вставить как минимум метатеги description , viewport , charset . Они помогут оптимизировать сайт для браузера пользователя и поисковых систем.

В прописывается информация, которую нельзя указать в , , , или .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

  meta charset=". ">

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

  meta name=". " content=". "> meta http-equiv=". " content=". ">

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

  name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3"> meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >

Атрибуты

Скопировать ссылку "Атрибуты" Скопировано

  • charset — задаёт кодировку страницы. Мы рекомендуем писать здесь UTF - 8 — это самый распространённый вариант.
  meta charset="UTF-8">
  • http - equiv — атрибут, который может изменять поведение страницы или серверов. Используется в паре с content . У него есть несколько значений:
    • "default - style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента , который связан с таблицей CSS-стилей, или заголовок элемента , который содержит таблицу CSS-стилей.
    • "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.
      meta http-equiv="refresh" content="3">
    • name — имя мета-тега, которое также определяет его значение. Используется в паре с content . Можно задать следующие значения:
      • "keywords" — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.
        meta name="keywords" content="Рецепт, печенье, готовим дома">
      • "viewport" — задаёт параметры окна просмотра в браузере. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. В примере ниже width указывает ширину окна просмотра, а initial - scale — коэффициент масштабирования страницы при первом открытии:
        name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" >
      • "description" — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например: «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывайте указывать "description" .
        name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками"> meta name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками" >      
        meta name="author" content="Иван Петров">

      Подсказки

      Скопировать ссылку "Подсказки" Скопировано

      💡 Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега .

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

      💡 С помощью атрибута http - equiv = "refresh" можно сделать так, чтобы страница отправляла пользователя на другую страницу через определённое количество секунд. Например, отправим пользователя на главную Яндекса через 15 секунд:

        meta http-equiv="refresh" content="15;url=https://www.yandex.ru">

      На практике

      Скопировать ссылку "На практике" Скопировано

      Дока Дог советует

      Скопировать ссылку "Дока Дог советует" Скопировано

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

        meta name="format-detection" content="telephone=no">

      🛠 С помощью метатегов можно задавать поведение мобильной версии сайта. Например, можно прописать, на сколько на мобайле можно увеличить масштаб и насколько уменьшить относительно стандарта.

      🛠 Через метатеги задаётся и Open Graph-разметка: заголовок, картинка и описание для репоста в соцсетях.

      Алёна Батицкая советует

      Скопировать ссылку "Алёна Батицкая советует" Скопировано

      🛠 Если не задать описание для страницы при помощи , то поисковые системы при добавлении сайта в свою базу возьмут первый попавшийся текст со страницы и составят из него так называемый сниппет — текст под заголовком сайта в поисковой выдаче.

      Пример текста под заголовком сайта в поисковой выдаче (сниппет)

      Если хочется контролировать, что именно увидит пользователь в поиске — всегда заполняйте description .

      🛠 Есть отдельная категория метаразметки — OG-разметка. OG расшифровывается как open graph. Такая разметка нужна для того, чтобы при вставке ссылки на ваш сайт в соцсетях в превью отображалась красивая карточка.

      Пример open graph (OG) разметки

      Стандартный набор метатегов для красивой карточки в Facebook:

         property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия"> meta property="og:title" content="Лучший сайт в интернете"> meta property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия" > meta property="og:image" content="http://best-site/thumbnail.jpg"> meta property="og:url" content="http://best-site/index.htm">

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

      Источник

      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:

      Источник

Оцените статью
© 2024 Программирование