Метатег используется для описания атрибутов веб-документа HTML, таких как автор, дата и время, описание веб-страницы, ключевые слова, обновление страницы и т. д. Информация, которую он предоставляет, хотя и невидима для пользователя, представляет собой самые основные метаданные документа.
Для веб-страниц метаданные должны описывать текущую веб-страницу с помощью некоторой информации поля, чтобы, когда браузеры и поисковые системы посещали эту веб-страницу, они могли знать, как анализировать данные этой веб-страницы с помощью этой информации описания.
В метатеге есть четыре атрибута: http-equiv, имя, схема и контент; разные атрибуты имеют разные значения параметров, и эти разные значения параметров реализуют разные функции веб-страницы. Среди них http-equiv, как следует из названия, часто используется для наложения некоторых ограничений на протокол http, и его роль заключается в связывании атрибута содержимого с заголовком HTTP. Атрибут схемы используется для указания схемы, используемой для преобразования значения атрибута.
Проще говоря, метатег предоставляет «пару ключ-значение» с именем/http-equiv в качестве ключа и содержимым в качестве значения, и эта схема обычно не используется.
Основываясь на приведенных выше концепциях, метатеги часто используются в качестве мощного поставщика SEO.
Общие метатеги:
//声明文档使用的字符编码
<meta charset="utf-8">
//页面描述
<meta name="description" content="网页描述"/>
//页面关键词
<meta name="keywords" content=""/>
//网页作者
<meta name="author" content="name, email@gmail.com"/>
Набор символов здесь на самом деле является новым атрибутом h5, который эквивалентен<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, эффект заключается в добавлении в заголовок http-запроса этой веб-страницы:content-type: text/html; charset=UTF-8
Это наиболее формальные мета-использования, поддерживаемые практически каждым браузером и определенные в спецификации тегов.
Однако, к сожалению, точно так же, как тег script изначально не предназначался для использования в качестве jsonp, метатег, поддерживаемый современными браузерами, полностью выходит за рамки его первоначального определения.
Как упоминалось выше, информация метатегов невидима для пользователей, а ее простая структура пары «ключ-значение», несомненно, является самым простым способом передачи информации веб-страницы, поэтому производители браузеров, наконец, начинают с метатегов, плюс каждый браузер хочет чтобы отразить его собственные характеристики, что в конечном итоге приводит к беспорядочному метатегу.
Среди них есть метатеги, специфичные для конкретного браузера. пример:
//uc强制竖屏
<meta name="screen-orientation" content="portrait">
//QQ强制竖屏
<meta name="x5-orientation" content="portrait">
//UC强制全屏
<meta name="full-screen" content="yes">
//设置苹果工具栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
На самом деле это специализированные версии метаданных, разработанные производителями браузеров. Хотя они и не распространены, они могут снизить множество сложных требований после их использования.
Как фронтенд-разработчик, я должен сказать, что все еще с нетерпением жду скорейшей реализации унифицированных браузеров 🤣.
побег. . .
Ниже приведены метатеги коллекции. В будущем со временем будет обновляться больше коллекций. Я также надеюсь, что пользователи сети имеют больше метатегов и могут дать мне несколько советов:
//声明文档使用的字符编码
<meta charset="utf-8">
//优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
//页面描述
<meta name="description" content="网页描述"/>
//页面关键词
<meta name="keywords" content=""/>
//网页作者
<meta name="author" content="name, email@gmail.com"/>
//搜索引擎抓取
<meta name="robots" content="index,follow"/>
//为移动设备添加 viewport
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
//添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
//设置苹果工具栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
//启用360浏览器的极速模式(webkit)
<meta name="renderer" content="webkit">
//避免IE使用兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//不让百度转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
//针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="HandheldFriendly" content="true">
//微软的老式浏览器
<meta name="MobileOptimized" content="320″>
//uc强制竖屏
<meta name="screen-orientation" content="portrait">
//QQ强制竖屏
<meta name="x5-orientation" content="portrait">
//UC强制全屏
<meta name="full-screen" content="yes">
//QQ强制全屏
<meta name="x5-fullscreen" content="true">
//UC应用模式
<meta name="browsermode" content="application">
//QQ应用模式
<meta name="x5-page-mode" content="app">
//windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">
//设置页面不缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
--Конец