Home > Developer > Web Develop
With the popularity of HTML5 and the evolution of web technology, the META tag team is growing, from Windows XP IE6 to now Windows 7, Windows 8 IE9, IE10, IE11, HTML5 support is getting better. The function of HTML meta tags is becoming more and more powerful.
Start with the definition of meta tags.
The META tag is an accessible tag in the head area of the HTML language, which is located between the
The Name property syntax format for the META tag:
How to use: <meta name= "description" content= "Study search engine optimization network to provide professional SEO optimization tutorial, collect and organize SEO optimization articles, SEO optimization tools, for network marketing to contribute a part of their own strength. "/>
3. Robots (Robot Wizard)
Description: Robots is used to tell the search robot which pages need to be indexed and which pages do not need to be indexed. The content's parameters are all, none, Index, NOINDEX, follow, nofollow. The default is all.
How to use: <meta name= "Robots" content= "all| none| Index| Noindex| follow| Nofollow ">
All: The file will be retrieved and the link on the page can be queried;
None: The file will not be retrieved and the link on the page cannot be queried. (and "Noindex, no follow" play the same role)
Index: The file will be retrieved. (Let Robot/spider log in)
Follow: Links on the page can be queried;
NOINDEX: The file will not be retrieved, but the link on the page can be queried. (Do not let Robot/spider login)
Nofollow: The file will not be retrieved. Links on the page can be queried.
(Do not let the Robot/spider follow this page to look down)
4. Author (author)
Description: Label the author or production group of the page
How to use: <meta name= "Author" content= "Mycodewind,[email protected]" >
Note: The content can be: You or your production group's name, or email
5. Copyright (Copyrights)
Description: Label Copyright
How to use: <meta name= "Copyright" content= "This site All rights reserved CSDN All" >
6. Generator (editor)
Description: Description of the editor
How to use: <meta name= "generator" content= "pcdata| Frontpage| " >
Note: content= "You are using the editor"
7. Revisit-after (re-visit)
Description: Inform the search engine how many days to visit
How to use: <meta name= "Revisit-after" content= "7 Days" >
The fixed site feature has been introduced from IE9, a simple way for users to simply click on the icon on the taskbar to access the site directly.
Fixed sites are also easy to implement. Only a small amount of code is required.
The following metadata tags are only valid for ie9+.
such as the Windows vista,windows 7 system. Official document Address http://msdn.microsoft.com/zh-cn/library/ie/gg491732%28v=vs.85%29.aspx. All elements are optional. Contains:
Metadata for installation: The following meta-elements control how to create pinned site shortcuts on the Start menu and on the Windows 7 taskbar. All of these elements are optional, but it is strongly recommended that you have a lot of other control over the start of the page, the name of the page, better accessibility or recognition capabilities, and the size of your own definition at startup.
The installation metadata element is used only when the user is pinned to the site. Thereafter, changes to these values will not cause any impact on the pinned site. Therefore, the following META element is sometimes referred to as the "install-time" value:
This name appears in today's ToolTip when the cursor hovers over the pinned site button on the Windows 7 taskbar.
The application name is also appended to the form header of the pinned Site application instance.
How to use: <meta name= "Application-name" content= "8783 Hand Tour"/>
9.msapplication-tooltip
Description: The Msapplication-tooltip metadata provides additional ToolTip text that appears when the cursor hovers over the Start menu in Windows or on a pinned site shortcut on the desktop.
How to use: <meta name= "Msapplication-tooltip" content= "8783 Hand Tour"/>
10.msapplication-starturl
Description: The "Msapplication-starturl" metadata includes the application's root URL. The starting URL can be fully qualified or relative to the current document. Just agree to the HTTP and HTTPS protocols.
Assuming this element is missing, the address of the current page is used instead.
How to use: <meta name= "Msapplication-starturl" content= "./"/>
Add: "Msapplication-starturl" metadata creates a public entry point for your site. When this metadata is present, the pinned site launches the start URL instead of the page that was originally dragged to the taskbar. More importantly, the execution-time metadata declared in the Start page will define the navigation button color and static Jump List tasks again each time the site is started. (For specific information.) Please refer to the Execution-time metadata section. ）
As a demo sample of how to use "Msapplication-starturl", consider a site that provides multiple types of calculator emulators: One with a standard layout, one with a scientific layout, and one with statistical functions. Assuming there is no starting URL, the user may simply pin the scientific calculator to the taskbar, making it impossible to easily access other calculators in the collection. By joining the start URL, the site developer can declare the public entry point of the site.
<meta name= "Msapplication-starturl" content= "./calculatorhome.html"/>
By adding installation-time metadata to the emulator page, site developers can control how users visit the site.
By adding Jump List metadata to the start page, it is easier for site developers to control how the user chooses the calculator style to use.
For specific information. See Join a task to a jump list.
Handling Server Redirection
Assuming that your start URL is redirected to another Web page, make sure that you declare all execution-time metadata in the Web page that is provided to the client. Assuming that the server is redirected to a new path, your start URL must contain the path and the trailing backslash (/).
For example, assuming "http://contoso.com/" is redirected to "http://www.contoso.com/Home/", the starting URL must contain a new path and a trailing backslash, as seen in the following:
<meta name= "Msapplication-starturl" content= "http://www.contoso.com/Home/"/>
OR
<meta name= "Msapplication-starturl" content= "/home/"/>
11.msapplication-window
Description: The "Msapplication-window" metadata sets the initial form size when a pinned site is first started. But. Assume that the user has resized the form. When you start the pinned site again, the site retains the new dimensions.
The following table describes the two parts of the content attribute that make up the META element. These two sections are required and must be separated by semicolons.
Section description
Width of the form in pixels. The minimum value is 800.
Height of the form in pixels. The minimum value is 600.
How to use: <meta name= "Msapplication-window" content= "width=1024;height=768"/>
12.msapplication-navbutton-color
Description: The "Msapplication-navbutton-color" metadata defines the self-defined color of the back and forward buttons in the pinned Site browser form. Any named color or hexadecimal color value is valid.
For a complete list of color names, refer to the color table (visit http://msdn.microsoft.com/zh-cn/library/ie/ms531197%28v=vs.85%29.aspx).
How to use: <meta name= "Msapplication-navbutton-color" content= "#FF3300"/>
Add: Assuming there is no this meta element, the default color will be based on the color palette of the site icon (that is, favicon). To learn how to choose your own icon for your site, refer to the Define your site icon (visit http://msdn.microsoft.com/zh-cn/library/ie/gg491740%28v=vs.85%29.aspx).
13.msapplication-task
Description: It can pin a site as a program to the Windows Vista and Windows 7 taskbar, and displays a list of related sites when the icon is clicked. Same as other site metadata. You can use META elements to define static tasks. The next task adds a task to the Jump List (http://msdn.microsoft.com/zh-cn/library/ie/gg491725%28v=vs.85%29.aspx) to explain how to run the operation.
Method of Use: <meta name= "Msapplication-task" content= "name=8783 Hand Tour network; action-uri=http://www.8783.com;icon-uri=. /static/8783.ico "/>
14.msapplication-task-separator
Description: Places this element between tasks. To place a divider line in the Jump List menu.
Suppose you have more than one separator line. You must make each divider unique by declaring content= "[unique value]".
How to use:
<meta name= "Msapplication-task" content= "name=latest htmlgoodies articles; action-uri=http://www.htmlgoodies.com/; Icon-uri=http://www.htmlgoodies.com/favicon.ico "/>
<meta name= "Msapplication-task" content= "NAME=HTML5 development Center; Action-uri= http://www.htmlgoodies.com/html5/; Icon-uri=http://www.htmlgoodies.com/favicon.ico "/>
<meta name= "Msapplication-task-separator" content= "Forum Tasks"/>
<meta name= "Msapplication-task" content= "name=html Discussion Forums; Action-uri= http://www.webdeveloper.com/forum/forumdisplay.php?f=2; Icon-uri=http://www.htmlgoodies.com/favicon.ico "/>
Many other use cases:
Bing.com Use cases:
<meta content= "Bing" name= "Application-name"/>
<meta content= "Bing" name= "Msapplication-tooltip"/>
<meta content= "width=1024;height=768" name= "Msapplication-window"/>
<meta content= "/" name= "Msapplication-starturl"/>
beautyoftheweb.com Use cases:
<meta name= "Application-name" content= "Beauty of the Web"/>
<meta name= "Msapplication-tooltip" content= "Start the Beauty of the Web"/>
<meta name= "Msapplication-starturl" content= "http://www.beautyoftheweb.com/"/>
<meta name= "Msapplication-navbutton-color" content= "#5f6dbd"/>
Facebook.com Use cases:
<meta name= "Application-name" content= "Facebook"/>
<meta name= "Msapplication-tooltip" content= "Start the Facebook App"/>
<meta name= "Msapplication-starturl" content= "/"/>
<meta name= "Msapplication-window" content= "width=800;height=600"/>
October 26, 2012, Microsoft released Windows8 and Microsoft Surface and its default IE10, this time not only added support for a large number of HTML5, CSS3 features. And there is a user-friendly feature: pinned sites.
You'll learn how to implement fixed-site notifications (visit http://msdn.microsoft.com/zh-cn/library/IE/hh880842%28v=vs.85%29.aspx) in Windows 8 below.
You must provide the following information to correctly implement fixed site notifications in Windows 8:
The location of the Web service to poll for notifications
The latest XML file that reflects the current badge status
How often the update will occur
The following META tags are newly introduced for Windows8/microsoft Surface (ie10+):
15.msapplication-tileimage
Description: On Windows 8, we were able to pin the site to the start screen, and to personalize the custom Swatch icon and background image. This tag is used to define the background image of the color block.
The color block chart should be a PNG-formatted picture of 144*144 pixels with a transparent background.
How to use: <meta name= "Msapplication-tileimage" content= "Tile.png" >
16.msapplication-tilecolor
Description: Similar to the previous meta data msapplication-tileimage, this feature is used to set color values and personalize your own definition of color swatch (tile) icon.
The color value should be set to the main color of the logo or the main tone color of the site vision.
CSS color values can be in the form of 16 binary (such as #333333), named forms (such as red) or CSS functions (such as RGB), assuming no color is set. IE will default to extract the main color of the site icon or color swatch background picture to display as the background color. The default color and icons are also used in the historical search and elsewhere in IE.
How to use: <meta name= "Msapplication-tilecolor" content= "#ef0303" >
Add: When making a icons diagram of a fixed site. You only need to put a small white or black icon on a selected background color, and do not use large images with complex colors. The IE10 size 144*144 is consistent with the high-resolution ipad icon. Just when using the same icon diagram on different system platforms, be aware that different system platforms are not the same as the rendering of the icon graph.
Internet Explorer 10 uses the title of the current page for the tile name. Suppose we want to define a different name and be able to use the title META tag: <meta name= "title" content= "Tile title" >
IE will display a menu that allows the user to get the app at high speed, assuming the user hasn't installed it yet. Assuming the app is already installed, the menu changes to "switch to XXX app."
In fact, this feature is very similar to the smart AD push feature on IOS6. It's just that. Microsoft is the feature that was released before Apple. Msapplication-id is the required option. The ID that is defined in the program manifest.
How to use: <meta name= "Msapplication-id" content= "App"/>
18.msapplication-packagefamilyname
Description: Required option.
The package family created by Microsoft Visual Studio to identify your app.
How to use: <meta name= "Msapplication-packagefamilyname" content= "ZEPTOLABUKLIMITED.CUTTHEROPE_SQ9ZXNWRK84PJ"/>
19.msapplication-arguments
Description: Available options. The string to pass to your app. If we do not define this meta-information, IE will voluntarily pass the current URL.
How to use: <meta name= "msapplication-arguments" content= "http://www.8783.com/gl/27647.shtml"/>
The following code snippet shows how this can be handled in a Windows store app that uses JavaScript (many other ways to access http://msdn.microsoft.com/zh-cn/library/ie/hh781489% 28v=vs.85%29.aspx):
Function available in Default.js file in Visual Studio templates providedWinJS.Application.onmainwindowactivated = Func tion (e) { if (e.detail.kind = = = Windows.ApplicationModel.Activation.ActivationKind.launch) { //Insert This Code to handle incoming argument when Internet Explorer launches the app if (e.detail.arguments) { //Parse the VA Lue of the Msapplication-arguments string //Direct incoming user to relevant In-app content }} }
The minimum version number of the mandatory application.
Therefore, assume that your users use an older version number. To switch to this app, she will be asked to go to the store to update it.
How to use: <meta name= "msapplication-minversion" content= "V3.0 Build 20140308"/>
21.msapplication-optout
Description: Available options.
Agree that our HTML document is not associated with an app in some cases.
The values to be selected are: Install, which will prevent users from installing apps without prompting them, and switch will prevent users from being prompted to switch to the app if they have already installed the app. Both Prompts that will block both of these cases.
How to use: <meta name= "msapplication-optout" content= "Install"/>
Mssmarttagspreventparsing.
Description: There is a Smart tag switch in Microsoft IE 6, assuming you include the following tags. Visit this will not see some of the relevant connections, so as to avoid the loss of visitors to the competitor's site up.
How to use: <meta name= "mssmarttagspreventparsing" content= "True"/>
23.MSThemeCompatible
Description: Whether to turn off XP themes in IE. <meta http-equiv= "msthemecompatible" content= "yes"/> indicates that the Blue stereo button system that opens XP is displayed.
How to use: <meta http-equiv= "msthemecompatible" content= "No" >
Use Internet Explorer 10 and Windows 8. You can provide badge notifications directly on your pinned site tiles. This means that you do not have to open the site in your browser to see the updates for those sites.
For example, use IE10 in Windows 8 Consumer Preview to fix a Fresh Tweet presentation.
Tiles for pinned sites are updated periodically and will notify users when a new Tweet appears. Background notifications require the components provided by the site.
These components include: (1) badge notification XML, which describes the XML response that describes the Windows badge notification. and (2) fixed site meta tags. A Web page tag that points to the location of the Windows polling notification and polling frequency.
How to use:
<meta name= "Msapplication-badge" content= "FREQUENCY=30; Polling-uri=http://mysite.com/id45453245/polling.xml "/>
The name value "Msapplication-badge" is required. and indicates that the site supports badge notifications when locked to the start screen.
The content value "frequency" is optional and indicates how often the client should check for updates to the polling URL (per minute). The supported values are 30, 60, (6 hours), 720 (12 hours), and 1440 (1 days). Suppose no value is specified. The default value of 1440 hours is used.
The content value "Polling-uri" is required and indicates the URL that is used to poll the XML data file. Only the "http" and "https" URI schemes are supported.
Lock screen Reminders Descriptive narrative documents
Badge notifications enable you to update your pinned site tiles with a number from 1 to 99 or one of the 10 standard glyphs.
For a graphical list of badge images, see the Badge Images folder (Windows Store app, visit http://msdn.microsoft.com/zh-CN/library/windows/apps/Hh761458.aspx). In the following XML demo sample, a badge indicates that a new message was received.
Windows handles polling and fetching of badge notifications. Windows polling describes the badge notification XML that describes the visual effects of fixed site tiles. The badge XML Schema defines this simple XML response. For example, to update a tile with a digital badge "3", you need to send the following XML:
<?
XML version= "1.0" encoding= "Utf-8"?>
<badge value= "3"/>
Badges can be numbers or glyphs (such as. "Alerts" and "new Message" indicators).
For a badge that shows all lists of content, refer to the Select Badge image on MSDN (visit http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761458.aspx).
The following XML adds a glyph lock screen reminder.
<badge value= "Newmessage"/>
For a complete description of XML values, glyphs, and demo samples, please refer to Badge schema (visit http://msdn.microsoft.com/zh-CN/library/windows/apps/br212851.aspx).
After you have configured the badge notification XML file, press to associate the badge notification XML with the Web page. IE10 uses the META tag "application-name" to determine if a Web page supports pinned site features, such as notifications and jump lists.
To support badge notifications, add a new meta tag to the markup language that includes the badge notification XML URL and the Windows request frequency. IE will check if there is a "msapplication-badge" META tag in the page at fixed time and when the site might start from a pinned site tile.
The value is made up of two parts: Polling-uri (mandatory section) and frequency (optional section).
Polling-uri is the absolute URI that Windows uses to request the simple XML document above.
Frequency is an optional number of minutes between updates of two, which must be one of the following values:
(Windows will poll the URI every 30 minutes)
(Windows will poll the URI every 60 minutes)
(Windows will poll the URI every 6 hours)
(Windows will poll the URI every 12 hours)
1440 (Windows Polls the URL once a day.) The value is the default value. ）
If you omit frequency, or if its value is a different value than the above value, the default setting is to update it once a day (1440 minutes).
Developer API to update badge notifications:
Refresh Lock Screen Reminder status
Internet Explorer 10 introduces you to the JavaScript form API:window.external.msSiteModeRefreshBadge () that you can use to request the notification state of Windows polling for a fixed site, such as When the user is actively browsing your site. You may want to update the notification badge for a pinned site more frequently. You may also want to do this when the site is opened to refresh the badge status. So you can use this API to clear or refresh site tiles directly from a Web page to ensure that the content of the site tile is up to date.
When a user launches a pinned site through the start screen, the Web site is executed in its own Sitemode session, and the badge can be updated with the following JavaScript functions.
Window.external.msSiteModeClearBadge () clears the badge notification on the tile.
In the Fresh Tweet demo, when the user receives a notification and clicks on the tile to launch the browser. The Web page will use Mssitemodeclearbadge () to clear the notification from the tile. This way, when a notification is displayed and lit on the next tile. Users will be able to be aware of new content.
Window.external.msSiteModeRefreshBadge () calls Windows to update the site badge with a polling URI.
For example, when a user sees a pinned site tile that shows three unread messages and clicks the tile back to the site. Assuming that he or she only read the first update, you can trigger the update so that the badge correctly reflects the read/unread number 2.
In Windows 8 Consumer Preview, these two APIs are valid only for sites that are executed in the local Intranet or Trusted sites zone.
This issue will be resolved effectively in the next preview version. To use Consumer Preview to test these APIs on your own site, use the Security tab in the Internet Properties dialog box to join the site's domain to the list of trusted sites.
Desktop task bar Notifications
Pinned site notifications displayed as icon overlays in the desktop taskbar continue to apply to Windows 8 and IE10 on the desktop. There is no such notification for pinned sites in the Windows 8 start screen. Windows 8 is not only capable of handling notifications for all tiles in the start screen. and the ability to save power mode to complete these operations.
25. Mobile-Viewport label
<meta name= "viewport" content= "height = [pixel_value | device-height], width = [Pixel_value | device-width], INITIAL-SC Ale = float_value, Minimum-scale = float_value, Maximum-scale = float_value, user-scalable = [yes | no], TARGET-DENSITYDPI = [Dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] "/>
Meaning such as the following:
Controls the size of the viewport, the ability to specify a value or a special value, such as device-width as the width of the device (in pixels of the CSS when scaled to 100%).
Corresponds to width, specifying the height of the window.
A screen pixel density is determined by the screen resolution, usually defined as the number of dots per inch (dpi). Android supports three screen pixel densities: low pixel density, medium pixel density, high pixel density. A low-pixel-density screen has fewer pixels per inch, while a high-pixel-density screen has many more pixels per inch. The default screen for Android browser and webview is medium pixel density.
The following is the range of values for the Target-densitydpi property
No default scaling occurs.
High pixel density devices correspond to magnification, and pixel density devices correspond to shrinking. This is the default target density.
To prevent Android browser and WebView from scaling your page based on the pixel density of different screens, you can set the target-densitydpi of viewport to device-dpi. When you do this, the page will not scale. Instead, the page is displayed based on the pixel density of the current screen.
In such a situation. You also need to define the width of the viewport to match the width of the device. This will allow your page to fit on the screen.
Initial scaling. That is, the initial zoom level of the page. This is a floating-point value. is a multiplier of the page size.
Like what. Suppose you set the initial scale to "1.0". Then the Web page will show up at 1:1 of the target density resolution.
If you set it to "2.0", the page will be enlarged to twice times.
Maximum zoom.
That is, the maximum amount of zoom agreed upon.
This is also a floating-point value that indicates the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2.0", then this page is compared to the target size. Up to twice times larger.
The user adjusts the zoom. That is, the user can change the page zoom level. The assumption is set to Yes to allow the user to change it, instead of No. The default value is yes. Let's say you set it to No. Then both Minimum-scale and Maximum-scale will be ignored, as it is impossible to scale at all.
All scaling values must be within the range of the 0.01–10.
Cases:
(Set the screen width to device width.) Prevent users from manually adjusting the zoom)
<meta name= "viewport" content= "Width=device-width,user-scalable=no"/>
(Set the screen density to high frequency, if, low frequency own active scaling.) Prevent users from manually adjusting the zoom)
<meta name= "viewport" content= "width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale= 1.0, maximum-scale=1.0, User-scalable=no "/>
In addition, IOS 7.1 's Safari adds the Minimal-ui attribute to the META tag, which hides the address bar and navigation bar by default when the page is loaded
<meta name= "viewport" content= "Minimal-ui" >
When you click on the top bar area, you can switch to display the address bar, navigation bar, and then click on the main area of the page to hide it.
Reference articles and extended reading:
"Windows 8 and Microsoft Surface:ie10 meets modern mobile HTML5" http://www.mobilexweb.com/blog/ Windows-8-surface-ie10-html5
The most complete site metadata meta tag meaning and how to use it
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
