How much does the HTML meta tag know?

Article synced to personal blog:benjamin-focus on front-end development and user experience

First, the basic properties

Tags are often used to define HTML document metadata or HTTP protocol points, which are commonly used in SEO, HTML Pages or Apps on Mobile/handheld Devices, which mainly includes the following properties:

Attribute	Description
Name	Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
Content	Specifies the property ' s value.
Scheme	Specifies a scheme to interpret the property's value (as declared in the content attribute).
Http-equiv	Used for HTTP response message headers. For example HTTP-EQUIV can is used to refresh the page or to set a cookie. Values include Content-type, expires, refresh, and Set-cookie.

II. Basic HTML META tags

<!--SEO--><meta name= "keywords" content= "your, tags"/><meta name= "description" content= "" Words "/ ><meta name= "Subject" content= "your website ' s subject" ><meta name= "Copyright" content= "Company Name" > <meta name= "Language" content= "ES" ><meta name= "Robots" content= "Index,follow"/><meta name= "revised" Content= "Sunday, July 18th, 5:15 pm"/><meta name= "abstract" content= "><meta name=" topic "Content=" "& Gt;<meta name= "Summary" content= "" ><meta name= "Classification" content= "business" ><meta name= "author "Content=" name, [email protected] "><meta name=" designer "content=" "><meta name=" copyright "content = "><meta name=" reply-to "content=" [email protected] "><meta name=" owner "content=" "><meta Name= "url" content= "http://www.websiteaddrress.com" ><meta name= "Identifier-url" content= "/http Www.websiteaddress.com "><meta name=" directory "content=" Submission "><meta NAme= "category" Content= "" ><meta name= "coverage" content= "worldwide" ><meta name= "distribution" content= " Global "><meta name=" rating "content=" General "><meta name=" Revisit-after "content=" 7 Days "><meta http-equiv= "Expires" content= "0" ><meta http-equiv= "Pragma" content= "No-cache" ><meta http-equiv= " Cache-control "content=" No-cache ">

Third, Opengraph meta tag

In September 2010, Facebook unveiled an open-picture protocol (open Graph Protocol) at the F8 conference in order to improve the efficiency of the spread of content outside the site, and SNS can extract the most effective information from the page and present it to the user as long as it complies with the agreement. Connecting networks built by other social networking sites through open graph will create a smarter, more socially connected, more personal, and more semantic-minded network.

<meta name= "Og:title" content= "the Rock"/><meta name= "Og:type" content= "movie"/><meta name= "Og:url" Content= "Http://www.imdb.com/title/tt0117500/"/><meta name= "Og:image" content= "http://ia.media-imdb.com/ Rock.jpg "/><meta name=" Og:site_name "content=" IMDb "/><meta name=" og:description "content=" A Group of U.S. Marines, under command of ... "/><meta name=" fb:page_id "content=" 43929265776 "/><meta name=" Og:email " Content= "[email protected]"/><meta name= "Og:phone_number" content= "650-123-4567"/><meta name= "og : Fax_number "content=" +1-415-123-4567 "/><meta name=" Og:latitude "content=" 37.416343 "/><meta name=" og: Longitude "content=" -122.153013 "/><meta name=" og:street-address "content=" 1601 S California Ave "/><meta Name= "og:locality" content= "Palo Alto"/><meta name= "og:region" content= "CA"/><meta name= "Og:postal-code "Content=" 94304 "/><meta name=" Og:country-name "content=" USA "/><meta properTy= "Og:type" content= "game.achievement"/><meta property= "og:points" content= "Points_for_achievement"/> <meta property= "Og:video" content= "http://example.com/awesome.swf"/><meta property= "Og:video:height" Content= "640"/><meta property= "Og:video:width" content= "385"/><meta property= "Og:video:type" content= " Application/x-shockwave-flash "/><meta property=" Og:video "content=" Http://example.com/html5.mp4 "/>< Meta property= "Og:video:type" content= "Video/mp4"/><meta property= "Og:video" content= "http://example.com/ Fallback.vid "/><meta property=" Og:video:type "content=" text/html "/><meta property=" Og:audio "content=" Http://example.com/amazing.mp3 "/><meta property=" Og:audio:title "content=" Amazing Song "/><meta Property= "Og:audio:artist" content= "Amazing Band"/><meta property= "Og:audio:album" content= "Amazing album"/ ><meta property= "Og:audio:type" content= "Application/mp3"/>

Iv. company/Service META Tag 4.1 claimid

claimID was a website this allowed users to create unique profiles that showed personal websites, profiles at other sites, and other biographical information.

<meta name= "microid" content= "Mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7"/>

4.2 APPLE META TAGS

<!--launch iOS safari from desktop icon to go full screen (app mode)--><meta name= "apple-mobile-web-app-capable" content= "yes" >< !--Add to Home screen, full screen--><meta name= "Apple-touch-fullscreen" content= "yes" ><!--specifies the color of the status bar--><meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" ><!--on iOS devices prohibit the recognition of numbers as clickable telephone link--><meta Name= "Format-detection" content= "telephone=no" ><!--page CSS is calculated using a width of 320, an initial scale of 2.3, does not allow user scaling, the maximum scaling factor is 1-->< Meta name= "viewport" content= "width =", Initial-scale = 2.3, user-scalable = no, maximum-scale=1 "><!--page CSS calculations make Adaptive--><meta name= "viewport" content = "width = device-width" Based on device given value >

4.3 INTERNET EXPLORER META TAGS

<meta http-equiv= "Page-enter" content= "Revealtrans (duration=2.0,transition=2)"/><meta http-equiv= " Page-exit "content=" Revealtrans (duration=3.0,transition=12) "/><meta name=" mssmarttagspreventparsing " Content= "true" ><!--tell ie what mode to display the Web page--><meta http-equiv= "x-ua-compatible" content= "chrome=1" >< Meta name= "Msapplication-starturl" content= "http://blog.reybango.com/about/"/><meta name= " Msapplication-window "content=" width=800;height=600 "/><meta name=" Msapplication-navbutton-color "content=" Red "/><meta name=" Application-name "content=" Rey Bango front-end Developer "/><meta name=" Msapplication-tooltip "content=" Launch Rey Bango ' s Blog "/><meta name=" Msapplication-task "content=" name=About; Action-uri=/about/;icon-uri=/images/about.ico "/><meta name=" Msapplication-task "content=" Name=The Big List; action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/ Images/list_links.ico " /><meta name= "Msapplication-task" content= "Name=jquery posts;action-uri=/category/jquery/;icon-uri=/images/ Jquery.ico "/><meta name=" Msapplication-task "content=" Name=start developing;action-uri=/category/javascript /;icon-uri=/images/script.ico "/><!--tab Tag icon--><link rel=" shortcut icon "href="/images/favicon.ico "/ >

4.4 TweetMeme META TAGS

TweetMeme tracks the links on Twitter to give users a better experience. It uses a common sort system to find the hottest information in this microblogging world.

<meta name= "Tweetmeme-title" content= "Retweet Button Explained"/>

4.5 BLOG CATALOG META TAGS

<meta name= "Blogcatalog"/>

4.6 RAILS META TAGS

<meta name= "Csrf-param" content= "Authenticity_token"/><meta name= "Csrf-token" content= "/ Bzvwvomkanwai1qd37lfeewvpoiiackk9121ffwwwc= "/>

V. Create a custom META tag

Use the custom meta tags to store data, the need in JavaScript, instead of hard-coding, the data into your JavaScript. I Store my Google Analytics code in META tags. Here ' s some examples:

<meta name= "Google-analytics" content= "1-ahfkalj"/><meta name= "Disqus" content= "eeee"/><meta name= " UserVoice "content=" XXXX "/><meta name=" Mixpanel "content=" Xxxxe "/>

