WebApp Meta tags and webappmeta tags

WebApp Meta tags and webappmeta tags

1. First, let's talk about the viewport In the mate Tag:

Viewport is the visible area. For a desktop browser, viewport is the area used to view webpages after all the toolbar, Status Bar, and scroll bar are removed. For traditional WEB pages, the 980 width display on the iphone is normal and full screen, but it may be a problem for webapps, on the iphone, our webapp is usually 320 in width under the portrait screen.

Therefore, we must change the viewport so that we can set the following attribute values:

Width: the width of the viewport. The value ranges from 200 to 10,000. The default value is 980 pixels)

Height: the height of the viewport. The value ranges from 223 to 10,000)

Initial-scale: initial scaling ratio (range:> 0 to 10)

Minimum-scale: minimum scale that allows users to scale

Maximum-scale: maximum scale allowed by users

User-scalable: whether the user can manually Scale

You can set one or more of these attributes without having to set them at the same time. The iPhone automatically calculates other attribute values based on the attributes you set, rather than directly using the default values.

If you set initial-scale to 1, the width and height values are automatically 320*356 (not 320*480 because the address bar occupies space) at the portrait screen ), the screen size is 480*208. Similarly, if you only set the width, the initial-scale and height values are automatically calculated. For example, if you set width = 320, initial-scale is 1 when the screen is portrait, and 1.5 when the screen is landscape

So how can we let Safari know about these settings? In fact, it is very simple, just a meta, like:

<Meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0; "/> after meat is set, the page is displayed as follows:

2. name attribute in meta tag

Name attribute
(1) <meta name = "Generator" contect = ""> describes generation tools (such as Microsoft FrontPage 4.0;

(2) <meta name = "keywords" contect = ""> describe keywords Of Your webpage to search engines;

(3) <meta name = "Description" contect = ""> tell the search engine the main content of your site;

(4) <meta name = "Author" contect = "Your name"> tell the search engine the Author of your site;

(5), <meta name = "Robots" contect = "all | none | index | noindex | follow | nofollow">

The attributes are described as follows:

Set to all: the file will be retrieved, and the link on the page can be queried;

Set to none: files will not be retrieved, and links on the page cannot be queried;

Set to index: the file will be retrieved;

Set to follow: links on the page can be queried;

Set to noindex: the file will not be retrieved, but the link on the page can be queried;

Set to nofollow: files will not be retrieved, and links on the page can be queried.

3. Main mate usage in webapp

<Meta name = "apple-touch-fullscreen" content = "yes"> added to the background of the home screen for full screen display.

<Meta name = "apple-mobile-web-app-capable" content = "yes"/>

This meta is used to delete the default Apple toolbar and menu bar. Content has two values: "yes" and "no". When we need to display the toolbar and menu bar, this line of meta does not need to be added. The default value is display.

<Meta name = "apple-mobile-web-app-status-bar-style" content = black "/>

The default value is default (white), which can be set to black (black) and black-translucent (gray translucent ).
Note: If the value is "black-translucent", it will occupy the page px position and float above the page (it will overwrite the page 20px height-Retina screen of iphone4 and itouc4is 40px ).

<Meta name = "apple-mobile-web-app-capable" content = "yes">
<Meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent">

There are two meta values in iOS: apple-mobile-web-app-capable and apple-mobile-web-app-status-bar-style, these two will display the webpage content in the application style and make the status bar transparent.

<Link rel = "apple-touch-icon-precomposed" href = "http://spion.blog.163.com/blog/iphone_milanoo.png"/>
Note: This link is used to set the icon file path for placing the web app on the home screen.
The image size can be set to 57*57 (px) or 114*114 (px) for Retina, and 72*72 (px) for ipad)

<Meta content = "telephone = no" name = "format-detection"/>
<Meta content = "email = no" name = "format-detection"/> // the email address is not recognized.
Tell the device to ignore recognizing numbers on the page as phone numbers

<Link rel = "apple-touch-icon" href = "/static/images/identity/HTML5_Badge_64.png"/>
<Link rel = "apple-touch-icon-precomposed" href = "/static/images/identity/HTML5_Badge_64.png"/>

Rel = "apple-touch-icon" for iOS and rel = "apple-touch-icon-precomposed for android ". In this way, you can create an application style icon on the HOME page of your mobile phone when you save the webpage as a bookmarkdonefile.

<Meta name = "external content" data-msg-img = "thumbnail address" data-msg-title = "title" data-msg-content = "Introduction" data-msg-callBack = "" data-line-img = "thumbnail address" data-line-title = "title" data-line-callBack = ""/>

Share page settings

The role of the <meta> tag in the html Tag

<Meta> elements provide meta-information about a page, such as the author, date, and time, web page description, keywords, and page refresh. it is not designed specifically for search engines.
However, the keyword and description are a method used by the search engine to find webpages.

What are the concepts of html meta tag, title Tag, Description tag, and keyword tag? If these labels are applied?

? "<META>" (usually referred to as the META tag ). META Tags are used to describe the attributes of an HTML webpage document, such as the author, date and time, webpage description, keywords, and page refresh.

?? In online marketing methods such as search engine registration and search engine optimization ranking, we usually talk about the role of META tags. We can even say that, the content design of META tags is a crucial factor for search engine marketing, especially the "description" and "Keywords" Keywords) these two attributes are even more important. For more information, see description Keywords ]. Although the current search engine determines the ranking of search results seldom depends on the content in the META tag, the content design of the META tag is still very important.

About HTTP-EQUIV in META tag

?? One of the HTML code examples is:

?? <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">

?? It is used to specify the characters used in the current document as gb2312, that is, simplified Chinese characters. Based on this line of code, the browser can identify that the webpage should be displayed with simplified Chinese characters. Similarly, if we replace "gb2312" with "big5", it is a well-known traditional Chinese character.

?? The HTTP-EQUIV is used to provide some instructions to the browser so that they can be made accordingly. HTTP-EQUIV is not only a description of the character encoding of the web page, the commonly used HTTP-EQUIV type also includes: webpage expiration time, default script language, default style page language, and automatic page refresh time.

About "description" in the META tag"

?? The code in "description" in an HTML code instance is:

?? <Meta name = "description" content = "network marketing teaching website provides" network marketing basics and Practices "teaching support: network marketing courseware, network marketing papers, network marketing lab teaching, e-commerce papers, online marketing and e-commerce books ">

?? Content = "webpage description" in "description" is an overview of a webpage, which may appear in the search results. Therefore, you need to design it based on the actual situation of the webpage, avoid "descriptions" that are irrelevant to the webpage content whenever possible. In addition, it is best to have a corresponding description for each webpage (at least the webpage of the same topic has a corresponding description ), instead of using the same description content for the entire website, because a website has multiple webpages, the content of each webpage must be different. If the same description is used, obviously, some webpage content is not directly related, which is not only detrimental to the search engine's ranking of webpages, but also to the user's determination of whether to click to enter the website to obtain further information based on the information in the search results.

About "Keywords" in META Tags"

?? Similar to "description" in the META tag, "Keywords" is used to describe the attributes of a webpage, except that the content to be listed is "Keywords" rather than web pages. This means that you need to select appropriate keywords Based on the subject and content of the webpage. When selecting keywords, in addition to being related to the core content of the web page, it should also be easy for users to search through search engines. The uncommon words are not suitable for keywords in META Tags. For the design of keywords in META Tags, do not pile up too many keywords. listing a large number of keywords does not make much sense for search engine search, for some hot fields (that is ...... remaining full text>