网页header 的 meta使用

属性值描述 content some text 定义与http-equiv或name属性相关的元信息

　　可选属性

属性值描述 http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部。 name author / description / keywords / generator / revised / others 把 content 属性关联到一个名称。 content some text 定义用于翻译 content 属性值的格式。　　SEO优化

　　参考文档

页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。

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

页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

<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：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例（范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）

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

<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="标题">

网页header 的 meta使用相关推荐

PHP 页面编码声明方法详解(header或meta)
php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("Content-type: text/html; charset=utf-8&qu ...
PHP页面编码声明与用header或meta实现PHP页面编码的区别
php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("Content-type: text/html; charset=utf-8&quo ...
CSS - 禁止手机移动端网页缩放（meta）
前言您一定不希望手机网页被缩放,本文将提供给您简易的解决方案. 解决方案注意:该方法并不能 "完全" 控制(浏览器有自己的缩放)其缩放,如果想要完全控制则需要使用 JS 加码了 ...
网页设计：Meta标签详解
网页设计:Meta标签详解很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...
修改html中meta标签,利用JS或JQuery修改网页title和meta标签的content内容
这篇文章主要为大家详细介绍了利用JS或JQuery修改网页title和meta标签的content内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 网页的ti ...
php的header_php获取网页header信息的4种方法
php获取网页header信息的方法多种多样,就php语言来说,我知道的方法有4种, 下面逐一献上. 方法一:使用get_headers()函数推荐指数: ★★★★★ get_header方法最简单 ...
网页中的meta property
Meta Property=og标签是什么呢?og是一种新的HTTP头部标记,即Open Graph Protocol:The Open Graph Protocol enables any web ...
header python 环境信息_python获取网页header头部信息（python小白学习笔记二）
方法一:代码查看通过python获取网页的链接url,返回码,以及相关的信息 #对反爬虫网页,可以设置一些headers信息,模拟成浏览器取访问网站 import urllib.request ur ...
tp5.1 前台模板使用公共模板网页(header.html、foot.html、base.html)
1.在app\index\controller文件夹新建一个名为Lyot(自定义)的控制器,在控制器中定义: 2.创建一个被继承的public(自定义)文件夹,里面有三个文件,分别是header.ht ...

网页header 的 meta使用

网页header 的 meta使用相关推荐

最新文章

热门文章