일반적으로 사용되는 코드 요약

이번에는 흔히 사용되는 <메타> 코드에 대해 정리해보겠습니다. <메타> 코드 사용 시 주의사항은 무엇인가요?

필수 속성

Attributes	Value	Description
content	http-equiv 또는 이름으로 정의된 일부 텍스트	속성 관련 메타 정보

선택적 속성

Attribute	Value	Description
http-equiv	content- 유형 / 만료 / 새로 고침 / set-cookie	은 콘텐츠 속성을 HTTP 헤더에 연결합니다.
name	작성자/설명/키워드/생성기/개정/기타	콘텐츠 속성을 이름에 연결합니다.
content	some text	은 콘텐츠 속성 값을 번역하는 데 사용되는 형식을 정의합니다.

SEO 최적화

참조 문서

• 페이지 키워드, 각 웹 페이지에는 웹 페이지의 콘텐츠를 설명하는 고유한 키워드 세트가 있어야 합니다.
  사람들이 검색할 가능성이 있는 설명적이고 대표적인 키워드와 문구를 사용하고, 페이지에 제공되는 정보를 정확하게 설명하세요. 너무 짧은 콘텐츠를 표시하면 검색 엔진이 관련성이 있다고 간주하지 않을 수 있습니다. 또한 태그는 874자를 초과할 수 없습니다.

<span style="font-size: 14px;"><meta name="keywords" content="your tags" /></span>

• 페이지 설명, 각 웹페이지에는 웹페이지의 콘텐츠를 정확하게 반영하는 150자 이하의 설명 태그가 있어야 합니다.

<span style="font-size: 14px;"><meta name="description" content="150 words" /></span>

• 검색 엔진 색인 방법, robotsterms는 쉼표(,)로 구분된 값 집합이며 일반적으로 none, noindex, nofollow, all, index 및 follow 값입니다. nofollow 및 noindex 속성 값을 올바르게 사용했는지 확인하세요.

<span style="font-size: 14px;"><meta name="robots" content="index,follow" /><!--<br/>    all：文件将被检索，且页面上的链接可以被查询；<br/>    none：文件将不被检索，且页面上的链接不可以被查询；<br/>    index：文件将被检索；<br/>    follow：页面上的链接可以被查询；<br/>    noindex：文件将不被检索；<br/>    nofollow：页面上的链接不可以被查询。<br/> --></span>

• 페이지 리디렉션 및 새로 고침: 콘텐츠의 숫자는 시간(초), 즉 새로 고치는 데 걸리는 시간을 나타냅니다. URL을 추가하면 지정된 웹 페이지로 리디렉션됩니다(검색 엔진은 이를 자동으로 감지할 수 있으며, 엔진에 의해 오해의 소지가 있는 것으로 간주되어 처벌되기 쉽습니다).

<span style="font-size: 14px;"><meta http-equiv="refresh" content="0;url=" /></span>

• Others

<span style="font-size: 14px;"><meta name="author" content="author name" /> <!-- 定义网页作者 --><meta name="google" content="index,follow" /><meta name="googlebot" content="index,follow" /><meta name="verify" content="index,follow" /></span>

Mobile devices

• viewport: 모바일 브라우저의 디스플레이를 최적화할 수 있습니다. 웹 사이트가 응답하지 않으면 초기 크기 조정을 사용하지 않거나 크기 조정을 비활성화하십시오.
  대부분의 4.7~5인치 기기의 뷰포트 너비는 360px로 설정되어 있으며, 5.5인치 기기는 400px로 설정되어 있으며, iphone6 ​​​​plus는 414px로 설정되어 있습니다.

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

1. width: 너비(숫자/장치 너비)(범위: 200~10,000, 기본값은 980픽셀)

2. 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，离线应用。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 --></span>

• 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /></span>

• 添加到主屏后的标题

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-title" content="标题"></span>

• 忽略数字自动识别为电话号码

<span style="font-size: 14px;"><meta content="telephone=no" name="format-detection" /> </span>

• 忽略识别邮箱

<span style="font-size: 14px;"><meta content="email=no" name="format-detection" /></span>

• 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner

<span style="font-size: 14px;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </span>

• 其他 参考文档

<span style="font-size: 14px;"><!-- 针对手持设备优化，主要是针对一些老的不识别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"></span>

网页相关

• 申明编码

<span style="font-size: 14px;"><meta charset=&#39;utf-8&#39; /></span>

• 优先使用 IE 最新版本和 Chrome

<span style="font-size: 14px;"><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 --></span>

• 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

<span style="font-size: 14px;"> <meta name="renderer" content="webkit|ie-comp|ie-stand"></span>

国内双核浏览器默认内核模式如下：
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

• 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

<span style="font-size: 14px;"><meta http-equiv="Pragma" content="no-cache"></span>

• Windows 8

<span style="font-size: 14px;"><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --></span>

• 站点适配：主要用于PC-手机页的对应关系。

<span style="font-size: 14px;"><meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"><!--<br/>[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；<br/>url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。<br/> --></span>

• 转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

<span style="font-size: 14px;"><meta http-equiv="Cache-Control" content="no-siteapp" /></span>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5+Canvas使用案例详解

怎样使用javascript Date Format方法

위 내용은 일반적으로 사용되는 코드 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!