Home Web Front-end HTML Tutorial Summary of some commonly used metas

Summary of some commonly used metas

Mar 19, 2017 pm 05:28 PM

Element

Summary

Tags provide metadata about HTML documents. The metadata is not displayed on the page, but is machine-readable. It can be used by browsers (how content is displayed or pages are reloaded), search engines (keywords), or other web services.

Required attributes

Attributes Value describe
content some text Define meta-information related to http-equiv or name attributes

Optional attributes

Attributes Value describe
http-equiv content-type / expire / refresh / set-cookie Associate the content attribute to the HTTP header.
name author / description / keywords / generator / revised / others Associate the content attribute to a name.
content some text Defines the format used to translate content attribute values.

SEO optimization

Referring to the document

  • Page Keywords, each web page should have a unique set of keywords that describe the content of the 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.

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

<meta>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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 to use the nofollow and noindex attribute values ​​correctly.

<meta>
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).

<meta>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
  • Other

<meta> 
<meta>
<meta>
<meta>
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.

<meta>
Copy after login
  1. width: width (number / device-width) (range from 200 to 10,000, default is 980 pixels)


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


  3. initial-scale: Initial scaling (ranging from >0 to 10)


  4. ## minimum-scale: The minimum scale the user is allowed to zoom to

  5. maximum-scale: The maximum scale the user is allowed to zoom to

  6. user-scalable: Whether the user can manually shrink (no,yes)

  7. minimal-ui: You can minimize the upper and lower status bars when the page loads. (Deprecated)
  8. Note that many people use initial-scale=1 on non-responsive websites, which causes the website to render at 100% width, requiring the user to manually move the page or zoom. If user-scalable=no or maximum-scale=1 is used together with initial-scale=1, the user will not be able to zoom in/out the web page to see the entire content.

  • WebApp full screen mode

    : Disguise app, offline application.

    <meta> 
    Copy after login
  • Hide status bar/set status bar color

    : Only takes effect when WebApp full-screen mode is turned on. The value of content is default | black | black-translucent.

    <meta>
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
  • Title after adding to home screen

    <meta>
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login

Summary of some commonly used metasSummary of some commonly used metasSummary of some commonly used metas

  • Ignore digits automatically recognized as phone numbers

    <meta>
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    ## Ignore identifying email
  • <meta>
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Add Smart App Advertising Banner Smart App Banner
  • : Tell the browser the app corresponding to this website, and Display the download banner on the page (as shown below). Reference document

    <meta>
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login

![Alt text](./IMG_3701.jpg)

##Other
    Reference document
  • 
    <meta>
    
    <meta>
    
    <meta>
    
    <meta>
    
    <meta>
    
    <meta>
    
    <meta>
    
    <meta>
    
    <meta>
    Copy after login
    Web page related

Statement encoding
  • ##

    <meta>
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
    Copy after login
  • Priority is given to using the latest version of IE and Chrome
  • <meta>
    
    <meta>
    <meta>
    <meta>
    Copy after login
  • Browser Kernel Control
: Many domestic browsers have dual kernels (webkit and Trident), webkit kernel High-speed browsing, IE kernel compatible with web pages and old websites. Websites that add meta tags can control which kernel rendering the browser chooses. Reference document
  •  <meta>
    Copy after login
    The default kernel mode of domestic dual-core browsers is as follows: 1. Sogou high-speed browser, QQ browser: IE kernel (compatibility mode)
  •   2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)

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

<meta>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
  • Windows 8

<meta> 
<meta> 
Copy after login
  • 站点适配:主要用于PC-手机页的对应关系。

<meta>
Copy after login
  • 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta

<meta>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

               

The above is the detailed content of Summary of some commonly used metas. 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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles