Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Complete List of HTML Meta Tags

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<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@hotmail.com">
<meta name="designer" content="">
<meta name="copyright" content="">
<meta name="reply-to" content="email@hotmail.com">
<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">

OpenGraph Meta Tags

<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="me@example.com"/>
<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" />

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-analytics" content="1-AHFKALJ"/>
<meta name="disqus" content="abcdefg"/>
<meta name="uservoice" content="asdfasdf"/>
<meta name="mixpanel" content="asdfasdf"/>

Company/Service Meta Tags

ClaimID

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

Apple Meta Tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">

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">
<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" />
<link rel="shortcut icon" href="/images/favicon.ico" />

TweetMeme Meta Tags

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

Blog Catalog Meta Tags

<meta name="blogcatalog" />

Rails Meta Tags

<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>

Apple Tags

<meta name="apple-mobile-web-app-capable" 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 = 320, initial-scale = 2.3, user-scalable = no">
<meta name= "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
<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-startup-image" href="/startup.png">

<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" />

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 way 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" />

Other Resources

@lcerbaro

This comment has been minimized.

Copy link

commented Jul 9, 2013

Invalid Markup Validation is Invalid.

@jonathanong

This comment has been minimized.

Copy link

commented Jan 30, 2014

@joshbuchea

This comment has been minimized.

Copy link

commented Apr 20, 2016

I started a project (HEAD) with the aim to be a comprehensive list of everything that goes in the <head> of your document. This gist is one of the resources I used to compile my initial list. Thanks for the great resource @lancejpollard!

@jflynn33

This comment has been minimized.

Copy link

commented Feb 23, 2017

Awesome, thanks! If you're still maintaining this Gist, you could collapse the Apple Meta Tags and Apple Tags sections. Well done!

@behiyegok

This comment has been minimized.

Copy link

commented Sep 16, 2017

thank you

@KamranBhatti

This comment has been minimized.

Copy link

commented Oct 4, 2017

That's so amazing.

@KamranBhatti

This comment has been minimized.

Copy link

commented Oct 4, 2017

If these tags would be explained. That would be amazing.

@goldylucks

This comment has been minimized.

Copy link

commented Oct 6, 2017

Is still relevant?
The consumers of meta tags (browsers, smartphones) might have many of these built in by now

@gdsram

This comment has been minimized.

Copy link

commented Nov 10, 2017

Great Summary!!

Isn't it property="og:image" instead of name="og:image" in the OpenGraph section?

@Peace-N

This comment has been minimized.

Copy link

commented Nov 13, 2017

Very useful thanks so much !!

@DaniSpringer

This comment has been minimized.

Copy link

commented Nov 16, 2017

@gdsram yes
@jflynn33 meaning?

@AnjaneyuluBatta505

This comment has been minimized.

Copy link

commented Nov 29, 2017

@lancejpollard awesome!!! thanks.

@joelhuang22

This comment has been minimized.

Copy link

commented Jan 24, 2018

Liked the way you have described the meta keywords usage which is so very true. The new meta news_keywords tag still holds the key in only helping the news articles rank for the news (publishers) on Google news and other relevant Google properties. But every search engines have stopped using meta keywords as a relevancy or a ranking signal. Many other blogs related to SEO on Metabizverse which are also worth reading.

@getsolaris

This comment has been minimized.

Copy link

commented Feb 21, 2018

Thanks You !

@TawabG

This comment has been minimized.

Copy link

commented Feb 21, 2018

Very helpful, thanks!

@blacknode

This comment has been minimized.

Copy link

commented May 23, 2018

Thanks

@locness3

This comment has been minimized.

Copy link

commented May 26, 2018

Thank you for that !

@Nemo64

This comment has been minimized.

Copy link

commented May 28, 2018

apple-mobile-web-app-title is missing

@vikingden8

This comment has been minimized.

Copy link

commented Jun 25, 2018

Basic HTML Meta Tags has a duplicate copyright meta tag, 0_0

@bananapatch

This comment has been minimized.

Copy link

commented Sep 25, 2018

Great resource, thank you.

@emmanuelmezie

This comment has been minimized.

Copy link

commented Nov 19, 2018

Thanks for this

@FARADAY001

This comment has been minimized.

Copy link

commented Jan 5, 2019

C'est bon

@mahdi4187

This comment has been minimized.

Copy link

commented Jan 13, 2019

Thanks

@rxheem

This comment has been minimized.

Copy link

commented Jan 20, 2019

Awesome!

@corexz

This comment has been minimized.

Copy link

commented Feb 7, 2019

thanks
this is twitter meta tags

<-- Twitter Summary card images must be at least 120x120px -->
@arkweb-dev

This comment has been minimized.

Copy link

commented Feb 8, 2019

Thank you

@skinnyguy

This comment has been minimized.

Copy link

commented Feb 22, 2019

Thank you.

@BigUncleYemi

This comment has been minimized.

Copy link

commented Mar 15, 2019

thanks

great work

@preethigamidhun

This comment has been minimized.

Copy link

commented Mar 20, 2019

Thank you

@eladkarako

This comment has been minimized.

Copy link

commented Mar 29, 2019

This is great!
Here are some updates and newer stuff...

