What all should i add in head tag

Asked 2/6, 2012 at 14:56 Answered 30/11, 2015 at 10:6

What else should i include inside the head tag in-order to support as many browsers, HTML5, search engines, social networking sites etc

<title>My Site</title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="My Site is cool">
<meta name="viewport" content="width=device-width">

<meta property="og:title" content="My Site"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="assests/icon_big.png"/>
<meta property="og:url" content="http://url.com"/>
<meta property="og:site_name" content="My Site"/>
<meta property="og:description" content="My Site is cool"/>

<link rel="shortcut icon" href="assests/favicon.ico" />
<link rel="apple-touch-icon" href="base_url();?>assests/icon.png"/>
<link rel="icon" href="assests/icon.png"/>

Ignite answered 2/6, 2012 at 14:56 Comment(2)

Off-topic for SO; belongs on Webmasters – Honshu 3/6, 2012 at 3:28

There is a great list of everything that goes in the <head> of your document here: github.com/joshbuchea/HEAD – Deirdredeism 20/4, 2016 at 22:1

Taken from Paul Irish's Mobile HTML5 Boilerplate:

<!-- Mobile viewport optimization h5bp.com/ad -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">

<!-- Home screen icon  Mathias Bynens mathiasbynens.be/notes/touch-icons --> 
<!-- For third generation iPad Retina Display -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png" />
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png" />
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png" />
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png" />
<!-- For nokia devices: -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png" />

<!-- iOS web app, delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
<!-- <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> -->

<!-- The script prevents links from opening in mobile safari. https://gist.github.com/1042026 -->
<!-- <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> -->

<!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
<meta http-equiv="cleartype" content="on">

For Bing SEO

<meta name="geo.placename" content="United States" />
<meta name="geo.position" content="x;x" />
<meta name="geo.region" content="usa" />
<meta name="ICBM" content="x,x" />

Agribusiness answered 2/6, 2012 at 15:7 Comment(0)

SEO

<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='abstract' content=''>
<meta name='topic' content=''>
<meta name='summary' content=''>
<meta name='Classification' content='Business'>

Author

<meta name='author' content='name, [email protected]'>
<meta name='designer' content=''>
<meta name='reply-to' content='[email protected]'>
<meta name='owner' content=''>

Dublin core metadata

<meta name="dc.language" CONTENT="UK">
<meta name="dc.source" CONTENT="http://www.your-domain.com/">
<meta name="dc.relation" CONTENT="http://www.second-domain.com/">
<meta name="dc.title" CONTENT="a title">
<meta name="dc.keywords" CONTENT="more keywords">
<meta name="dc.subject" CONTENT="the subject">
<meta name="dc.description" CONTENT="A description of the content">

Mobile

<meta name='HandheldFriendly' content='True'>
<meta name='MobileOptimized' content='480'>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="theme-color" content="#000">
<meta name="apple-mobile-web-app-title" content="title">
<link rel="icon" sizes="192x192" href="img/brand/icon_192.png">
<link rel="apple-touch-icon" href="img/brand/icon_192.png">

Claim Ownership

<meta name='y_key' content='XXXXXXXXXX'> <!-- Yahoo Site Explorer -->
<meta name='verify-v1' content='XXXXXXXXX'> <!-- Google -->

Disable Cache

<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-UA-Compatible" content="IE=edge>

Open Graph

<meta property="og:title" content="My Site"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="assests/icon_big.png"/>
<meta property="og:url" content="http://url.com"/>
<meta property="og:site_name" content="My Site"/>
<meta property="og:description" content="My Site is cool"/>

Twitter Card

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

Misc

<meta charset='UTF-8'>
<meta name='pageKey' content='guest-home'>
<meta itemprop='name' content='jQTouch'>
<meta name='revised' content='Sunday, July 18th, 2010, 5:15 pm'>
<meta name='search_date' content='2010-09-27'>
<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='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'>

Ignite answered 30/11, 2015 at 10:6 Comment(3)

Made me chuckle! There would be no room for the content!! Add only what you need and don't over-complicate things. Let the search engines do their thing, they are actually good at it - content is king not metadata. – Downbow 22/3, 2016 at 10:30

Many of these meta tags, especially ones under 'Misc' are not HTML5 compliant. – Bodleian 19/9, 2016 at 15:13

why do u say so – Ignite 20/9, 2016 at 6:34

-3

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="Description">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<script src="init.js"></script>
</head>

Keep it short and sweet. If you need to include social tags for the open graph that's fine.

Rickart answered 2/6, 2012 at 15:36 Comment(0)

Recommended topics

Hot tags