meta 元素

news/2024/4/19 0:06:38

SEO优化

页面关键词

<meta name="keywords" content="your tags" />

页面描述

<meta name="description" content="150 words" />

搜索引擎索引方式

robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。

<meta name="robots" content="index,follow" />
<!--all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索;nofollow:页面上的链接不可以被查询。-->

页面重定向和刷新

content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚).

<meta http-equiv="refresh" content="0;url=" />

其他

<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

移动设备

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  1. width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)

  2. height:高度(数值 / device-height)(范围从223 到10,000)

  3. initial-scale:初始的缩放比例 (范围从>0 到10)

  4. minimum-scale:允许用户缩放到的最小比例

  5. maximum-scale:允许用户缩放到的最大比例

  6. user-scalable:用户是否可以手动缩 (no,yes)

  7. minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用)

注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

WebApp全屏模式:伪装app,离线应用。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

图片

忽略数字自动识别为电话号码&&忽略识别邮箱

<meta name="format-detection" content="telephone=no,email=no" />

其他

<!-- 针对手持设备优化,主要是针对一些老的不识别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 charset='utf-8' />

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

浏览器内核控制

国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染

<meta name="renderer" content="webkit|ie-comp|ie-stand">

国内双核浏览器默认内核模式如下:

  1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)

  2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)

禁止浏览器从本地计算机的缓存中访问页面内容

这样设定,访问者将无法脱机浏览

<meta http-equiv="Pragma" content="no-cache">

https://dhexx.cn/news/show-1046448.html

相关文章

安装vue_cli 和打包

1.安装node.js 可通过node -v检查是否安装node 2.安装npm 可通过npm -v检查是否安装npm 3.全局安装vue-cli npm install vue-cli -g || cnpm install vue-cli -g&#xff08;淘宝镜像&#xff09; 4.检查vue命令行是否安装好了 vue -V 5.用webpack安装模板 vue ini…

windows10 安装tensorflow gpu版(亲测有用)

花了整整一天&#xff0c;终于装好了。昨天还通宵了&#xff0c;把系统给搞蹦了&#xff0c;重装了系统,累啊&#xff0c;写完赶紧回去睡觉。 我电脑的配置&#xff1a; windows10 gtx 1060 目前成功的软件版本如下&#xff1a; Visual Studio 2017版本的 tensorflow 他是…

神经网络与深度学习(三):如何提升神经网络学习效果

一个高尔夫球手练习高尔夫球时会花绝大多数时间练习基本的挥杆动作。在基本的挥杆动作的基础上&#xff0c;逐渐的才会练习其他动作。相似的&#xff0c;目前为止我们一直专注在理解BP算法&#xff0c; 它是我们的基础”挥杆”动作&#xff0c;学习神经网络的基础。这章中我会解…

leetcode:7. Reverse Integer

这题简单&#xff0c;也花了我好长时间&#xff0c;我自己写的code比较麻烦&#xff0c;也没啥技巧&#xff1a;按正负性分类执行&#xff0c;先转化成字符串&#xff0c;用stringbuilder进行旋转&#xff0c;如果超出范围了就用try catch public int reverse(int x) {try {int…

高效运行Linux虚拟机的六大技巧

Linux在企业数据中心已经盛行多年。LAMP服务、Web服务器、代理服务器、防火墙和负载平衡器&#xff0c;只是Linux为基本操作系统提供的几个用例。在过去十年&#xff0c;随着易用性的提高和文档的完善&#xff0c;许多Linux发行版使用量明显增加。在增长阶段&#xff0c;我们还…

《MATLAB/Simulink系统仿真超级学习手册》——2.4 MATLAB的程序流程控制

本节书摘来自异步社区《MATLAB/Simulink系统仿真超级学习手册》一书中的第2章&#xff0c;第2.4节&#xff0c;作者&#xff1a;MATLAB技术联盟 , 石良臣著&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 2.4 MATLAB的程序流程控制 MATLAB/Simulink系统仿真超…

Java 将 List 里面的内容写入桌面的 txt 文档

文件内容&#xff1a; /*** 将 list 写入文件中*/import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.swing.filechooser.FileSystemView;public…

python 日记 day5 字典

一.数据类型分为&#xff1a; 1.不可变数据类型&#xff1a;元组&#xff0c;bool&#xff0c;int&#xff0c;str &#xff08;不可更改的又叫可哈希&#xff09; 2.可变数据类型 :list,dict ,set (可变的又叫不可哈希) 字典&#xff1a; 优点&#xff1a;1.可二分查找。 …

Java线程(十一):Fork/Join-Java并行计算框架

并行计算在处处都有大数据的今天已经不是一个新奇的词汇了。如今已经有单机多核甚至多机集群并行计算。注意&#xff0c;这里说的是并行&#xff0c;而不是并发。严格的将&#xff0c;并行是指系统内有多个任务同一时候运行&#xff0c;而并发是指系统内有多个任务同一时候存在…

《21天学通Java(第6版)》—— 2.5 表达式和运算符

本节书摘来异步社区《21天学通Java&#xff08;第6版&#xff09;》一书中的第2章&#xff0c;第2.5节&#xff0c;作者&#xff1a;【美】Rogers Cadenhead&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.5 表达式和运算符 21天学通Java&#xff08;第…