Table of Contents
This time I will bring you a summary of commonly used <meta> codes. What are the precautions for using <meta> codes? Here are practical cases, let’s take a look. " >This time I will bring you a summary of commonly used <meta> codes. What are the precautions for using <meta> codes? Here are practical cases, let’s take a look.
SEO Optimization" >SEO Optimization
网页相关" >网页相关
Home Web Front-end H5 Tutorial Summary of commonly used codes

Summary of commonly used codes

Jun 04, 2018 am 11:36 AM
meta tidy Summary

This time I will bring you a summary of commonly used codes. What are the precautions for using codes? Here are practical cases, let’s take a look.

Required attributes

Attributes Value Description
##content some text Define meta-information related to the http-equiv or name attribute

Optional attributes

##http-equivnamecontent
Properties Value Description
##content-type / expire / refresh / set-cookie Associate the content attribute to the HTTP header.
##author / description / keywords / generator / revised / others Associate the content attribute to a name.
some text Definition is used to translate content The format of the attribute value.

SEO Optimization

Reference Document

  • Page keywords, each web page should have a description A unique set of keywords for the content of this web page.
    Use descriptive and representative keywords and phrases that people are likely to search for, and accurately describe the information provided on the web page. Mark content that is too short and search engines may not consider it relevant. Also tags should not exceed 874 characters.

<span style="font-size: 14px;"><meta name="keywords" content="your tags" /></span>
Copy after login
  • Page description, each web page should have a description tag that is no longer than 150 characters and accurately reflects the content of the web page.

<span style="font-size: 14px;"><meta name="description" content="150 words" /></span>
Copy after login
  • Search engine indexing method, robotterms is a set of values ​​separated by commas (,), and usually has the following values : none, noindex, nofollow, all, index and follow. Make sure you use the nofollow and noindex attribute values ​​correctly.

<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>
Copy after login
  • Page redirection and refresh: The number in the content represents the time (seconds), that is, how long it takes to refresh. If you add a URL, it will redirect to the specified web page (search engines can automatically detect it, and it can easily be regarded as misleading by the engine and punished).

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

<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>
Copy after login

Mobile Device

  • #viewport: can optimize the display of mobile browsers. If the website is not responsive, do not use initial-scale or disable scaling.
    The viewport width of most 4.7-5-inch devices is set to 360px; the 5.5-inch device is set to 400px; the iphone6 ​​is set to 375px; the iphone6 ​​plus is set to 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>
