Skip to content

Instantly share code, notes, and snippets.

@whitingx

whitingx/meta-tags.md

Forked from kevinSuttle/meta-tags.md
Created October 5, 2012 16:41
Show Gist options
  • Save whitingx/3840905 to your computer and use it in GitHub Desktop.
Save whitingx/3840905 to your computer and use it in GitHub Desktop.
Download ZIP
Complete List of HTML Meta Tags
Raw
meta-tags.md

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

Basic HTML Meta Tags

<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@hotmail.com'>
<meta name='designer' 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='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

<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='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='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:

<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'>
<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

<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

<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

<meta name="news_keywords" content="World Cup, Brazil 2014, Spain vs Netherlands, soccer, football">

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='>

HTML Link Tags

<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

- [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/)
@Claud-14
Copy link

Very useful thanks

@cjbell630
Copy link

Thanks!

@danieldanielecki
Copy link

danieldanielecki commented May 13, 2020 •
edited
Loading

Great job, but it's already outdated - see below

  1. There are few things I couldn't find on the official website of OpenGraph:
  • <meta name='fb:page_id' content='43929265776'>
  • <meta name='application-name' content='foursquare'>
  • <meta name='og:country-name' content='USA'>
  • <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'>

update (25.02.2023), also those seem to be not longer there:

  • <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 property="og:points" content="POINTS_FOR_ACHIEVEMENT"/>
  1. On the other side I'm missing definitely:
  • <meta property="og:locale" content="en_GB" />
  • <meta property="og:locale:alternate" content="fr_FR" />
  • <meta property="og:locale:alternate" content="es_ES" />

  1. All HTTP meta headers (http-equiv) are basically for IE9 and below. These should've been added on the back-end, see explanation: #1 and #2.

  2. According to W3C meta tags docs there are way less meta tags. Namely:

  • <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">

However, as you'll see in point 7 around half from this list still exists, however they're considered to be bad tags.

  1. These seems to be obsolete:
  • <meta name="Classification" content="Business">
  • <meta name="HandheldFriendly" content="True">
  • <meta name="MobileOptimized" content="320">

  1. IE-related tags shouldn't be used, we (almost, almost) don't use Internet Explorer anymore.

  2. For further reading if to use any of those you may check this article, many of those tags are actually bad tags.

  3. (update 25.02.2023), those Apple tags aren't listed on the official page, so could be deprecated:

  • <meta name='apple-touch-fullscreen' content='yes'>
  • <meta name="apple-mobile-web-app-title" content="My App"> <!-- New in iOS6 -->
  • I'm not sure what's the source of <link tags for Apple, those are not on the official page and couldn't find it on https://gist.github.com/lancejpollard/1978404

@JenuelDev
Copy link

Hi!, can u add the meta tag for Twitter, Im trying to create a meta using metatags.io but when I try to post to twitter it doesnt work. i use this https://cards-dev.twitter.com/validator to validate meta data of website

@Apoorva-Shukla
Copy link

Very useful!!

@MayankVikash
Copy link

Thanks really helpful.

@ayan-vscode
Copy link

Thanks for helping me! It was really helpful.

@AbdelrahmanMegahed
Copy link

Thanks!

@thisAmiqo
Copy link

wow thats great ! :)

@boehs
Copy link

boehs commented Jan 4, 2022 •
edited
Loading

For what it's worth, most of the "Basic HTML Meta Tags" have no uses.

  • Only use rating if it's content is adult
  • Always use viewport
  • Always use charset
  • You should use theme-color
  • author is rarely needed but perhaps include it
  • I have never seen an instance where copyright is used
  • Always use description
  • robots, googlebot, google, google-site-verification are a few others worth looking into

The others are not needed, unless you are optimizing for some niche site that is the only site in the whole wide world to use them, or leaving goodies for people who snoop in your html (perhaps designer and reply-to)

This does not apply to the other tag groups here, especially OpenGraph Meta Tags and HTML Link Tags

@nusagates
Copy link

Thanks. Great info!

@mdhgtushar
Copy link

thanks!

@faniabdo99
Copy link

Very appreciated efforts man, Thanks

@Xayrulloh
Copy link

thanks bro

@BernhardTuft
Copy link

Thanks to all the contributors!

@watat83
Copy link

watat83 commented Oct 6, 2022 •
edited
Loading

Thanks a lot for this great resource. It has helped build a robust SEO system. I just want to point out that after researching deeply into the Open Graph protocol, I noticed that some of the tags do not use name=** but property=**. I hope someone find this helpful

<meta property='og:type' content='movie'>
<meta property='og:url' content='http://www.imdb.com/title/tt0117500/'>
<meta property='og:image' content='http://ia.media-imdb.com/rock.jpg'>
<meta property='og:site_name' content='IMDb'>
<meta property='og:description' content='A group of U.S. Marines, under command of...'>

<meta property='og:email' content='me@example.com'>
<meta property='og:phone_number' content='650-123-4567'>
<meta property='og:fax_number' content='+1-415-123-4567'>