this viewport settings is to allow device height and width pipe down into the CSS, the minimal-ui is suitable for old iOS devices but it is an old definition that is no longer used in newer devices, so it is placed near the end. If you want to allow the user to scale the page remove user-scalable=no and maximum-scale=1.0.

  <meta name="viewport"            content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui"/>

robots rule that allows all variation of Google indexing, including Google translate and image archive, including indexing the web-pages in open-directory

  <meta name="robots"              content="archive,follow,imageindex,index,odp,snippet,translate"/>

this is new stuff, allowing the web-page and content to be served from cache even if the case is stale (old) provided that the web-page hasn't changed, it can speed the loading a lot. the rem attribute is a 'remark' to help to remember- optional.

  <meta http-equiv="Cache-Control" content="public,max-age=1800,max-stale,stale-while-revalidate=86400,stale-if-error=259200" rem="max-age=30minutes"/>

preloading resources is done in another low-priority thread, you should definitely use it,

  <link rel="preload" as="script"     crossorigin="anonymous"  type="application/js"          charset="UTF-8"  href="index.js"                   />
  <link rel="preload" as="style"      crossorigin="anonymous"  type="text/css"                charset="UTF-8"  href="index.css"                  />
......
......
  <link rel="stylesheet" media="all"  crossorigin="anonymous"  type="text/css"                charset="UTF-8"  href="index.css"                  />
</head>
.....
....
  <script defer                       crossorigin="anonymous"  type="application/javascript"  charset="UTF-8"  src="index.js"></script>
</body>

feature control if you need to use those features you can explicitly allow them

  <meta http-equiv="Feature-Policy"                   content='{"vibrate":["*"],"geolocation":["*"],"fullscreen":["*"]}'/>

force Google to render your page including javascript before crawling it.

  • if your page is mainly js-logic operated, this way you won't get a blank page with web-crawlers.
<meta name="fragment"                               content="!"/>

declare that your website is family-safe

  <meta name="target"                                 content="all"/>
  <meta name="audience"                               content="all"/>
  <meta name="coverage"                               content="Worldwide"/>
  <meta name="distribution"                           content="Global">
  <meta name="og:type"                                content="website"/>
  <meta name="rating"                                 content="safe for kids"/>

disabling all of the custom formats, IE toolbars and skype.
for skype you MUST use exactly as shown here: <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"> no extra spaces no letter-case change.

  <meta name="format-detection"                       content="telephone=no,date=no,address=no,email=no,url=no"/>
  <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
  <meta name="mssmarttagspreventparsing"              content="true"/>
  <meta http-equiv="imagetoolbar"                     content="no"/>

allow smooth fade-in and declare the web-page is mobile-friendly:

  <meta name="HandheldFriendly"                       content="True"/>
  <meta name="MSThemeCompatible"                      content="no"/>
  <meta name="apple-mobile-web-app-capable"           content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style"  content="translucent black"/>
  <meta name="msapplication-navbutton-color"          content="translucent black"/>
  <meta name="mssmarttagspreventparsing"              content="true"/>
  <meta name="theme-color"                            content="#b1cff4"/>
  <meta http-equiv="Page-Enter"                       content="RevealTrans(Duration=1.0,Transition=1)"/>
  <meta http-equiv="Page-Exit"                        content="RevealTrans(Duration=1.0,Transition=1)"/>

to make everything work you must declare doctype and prefix in the HTML node for example:

<!doctype html>
<html encoding="UTF-8" charset="UTF-8" dir="ltr" lang="en-US" language="English" prefix="og: http://ogp.me/ns#" itemtype="http://schema.org/WebPage">
@marcellustavares

This comment has been minimized.

Copy link

commented Apr 3, 2019

Thanks @lancejpollard! super useful.

@GrahamTheCoder

This comment has been minimized.

Copy link

commented May 2, 2019

Also

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="30" />
@ideepakmathur

This comment has been minimized.

Copy link

commented May 6, 2019

Super useful thank @lancerjpollard and @eladkarako

@vinay-kaklotar

This comment has been minimized.

Copy link

commented May 31, 2019

Play audio doesn't work

@aacassandra

This comment has been minimized.

Copy link

commented Jul 9, 2019

Thankyou sir, you're awesome

@shaikafrose

This comment has been minimized.

Copy link

commented Jul 22, 2019

Hii Lance Pllard, This is Afrose working as a Digital Marketing Manager, Thanks for sharing the very usefull Info for all digital marketers. But in this article i find some small correction about , for description rule is need to add only "150 to 170 charecters only instead of Words"

@rxheem

This comment has been minimized.

Copy link

commented Aug 3, 2019

  <meta name="target"                                 content="all"/>
  <meta name="audience"                               content="all"/>
  <meta name="coverage"                               content="Worldwide"/>
  <meta name="distribution"                           content="Global">
  <meta name="og:type"                                content="website"/>
  <meta name="rating"                                 content="safe for kids"/>

Thanks!

@stevebaros

This comment has been minimized.

Copy link

commented Aug 14, 2019

i have stumbled across this <meta data-rh />

what does it do ?

@mcaskill

This comment has been minimized.

Copy link

commented Aug 14, 2019

i have stumbled across this <meta data-rh />

tizmagik/react-head#40

@cgarchitects

This comment has been minimized.

Copy link

commented Aug 31, 2019

Which one can I use for SEO better in minimum?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.