Copy after login
  1. width: width (number/device-width) (range 200 to 10,000, default 980 pixels)

  2. height: height (number/device-height) (range from 223 to 10,000)

  3. initial-scale: initial scaling (ranging from >0 to 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>
Copy after login
  • 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /></span>
Copy after login
  • 添加到主屏后的标题

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-title" content="标题"></span>
Copy after login
  • 忽略数字自动识别为电话号码

<span style="font-size: 14px;"><meta content="telephone=no" name="format-detection" /> </span>
Copy after login
  • 忽略识别邮箱

<span style="font-size: 14px;"><meta content="email=no" name="format-detection" /></span>
Copy after login
  • 添加智能 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>
Copy after login
  • 其他 参考文档

<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>
Copy after login

网页相关

  • 申明编码

<span style="font-size: 14px;"><meta charset=&#39;utf-8&#39; /></span>
Copy after login
  • 优先使用 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>
Copy after login
  • 浏览器内核控制:国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

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

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

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

<span style="font-size: 14px;"><meta http-equiv="Pragma" content="no-cache"></span>
Copy after login
  • 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>
Copy after login
  • 站点适配:主要用于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>
Copy after login
  • 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta

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

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

推荐阅读:

H5+Canvas使用案例详解

怎样使用javascript Date Format方法

The above is the detailed content of Summary of commonly used codes. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

New affordable Meta Quest 3S VR headset appears on FCC, suggesting imminent launch New affordable Meta Quest 3S VR headset appears on FCC, suggesting imminent launch Sep 04, 2024 am 06:51 AM

The Meta Connect 2024event is set for September 25 to 26, and in this event, the company is expected to unveil a new affordable virtual reality headset. Rumored to be the Meta Quest 3S, the VR headset has seemingly appeared on FCC listing. This sugge

The first open source model to surpass GPT4o level! Llama 3.1 leaked: 405 billion parameters, download links and model cards are available The first open source model to surpass GPT4o level! Llama 3.1 leaked: 405 billion parameters, download links and model cards are available Jul 23, 2024 pm 08:51 PM

Get your GPU ready! Llama3.1 finally appeared, but the source is not Meta official. Today, the leaked news of the new Llama large model went viral on Reddit. In addition to the basic model, it also includes benchmark results of 8B, 70B and the maximum parameter of 405B. The figure below shows the comparison results of each version of Llama3.1 with OpenAIGPT-4o and Llama38B/70B. It can be seen that even the 70B version exceeds GPT-4o on multiple benchmarks. Image source: https://x.com/mattshumer_/status/1815444612414087294 Obviously, version 3.1 of 8B and 70

Six quick ways to experience the newly released Llama 3! Six quick ways to experience the newly released Llama 3! Apr 19, 2024 pm 12:16 PM

Last night Meta released the Llama38B and 70B models. The Llama3 instruction-tuned model is fine-tuned and optimized for dialogue/chat use cases and outperforms many existing open source chat models in common benchmarks. For example, Gemma7B and Mistral7B. The Llama+3 model improves data and scale and reaches new heights. It was trained on more than 15T tokens of data on two custom 24K GPU clusters recently released by Meta. This training dataset is 7 times larger than Llama2 and contains 4 times more code. This brings the capability of the Llama model to the current highest level, which supports text lengths of more than 8K, twice that of Llama2. under

The strongest model Llama 3.1 405B is officially released, Zuckerberg: Open source leads a new era The strongest model Llama 3.1 405B is officially released, Zuckerberg: Open source leads a new era Jul 24, 2024 pm 08:23 PM

Just now, the long-awaited Llama 3.1 has been officially released! Meta officially issued a voice that "open source leads a new era." In the official blog, Meta said: "Until today, open source large language models have mostly lagged behind closed models in terms of functionality and performance. Now, we are ushering in a new era led by open source. We publicly released MetaLlama3.1405B, which we believe It is the largest and most powerful open source basic model in the world. To date, the total downloads of all Llama versions have exceeded 300 million times, and we have just begun.” Meta founder and CEO Zuckerberg also wrote an article. Long article "OpenSourceAIIsthePathForward",

What does META mean? What does META mean? Mar 05, 2024 pm 12:18 PM

META usually refers to a virtual world or platform called Metaverse. The metaverse is a virtual world built by humans using digital technology that mirrors or transcends the real world and can interact with the real world. It is a digital living space with a new social system.

Llama3 comes suddenly! The open source community is boiling again: the era of free access to GPT4-level models has arrived Llama3 comes suddenly! The open source community is boiling again: the era of free access to GPT4-level models has arrived Apr 19, 2024 pm 12:43 PM

Llama3 is here! Just now, Meta’s official website was updated and the official announced Llama 38 billion and 70 billion parameter versions. And it is an open source SOTA after its launch: Meta official data shows that the Llama38B and 70B versions surpass all opponents in their respective parameter scales. The 8B model outperforms Gemma7B and Mistral7BInstruct on many benchmarks such as MMLU, GPQA, and HumanEval. The 70B model has surpassed the popular closed-source fried chicken Claude3Sonnet, and has gone back and forth with Google's GeminiPro1.5. As soon as the Huggingface link came out, the open source community became excited again. The sharp-eyed blind students also discovered immediately

It is expected that in 2024, Meta plans to launch a revolutionary AR glasses prototype called 'Orion' It is expected that in 2024, Meta plans to launch a revolutionary AR glasses prototype called 'Orion' Jan 04, 2024 pm 09:35 PM

According to news on December 24, meta, a technology company with huge influence in the social media industry, is now pinning its strong expectations on augmented reality (AR) glasses, a technology considered to be the next generation computing platform. Recently, meta’s technical director Andrew Bosworth revealed in an interview that the company is expected to launch an advanced AR glasses prototype code-named “Orion” in 2024. For a long time, meta has invested in AR technology as much as in other fields. They have invested huge amounts of money, amounting to billions of dollars, aiming to create a revolutionary product comparable to the iPhone. Although last year they announced the end of mass production plans for Orion glasses,

Analyst discusses launch pricing for rumoured Meta Quest 3S VR headset Analyst discusses launch pricing for rumoured Meta Quest 3S VR headset Aug 27, 2024 pm 09:35 PM

Over a year has now passed from Meta's initial release of the Quest 3 (curr. $499.99 on Amazon). Since then, Apple has shipped the considerably more expensive Vision Pro, while Byte Dance has now unveiled the Pico 4 Ultra in China. However, there is

See all articles