VI. HTML LINK Tag 6.1 HTML link tags

<link rel= "Alternate" type= "Application/rss+xml" title= "RSS" href= "Http://feeds.feedburner.com/martini"/> <link rel= "shortcut icon" type= "Image/ico" href= "/favicon.ico"/><link rel= "Fluid-icon" type= "image/png" href = "/fluid-icon.png"/><link rel= "Me" type= "text/html" href= "Http://google.com/profiles/thenextweb"/>< Link rel= ' shortlink ' href= ' http://blog.unto.net/?p=353 '/><link rel= ' archives ' title= ' May 2003 ' href= '/http blog.unto.net/2003/05/'/><link rel= ' index ' title= ' DeWitt Clinton ' href= ' http://blog.unto.net/'/><link Rel= ' start ' title= ' Pattern recognition 1 ' href= ' http://blog.unto.net/photos/pattern_recognition_1_about/'/>< Link rel= ' prev ' title= ' OpenSearch and OpenID? A sure to get my attention. ' Href= ' http://blog.unto.net/opensearch/ opensearch-and-openid-a-sure-way-to-get-my-attention/'/><link rel= ' next ' title= ' not blog ' href= '/http blog.unto.net/meta/not-blog/'/><link rel= "search" href= "/search.xml" type= "appLication/opensearchdescription+xml "title=" Viatropos "/><link rel=" self "type=" Application/atom+xml "href=" Http://www.syfyportal.com/atomFeed.php?page=3 "/><link rel=" first "href=" http://www.syfyportal.com/ atomfeed.php "/><link rel=" Next "href=" http://www.syfyportal.com/atomFeed.php?page=4 "/><link rel=" Previous "href=" http://www.syfyportal.com/atomFeed.php?page=2 "/><link rel=" Last "href="/HTTP/ www.syfyportal.com/atomFeed.php?page=147 "/><link rel= ' shortlink ' href= ' http://smallbiztrends.com/?p=43625 ' /><link rel= "canonical" Href= "http://smallbiztrends.com/2010/06/9- things-to-do-before-entering-social-media.html "/><link rel=" Edituri "type=" Application/rsd+xml "title=" RSD " href= "HTTP://SMALLBIZTRENDS.COM/XMLRPC.PHP?RSD"/><link rel= "Pingback" href= "http://smallbiztrends.com/ xmlrpc.php "/><link media=" only screen and (max-device-width:480px) "href=" http://wordpress.org/style/ Iphone.css "type=" Text/css "rel=" stylesheet "/>

6.2 APPLE LINK TAGS

<link rel= "Apple-touch-icon" href= "touch-icon-iphone.png"/><link rel= "Apple-touch-icon" sizes= "72x72" href = "Touch-icon-ipad.png"/><link rel= "Apple-touch-icon" sizes= "114x114" href= "Touch-icon-iphone4.png"/>< Link rel= "Apple-touch-icon" type= "Image/png" href= "/apple-touch-icon.png"/><link rel= " Apple-touch-startup-image "href="/startup.png ">

Vii. changes in the HTML5

The charset attribute specifies the character encoding used by the document. This is a character encoding declaration. If the attribute is present in a XML document, its value must was an ASCII case-insensitive match for the string "UTF-8" ( And the document is therefore forced to use UTF-8 as its encoding).

the CharSet attribute on the meta-element has a no effect in XML documents, and is a allowed in order to facilitate Migration to and from XHTML.

There must not being more than one meta-element with a CharSet attribute per document.

Eight, reference links

HTML5 Meta Element

MetaTags in HTML 5

HTML Meta Tags

Complete LIST of HTML META TAGS

DCMI Dublin Core Metadata Initiative

Apple-specific META Tags

Linktagmeaning

Google Chrome HTML5 Tags

Facebook Open Graph META Tags

How much does the HTML meta tag know?