<meta property='og:latitude' content='37.416343'>
<meta property='og:longitude' content='-122.153013'>
<meta property='og:street-address' content='1601 S California Ave'>
<meta property='og:locality' content='Palo Alto'>
<meta property='og:region' content='CA'>
<meta property='og:postal-code' content='94304'>
<meta property='og:country-name' content='USA'>```

@adahgeorge
Copy link

So useful

@ShayanTheNerd
Copy link

Thanks for this awesome list.
BTW it's:
<meta name='description' content='155 to 160 characters'>
characters not words

@danieldanielecki
Copy link

Hi!, can u add the meta tag for Twitter, Im trying to create a meta using metatags.io but when I try to post to twitter it doesnt work. i use this https://cards-dev.twitter.com/validator to validate meta data of website

The official tags for Twitter are here, as of today those are:

  • twitter:card (useful)
  • twitter:site (useful)
  • twitter:site:id (could be useful)
  • twitter:creator (useful)
  • twitter:creator:id (could be useful)
  • twitter:description (useful)
  • twitter:title (useful)
  • twitter:image (useful)
  • twitter:image:alt (useful)
  • twitter:player (rarely useful)
  • twitter:player:width (rarely useful)
  • twitter:player:height (rarely useful)
  • twitter:player:stream (rarely useful)
  • twitter:app:name:iphone (rarely useful)
  • twitter:app:id:iphone (rarely useful)
  • twitter:app:url:iphone (rarely useful)
  • twitter:app:name:ipad (rarely useful)
  • twitter:app:id:ipad (rarely useful)
  • twitter:app:url:ipad (rarely useful)
  • twitter:app:name:googleplay (rarely useful)
  • twitter:app:id:googleplay (rarely useful)
  • twitter:app:url:googleplay (rarely useful)

Sometimes in the Internet you can also find twitter:domain and twitter:url, but those seem to be deprecated.

@plumkewe
Copy link

Thanks! 👍

@Uditmehra631
Copy link

Recently Google has updated their metatag verification method. The “verify-v1” meta tag, has been replaced with “google-site-verification”. The presence of this meta tag in the header section of your website is required for all new submissions to Google Webmaster Tools.

@MahdiMashayekhi-AI
Copy link

Thank you so much!
These are very useful.

@PatrickRockhill
Copy link

PatrickRockhill commented Jul 4, 2023 •
edited
Loading

Don't forget the sometimes useful:
meta http-equiv="refresh" content="##; url=wherever"

@muhammedmahmutoglu
Copy link

Thanks

@Janith-Umeda
Copy link

Janith-Umeda commented Jan 30, 2024 •
edited
Loading

Thanks! very useful collection. You should update the meta-tags.md with new suggestions that commenters ware introduced :).

@Emmanuelikyughul
Copy link

thanks for the hep

@hc0503
Copy link

hc0503 commented Feb 7, 2024

thanks, very helpful.

@AppiChudilko
Copy link

AppiChudilko commented Feb 27, 2024 •
edited
Loading

For Microsoft's platform integration:

<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://unitedofweb.com/client/images/logo/svg/logo.svg">

@shikhar-sharma1703
Copy link

how to add itemprop tags in nextjs app router?

@Uditmehra631
Copy link

how to add itemprop tags in nextjs app router?

To add itemprop tags in a Next.js application using the App Router (introduced in Next.js 13), you will need to follow these steps:

  1. Ensure you're using Next.js 13 or later: This feature is part of the new App Router, so make sure your project is updated.

  2. Add itemprop tags to your components: You can directly add itemprop attributes to your JSX elements within your components.

Here's an example of how you can do it:

Step-by-Step Guide:

  1. Set up your Next.js project: Make sure you have a Next.js project set up and you're using the App Router. Your folder structure should include an app directory.

  2. Create a page: In the app directory, create a new page or use an existing one. For example, if you want to create a page at /about, you would create a file at app/about/page.tsx (or .js if you're using JavaScript).

  3. Add itemprop tags in your component: Modify the page component to include itemprop attributes.

// app/about/page.tsx

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1 itemProp="name">About Us</h1>
      <p itemProp="description">
        We are a company dedicated to providing the best services to our customers.
      </p>
      <div itemProp="address" itemScope itemType="http://schema.org/PostalAddress">
        <span itemProp="streetAddress">123 Main Street</span>, 
        <span itemProp="addressLocality">Anytown</span>, 
        <span itemProp="addressRegion">CA</span>
        <span itemProp="postalCode">12345</span>
      </div>
    </div>
  );
};

export default AboutPage;
  1. Ensure proper metadata in the head: You may also want to ensure proper SEO metadata using the <Head> component in the same file or a _app.js or _document.js file if you're using custom document structure.
// app/about/page.tsx

import React from 'react';
import Head from 'next/head';

const AboutPage = () => {
  return (
    <>
      <Head>
        <title>About Us - My Company</title>
        <meta name="description" content="Learn more about My Company, our mission, and our values." />
      </Head>
      <div>
        <h1 itemProp="name">About Us</h1>
        <p itemProp="description">
          We are a company dedicated to providing the best services to our customers.
        </p>
        <div itemProp="address" itemScope itemType="http://schema.org/PostalAddress">
          <span itemProp="streetAddress">123 Main Street</span>, 
          <span itemProp="addressLocality">Anytown</span>, 
          <span itemProp="addressRegion">CA</span>
          <span itemProp="postalCode">12345</span>
        </div>
      </div>
    </>
  );
};

export default AboutPage;

Notes:

  • Ensure you have all necessary packages installed.
  • The itemProp, itemScope, and itemType attributes are part of the schema.org microdata vocabulary, which helps search engines understand the content of your pages better.

By following these steps, you can effectively add itemprop tags in your Next.js app using the App Router. This will help with SEO and provide structured data to search engines.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment