The Understanding Meta Elements Tags Ultimate Guide

What are Meta Tags, How to Use?

Getting Started with Meta Tags

Meta elements tags, is the soul(spirit) of HTML and XHTML Tags (HTML Document call webpages) and provides structured information about the webpages in the HTML/XHTML of the document. This data information is called "metadata".

About basic information how to use Meta Elements Tags in HTML and XHTML Document 

Meta Tags Allow in head section, 

Don't show on the browser itself, but it is part of the  page's source code.

More than (Multiple) Meta Tags elements with different-2 attributes can be allowed on single web pages.

Notes : Meta Tags help tell about search engines, social media, etc.! what a web page is about.

Syntax : 

<meta attributes=”values”>

Attributes Is.

charset =”character_set”

HTML document Specify the character encoding

content =”text” 

HTML document Specify the value associated with the http-equiv or name attribute 

http-equiv = ” (refresh | content-security-policy | content-type | default-style)”

HTML document Provides an https or http header for the information/value.

name = “description | generator | keywords | viewport | application-name | etc..”

HTML document giving the name of metadata

Examples

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

What's the need for Meta Tags? Why Have HTML and XHTML Document ?

Meta Tags Must Be Required for Browser, Social Media Marketing, Search Engines Optimization(SEO) , Company/Service(Platform & Devices) etc… 

Basic HTML Meta Tags

<meta charset='UTF-8'>

<meta name='keywords' content='your, tags'>

Page description. No longer than 155 characters.

<meta name='description' content='150 words'>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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.techeduce.com'>

<meta name='identifier-URL' content='http://www.techeduce.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://techeduce.com/2008/12/24/free-brand-monitoring-tools/'>

<meta name='original-source' content='https://techeduce.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'>

Social Meta Tags Element: Metadata(Important Data) can interchange on Social Platform (call  share).

OpenGraph Meta Tags Element: 

Introduction : OpenGraph Meta Tags to allow webpage for Social Media Platform such as Facbooks, Googles, etc...

OpenGraph Meta Tags Classified following

<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://techeduce.com/rock.jpg'>

<meta name='og:site_name' content='Site Name, i.e. TechEduce>

<meta name='og:description' content='A group of U.S. Marines, under command of...'>

<meta name='application-name' content='foursquare'>

<meta name='og:email' content='[email protected]'>

<meta name='og:phone_number' content='xxx-123-4567'>

<meta name='og:fax_number' content='+1-xxx-123-4567'>

<meta name='og:latitude' content='xx.416343'>

<meta name='og:longitude' content='-xxx.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:locale" content="en_GB" />

<meta property="og:locale:alternate" content="fr_FR" />

<meta property="og:locale:alternate" content="es_ES" />

<meta property='og:type' content='game.achievement'>

<meta property='og:points' content='POINTS_FOR_ACHIEVEMENT'>

<meta property='og:video' content='http://techeduce.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://techeduce.com/html5.mp4'>

<meta property='og:video:type' content='video/mp4'>

<meta property='og:video' content='http://techeduce.com/fallback.vid'>

<meta property='og:video:type' content='text/html'>

<meta property='og:audio' content='http://techeduce.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'>

Twitter & TweetMeme Meta Tags :

Summaries, Images, Galleries, Apps, Video, Audio, and Products

<!-- Twitter Card data -->

<meta name="twitter:card" content="summary | product">

<meta name="twitter:site" content="@publisher_handle">

<meta name="twitter:title" content="Page Title">

<meta name="twitter:description" content="Page description less than 200 characters">

<meta name="twitter:creator" content="@author_handle">

<meta name="twitter:image" content="http://www.techeduce.com/image.jpg">

<meta name="twitter:data1" content="$3">

<meta name="twitter:label1" content="Price">

<meta name="twitter:data2" content="Black">

<meta name="twitter:label2" content="Color">

Google, Google+ Meta Tags (Google Authorship and Publisher Markup)

Articles, Blog, Book, Event, Local Business, Organization, Person, Product, and Reviews

<!-- Schema.org markup for Google+ -->

<meta itemprop="name" content="The Name or Title Here">

<meta itemprop="description" content="This is the page description">

<meta itemprop="image" content="http://www.example.com/image.jpg">

Facebook : Articles, Photos, Audio, Video, and more

<meta property='fb:admins' content='987654321'>

<meta name='fb:page_id' content='43929265776'>

Blog Catalog Meta Tags

<meta name='blogcatalog'>

Pinterest Rich Pins : Products, Recipes, Movies, and Articles

Rails Meta Tags

<meta name='csrf-param' content='authenticity_token'>

<meta name='csrf-token' content='/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc='>

Browser, Company/Service  Meta Tags, for

ClaimID

<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

Safari 9 Pinned tabs in El Capitan

Internet Explorer Meta Tags

Windows 8 Meta Tags

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:

<meta name='google-site-verification' content='1-AHFKALJ'>

<meta name='googlebot' content='1-AHFKALJ'>

<meta name='google-analytics' content='1-AHFKALJ'>

<meta name='disqus' content='abcdefg'>

<meta name='uservoice' content='asdfasdf'>

<meta name='mixpanel' content='asdfasdf'>

The good meta tags

The indifferent meta tags

The bad meta tags