|
|
Describe metadata within an HTML document. Definition and UsageThe
Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the Browser Support
Attributes
Global AttributesThe |
How to create HTML <meta> Tag
Describe metadata within an HTML document:
index.html
Example:
HTML
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Output should be:
How to Define keywords for search engines HTML <meta> Tag
Define keywords for search engines:
index.html
Example:
HTML
<meta name="keywords" content="HTML, CSS, JavaScript">
How to Define a description of your web page HTML <meta> Tag
See the example.
index.html
Example:
HTML
<meta name="description" content="Free Web tutorials for HTML and CSS">
How to Define the author of a page HTML <meta> Tag
See the Example.
index.html
Example:
HTML
<meta name="author" content="John Doe">
How to Refresh document every 30 seconds <meta> Tag
See the Example.
index.html
Example:
HTML
<meta http-equiv="refresh" content="30">
How to set Setting the viewport to make your website look good on all devices HTML <meta> Tag
See the example.
index.html
Example:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
How to add Setting the Viewport HTML <meta> Tag
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
index.html
Example:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
How to add HTML <meta> charset Attribute on HTML <meta> Tag
Specify the character encoding for the HTML document.
Definition and Usage
The charset attribute specifies the character encoding for the HTML document.
The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!
Browser Support
Syntax
<meta charset="character_set">
Attribute Values
| Value | Description |
|---|---|
| character_set | Specifies the character encoding for the HTML document. The HTML5 specification encourages web developers to use the UTF-8 character set! |
index.html
Example:
HTML
<head>
<meta charset="UTF-8">
</head>
Output should be:
How to add HTML <meta> content Attribute for HTML <meta> Tag
Describe metadata within an HTML document.
Definition and Usage
The content attribute gives the value associated with the http-equiv or name attribute.
Browser Support
Syntax
<meta content="text">
Attribute Values
| Value | Description |
|---|---|
| text | The content of the meta information |
index.html
Example:
HTML
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
</head>
Output should be:
How to add HTML <meta> http-equiv Attribute on HTML <meta> Tag
Refresh document every 30 seconds.
Definition and Usage
The http-equiv attribute provides an HTTP header for the information/value of the content attribute.
The http-equiv attribute can be used to simulate an HTTP response header.
Browser Support
Syntax
<meta http-equiv="content-security-policy|content-type|default-style|refresh">
Attribute Values
| Value | Description |
|---|---|
| content-security-policy | Specifies a content policy for the document.
Example: <meta http-equiv="content-security-policy" content="default-src 'self'"> |
| content-type | Specifies the character encoding for the document.
Example: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| default-style | Specified the preferred style sheet to use.
Example: <meta http-equiv="default-style" content="the document's preferred stylesheet"> Note: The value of the content attribute above must match the value of the title attribute on a link element in the same document, or it must match the value of the title attribute on a style element in the same document. |
| refresh | Defines a time interval for the document to refresh itself.
Example: <meta http-equiv="refresh" content="300"> Note: The value "refresh" should be used carefully, as it takes the control of a page away from the user. Using "refresh" will cause a failure in W3C's Web Content Accessibility Guidelines. |
index.html
Example:
HTML
<head>
<meta http-equiv="refresh" content="30">
</head>
Output should be:
How to add HTML content-security-policy on <meta> http-equiv Attribute for HTML <meta> Tag
| content-security-policy | Specifies a content policy for the document.
Example: <meta http-equiv="content-security-policy" content="default-src 'self'"> |
index.html
Example:
HTML
<meta http-equiv="content-security-policy" content="default-src 'self'">
How to add HTML content-type on <meta> http-equiv Attribute for HTML <meta> Tag
| content-type | Specifies the character encoding for the document.
Example: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
index.html
Example:
HTML
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
How to add HTML default-style on <meta> http-equiv Attribute for HTML <meta> Tag
| default-style | Specified the preferred style sheet to use.
Example: <meta http-equiv="default-style" content="the document's preferred stylesheet"> Note: The value of the content attribute above must match the value of the title attribute on a link element in the same document, or it must match the value of the title attribute on a style element in the same document. |
index.html
Example:
HTML
<meta http-equiv="default-style" content="the document's preferred stylesheet">
How to add HTML refresh on <meta> http-equiv Attribute for HTML <meta> Tag
| refresh | Defines a time interval for the document to refresh itself.
Example: <meta http-equiv="refresh" content="300"> Note: The value "refresh" should be used carefully, as it takes the control of a page away from the user. Using "refresh" will cause a failure in W3C's Web Content Accessibility Guidelines. |
index.html
Example:
HTML
<meta http-equiv="refresh" content="300">
How to add HTML <meta> name Attribute on HTML <meta> Tag
Use the name attribute to define a description, keywords, and the author of an HTML document. Also define the viewport to control the page's dimensions and scaling for different devices.
The name attribute specifies the name for the metadata.
The name attribute specifies a name for the information/value of the content attribute.
Note: If the http-equiv attribute is set, the name attribute should not be set.
HTML5 introduced a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag (See "Setting The Viewport" example below).
Browser Support
Syntax
<meta name="value">
Attribute Values
| Value | Description |
|---|---|
| application-name | Specifies the name of the Web application that the page represents |
| author | Specifies the name of the author of the document. Example:
<meta name="author" content="John Doe">
|
| description | Specifies a description of the page. Search engines can pick up this description to show with the results of searches. Example:
<meta name="description" content="Free web tutorials">
|
| generator | Specifies one of the software packages used to generate the document (not used on hand-authored pages). Example:
<meta name="generator" content="FrontPage 4.0">
|
| keywords | Specifies a comma-separated list of keywords - relevant to the page (Informs search engines what the page is about). Example:
<meta name="keywords" content="HTML, meta tag, tag reference">
|
| viewport | Controls the viewport (the user's visible area of a web page).
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. You should include the following <meta> viewport element in all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference. |
index.html
Example:
HTML
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Output should be:
How to add HTML application-name for <meta> name Attribute on HTML <meta> Tag
| application-name | Specifies the name of the Web application that the page represents |
index.html
Example:
HTML
<meta name="application-name" content="StackOverflow">
How to add HTML author for <meta> name Attribute on HTML <meta> Tag
| author | Specifies the name of the author of the document. Example:
<meta name="author" content="John Doe">
|
index.html
Example:
HTML
<meta name="author" content="John Doe">
How to add HTML description for <meta> name Attribute on HTML <meta> Tag
| description | Specifies a description of the page. Search engines can pick up this description to show with the results of searches. Example:
<meta name="description" content="Free web tutorials">
|
index.html
Example:
HTML
<meta name="description" content="Free web tutorials">
How to add HTML generator for <meta> name Attribute on HTML <meta> Tag
| generator | Specifies one of the software packages used to generate the document (not used on hand-authored pages). Example:
<meta name="generator" content="FrontPage 4.0">
|
index.html
Example:
HTML
<meta name="generator" content="FrontPage 4.0">
How to add HTML author for <meta> name Attribute on HTML <meta> Tag
| keywords | Specifies a comma-separated list of keywords - relevant to the page (Informs search engines what the page is about). Example:
<meta name="keywords" content="HTML, meta tag, tag reference">
|
index.html
Example:
HTML
<meta name="keywords" content="HTML, meta tag, tag reference">
How to add HTML viewport for <meta> name Attribute on HTML <meta> Tag
| viewport | Controls the viewport (the user's visible area of a web page).
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. You should include the following <meta> viewport element in all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference. |
index.html
Example:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Basic HTML Meta Tags
Here are some important html meta tag.
index.html
Example:
HTML
<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 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, 2010, 5:15 pm'>
<meta name='abstract' content=''>
<meta name='topic' content=''>
<meta name='summary' content=''>
<meta name='Classification' content='Business'>
<meta name='author' content='name, [email protected]'>
<meta name='designer' 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='pagename' content='jQuery Tools, Tutorials and Resources - O'Reilly Media'>
<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 name='subtitle' content='This is my subtitle'>
<meta name='target' content='all'>
<meta name='HandheldFriendly' content='True'>
<meta name='MobileOptimized' content='320'>
<meta name='date' content='Sep. 27, 2010'>
<meta name='search_date' content='2010-09-27'>
<meta name='DC.title' content='Unstoppable Robot Ninja'>
<meta name='ResourceLoaderDynamicStyles' content=''>
<meta name='medium' content='blog'>
<meta name='syndication-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='original-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='verify-v1' content='dV1r/ZJJdDEI++fKJ6iDEl6o+TMNtSu0kv18ONeqM0I='>
<meta name='y_key' content='1e39c508e0d87750'>
<meta name='pageKey' content='guest-home'>
<meta itemprop='name' content='jQTouch'>
<meta http-equiv='Expires' content='0'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='imagetoolbar' content='no'>
<meta http-equiv='x-dns-prefetch-control' content='off'>
OpenGraph Meta Tags
index.html
Example:
HTML
<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='application-name' content='foursquare'>
<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='fb:admins' content='987654321'>
<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'>
Create Custom Meta Tags
Use custom meta tags to store data that you need in Javascript, instead of hard-coding that data into your Javascript. I store my Google Analytics code in meta tags. Here's some examples:
index.html
Example:
HTML
<meta name='google-analytics' content='1-AHFKALJ'>
<meta name='disqus' content='abcdefg'>
<meta name='uservoice' content='asdfasdf'>
<meta name='mixpanel' content='asdfasdf'>
Company/Service Meta Tags
See the Example.
index.html
Example:
HTML
<meta name='microid' content='mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7'>
<meta name='readability-verification' content='E7aEHvVQpWc8VHDqKvaB2Z58hek2EAv2HuLuegv7'>
<meta name='google-site-verification' content='4SMIedO1X4IkYrYuhEC2VuovdQM36Xxb0btUjElqQyg'>
<meta name='ICBM' content='40.746990, -73.980537'>
<meta name='generator' content='WordPress 3.3.1'>
<meta name='norton-safeweb-site-verification' content='tz8iotmk-pkhui406y41y5bfmfxdwmaa4a-yc0hm6r0fga7s6j0j27qmgqkmc7oovihzghbzhbdjk-uiyrz438nxsjdbj3fggwgl8oq2nf4ko8gi7j4z7t78kegbidl4'>
Apple Meta Tags
See the Example.
index.html
Example:
HTML
<meta name="apple-mobile-web-app-title" content="My App"> <!-- New in iOS6 -->
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-touch-fullscreen' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<meta name='format-detection' content='telephone=no'>
<meta name='viewport' content='width=device-width; content='width = 320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes; target-densitydpi=160dpi'>
<link href='/apple-touch-icon.png' rel='apple-touch-icon' type='image/png'>
<link href='touch-icon-ipad.png' rel='apple-touch-icon' sizes='72x72'>
<link href='touch-icon-iphone4.png' rel='apple-touch-icon' sizes='114x114'>
<link href='/startup.png' rel='apple-touch-startup-image'>
<link href='http://github.com/images/touch-icon-iphone4.png' sizes='114x114' rel='apple-touch-icon-precomposed'>
<link href='http://github.com/images/touch-icon-ipad.png' sizes='72x72' rel='apple-touch-icon-precomposed'>
<link href='http://github.com/images/apple-touch-icon-57x57.png' sizes='57x57' rel='apple-touch-icon-precomposed'>
Internet Explorer Meta Tags
See the Example.
index.html
Example:
HTML
<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'>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<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'>
<meta name='msvalidate.01' content='6E3AD52DC176461A3C81DD6E98003BC9'>
<meta http-equiv='cleartype' content='on'>
Google Meta Tags
See the Example.
index.html
Example:
HTML
<meta name="news_keywords" content="World Cup, Brazil 2014, Spain vs Netherlands, soccer, football">
TweetMeme Meta Tags
See the Example.
index.html
Example:
HTML
<meta name='tweetmeme-title' content='Retweet Button Explained'>
Blog Catalog Meta Tags
See the Example.
index.html
Example:
HTML
<meta name='blogcatalog'>
Rails Meta Tags
See the Example.
index.html
Example:
HTML
<meta name='csrf-param' content='authenticity_token'>
<meta name='csrf-token' content='/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc='>
HTML Link Tags
See the Example.
index.html
Example:
HTML
<link rel='alternate' type='application/rss+xml' title='RSS' href='http://feeds.feedburner.com/martini'>
<link rel='alternate' type='application/atom+xml' title='Atom 0.3' href='https://example.com/feed.atom'>
<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='bookmark'title='Styleguide' href='http://paulrobertlloyd.com/about/styleguide/'>
<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='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 rel='stylesheet' media='only screen and (max-device-width: 480px)' href='http://wordpress.org/style/iphone.css' type='text/css'>
<link rel='wlwmanifest' href='http://www.example.com/wp-includes/wlwmanifest.xml' type='application/wlwmanifest+xml'>
Other Resources Meta Tag
See the Example.
index.html
Example:
HTML
- [HTML5 Boilerplate explanations and suggestions of header tags](http://html5boilerplate.com/docs/head-Tips/)
- [Dublic Core Meta Tags](http://www.seoconsultants.com/meta-tags/dublin/)
- [Apple Meta Tags](http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html)
- [OpenGraph Meta Tags](http://opengraphprotocol.org/)
- [Link Tag Meaning](http://intertwingly.net/wiki/pie/LinkTagMeaning)
- [Google Chrome HTML5 Tags](http://www.html5rocks.com/)
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 8 months ago |
Uploaded by: | Admin |
Views: | 108 |
Reffered: https://www.w3schools.com/tags/tag_meta.asp