How to use HTML meta to optimize web pages

php中世界最好的语言
Release: 2018-01-25 11:22:30
Original
2196 people have browsed it

This time I will show you how to use HTML meta to optimize web pages. What are theprecautions for using HTML meta to optimize web pages? Here are practical cases, let’s take a look.

Summary The


 tag provides metadata about the
HTML document. 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. —— W3School

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

Copy after login

Page description, each web page should have a description tag of no more than 150 characters that accurately reflects the content of the web page.

Copy after login

Search engine indexing method, robotterms is a set of values separated by commas (,), usually with the following values: none, noindex, nofollow, all, index and follow. Make sure to use nofollow and noindex

attributevalues correctly.


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

Copy after login

Others

 
Copy after login

Mobile devices



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.

Copy after login

1.width: width (numeric value/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 (range from >0 to 10)
4.minimum-scale: the minimum scale to which the user is allowed to zoom
5.maximum-scale: The maximum ratio that users are allowed to zoom to
6.user-scalable: Whether the user can manually zoom in (no, yes)
7.minimal-ui: Can be minimal when the page is loaded Change the upper and lower status bar. (Deprecated)
Note that many people use initial-scale=1 on non-responsive websites, which causes the website to render at 100% width and the user needs 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.

 
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.

Copy after login

Title after adding to the home screen

Copy after login

Ignore numbers automatically recognized as phone numbers

Copy after login

Ignore recognition of emails

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


                  
Copy after login

Web page related

Declaration encoding

Copy after login

Priority is given to using the latest version of IE and Chrome

    
Copy after login

Browser kernel control: domestic browsing Many servers have dual cores (webkit and Trident). The webkit core allows high-speed browsing, and the IE core is compatible with web pages and old versions of websites. Websites that add meta tags can control which kernel rendering the browser chooses. Reference document

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 speed browser , Aoyou Browser: Webkit kernel (extreme speed mode)

Prohibit the browser from accessing page content from the cache of the local computer: With this setting, visitors will not be able to browse offline.

Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use title tags and paragraph tags in XHTML

In responsive framework How to deal with the automatic line wrapping of the table header

How to use horizontal line annotations and code comments in HTML

The above is the detailed content of How to use HTML meta to optimize web pages. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!