The most complete Web site metadata meta tag meaning and usage
With HTML5 's popularity and web technology evolving, the META tag team is growing, from Windows XP IE6 to today's Windows 7, Windows 8 IE9, IE10, IE11, support for HTML5 is getting better, html Meta tags also function more and more powerfully.
First, let's start with some common meta tags that were originally generated. Start with the definition of meta tags.
The META tag is an accessible tag in the head area of the HTML language that is located between the
The name attribute is a description of the Web page, which corresponds to content (Web page contents), so that search engine robots find, classify, and currently almost all search engines use online robots to automatically find meta values to classify the Web page.
The META tag's Name property syntax format:
1. Keywords (keywords)
Description: Tell the search engine what your page's keywords are.
Usage: <meta name= "keywords" content= "seo optimization, SEO optimization tutorial, website optimization, SEO tutorial" >
2. Description (page description)
Description: Description is used to tell search engines the main content of your page.
Usage: <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. The content parameters are all, none, Index, NOINDEX, follow, nofollow. The default is all.
Usage: <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: 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 log in)
Nofollow: The file will not be retrieved and the link 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
Usage: <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
Usage: <meta name= "Copyright" content= "This site All rights reserved CSDN All" >
6. Generator (editor)
Description: Description of the editor
Usage: <meta name= "generator" content= "pcdata| Frontpage| " >
Note: content= "You are using the editor"
7. Revisit-after (re-visit)
Description: Notifies the search engine how many days to visit once
Usage: <meta name= "Revisit-after" content= "7 Days" >
The fixed site feature has been introduced from IE9, a simple way for users to access the site directly by clicking the icon on the taskbar. Pinned sites are also easy to implement and require very little code. The following metadata labels 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. Including:
Metadata for installation: The following META element controls how to create a pinned site shortcut on the Start menu and on the Windows 7 taskbar. All of these elements are optional, but it is strongly recommended that you have more control over the start of the page, the name of the page, better accessibility or recognition, and the custom size at startup.
The installation metadata element is used only when the user is pinning the site. Thereafter, changes to these values will not have any effect on the pinned site. Therefore, the following meta-elements are sometimes referred to as the "install-time" value:
- Application-name
- Msapplication-tooltip
- Msapplication-starturl
- Msapplication-window
Runtime metadata: Unlike the installation value, the following metadata is read each time a user starts a pinned site. As a result, site developers can use these values to continually modify the user experience. The best way to control changes to these values is to define them in the starting URL of the pinned site.
- Msapplication-navbutton-color
- Msapplication-task
- Msapplication-task-separator
8.application-name
Description: The "Application-name" metadata defines the name of the pinned site application instance. This name appears in the ToolTip when the cursor hovers over the pinned site button on the Windows 7 taskbar. The application name is also appended to the window caption of the pinned site application instance.
Usage: <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 Windows Start menu or on a pinned site shortcut on the desktop.
Usage: <meta name= "Msapplication-tooltip" content= "8783 Hand Tour"/>
10.msapplication-starturl
Description: The "Msapplication-starturl" metadata contains the root URL of the application. The starting URL can be fully qualified or relative to the current document. Only HTTP and HTTPS protocols are allowed. If this element is missing, the address of the current page is used instead.
Usage: <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 run-time metadata declared in the start page will redefine the navigation button color and static Jump List tasks each time the site is started. (See the Run-Time metadata section for more information.) ）
As an example 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. Without a start URL, the user might pin only the scientific calculator to the taskbar, making it impossible to easily access other calculators in the collection. By adding a start URL, a site developer can declare a public entry point for 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 more information, see Add a task to a jump list.
Handling Server Redirection
If your start URL is redirected to a different Web page, make sure that you declare all the runtime metadata in the Web page that is provided to the client. If the server is redirected to a new path, your start URL must include the path and the trailing backslash (/).
For example, if "http://contoso.com/" is redirected to "http://www.contoso.com/Home/", the starting URL must include a new path and a trailing backslash, as follows:
<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 window size when a pinned site is first started. However, if the user resizes the window, the site retains its new dimensions when the pinned site is started again.
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 window in pixels. The minimum value is 800.
Height of the window in pixels. The minimum value is 600.
Usage: <meta name= "Msapplication-window" content= "width=1024;height=768"/>
12.msapplication-navbutton-color
Description: The "Msapplication-navbutton-color" metadata defines the custom colors for the back and forward buttons in the pinned Web browser window. Any named color or hexadecimal color value is valid. For a complete list of color names, see Color tables (Access http://msdn.microsoft.com/zh-cn/library/ie/ms531197%28v=vs.85%29.aspx).
Usage: <meta name= "Msapplication-navbutton-color" content= "#FF3300"/>
Add: If you do not have 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 a custom icon for your site, see Customize the Site icon (Access http://msdn.microsoft.com/zh-cn/library/ie/gg491740%28v=vs.85%29.aspx).
13.msapplication-task
Description: It is able to pin a Web site as a program to the Windows Vista and Windows 7 taskbar, and displays a list of related sites when the icon is clicked. As with other site metadata, you can use META elements to define static tasks. The next task adds a task to the Jump List (access http://msdn.microsoft.com/zh-cn/library/ie/gg491725%28v=vs.85%29.aspx) to explain how to do this.
Usage: <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 separator line in the Jump List menu. If you have more than one divider, you must make each divider unique by declaring content= "[unique value]".
Usage:
<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 "/>
More 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 increased support for a large number of HTML5, CSS3 features, but also a very user-friendly feature: fixed site.
Windows 8 implements a pinned site by using a tile on the start screen. When a user clicks a tile for a pinned site, the Web site opens in Internet Explorer 10 in the new Windows UI environment. Below you will learn how to implement pinned site notifications (Access http://msdn.microsoft.com/zh-cn/library/IE/hh880842%28v=vs.85%29.aspx) in Windows 8.
You must provide the following pieces of information to correctly implement pinned 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 can pin the website to the start screen, and we support personalizing 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.
Usage: <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 the color value and personalize the custom color swatch (tile) icon. The color value should be set to the main color of the logo or the main color of the website visual. CSS color values can be 16 binary form (such as #333333), named form (such as red) or CSS functions (such as RGB), if not set color, IE will default to extract the site icon or color block background picture of the main color to display as the background color. The default color and icons are also used in the historical search and elsewhere in IE.
Usage: <meta name= "Msapplication-tilecolor" content= "#ef0303" >
Add: When merging the icons map of a fixed site, you just need to place 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. However, when using the same icon diagram on different system platforms, it is important to note that the rendering of the icon is not the same for different system platforms. Internet Explorer 10 uses the title of the current page for the tile name. If we want to define a different name, you can use the title Meta tag: <meta name= "title" content= "Tile title" >
The following 17-21 five meta tags are features related to Windows Store app integration:
17.msapplication-id
Description: If you have a Windows Store app you can use some meta tags to connect your site to it. IE will display a menu that allows the user to quickly get to the app if the user hasn't installed it yet. If the app is already installed, the menu changes to "switch to XXX app."
In fact, this feature is similar to the smart AD push feature on IOS6. However, Microsoft is the feature that was released prior to Apple. Msapplication-id is the required option. The ID that is defined in the program manifest.
Usage: <meta name= "Msapplication-id" content= "App"/>
18.msapplication-packagefamilyname
Description: Required option. The package family created by Microsoft Visual Studio to identify your app.
Usage: <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 automatically pass the current URL.
Usage: <meta name= "msapplication-arguments" content= "http://www.8783.com/gl/27647.shtml"/>
The following code snippet shows how this parameter is handled in a Windows store app that uses JavaScript (more usage 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 }} }
20.msapplication-minversion
Description: Available options. The minimum version number of the mandatory application. Therefore, if your users are using an older version, to switch to the app, she will be asked to go to the store to update it.
Usage: <meta name= "msapplication-minversion" content= "V3.0 Build 20140308"/>
21.msapplication-optout
Description: Available options. Allowing our HTML documents to be in some cases not associated with the app. 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, this will block the prompt for both cases.
Usage: <meta name= "msapplication-optout" content= "Install"/>
Mssmarttagspreventparsing.
Description: There is a Smart tag switch in Microsoft IE 6, and if you include the following tag, access will not see some of the relevant connections, so you can avoid the loss of visitors to the competitor's website.
Usage: <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 on XP is turned on system display.
Usage: <meta http-equiv= "msthemecompatible" content= "No" >
24.msapplication-badge META Tag
Description: A new meta tag for a pinned site describes the polling URL. Windows 8 can poll for updates to fixed tiles in the Start screen. This is very noticeable for lightweight notifications, such as new messages from other users (e-mail and social networking sites), the latest discounts on shopping sites, and the latest reports on news sites. With Internet Explorer 10 and Windows 8, you can provide badge notifications directly on your pinned site tiles. This means that you don't have to open a Web site in your browser to see the updates for those sites. For example, use IE10 in Windows 8 Consumer Preview to pin 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, XML responses that describe Windows badge notifications, and (2) Web page markup for fixed site meta tags that point to the location of Windows poll notifications and polling frequencies.
Usage:
<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 Web site supports badge notifications when it is 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, 360 (6 hours), 720 (12 hours), and 1440 (1 days). If 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 Reminder Description file
Badge notifications can 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 badge image catalog (Windows store app, Access http://msdn.microsoft.com/zh-CN/library/windows/apps/Hh761458.aspx). The badge described in the following XML example indicates that a new message was received.
Windows handles polling and fetching of badge notifications. Windows polling describes the badge notification XML for pinning site tile visuals. 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 (for example, "Alerts" and "new Message" indicators). For a full list of what badges can display, see Select Badge images on MSDN (Access 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 the XML values, glyphs, and examples, see Badge schema (Access 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 contains the URL of the badge notification XML and the frequency of Windows requests. IE checks to see if the "Msapplication-badge" META tag exists in the page at fixed time and when the site is subsequently launched from a pinned site tile.
<meta name= "Msapplication-badge" value= "frequency=360;polling-uri=http://ietestdrive2.com/pinnedsites/ Tweetcounter/microsoft/360 "/>
The value participation consists 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 a JavaScript form API:window.external.msSiteModeRefreshBadge () that you can use to request notification status for Windows polling pinned sites, as required; , you may want to update your pinned site's notification badge more frequently when users are actively browsing your site. You may also want to do this when the Web 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 from the Start screen, the Web site runs 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 a user receives a notification and clicks on the tile to launch the browser, the Web page uses Mssitemodeclearbadge () to clear the notification from the tile. This way, when a notification is displayed and lit on the next tile, the user can be aware of the 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 displays three unread messages and clicks the tile back to the site. If he/she only reads 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 running in the local Intranet or Trusted sites zone. This issue will be resolved effectively in the next preview version. To test these APIs on your own web site using Consumer Preview, use the Security tab in the Internet Properties dialog box to add the domain of that site to the list of trusted sites.
Desktop task bar Notifications
Pinned site notifications that appear in the desktop taskbar for icon overlays continue to apply to Windows 8 and IE10 on the desktop. This notification does not exist for pinned sites in the Windows 8 start screen. Windows 8 can not only handle notifications for all tiles in the start screen, but it can do so in Battery saver mode.
Reference articles and extensions read:
"Windows 8 and Microsoft Surface:ie10 meets modern mobile HTML5" http://www.mobilexweb.com/blog/ Windows-8-surface-ie10-html5
Fixed site features in Windows 8 http://www.iefans.net/windows8-gudingwangzhan/
"Declaring fixed site metadata" http://msdn.microsoft.com/zh-cn/library/ie/gg491732%28v=vs.85%29.aspx
"Page 3:implementing Site pinning with Internet Explorer 9 and Windows 7" Http://www.htmlgoodies.com/html5/tutorials/page -3-implementing-site-pinning-with-internet-explorer-9-and-windows-7.html#fbid=e2fljb06ef_
Windows Store applications <meta/> Elements | HTML <meta> Elements
Standards Based Development "http://dev.bowdenweb.com/html/e/meta/windows-store-app-meta-elements.html
