Heim > Artikel > Web-Frontend > So verwenden Sie HTML-Meta-Tags
So verwenden Sie HTML-Meta-Tags
- php中世界最好的语言Original
- 2018-01-17 09:37:421658Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie das Meta-Tag von HTML verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Meta-Tags von HTML? Das Folgende ist ein praktischer Fall, schauen wir uns das an. Vorwort
Meta ist ein Hilfs-Tag im Kopfbereich der HTML-Sprache. Vielleicht halten Sie diesen Code für entbehrlich. Wenn Sie Meta-Tags gut nutzen können, werden Sie tatsächlich unerwartete Effekte erzielen. Die Funktionen von Meta-Tags sind: Suchmaschinenoptimierung (SEO), Definition der auf der Seite verwendeten Sprache, automatische Aktualisierung und Verweis auf neue Seiten. und Erkennen der Dynamik während der Webseitenkonvertierung, Steuerung der Seitenpufferung, Webseitenbewertung und -bewertung, Steuerung des Fensters für die Webseitenanzeige usw.!
Meta-Zusammenfassung von HTML
Meta-Tag-Zusammensetzung: Das Meta-Tag verfügt über zwei
Attribute, nämlich das http-äquivalente Attribut und das Namensattribut. Verschiedene Attribute sind unterschiedliche Parameterwerte. Diese unterschiedlichen Parameterwerte realisieren unterschiedliche Webseitenfunktionen.
Oben sind einige häufig verwendete Metaattribute aufgeführt, und im Folgenden wird die Verwendung von Meta erläutert.<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<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">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用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">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<title>标题</title>
</head>Meta ist ein Hilfs-Tag im Kopfbereich der HTML-Sprache. Vielleicht halten Sie diesen Code für entbehrlich. Wenn Sie Meta-Tags gut nutzen können, werden Sie tatsächlich unerwartete Effekte erzielen. Die Funktionen von Meta-Tags sind: Suchmaschinenoptimierung (SEO), Definition der auf der Seite verwendeten Sprache, automatische Aktualisierung und Verweis auf neue Seiten. und die Dynamik der Webseitenkonvertierung erkennen, die Seitenpufferung, die Webseitenbewertung und -bewertung steuern, das Fenster für die Webseitenanzeige steuern usw.!
Zusammensetzung des Meta-Tags: Das Meta-Tag hat zwei Attribute, nämlich das http-äquivalente Attribut und das Namensattribut. Diese unterschiedlichen Parameterwerte realisieren unterschiedliche Webseiten.
1. Namensattribut
Das Namensattribut wird hauptsächlich zur Beschreibung von Webseiten verwendet, und der entsprechende Attributwert ist Inhalt. Der Inhalt wird hauptsächlich von Suchmaschinenrobotern verwendet, um Informationen zu finden Informationen klassifizieren.
Das Syntaxformat des Namensattributs des Meta-Tags ist:
Das Namensattribut hat hauptsächlich die folgenden Parameter:<meta name="参数"content="具体的参数值">。
Schlüsselwörter (Schlüsselwörter)
Beschreibung: Schlüsselwörter werden verwendet, um Suchmaschinen mitzuteilen, welche Schlüsselwörter Ihre Webseite enthält.
Beispiel:
B. Beschreibung (Beschreibung des Website-Inhalts)<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">
Erklärung: Die Beschreibung wird verwendet, um Suchmaschinen den Hauptinhalt Ihrer Website mitzuteilen.
Beispiel:
C. Robots (Roboterführer)<meta name="description"content="haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。">
Erläuterung: Robots werden verwendet, um Suchrobotern mitzuteilen, welche Seiten indiziert werden müssen und welche nicht müssen indiziert werden.
Zu den Inhaltsparametern gehören all, none, index, noindex, follow und nofollow. Der Standardwert ist alle.
Die spezifischen Parameter lauten wie folgt:<meta name="robots"content="none">
Der Informationsparameter ist alles: Die Datei wird abgerufen und die Links auf der Seite können
abgefragtwerden; Der Informationsparameter ist none: Die Datei wird nicht abgerufen und die Links auf der Seite können nicht abgefragt werden.
Der Informationsparameter ist index: Die Datei wird abgerufen
Der Informationsparameter lautet: auf der Seite Der Link kann abgefragt werden; Der Informationsparameter ist noindex: Die Datei wird nicht abgerufen, aber der Link auf der Seite kann abgefragt werden Der Informationsparameter ist nofollow: Die Datei wird abgerufen, aber die Seite Die Links auf können nicht abgefragt werden. Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website! Verwandte Lektüre:So fügen Sie ein Video in eine HTML-Webseite ein
So erstellen Sie ein HTML-Textfeld Nur-Lese-Effekt
So verwenden Sie HTML+CSS, um die sekundäre Menüleiste anzuzeigen, indem Sie mit der Maus darüber wischen
Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML-Meta-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!